added google login interface

.env

@@ -34,5 +34,7 @@ REACT_APP_ITEM_PER_PAGE=5
 # Empty Listings
 REACT_APP_ZERO_STATE=0
 
+REACT_APP_GOOGLE_CLIENT_ID=234407841224-k5g7f67p908hqtegiokmjqt8qqf3hi2i.apps.googleusercontent.com
+
 #apigate.lotus.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227

.env.development

@@ -33,3 +33,5 @@ REACT_APP_ITEM_PER_PAGE=5
 
 #apigate.lotus.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227
+
+REACT_APP_GOOGLE_CLIENT_ID=234407841224-k5g7f67p908hqtegiokmjqt8qqf3hi2i.apps.googleusercontent.com

.env.production

@@ -33,3 +33,5 @@ REACT_APP_ITEM_PER_PAGE=5
 
 #apigate.orion.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227
+
+REACT_APP_GOOGLE_CLIENT_ID=234407841224-k5g7f67p908hqtegiokmjqt8qqf3hi2i.apps.googleusercontent.com

src/Routers.jsx

@@ -37,6 +37,8 @@ import StartJob from "./components/MyJobs/StartJob";
 import AddJobPage from "./views/AddJobPage";
 import MyPendingJobsPage from "./views/MyPendingJobsPage";
 import ManageActiveJobs from "./views/ManageActiveJobs";
+import FamilyManagePage from "./views/FamilyManagePage";
+import MyCouponPage from "./views/MyCouponPage";
 
 export default function Routers() {
   return (
@@ -73,6 +75,7 @@ export default function Routers() {
           <Route exact path="/calendar" element={<CalendarPage />} />
           <Route exact path="/resources" element={<ResourcePage />} />
           <Route exact path="/my-wallet/*" element={<MyWalletPage />} />
+          <Route exact path="/my-coupon" element={<MyCouponPage />} />
           <Route exact path="/notification" element={<Notification />} />
           <Route exact path="/market-place" element={<MarketPlacePage />} />
           <Route exact path="/market" element={<MarketPlacePage />} />
@@ -83,6 +86,7 @@ export default function Routers() {
           <Route exact path="/my-active-jobs"  element={<MyActiveJobsPage />} />
           <Route exact path="/my-pending-jobs"  element={<MyPendingJobsPage />} />
           <Route exact path="/acc-family"  element={<FamilyAccPage />} />
+          <Route exact path="/manage-family"  element={<FamilyManagePage />} />
           <Route exact path="/start-job"  element={<StartJob />} />
           <Route exact path="/manage-active-job"  element={<ManageActiveJobs />} />
           <Route

src/components/AuthPages/AuthLayout.jsx

@@ -4,7 +4,7 @@ import { Link } from "react-router-dom";
 export default function LoginLayout({ slogan, children }) {
   return (
     <div className={`layout-wrapper login`}>
-      <div className={`main-wrapper login-wrapper w-full h-screen overflow-y-auto sm:p-20 p-10`}>
+      <div className={`main-wrapper login-wrapper w-full h-screen overflow-y-auto p-2 sm:p-20`}>
         <div className="w-full h-full">
           <div className="flex-1 flex justify-center items-center">
             {children && children}

src/components/AuthPages/Login/index.jsx

@@ -1,5 +1,6 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Link, 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";
@@ -7,8 +8,8 @@ import WrenchBoard from "../../../assets/images/wrenchboard.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
-//import { GoogleOAuthProvider } from '@react-oauth/google';
+// import { GoogleOAuthProvider } from '@react-oauth/google';
-// import { googleLogout, useGoogleLogin } from '@react-oauth/google';
+import { googleLogout, useGoogleLogin } from '@react-oauth/google';
 
 import { useDispatch } from "react-redux";
 import { updateUserDetails } from "../../../store/UserDetails";
@@ -16,6 +17,8 @@ import { updateUserDetails } from "../../../store/UserDetails";
 export default function Login() {
   const dispatch = useDispatch();
 
+  let [loginType, setLoginType] = useState({ full: true, family: false });
+
   const [checked, setValue] = useState(false);
   const [loginLoading, setLoginLoading] = useState(false);
 
@@ -28,6 +31,15 @@ export default function Login() {
     setValue(!checked);
   };
 
+  //FUNCTION TO DETERMINE/CHANGE LOGIN COMPONENT
+  const handleLoginType = ({ target: { name } }) => {
+    if (name == "full") {
+      setLoginType({ [name]: true, family: false });
+    } else if(name='family') {
+      setLoginType({ [name]: false, family: true });
+    }
+  };
+
   // email
   const [email, setMail] = useState("");
   const handleEmail = (e) => {
@@ -41,51 +53,90 @@ export default function Login() {
   const navigate = useNavigate();
   const userApi = new usersService();
 
-  const doLogin = async () => {
+  // FUNCTION TO HANDLE USER LOGIN
-    try {
+  const doLogin = ({ target: { name } }) => {
-      if (email !== "" && password !== "") {
+    setMsgError("");
-        var postData = {
+    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 == "loginfull") { // Post Data Info for normal Login
+      postData = {
         username: email,
         password: password,
         sessionid: "STARTING",
+        login_mode: 1100,
+        action: 11025,
       };
-        const loginResult = await userApi.logInUser(postData); // just for a test
+    } else if (name == "loginfamily") { // Post Data Info for family Login
-        //debugger;
+      postData = {
-        // if (email === "support@mermsemr.com") {
+        username: email,
-        if (
+        pin: password,
-          loginResult.data.status > 0 &&
+        sessionid: "20067A92714",
-          loginResult.data.internal_return == 100 &&
+        login_mode: 1105,
-          loginResult.data.session != ""
+        action: 11025,
-        ) {
+      };
-          // just for a start
+    }else{
-          localStorage.setItem("member_id", `${loginResult.data.member_id}`);
+      setLoginLoading(false);
-          localStorage.setItem("uid", `${loginResult.data.uid}`);
+      setMsgError("Invalid Login Type. Consider refreshing the page");
-          localStorage.setItem("session_token", `${loginResult.data.session}`);
+      setTimeout(() => {
-          localStorage.setItem("session", `${loginResult.data.session}`);
+        setMsgError("");
-          setLoginLoading(true);
+      }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
-          // userApi.getUserReminders(); //testing
+      return;
-          dispatch(updateUserDetails(loginResult.data));
+    }
+    userApi.logInUser(postData).then((res) => {
+        if (res.status != 200 || res.data.internal_return < 0) {
+          // setMsgError("Wrong, email/password");
+          setLoginError(true);
+          setLoginLoading(false);
+          return;
+        }
+        localStorage.setItem("member_id", `${res.data.member_id}`);
+        localStorage.setItem("uid", `${res.data.uid}`);
+        localStorage.setItem("session_token", `${res.data.session}`);
+        // localStorage.setItem("session", `${res.data.session}`);
+        dispatch(updateUserDetails(res.data));
         setTimeout(() => {
           navigate("/", { replace: true });
           setLoginLoading(false);
         }, 2000);
-        } else {
+      }).catch((error) => {
-          // toast.error("Invalid Credential");
+        setMsgError("Unable to login, try again");
-          setLoginError(true);
+        setLoginLoading(false);
-        }
+      }).finally(() => {
-      } else {
-        setMsgError("Please fill in the fields");
-      }
-    } catch (error) {
-      setMsgError("An error occurred");
-    } finally {
         setTimeout(() => {
           setLoginError(false);
-        setMsgError(null);
+          setMsgError('');
+          setLoginLoading(false);
         }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
-    }
+      });
   };
 
+  const googleLogin = useGoogleLogin({
+    onSuccess: async (tokenResponse) => {
+      console.log(tokenResponse);
+      // const userInfo = await axios.get(
+      //   'https://www.googleapis.com/oauth2/v3/userinfo',
+      //   { headers: { Authorization: `Bearer ${tokenResponse.access_token}` } },
+      // );
+      // console.log(userInfo);
+    },
+    onError: errorResponse => console.log(errorResponse),
+  });
+
+  useEffect(()=>{
+    setMail('')
+    setPassword('')
+  },[loginType.full, loginType.family])
+
   return (
     <>
       <AuthLayout slogan="Welcome to WrenchBoard">
@@ -102,9 +153,9 @@ export default function Login() {
           <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5">
             <div className="w-full">
               <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
+                {/* <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
                   Sign In to WrenchBoard
-                </h1>
+                </h1> */}
                 <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
                   New Here?{" "}
                   <Link
@@ -115,10 +166,40 @@ export default function Login() {
                   </Link>
                 </span>
               </div>
-              <div className="input-area">
+
+              {/* switch login component */}
+              <div className="flex justify-start items-end">
+                <button
+                  name="full"
+                  className={`px-2 py-1 w-[100px] text-left h-[40px] text-lg font-bold text-[#4687ba] hover:text-[#009ef7] tracking-wide transition outline-none border-2 border-b-0 border-r-0 border-[#4687ba] ${
+                    loginType.full && "border-r-2 h-[45px]"
+                  }`}
+                  onClick={handleLoginType}
+                >
+                  Sign in
+                </button>
+                <button
+                  name="family"
+                  className={`px-2 py-1 w-[100px] text-left h-[40px] text-lg font-bold text-[#4687ba] hover:text-[#009ef7] tracking-wide transition outline-none border-2 border-b-0 border-l-0 border-[#4687ba] ${
+                    loginType.family && "border-l-2 h-[45px]"
+                  }`}
+                  onClick={handleLoginType}
+                >
+                  Family
+                </button>
+              </div>
+
+              {/* END  of switch login component */}
+
+              {/* for login component */}
+              {
+                loginType.full ? (
+                  //user login compoenent
+                  <div className="p-2 input-area border-2 border-[#4687ba]">
                     <div className="input-item mb-5">
                       <InputCom
-                    fieldClass="px-6"
+                        labelClass="tracking-wider"
+                        fieldClass="sm:px-6 px-2"
                         value={email}
                         inputHandler={handleEmail}
                         placeholder="support@mermsemr.com"
@@ -131,7 +212,8 @@ export default function Login() {
 
                     <div className="input-item mb-5">
                       <InputCom
-                    fieldClass="px-6"
+                        labelClass="tracking-wider"
+                        fieldClass="sm:px-6 px-2"
                         value={password}
                         inputHandler={handlePassword}
                         placeholder="● ● ● ● ● ●"
@@ -162,29 +244,109 @@ export default function Login() {
                     <div className="signin-area mb-3.5">
                       <div className="flex justify-center">
                         <button
+                          name="loginfull"
                           onClick={doLogin}
                           type="button"
+                          disabled={loginLoading}
                           className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
                         >
                           {loginLoading ? (
                             <div className="signup btn-loader"></div>
                           ) : (
-                        <span>Continue</span>
+                            <>Continue</>
                           )}
                         </button>
                       </div>
-                  <BrandBtn link="#"  imgSrc={googleLogo} brand="Google" />
+                      <div className="sm:flex sm:justify-between sm:items-center sm:space-x-2">
-                  <BrandBtn link="#"   imgSrc={facebookLogo} brand="Facebook" />
+                        <BrandBtn link="#" imgSrc={googleLogo} brand="Google" onClick={googleLogin} />
                         <BrandBtn link="#" imgSrc={appleLogo} brand="Apple" />
                       </div>
-                {/* <div className="signup-area flex justify-center">
+                      <div className="sm:flex sm:justify-between sm:items-center sm:space-x-2">
-                <p className="sm:text-lg text-sm text-thin-light-gray font-normal">
+                        <BrandBtn
-                  Don't have an account ?
+                          link="#"
-                  <a href="/signup" className="ml-2   text-dark-gray dark:text-white">
+                          imgSrc={facebookLogo}
-                    Sign up free
+                          brand="Facebook"
-                  </a>
+                        />
-                </p>
+                        <BrandBtn
-              </div> */}
+                          link="#"
+                          imgSrc={linkedInLogo}
+                          brand="LinkedIn"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                ) : (
+                  // END of user login compoenent
+                  // family login compoenent
+                  <div className="p-2 input-area border-2 border-[#4687ba]">
+                    <div className="input-item mb-5">
+                      <InputCom
+                        labelClass="tracking-wider"
+                        fieldClass="px-6"
+                        value={email}
+                        inputHandler={handleEmail}
+                        placeholder="support@mermsemr.com"
+                        label="Username"
+                        name="email"
+                        type="email"
+                        iconName="message"
+                      />
+                    </div>
+
+                    <div className="input-item mb-5">
+                      <InputCom
+                        labelClass="tracking-wider"
+                        fieldClass="px-6"
+                        value={password}
+                        inputHandler={handlePassword}
+                        placeholder="● ● ● ● ● ●"
+                        label="Pin"
+                        name="password"
+                        type="password"
+                        iconName="password"
+                        // forgotPassword
+                      />
+                    </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="loginfamily"
+                          onClick={doLogin}
+                          disabled={loginLoading}
+                          type="button"
+                          className={`btn-login  rounded-[0.475rem] 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 */}
+
               <div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
                 This site is protected by hCaptcha and the our Privacy Policy
                 and Terms of Service apply.
@@ -192,17 +354,15 @@ export default function Login() {
             </div>
           </div>
         </div>
-        </div>
       </AuthLayout>
     </>
   );
 }
 
-const BrandBtn = ({ link, imgSrc, brand }) => {
+const BrandBtn = ({ link, imgSrc, brand, onClick }) => {
-
+  // const doGoogle = async () => {
-  const doGoogle = async ()=>{
+  //   alert("start google");
-    alert('start google');
+  // };
-  }
 
   //  onSuccess: (codeResponse) => setUser(codeResponse),
 
@@ -211,26 +371,26 @@ const BrandBtn = ({ link, imgSrc, brand }) => {
   //   onError: (error) => console.log('Login Failed:', error)
   // });
 
-  const doApple = async ()=>{
+  // const doApple = async () => {
-    alert('start apple');
+  //   alert("start apple");
-  }
+  // };
 
-  const doFacebook = async ()=>{
+  // const doFacebook = async () => {
-    alert('start facebook');
+  //   alert("start facebook");
-  }
+  // };
 
   return (
-    <div className="flex justify-center bottomMargin">
+    <div className="w-full sm:w-1/2 flex justify-center bottomMargin">
-      <a
+      <button
-          // onClick={doGoogle}
+        onClick={onClick}
-          href="#dd"
+        // 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>
-      </a>
+      </button>
     </div>
   );
 };

src/components/Cards/HomeBannerOffersCard.jsx

@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 import localImgLoad from "../../lib/localImgLoad";
 
 export default function HomeBannerOffersCard(props) {
+    console.log("HomeBannerOffersCard->",props.itemData)
     return (
         <Link
             to="/my-collection/collection-item"
@@ -12,13 +13,13 @@ export default function HomeBannerOffersCard(props) {
                 <div className="content flex justify-between items-center mb-5">
                     <div>
                         <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
-                            <>Ab hshsh jsjsj hshdhhdjjd</>
+                            <>{props.itemData.title}</>
                         </h1>
                     </div>
                     {/*<SelectBox datas={filterDatas} action={dataSetHandler} />*/}
                 </div>
                 <div className="h-[233px]">
-                    BEST IMAGE IN THE WORLLD
+                    {props.itemData.description}
                 </div>
             </div>
         </Link>

src/components/FamilyAcc/FamilyManage.jsx

@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import Layout from "../Partials/Layout";
+import FamilyManageTabs from "./FamilyManageTabs";
+import { useLocation } from "react-router-dom";
+
+export default function FamilyManage() {
+  const [selectTab, setValue] = useState("today");
+
+  let location = useLocation();
+  let accountDetails = location?.state
+  //   tab handler
+  const filterHandler = (value) => {
+    setValue(value);
+  };
+
+  return (
+    <Layout>
+      {/*<CommonHead />*/}
+      <div className="notification-page w-full mb-10">
+        <div className="notification-wrapper w-full">
+          {/* heading */}
+          <div className="sm:flex justify-between items-center mb-6">
+            <div className="mb-5 sm:mb-0">
+              <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
+                <span
+                  className={`${selectTab === "today" ? "block" : "hidden"}`}
+                >
+                  Manage Family
+                </span>
+              </h1>
+            </div>
+            <div className="slider-btns flex space-x-4">
+              <div
+                onClick={() => filterHandler("today")}
+                className="relative"
+              ></div>
+            </div>
+          </div>
+          <FamilyManageTabs accountDetails={accountDetails} />
+        </div>
+      </div>
+    </Layout>
+  );
+}

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -0,0 +1,231 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+import profile from "../../assets/images/profile-info-profile.png";
+import usersService from "../../services/UsersService";
+import FamilyTasks from "./FamilyTasks";
+
+export default function FamilyManageTabs({
+  className,
+  accountDetails,
+  listReload,
+  loader,
+}) {
+  const [familyDetails, setFamilyDetails] = useState(null);
+  const [errMsg, setErrMsg] = useState("");
+  // List of tabs
+  const tabs = [
+    {
+      id: 1,
+      name: "Tasks",
+    },
+    {
+      id: 2,
+      name: "Account",
+    },
+    {
+      id: 3,
+      name: "Profile",
+    },
+  ];
+  const [tab, setTab] = useState(tabs[0].name);
+  const [manageLoader, setManageLoader] = useState(false);
+  const tabHandler = (value) => {
+    setTab(value);
+  };
+  //   For profile uploads
+  const [profileImg, setProfileImg] = useState(profile);
+  // profile img
+  const profileImgInput = useRef(null);
+  const browseProfileImg = () => {
+    profileImgInput.current.click();
+  };
+  const profileImgChangHandler = (e) => {
+    if (e.target.value !== "") {
+      const imgReader = new FileReader();
+      imgReader.onload = (event) => {
+        setProfileImg(event.target.result);
+      };
+      imgReader.readAsDataURL(e.target.files[0]);
+    }
+  };
+  //   Api call
+  const apiCall = useMemo(() => new usersService(), []);
+  // function for manage family
+  const familyManageHandler = useCallback(async () => {
+    setManageLoader(true);
+    try {
+      let { family_uid } = accountDetails;
+      let reqData = { family_uid };
+      let res = await apiCall.ManageFamily(reqData);
+      let { data } = await res;
+      if (data?.internal_return < 0) return;
+      setFamilyDetails(data);
+      setManageLoader(false);
+    } catch (error) {
+      setErrMsg("An error occurred");
+      throw new Error(error);
+    }
+  }, [apiCall, accountDetails]);
+
+  useEffect(() => {
+    familyManageHandler();
+  }, [tab]);
+
+  return (
+    <div
+      className={`update-table w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
+        className || ""
+      }`}
+    >
+      <div className="relative w-full overflow-x-auto sm:rounded-lg">
+        {loader ? (
+          <div className="h-full min-h-[500px] w-full overflow-hidden flex justify-center items-center">
+            <LoadingSpinner size="16" color="sky-blue" />
+          </div>
+        ) : (
+          <div className="w-full h-full text-sm text-left text-gray-500 dark:text-gray-400 relative grid grid-cols-4 min-h-[520px]">
+            <div className="border-r border-[#E3E4FE] dark:border-[#a7a9b533] p-6 h-full">
+              <ProfileInfo
+                profileImg={profileImg}
+                profileImgInput={profileImgInput}
+                profileImgChangHandler={profileImgChangHandler}
+                browseProfileImg={browseProfileImg}
+                accountDetails={accountDetails}
+              />
+            </div>
+            <div className="col-span-3 p-6 h-full w-full">
+              <div className="flex flex-col w-full">
+                <ul className="flex-[0.1] flex gap-2 items-center border-b border-b-[#FAFAF] w-full">
+                  {tabs.map(({ name, id }) => (
+                    <li
+                      onClick={() => tabHandler(name)}
+                      className={`p-4 flex hover:text-purple transition-all ease-in-out items-center cursor-pointer overflow-hidden text-xl ${
+                        tab === name
+                          ? "text-purple border-r"
+                          : " text-thin-light-gray"
+                      }`}
+                      key={id}
+                    >
+                      <h1>{name}</h1>
+                    </li>
+                  ))}
+                </ul>
+                <div className="flex-[0.9] lg:min-h-[450px] h-full">
+                  {/* Your content here */}
+                  {tabs.map(({ name, id }) => {
+                    return (
+                      <div
+                        className={`${
+                          tab === name ? "block" : "hidden"
+                        } h-full p-4 border border-[#dbd9d9]`}
+                        key={id}
+                      >
+                        {manageLoader ? (
+                          <LoadingSpinner size="8" color="sky-blue" />
+                        ) : (
+                          <>
+                            {name === "Tasks" && <FamilyTasks className={className} loader={loader}/>}
+                            {name === "Account" && (
+                              <Account familyDetails={familyDetails} />
+                            )}
+                            {name === "Profile" && <Profile />}
+                          </>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function ProfileInfo({
+  profileImg,
+  profileImgInput,
+  profileImgChangHandler,
+  browseProfileImg,
+  accountDetails,
+}) {
+  let { firstname, lastname, age } = accountDetails;
+  return (
+    <div className="flex flex-col items-center gap-6">
+      <div className="flex justify-center">
+        <div className="w-full relative">
+          <img
+            src={profileImg}
+            alt=""
+            className="sm:w-[198px] sm:h-[198px] w-[120px] h-[120px] rounded-full overflow-hidden object-cover"
+          />
+          <input
+            ref={profileImgInput}
+            onChange={(e) => profileImgChangHandler(e)}
+            type="file"
+            className="hidden"
+          />
+          <div
+            onClick={browseProfileImg}
+            className="w-[32px] h-[32px] absolute bottom-7 sm:right-2 right-[105px]  hover:bg-pink bg-dark-gray rounded-full cursor-pointer"
+          >
+            <svg
+              width="32"
+              height="32"
+              viewBox="0 0 32 32"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M16.5147 11.5C17.7284 12.7137 18.9234 13.9087 20.1296 15.115C19.9798 15.2611 19.8187 15.4109 19.6651 15.5683C17.4699 17.7635 15.271 19.9587 13.0758 22.1539C12.9334 22.2962 12.7948 22.4386 12.6524 22.5735C12.6187 22.6034 12.5663 22.6296 12.5213 22.6296C11.3788 22.6334 10.2362 22.6297 9.09365 22.6334C9.01498 22.6334 9 22.6034 9 22.536C9 21.4009 9 20.2621 9.00375 19.1271C9.00375 19.0746 9.02997 19.0109 9.06368 18.9772C10.4123 17.6249 11.7609 16.2763 13.1095 14.9277C14.2295 13.8076 15.3459 12.6913 16.466 11.5712C16.4884 11.5487 16.4997 11.5187 16.5147 11.5Z"
+                fill="white"
+              />
+              <path
+                d="M20.9499 14.2904C19.7436 13.0842 18.5449 11.8854 17.3499 10.6904C17.5634 10.4694 17.7844 10.2446 18.0054 10.0199C18.2639 9.76139 18.5261 9.50291 18.7884 9.24443C19.118 8.91852 19.5713 8.91852 19.8972 9.24443C20.7251 10.0611 21.5492 10.8815 22.3771 11.6981C22.6993 12.0165 22.7105 12.4698 22.3996 12.792C21.9238 13.2865 21.4443 13.7772 20.9686 14.2717C20.9648 14.2792 20.9536 14.2867 20.9499 14.2904Z"
+                fill="white"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col justify-center gap-3 items-center">
+        <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
+          {firstname}
+        </h1>
+        <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
+          {lastname}
+        </h1>
+        <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
+          {age}
+        </h1>
+      </div>
+    </div>
+  );
+}
+
+function Account({ familyDetails }) {
+  return (
+    <div className="w-full lg:min-h-[400px] h-full flex items-center justify-center">
+      <div className="flex flex-col">
+        <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
+          Username: <span className="ml-2 normal-case">{familyDetails?.username}</span>
+        </h2>
+        <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
+          Pin: <span className="ml-2 normal-case">{familyDetails?.pin}</span>
+        </h2>
+      </div>
+    </div>
+  );
+}
+
+function Profile() {
+  return <>Profile</>;
+}

src/components/FamilyAcc/FamilyTable.jsx

@@ -1,17 +1,33 @@
 import React, { useState } from "react";
 import dataImage1 from "../../assets/images/data-table-user-1.png";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
+import { useNavigate, useLocation, Link } from "react-router-dom";
+import { handlePagingFunc } from "../Pagination/HandlePagination";
+import PaginatedList from "../Pagination/PaginatedList";
 
 export default function FamilyTable({ className, familyList, loader }) {
   const filterCategories = ["All Categories", "Explore", "Featured"];
   const [selectedCategory, setCategory] = useState(filterCategories[0]);
+  const navigate = useNavigate();
+  // let location = useLocation();
+
+  const [currentPage, setCurrentPage] = useState(0);
+  const indexOfFirstItem = Number(currentPage);
+  const indexOfLastItem =
+    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+  const currentFamilyList = familyList?.slice(indexOfFirstItem, indexOfLastItem);
+
+  const handlePagination = (e) => {
+    handlePagingFunc(e, setCurrentPage);
+  };
+
   return (
     <div
-      className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
+      className={`update-table w-full h-full p-8 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow ${
         className || ""
       }`}
     >
-      <div className="relative w-full overflow-x-auto sm:rounded-lg">
+      <div className="relative w-full h-full overflow-x-auto sm:rounded-lg">
         {loader ? (
           <div className="h-full min-h-[500px] w-full overflow-hidden flex justify-center items-center">
             <LoadingSpinner size="16" color="sky-blue" />
@@ -24,33 +40,39 @@ export default function FamilyTable({ className, familyList, loader }) {
                   <th className="py-4">Name</th>
                   <th className="py-4 text-center">Last Login</th>
                   <th className="py-4 text-center">No of Tasks</th>
-                  <th className="py-4 text-right">Status</th>
+                  <th className="py-4 text-right"></th>
                 </tr>
               </thead>
-              <tbody className="overflow-y-scroll h-auto">
+              <tbody className="h-full">
                 <>
                   {familyList?.length > 0 ? (
-                    familyList?.map(
+                    currentFamilyList?.map((props, idx) => {
-                      (
+                      let {
-                        { firstname, lastname, age, added, last_login },
+                        firstname,
-                        idx
+                        lastname,
-                      ) => {
+                        age,
+                        added,
+                        last_login,
+                        task_count,
+                        family_uid,
+                      } = props;
                       let addedDate = added?.split(" ")[0];
+                      let LoginDate = last_login?.split(" ")[0];
                       return (
                         <tr
                           className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29]  hover:bg-gray-50"
-                            key={idx}
+                          key={family_uid}
                         >
                           <td className=" py-4">
-                              <div className="flex space-x-2 items-center">
+                            <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">
+                              <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px]">
                                 <img
                                   src={dataImage1}
                                   alt="data"
                                   className="w-full h-full"
                                 />
                               </div>
-                                <div className="flex flex-col">
+                              <div className="flex flex-col flex-[0.9]">
                                 <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
                                   {`${firstname} ${lastname} (${age})`}
                                 </h1>
@@ -66,19 +88,24 @@ export default function FamilyTable({ className, familyList, loader }) {
                           <td className="text-center py-4 px-2">
                             <div className="flex space-x-1 items-center justify-center">
                               <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                                  {last_login}
+                                {LoginDate}
                               </span>
                             </div>
                           </td>
                           <td className="text-center py-4 px-2">
                             <div className="flex space-x-1 items-center justify-center">
                               <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                                  100
+                                {task_count}
                               </span>
                             </div>
                           </td>
                           <td className="text-right py-4 px-2 flex items-center justify-center">
                             <button
+                              onClick={() => {
+                                navigate("/manage-family", {
+                                  state: { ...props },
+                                });
+                              }}
                               type="button"
                               className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                             >
@@ -87,8 +114,7 @@ export default function FamilyTable({ className, familyList, loader }) {
                           </td>
                         </tr>
                       );
-                      }
+                    })
-                    )
                   ) : (
                     <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
                       <td className="p-2" colSpan="4">
@@ -102,6 +128,21 @@ export default function FamilyTable({ className, familyList, loader }) {
           </table>
         )}
       </div>
+        {/* PAGINATION BUTTON */}
+        <PaginatedList
+        onClick={handlePagination}
+        prev={currentPage == 0 ? true : false}
+        next={
+          currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
+          familyList?.length
+            ? true
+            : false
+        }
+        data={familyList}
+        start={indexOfFirstItem}
+        stop={indexOfLastItem}
+      />
+      {/* END OF PAGINATION BUTTON */}
     </div>
   );
 }

src/components/FamilyAcc/FamilyTasks.jsx

@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+import dataImage1 from "../../assets/images/data-table-user-1.png";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+import { useNavigate, useLocation, Link } from "react-router-dom";
+
+export default function FamilyTasks({ className, loader }) {
+    return (
+        <div
+            className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
+                className || ""
+            }`}
+        >
+            <div className="relative w-full overflow-x-auto sm:rounded-lg">
+                {loader ? (
+                    <div className="h-full min-h-[500px] w-full overflow-hidden flex justify-center items-center">
+                        <LoadingSpinner size="16" color="sky-blue" />
+                    </div>
+                ) : (
+                    <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 relative">
+
+                        <tr>
+                            <td> Yes This are my tasks </td>
+                        </tr>
+
+
+                    </table>
+                )}
+            </div>
+        </div>
+    );
+}

src/components/FamilyAcc/index.jsx

@@ -73,6 +73,7 @@ export default function FamilyAcc() {
         if (data?.internal_return > 0 && data?.status == "OK") {
           setLoader(false);
           setListReload((prev) => !prev);
+          popUpHandler()
         } else {
           setLoader(false);
           setMsgErr("Sorry, something went wrong");
@@ -93,6 +94,7 @@ export default function FamilyAcc() {
         first_name: "",
         last_name: "",
       });
+      setSelectedAge("")
     }
   };
 

src/components/Helpers/DataIteration.jsx

@@ -5,9 +5,8 @@ function DataIteration(props) {
   return (
     <>
       {datas &&
-        datas.length >= endLength &&
+        datas?.length >= endLength &&
-        datas
+        datas?.slice(startLength, endLength)
-          .slice(startLength, endLength)
           .map((value) => children({ datas: value }))}
     </>
   );

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

@@ -107,7 +107,7 @@ export default function InputCom({
 }
 
 const inputConfigs = {
-  email: { minLength: 7, maxLength: 30 },
+  email: { minLength: 7, maxLength: 35 },
   first_name: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
   last_name: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
   address: { minLength: 5, maxLength: 49, pattern: "[a-zA-Z0-9]+" },

src/components/Home/FamilyActiveLSlde.jsx

@@ -0,0 +1,103 @@
+import React, { useRef } from "react";
+import ProductCardStyleOne from "../Cards/ProductCardStyleOne";
+import Icons from "../Helpers/Icons";
+import SliderCom from "../Helpers/SliderCom";
+
+export default function FamilyActiveLSlde({ className, trending }) {
+    const settings = {
+        arrows: false,
+        slidesToShow: 4,
+        slidesToScroll: 4,
+        infinite: true,
+        responsive: [
+            {
+                breakpoint: 1025,
+                settings: {
+                    slidesToShow: 3,
+                    slidesToScroll: 3,
+                },
+            },
+            {
+                breakpoint: 769,
+                settings: {
+                    slidesToShow: 2,
+                    slidesToScroll: 2,
+                },
+            },
+            {
+                breakpoint: 619,
+                settings: {
+                    slidesToShow: 1,
+                    slidesToScroll: 1,
+                },
+            },
+        ],
+    };
+    const trendingSlider = useRef(null);
+    const prevHandler = () => {
+        trendingSlider.current.slickPrev();
+    };
+    const nextHandler = () => {
+        trendingSlider.current.slickNext();
+    };
+    return (
+        <div className={`trending-section w-full px-2 sm:px-0 ${className || ""}`}>
+            {/* heading */}
+            <div className="flex justify-between items-center mb-6">
+                <div>
+                    <h1 className="text-26 font-bold   text-dark-gray dark:text-white">Current Tasks</h1>
+                </div>
+                <div className="slider-btns flex space-x-3">
+                    <button onClick={nextHandler} type="button">
+                        <div className="trending-slider-left-btn relative text-white w-10 h-10 flex justify-center items-center rounded-full overflow-hidden">
+                            <svg
+                                width="11"
+                                height="19"
+                                viewBox="0 0 11 19"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                            >
+                                <path
+                                    d="M9.09766 1.1499L1.13307 9.11449L9.09766 17.0791"
+                                    stroke="url(#paint0_linear_220_23410)"
+                                    strokeWidth="2"
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                />
+                                <defs>
+                                    <linearGradient
+                                        id="paint0_linear_220_23410"
+                                        x1="9.09766"
+                                        y1="1.1499"
+                                        x2="-4.2474"
+                                        y2="7.96749"
+                                        gradientUnits="userSpaceOnUse"
+                                    >
+                                        <stop stopColor="#F539F8" />
+                                        <stop offset="0.416763" stopColor="#C342F9" />
+                                        <stop offset="1" stopColor="#5356FB" />
+                                    </linearGradient>
+                                </defs>
+                            </svg>
+                        </div>
+                    </button>
+                    <button onClick={prevHandler} type="button">
+                        <div className="trending-slider-right-btn  primary-gradient  text-white w-10 h-10 relative flex justify-center items-center rounded-full ">
+                            <Icons name="arrows" />
+                        </div>
+                    </button>
+                </div>
+            </div>
+            {/* trending products */}
+            <div className="trending-products relative w-full">
+                <SliderCom selector={trendingSlider} settings={settings}>
+                    {trending &&
+                        trending.length > 0 &&
+                        trending.map((item) => (
+                            <ProductCardStyleOne key={item.id} datas={item} />
+                        ))}
+                </SliderCom>
+            </div>
+        </div>
+    );
+}

src/components/Home/FamilyDash.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import datas from "../../data/product_data.json";
+import TopSellerTopBuyerSliderSection from "./TopSellerTopBuyerSliderSection";
+import CommonHead from "../UserHeader/CommonHead";
+import FamilyActiveLSlde from "./FamilyActiveLSlde";
+
+
+
+export default function FamilyDash(props) {
+
+    console.log("PROPS IN FAMILY DASH->",props);
+
+    const trending = datas.datas;
+    return (
+        <div>
+            <div className="home-page-wrapper">
+                <CommonHead
+                    commonHeadData={props.commonHeadData}
+                />
+                <FamilyActiveLSlde trending={trending} className="mb-10" />
+                <TopSellerTopBuyerSliderSection className="mb-10" />
+            </div>
+        </div>
+    );
+}

src/components/Home/FullAccountDash.jsx

@@ -0,0 +1,55 @@
+import React from "react";
+import datas from "../../data/product_data.json";
+import Hero from "./Hero";
+import HomeTaskDisplay from "./HomeTaskDisplay";
+import usersService from "../../services/UsersService";
+import { useSelector } from "react-redux";
+
+
+
+export default function FullAccountDash(props) {
+
+    console.log("PROPS IN HOME->",props);
+
+    const trending = datas.datas;
+    const jobData =  datas.datas; // api calls or cache
+    //getHomeDate
+    const userApi = new usersService();
+    const homeData = userApi.getHomeDate();
+
+    const {userDetails} = useSelector((state) => state?.userDetails)
+
+    return (
+        <div>
+            <div className="home-page-wrapper">
+                <Hero className="mb-10"
+                      data={userDetails}
+                      bannerList={props.bannerList}
+                />
+                <HomeTaskDisplay
+                    jobData={jobData}
+                    className="mb-10"
+                    bannerList={props.bannerList}
+                />
+            </div>
+        </div>
+    );
+}
+// /*
+//      <Layout>
+//             <div className="home-page-wrapper">
+//                 <Hero className="mb-10" data={userDetails} />
+//                 {/* <CreateNft />
+//         <TrendingSection trending={trending} className="mb-10" />*/}
+// <HomeTaskDisplay
+//     jobData={jobData}
+//     className="mb-10"
+//     bannerList={props.bannerList}
+// />
+{/*  <SellHistoryMarketVisitorAnalytic className="mb-10"/>
+                <TopSellerTopBuyerSliderSection className="mb-10" />
+                <UpdateTable className="mb-10"/>*/}
+// </div>
+// </Layout>
+
+

src/components/Home/Hero.jsx

@@ -11,7 +11,7 @@ import SliderCom from "../Helpers/SliderCom";
 import HomeSliders from "./HomeSliders";
 import { useSelector } from "react-redux";
 
-export default function Hero({ className }) {
+export default function Hero({ className,bannerList }) {
   const settings = {
     autoplay: true,
     dots: true,
@@ -105,7 +105,11 @@ export default function Hero({ className }) {
           </Link>
         </div>
       </div>
-      <HomeSliders settings={settings} sideData={sildeData}/>
+      <HomeSliders
+          settings={settings}
+          sideData={sildeData}
+          bannerList={bannerList}
+      />
     </div>
   );
 }

src/components/Home/HomeSliders.jsx

@@ -6,24 +6,29 @@ import HomeBannerOffersCard from "../Cards/HomeBannerOffersCard";
 
 
 export default function HomeSliders(props) {
+    console.log("BANNER LIST IN HomeSliders->",props.bannerList);
     // debugger;
     return (
         <>
             <div className="hero-slider relative 2xl:w-[600px] xl:w-[500px] lg:w-[420px] w-full mb-2 lg:mb-0 ">
                 <div className="w-full">
                     <SliderCom settings={props.settings}>
-                        <div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">
+                        {/*<div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">*/}
-                            <img src={slider1} alt="slider" className="w-full h-full" />
+                        {/*    <img src={slider1} alt="slider" className="w-full h-full" />*/}
-                        </div>
+                        {/*</div>*/}
                         <div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">
                             <img src={slider2} alt="slider" className="w-full h-full" />
                         </div>
                         <div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">
                             <img src={slider3} alt="slider" className="w-full h-full" />
                         </div>
+                        {props.bannerList.map((item, index) => (
                             <div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">
-                           <HomeBannerOffersCard />
+                                <HomeBannerOffersCard
+                                    itemData={item}
+                                />
                             </div>
+                        ))}
                     </SliderCom>
                 </div>
             </div>

src/components/Home/index.jsx

@@ -1,40 +1,56 @@
 import React from "react";
 import datas from "../../data/product_data.json";
 import Layout from "../Partials/Layout";
-import CreateNft from "./CreateNft";
-import Hero from "./Hero";
-import SellHistoryMarketVisitorAnalytic from "./SellHistoryMarketVisitorAnalytic";
-import TopSellerTopBuyerSliderSection from "./TopSellerTopBuyerSliderSection";
-import TrendingSection from "./TrendingSection";
-import UpdateTable from "./UpdateTable";
-import HomeTaskDisplay from "./HomeTaskDisplay";
-import UsersService from "../../services/UsersService";
 import usersService from "../../services/UsersService";
 import { useSelector } from "react-redux";
+import FamilyDash from "./FamilyDash";
+import FullAccountDash from "./FullAccountDash";
 
 
-export default function Home() {
+export default function Home(props) {
-    const trending = datas.datas;
+
-    const jobData =  datas.datas; // api calls or cache
+    console.log("PROPS IN HOME->",props);
-    //getHomeDate
+
+//    const trending = datas.datas;
+//    const jobData =  datas.datas; // api calls or cache
     const userApi = new usersService();
-    const homeData = userApi.getHomeDate();
+//    const homeData = userApi.getHomeDate();
-
     const {userDetails} = useSelector((state) => state?.userDetails)
 
+    const commonHeadData =()=>{
+        console.log("COMMON HEAD DATA INDEX ----------------=====---------------------");
+        return 0;
+    }
+
     return (
         <Layout>
             <div className="home-page-wrapper">
-                <Hero className="mb-10" data={userDetails} />
+                {userDetails && userDetails?.account_type == "FAMILY" && (
-                {/* <CreateNft />
+                    <FamilyDash commonHeadData={commonHeadData} />
-        <TrendingSection trending={trending} className="mb-10" />*/}
+                )}
-                <HomeTaskDisplay
+                {userDetails && userDetails?.account_type == "FULL" && (
-                    jobData={jobData}
+                    <FullAccountDash   bannerList={props.bannerList} />
-                    className="mb-10"/>
+
-                {/*  <SellHistoryMarketVisitorAnalytic className="mb-10"/>
+                )}
-                <TopSellerTopBuyerSliderSection className="mb-10" />
-                <UpdateTable className="mb-10"/>*/}
             </div>
         </Layout>
     );
 }
+// /*
+//      <Layout>
+//             <div className="home-page-wrapper">
+//                 <Hero className="mb-10" data={userDetails} />
+//                 {/* <CreateNft />
+//         <TrendingSection trending={trending} className="mb-10" />*/}
+// <HomeTaskDisplay
+//     jobData={jobData}
+//     className="mb-10"
+//     bannerList={props.bannerList}
+// />
+{/*  <SellHistoryMarketVisitorAnalytic className="mb-10"/>
+                <TopSellerTopBuyerSliderSection className="mb-10" />
+                <UpdateTable className="mb-10"/>*/}
+// </div>
+// </Layout>
+
+

src/components/MarketPlace/MainSection.jsx

@@ -1,8 +1,5 @@
 import React, { useEffect, useState } from "react";
-//import ProductCardStyleTwo from "../Cards/ProductCardStyleTwo";
 import DataIteration from "../Helpers/DataIteration";
-// import SearchCom from "../Helpers/SearchCom";
-// import ActiveJobsCard from "../Cards/ActiveJobsCard";
 import AvailableJobsCard from "../Cards/AvailableJobsCard";
 
 export default function MainSection({ className, marketPlaceProduct }) {
@@ -13,13 +10,13 @@ export default function MainSection({ className, marketPlaceProduct }) {
   };
   useEffect(() => {
     if (tab === "artist") {
-      setProducts(marketPlaceProduct.slice(0, 3));
+      setProducts(marketPlaceProduct?.slice(0, 3));
     } else if (tab === "market") {
-      setProducts(marketPlaceProduct.slice(0, 6));
+      setProducts(marketPlaceProduct?.slice(0, 6));
     } else if (tab === "shop") {
-      setProducts(marketPlaceProduct.slice(6, 9));
+      setProducts(marketPlaceProduct?.slice(6, 9));
     } else if (tab === "assets") {
-      setProducts(marketPlaceProduct.slice(3, 6));
+      setProducts(marketPlaceProduct?.slice(3, 6));
     } else {
       setProducts(marketPlaceProduct);
     }

src/components/MarketPlace/index.jsx

@@ -6,7 +6,7 @@ import MainSection from "./MainSection";
 import CommonHead from "../UserHeader/CommonHead";
 import { useSelector } from "react-redux";
 
-export default function MarketPlace() {
+export default function MarketPlace({commonHeadData}) {
   let { jobLists } = useSelector((state) => state.jobLists);
   const marketData = jobLists?.result_list;
 
@@ -14,7 +14,7 @@ export default function MarketPlace() {
   return (
     <>
       <Layout>
-        <CommonHead />
+        <CommonHead  commonHeadData={commonHeadData} />
         <MainSection marketPlaceProduct={marketData} className="mb-10" />
       </Layout>
     </>

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -60,7 +60,7 @@ function ActiveJobs(props) {
                 <button
                   type="button"
                   className="text-[#374557] border border-sky-blue p-1 rounded-full"
-                  onClick={() => navigate('/my-active-jobs', {replace: true})}
+                  onClick={() => navigate(props.details.pathname, {replace: true})}
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -78,8 +78,8 @@ function ActiveJobs(props) {
               </div>
               {/* END of back btn and title */}
 
-              <div className="mt-2 w-full lg:flex lg:justify-between lg:items-center lg:space-x-2">
+              <div className="mt-2 w-full flex flex-col-reverse lg:flex-row lg:justify-between lg:items-start lg:space-x-2">
-                <div className="my-2 lg:my-0">
+                <div className="w-full lg:w-2/3 my-2 lg:my-0">
                   <p className="text-base text-slate-700 dark:text-black">
                     {props.details?.contract && props.details.contract}
                   </p>
@@ -88,11 +88,7 @@ function ActiveJobs(props) {
                     {props.details?.description && props.details.description}
                   </p>
                   <p className="text-base text-sky-blue">Delivery Detail</p>
-                </div>
                   <div className="">
-                  <p className="text-base text-sky-blue">
-                    {userDetails.firstname && userDetails.firstname}
-                  </p>
                     <p className="text-base text-slate-700 dark:text-black">
                       <span className="font-semibold">Due: </span>
                       {props.details?.delivery_date &&
@@ -107,6 +103,12 @@ function ActiveJobs(props) {
                     </p>
                   </div>
                 </div>
+                <div className="w-full lg:w-1/3 lg:text-center">
+                  <p className="text-base text-sky-blue">
+                    {userDetails.firstname && userDetails.firstname}
+                  </p>
+                </div>
+              </div>
             </div>
 
             <div className="mt-5 bg-white p-4 rounded-md shadow-md">

src/components/MyActiveJobs/MyActiveJobTable.jsx

@@ -1,13 +1,14 @@
 import React, { useState } from "react";
 import dataImage2 from "../../assets/images/data-table-user-2.png";
 
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 
 import { handlePagingFunc } from "../Pagination/HandlePagination";
 import PaginatedList from "../Pagination/PaginatedList";
 
 export default function MyActiveJobTable({ MyJobList, className }) {
-  const navigate = useNavigate()
+  const navigate = useNavigate();
+  let {pathname} = useLocation()
 
   const filterCategories = ["All Categories", "Explore", "Featured"];
   const [selectedCategory, setCategory] = useState(filterCategories[0]);
@@ -51,15 +52,15 @@ export default function MyActiveJobTable({ MyJobList, className }) {
                         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">
+                          <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">
+                            <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] max-w-[60px]">
                               <img
                                 src={dataImage2}
                                 alt="data"
                                 className="w-full h-full"
                               />
                             </div>
-                            <div className="flex flex-col">
+                            <div className="flex flex-col flex-[0.9]">
                               <h1 className="font-bold text-xl text-dark-gray dark:text-white">
                                 {value.title}
                               </h1>
@@ -100,7 +101,9 @@ export default function MyActiveJobTable({ MyJobList, className }) {
                             <button
                               type="button"
                               onClick={() => {
-                                navigate('/manage-active-job', {state:value});
+                                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"
                             >

src/components/MyActiveJobs/index.jsx

@@ -12,7 +12,9 @@ export default function MyActiveJobs(props) {
   console.log("AMEYE LOC1", props.MyJobList);
   return (
     <Layout>
-      <CommonHead />
+      <CommonHead
+          commonHeadData={props.commonHeadData}
+      />
       <div className="notification-page w-full mb-10">
         <div className="notification-wrapper w-full">
           {/* heading */}

src/components/MyJobs/MyJobTable.jsx

@@ -1,19 +1,18 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import dataImage1 from "../../assets/images/data-table-user-1.png";
 import dataImage2 from "../../assets/images/data-table-user-2.png";
-import dataImage3 from "../../assets/images/data-table-user-3.png";
-import dataImage4 from "../../assets/images/data-table-user-4.png";
 import SelectBox from "../Helpers/SelectBox";
-import JobListPopout from "../jobPopout/JobListPopout";
 import DeleteJobPopout from "../jobPopout/DeleteJobPopout";
+import JobListPopout from "../jobPopout/JobListPopout";
+
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 
-import PaginatedList from "../Pagination/PaginatedList";
-import { handlePagingFunc } from "../Pagination/HandlePagination";
-import EditJobPopOut from "../jobPopout/EditJobPopout";
-import usersService from "../../services/UsersService";
 import { useSelector } from "react-redux";
+import usersService from "../../services/UsersService";
+import { handlePagingFunc } from "../Pagination/HandlePagination";
+import PaginatedList from "../Pagination/PaginatedList";
+import EditJobPopOut from "../jobPopout/EditJobPopout";
 
-export default function MyJobTable({ MyJobList, className }) {
+export default function MyJobTable({ MyJobList, reloadJobList, className }) {
   const [myCountry, setCountries] = useState("");
   const {
     userDetails: { country },
@@ -30,7 +29,6 @@ export default function MyJobTable({ MyJobList, className }) {
         const {
           data: { signup_country },
         } = await res;
-        console.log(signup_country);
         let checkCountry = signup_country
           ?.filter((item) => item[0] == country)
           ?.map((item, idx) => item[1])
@@ -61,7 +59,7 @@ export default function MyJobTable({ MyJobList, className }) {
   const indexOfFirstItem = Number(currentPage);
   const indexOfLastItem =
     Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
-  const currentJobList = MyJobList?.result_list?.slice(
+  const currentJobList = MyJobList?.data?.result_list?.slice(
     indexOfFirstItem,
     indexOfLastItem
   );
@@ -89,7 +87,9 @@ export default function MyJobTable({ MyJobList, className }) {
           contentBodyClasses="w-auto min-w-max"
         />
       </div>
-      {MyJobList && MyJobList?.result_list && (
+      {MyJobList.loading ? (
+        <LoadingSpinner size="16" color="sky-blue" />
+      ) : (
         <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
           <table className="table-auto min-w-full text-sm text-left text-gray-500 dark:text-gray-400">
             <tbody>
@@ -101,8 +101,8 @@ export default function MyJobTable({ MyJobList, className }) {
               {selectedCategory === "All Categories" ? (
                 <>
                   {MyJobList &&
-                    MyJobList?.result_list &&
+                    MyJobList?.data?.result_list &&
-                    MyJobList.result_list.length > 0 &&
+                    MyJobList.data?.result_list.length > 0 &&
                     currentJobList.map((value, index) => (
                       <tr
                         key={index}
@@ -110,15 +110,15 @@ export default function MyJobTable({ MyJobList, className }) {
                       >
                         <td className="py-9">
                           <div className="sm:flex sm:space-x-2 sm:justify-between sm:items-center job-items">
-                            <div className="flex space-x-2 items-center job-items">
+                            <div className="flex space-x-2 items-center job-items w-full">
-                              <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+                              <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px]">
                                 <img
                                   src={dataImage2}
                                   alt="data"
                                   className="w-full h-full"
                                 />
                               </div>
-                              <div className="flex flex-col">
+                              <div className="flex flex-col flex-[0.9]">
                                 <h1 className="font-bold text-xl text-dark-gray dark:text-white">
                                   {value.title}
                                 </h1>
@@ -197,11 +197,11 @@ export default function MyJobTable({ MyJobList, className }) {
             prev={currentPage == 0 ? true : false}
             next={
               currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
-              MyJobList?.result_list?.length
+              MyJobList?.data?.result_list?.length
                 ? true
                 : false
             }
-            data={MyJobList?.result_list}
+            data={MyJobList?.data?.result_list}
             start={indexOfFirstItem}
             stop={indexOfLastItem}
           />
@@ -228,6 +228,7 @@ export default function MyJobTable({ MyJobList, className }) {
           onClose={() => {
             setDeleteJobPopout({ show: false, data: {} });
           }}
+          reloadJobList={reloadJobList}
           situation={deleteJobPopout.show}
         />
       )}

src/components/MyJobs/StartJob.jsx

@@ -15,10 +15,6 @@ export default function StartJob(props) {
     const navigate = useNavigate()
 
     let [request, setRequest] = useState({loading: false, status: false, message: ''})
-    const [selectTab, setValue] = useState("today");
-    const filterHandler = (value) => {
-        setValue(value);
-    };
 
     const handleOnclick = () => {
         setRequest({loading: true, status: false, message: ''})
@@ -42,25 +38,6 @@ export default function StartJob(props) {
             {/*<CommonHead />*/}
             <div className="notification-page w-full mb-10">
                 <div className="notification-wrapper w-full">
-                    {/* heading */}
-                    {/* <div className="sm:flex justify-between items-center mb-6">
-                        <div className="mb-5 sm:mb-0">
-                            <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
-                <span
-                    className={`${selectTab === "today" ? "block" : "hidden"}`}
-                >
-                  Additional Terms for Jobs Posting.
-                </span>
-
-                            </h1>
-                        </div>
-                        <div className="slider-btns flex space-x-4">
-                            <div onClick={() => filterHandler("today")} className="relative">
-
-                            </div>
-                        </div>
-                    </div> */}
-
                     <div
                         className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow min-h-[520px]`}
                     >

src/components/MyJobs/index.jsx

@@ -12,7 +12,9 @@ export default function MyJobs(props) {
   console.log("AMEYE LOC1", props.MyJobList);
   return (
     <Layout>
-      <CommonHead />
+      <CommonHead
+          commonHeadData={props.commonHeadData}
+      />
       <div className="notification-page w-full mb-10">
         <div className="notification-wrapper w-full">
           {/* heading */}
@@ -40,7 +42,10 @@ export default function MyJobs(props) {
               ></div>
             </div>
           </div>
-          <MyJobTable MyJobList={props.MyJobList} />
+          <MyJobTable
+              MyJobList={props.MyJobList}
+              reloadJobList={props.reloadJobList}
+          />
         </div>
       </div>
     </Layout>

src/components/MyPendingJobs/MyPendingJobTable.jsx

@@ -1,28 +1,27 @@
 import React, { useState } from "react";
-import dataImage1 from "../../assets/images/data-table-user-1.png";
 import dataImage2 from "../../assets/images/data-table-user-2.png";
-import dataImage3 from "../../assets/images/data-table-user-3.png";
-import dataImage4 from "../../assets/images/data-table-user-4.png";
-import SelectBox from "../Helpers/SelectBox";
 import PendingJobsPopout from "../jobPopout/PendingJobsPopout";
 
-import PaginatedList from "../Pagination/PaginatedList";
 import { handlePagingFunc } from "../Pagination/HandlePagination";
+import PaginatedList from "../Pagination/PaginatedList";
 
-export default function MyPendingJobTable({MyJobList, className }) {
+export default function MyPendingJobTable({ MyJobList, className }) {
   const filterCategories = ["All Categories", "Explore", "Featured"];
   const [selectedCategory, setCategory] = useState(filterCategories[0]);
-
+  let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
-    let [jobPopout,setJobPopout] = useState({show:false, data:{}}) // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
 
   const [currentPage, setCurrentPage] = useState(0);
   const indexOfFirstItem = Number(currentPage);
-    const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
+  const indexOfLastItem =
-    const currentActiveJobList = MyJobList?.result_list?.slice(indexOfFirstItem, indexOfLastItem);
+    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+  const currentActiveJobList = MyJobList?.result_list?.slice(
+    indexOfFirstItem,
+    indexOfLastItem
+  );
 
   const handlePagination = (e) => {
-        handlePagingFunc(e,setCurrentPage)
+    handlePagingFunc(e, setCurrentPage);
-    }
+  };
 
   return (
     <div
@@ -30,7 +29,7 @@ export default function MyPendingJobTable({MyJobList, className }) {
         className || ""
       }`}
     >
-            {MyJobList && MyJobList?.result_list &&
+      {MyJobList && MyJobList?.result_list && (
         <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
           <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
             <tbody>
@@ -41,48 +40,65 @@ export default function MyPendingJobTable({MyJobList, className }) {
 
               {
                 <>
-                            {MyJobList && MyJobList?.result_list &&
+                  {MyJobList &&
+                    MyJobList?.result_list &&
                     MyJobList.result_list.length > 0 &&
                     currentActiveJobList.map((value, index) => (
-                                    <tr key={index} className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
+                      <tr
+                        key={index}
+                        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">
+                          <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">
+                            <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] max-w-[60px]">
                               <img
                                 src={dataImage2}
                                 alt="data"
                                 className="w-full h-full"
                               />
                             </div>
-                                                    <div className="flex flex-col">
+                            <div className="flex flex-col flex-[0.9]">
                               <h1 className="font-bold text-xl text-dark-gray dark:text-white">
                                 {value.title}
                               </h1>
-                                                        <div>
+                              <div>{value.description}</div>
-                                                            {value.description}
-                                                        </div>
                               <span className="text-sm text-thin-light-gray">
-                                                        Price: <span className="text-purple">{value.price*0.01}</span>
+                                Price:{" "}
+                                <span className="text-purple">
+                                  {value.price * 0.01}
+                                </span>
                               </span>
                               <span className="text-sm text-thin-light-gray">
-                                                        Duration:   <span className="text-purple"> {value.timeline_days} day(s)</span>
+                                Duration:{" "}
+                                <span className="text-purple">
+                                  {" "}
+                                  {value.timeline_days} day(s)
+                                </span>
                               </span>
                               <span className="text-sm text-thin-light-gray">
-                                                        Expire:   <span className="text-purple"> {value.expire}</span>
+                                Expire:{" "}
+                                <span className="text-purple">
+                                  {" "}
+                                  {value.expire}
+                                </span>
                               </span>
                               <span className="text-sm text-thin-light-gray">
-                                                        Send to:   <span className="text-purple"> {value.job_to}</span>
+                                Send to:{" "}
+                                <span className="text-purple">
+                                  {" "}
+                                  {value.job_to}
+                                </span>
                               </span>
-
                             </div>
                           </div>
                         </td>
 
-
                         <td className="text-right py-4 px-2">
                           <button
                             type="button"
-                                                    onClick={()=>{setJobPopout({show:true, data:value})}}
+                            onClick={() => {
+                              setJobPopout({ show: true, data: value });
+                            }}
                             className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                           >
                             View
@@ -90,22 +106,38 @@ export default function MyPendingJobTable({MyJobList, className }) {
                         </td>
                       </tr>
                     ))}
-
-
                 </>
               }
             </tbody>
           </table>
           {/* PAGINATION BUTTON */}
-                <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= MyJobList?.result_list.length ? true : false} data={MyJobList?.result_list} start={indexOfFirstItem} stop={indexOfLastItem} />
+          <PaginatedList
+            onClick={handlePagination}
+            prev={currentPage == 0 ? true : false}
+            next={
+              currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
+              MyJobList?.result_list.length
+                ? true
+                : false
+            }
+            data={MyJobList?.result_list}
+            start={indexOfFirstItem}
+            stop={indexOfLastItem}
+          />
           {/* END OF PAGINATION BUTTON */}
         </div>
-            }
+      )}
 
       {/* Active Job Popout */}
-            {jobPopout.show &&
+      {jobPopout.show && (
-                <PendingJobsPopout details={jobPopout.data} onClose={()=>{setJobPopout({show:false, data:{}})}} situation={jobPopout.show} />
+        <PendingJobsPopout
-            }
+          details={jobPopout.data}
+          onClose={() => {
+            setJobPopout({ show: false, data: {} });
+          }}
+          situation={jobPopout.show}
+        />
+      )}
       {/* End of Active Job Popout */}
     </div>
   );

src/components/MyPendingJobs/index.jsx

@@ -12,7 +12,9 @@ export default function MyPendingJobs(props) {
   console.log("AMEYE LOC1", props.MyJobList);
   return (
     <Layout>
-            <CommonHead />
+      <CommonHead
+          commonHeadData={props.commonHeadData}
+      />
       <div className="notification-page w-full mb-10">
         <div className="notification-wrapper w-full">
           {/* heading */}
@@ -24,13 +26,13 @@ export default function MyPendingJobs(props) {
                 >
                   Pending Job(s)
                 </span>
-
               </h1>
             </div>
             <div className="slider-btns flex space-x-4">
-                            <div onClick={() => filterHandler("today")} className="relative">
+              <div
-
+                onClick={() => filterHandler("today")}
-                            </div>
+                className="relative"
+              ></div>
             </div>
           </div>
           <MyPendingJobTable MyJobList={props.MyJobList} />

src/components/MyTasks/MyJobTable.jsx

@@ -1,25 +1,25 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import dataImage1 from "../../assets/images/data-table-user-1.png";
-import dataImage2 from "../../assets/images/data-table-user-2.png";
-import dataImage3 from "../../assets/images/data-table-user-3.png";
-import dataImage4 from "../../assets/images/data-table-user-4.png";
-import SelectBox from "../Helpers/SelectBox";
 
 import PaginatedList from "../Pagination/PaginatedList";
 import { handlePagingFunc } from "../Pagination/HandlePagination";
 import usersService from "../../services/UsersService";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+
+import {useNavigate, useLocation} from 'react-router-dom'
 
 export default function MyJobTable({ className }) {
-  const filterCategories = ["All Categories", "Explore", "Featured"];
+  let navigate = useNavigate()
-  const [selectedCategory, setCategory] = useState(filterCategories[0]);
+  let {pathname} = useLocation()
+
   const [tasksData, setTasksData] = useState(null);
+  const [loader, setLoader] = useState(true);
 
   let apiCall = useMemo(() => new usersService(), []);
 
   const displayTasks = useCallback(async () => {
     try {
       const res = await apiCall.getMyActiveTaskList();
-      console.log('Ebube step', res)
       let {
         data: { result_list },
         internal_return,
@@ -27,22 +27,21 @@ export default function MyJobTable({ className }) {
       } = await res;
       if (internal_return < 0 || statusText !== "OK") return;
       setTasksData(result_list);
+      setLoader(false);
     } catch (error) {
       throw new Error(error);
     }
   }, [apiCall]);
 
   useEffect(() => {
-    displayTasks()
+    displayTasks();
-  }, [])
+  }, []);
-
-  let data = ["1", "2", "3", "4", "5", "6"]; // to be replaced later by result from API CALL
 
   const [currentPage, setCurrentPage] = useState(0);
   const indexOfFirstItem = Number(currentPage);
   const indexOfLastItem =
     Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
-  const currentTask = data.slice(indexOfFirstItem, indexOfLastItem);
+  const currentTask = tasksData?.slice(indexOfFirstItem, indexOfLastItem);
 
   const handlePagination = (e) => {
     handlePagingFunc(e, setCurrentPage);
@@ -54,438 +53,29 @@ export default function MyJobTable({ className }) {
         className || ""
       }`}
     >
-      {tasksData && (
+      {loader ? (
+        <div className="w-full h-[500px] flex items-center justify-center">
+          <LoadingSpinner size="16" color="sky-blue" />
+        </div>
+      ) : (
         <div className="relative w-full overflow-x-auto sm:rounded-lg">
-          {/* <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+          <div className="overflow-y-auto h-auto w-full">
-            <tbody>
-              <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">
-                <td className="py-4">All Product</td>
-                <td className="py-4 text-center">Value</td>
-                <td className="py-4 text-center">USD</td>
-                <td className="py-4 text-center">24H%</td>
-                <td className="py-4 text-center">Bits</td>
-                <td className="py-4 text-center">Time</td>
-                <td className="py-4 text-right">Status</td>
-              </tr>
-
-              {selectedCategory === "All Categories"
-                ? currentTask.map((item, index) => (
-                    <tr
-                      key={index}
-                      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">
-                          <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
-                            <img
-                              src={dataImage1}
-                              alt="data"
-                              className="w-full h-full"
-                            />
-                          </div>
-                          <div className="flex flex-col">
-                            <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                              Mullican Computer Joy
-                            </h1>
-                            <span className="text-sm text-thin-light-gray">
-                              Owned by{" "}
-                              <span className="text-purple">Xoeyam</span>
-                            </span>
-                          </div>
-                        </div>
-                      </td>
-                      <td className="text-center py-4 px-2">
-                        <div className="flex space-x-1 items-center justify-center">
-                          <span>
-                            <svg
-                              width="18"
-                              height="18"
-                              viewBox="0 0 18 18"
-                              fill="none"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M9 18C13.9706 18 18 13.9706 18 9C18 4.02944 13.9706 0 9 0C4.02944 0 0 4.02944 0 9C0 13.9706 4.02944 18 9 18Z"
-                                fill="#627EEA"
-                              />
-                              <path
-                                d="M9.28125 2.25V7.23937L13.4983 9.12375L9.28125 2.25Z"
-                                fill="white"
-                                fillOpacity="0.602"
-                              />
-                              <path
-                                d="M9.28012 2.25L5.0625 9.12375L9.28012 7.23937V2.25Z"
-                                fill="white"
-                              />
-                              <path
-                                d="M9.28125 12.3582V15.7483L13.5011 9.91016L9.28125 12.3582Z"
-                                fill="white"
-                                fillOpacity="0.602"
-                              />
-                              <path
-                                d="M9.28012 15.7483V12.3576L5.0625 9.91016L9.28012 15.7483Z"
-                                fill="white"
-                              />
-                              <path
-                                d="M9.28125 11.572L13.4983 9.12348L9.28125 7.24023V11.572Z"
-                                fill="white"
-                                fillOpacity="0.2"
-                              />
-                              <path
-                                d="M5.0625 9.12348L9.28012 11.572V7.24023L5.0625 9.12348Z"
-                                fill="white"
-                                fillOpacity="0.602"
-                              />
-                            </svg>
-                          </span>
-                          <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                            7473 ETH
-                          </span>
-                        </div>
-                      </td>
-                      <td className="text-center py-4 px-2">
-                        <div className="flex space-x-1 items-center justify-center">
-                          <span>
-                            <svg
-                              width="16"
-                              height="16"
-                              viewBox="0 0 16 16"
-                              fill="none"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M7.55225 0C7.8457 0 8.13914 0 8.43205 0C8.44829 0.026534 8.47537 0.0151623 8.49756 0.0162453C9.28966 0.0649812 10.0606 0.220936 10.8013 0.505229C12.7699 1.26172 14.2323 2.58354 15.183 4.46638C15.5999 5.29218 15.8506 6.16997 15.9561 7.08891C15.9691 7.201 15.9621 7.3158 16 7.42465C16 7.80858 16 8.19251 16 8.57698C15.9778 8.5916 15.9854 8.61543 15.9838 8.63546C15.9475 9.10387 15.8744 9.56686 15.7515 10.0206C15.1787 12.1342 13.9524 13.7603 12.0818 14.8942C11.1516 15.4579 10.1397 15.8002 9.06064 15.941C8.89497 15.9626 8.72875 15.98 8.56308 15.9995C8.17217 15.9995 7.78127 15.9995 7.39036 16C7.3752 15.9789 7.35138 15.9865 7.33135 15.9848C6.96752 15.9545 6.60639 15.9009 6.25068 15.8197C4.77639 15.4829 3.48998 14.793 2.4131 13.7311C0.998917 12.3372 0.204656 10.6461 0.0270709 8.66687C0.0205739 8.59431 0.033568 8.51904 0 8.44972C0 8.15081 0 7.85244 0 7.55352C0.0265295 7.53403 0.0151597 7.50479 0.016784 7.47988C0.0730915 6.64162 0.251218 5.83044 0.564158 5.05066C1.10179 3.71043 1.93774 2.59058 3.07634 1.70142C4.33839 0.715876 5.77098 0.159745 7.36762 0.0270755C7.4288 0.0216604 7.49432 0.0341151 7.55225 0ZM7.24635 9.86252C7.24635 10.2383 7.24526 10.6147 7.24743 10.9905C7.24797 11.0457 7.23389 11.0679 7.17596 11.0593C7.09691 11.0479 7.01678 11.0446 6.93774 11.0338C6.26746 10.9461 5.63563 10.7371 5.03952 10.4192C5.00379 10.4002 4.97834 10.3802 4.9621 10.4425C4.81375 11.0176 4.66324 11.5926 4.51164 12.1666C4.50027 12.2094 4.51272 12.2278 4.54954 12.2473C4.66486 12.3096 4.78235 12.3665 4.90309 12.4152C5.5961 12.6968 6.31998 12.8408 7.06497 12.8842C7.14131 12.8885 7.16134 12.9112 7.1608 12.9865C7.15701 13.4159 7.16026 13.8453 7.15809 14.2747C7.15755 14.3397 7.17488 14.3619 7.2431 14.3614C7.69085 14.3581 8.13914 14.3576 8.5869 14.3614C8.66432 14.3619 8.67731 14.3359 8.67731 14.2666C8.67461 13.8026 8.67677 13.3385 8.67461 12.8744C8.67407 12.8089 8.68544 12.7786 8.76015 12.765C9.09962 12.7049 9.4288 12.6058 9.74228 12.4607C10.3498 12.1802 10.8408 11.7703 11.1603 11.1724C11.4288 10.6699 11.51 10.1327 11.4618 9.56957C11.4158 9.03239 11.2366 8.55207 10.8787 8.14431C10.5506 7.77121 10.1402 7.51129 9.69843 7.29522C9.39145 7.14523 9.07363 7.02284 8.75041 6.91129C8.7098 6.89721 8.67407 6.88693 8.67407 6.82736C8.67623 6.14993 8.67569 5.4725 8.67461 4.79507C8.67461 4.75121 8.68489 4.73117 8.73308 4.73767C8.87547 4.75717 9.01895 4.77016 9.16134 4.79236C9.634 4.86493 10.0796 5.02467 10.5116 5.22395C10.5717 5.25157 10.5945 5.24886 10.6123 5.17684C10.7434 4.6467 10.8771 4.1171 11.0162 3.58913C11.0379 3.5079 11.0244 3.47541 10.948 3.44076C10.2799 3.13751 9.57282 3.01025 8.8457 2.97614C8.78018 2.97289 8.76123 2.95556 8.76178 2.88896C8.76503 2.50232 8.76232 2.11568 8.76448 1.72904C8.76503 1.66785 8.75041 1.64727 8.68489 1.64727C8.23173 1.64998 7.77802 1.64998 7.32485 1.64727C7.26151 1.64673 7.24418 1.66406 7.24418 1.72742C7.24689 2.1433 7.24256 2.55972 7.24797 2.9756C7.24905 3.06116 7.2209 3.08661 7.14239 3.10285C6.73579 3.18679 6.34651 3.32271 5.98646 3.53281C5.20628 3.98822 4.72117 4.64724 4.61938 5.5586C4.51597 6.48837 4.83812 7.2427 5.57661 7.81778C6.05739 8.19251 6.60639 8.43781 7.1738 8.64683C7.2274 8.66633 7.24743 8.68907 7.24689 8.7481C7.24472 9.12066 7.24635 9.49159 7.24635 9.86252Z"
-                                fill="#59BE59"
-                              />
-                              <path
-                                d="M7.2452 9.86252C7.2452 9.49158 7.24358 9.12119 7.24683 8.75026C7.24737 8.69123 7.22734 8.66903 7.17374 8.64899C6.60687 8.43997 6.05787 8.19467 5.57655 7.81994C4.8386 7.24486 4.51591 6.49053 4.61933 5.56076C4.72057 4.6494 5.20568 3.99092 5.98641 3.53497C6.34645 3.32486 6.73519 3.18894 7.14233 3.10501C7.22084 3.08876 7.24899 3.06277 7.24791 2.97775C7.2425 2.56187 7.24683 2.14545 7.24412 1.72957C7.24358 1.66621 7.2609 1.64888 7.32479 1.64943C7.77796 1.65213 8.23167 1.65213 8.68483 1.64943C8.7498 1.64888 8.76442 1.66946 8.76442 1.73119C8.76171 2.11783 8.76496 2.50447 8.76171 2.89111C8.76117 2.95717 8.78012 2.97504 8.84563 2.97829C9.57276 3.01295 10.2793 3.13966 10.948 3.44291C11.0243 3.47757 11.0373 3.51006 11.0162 3.59128C10.877 4.11926 10.7433 4.64885 10.6123 5.17899C10.5944 5.25156 10.5717 5.25372 10.5116 5.2261C10.079 5.02683 9.63394 4.86708 9.16128 4.79452C9.01889 4.77286 8.87595 4.75932 8.73302 4.73983C8.68483 4.73333 8.67455 4.75337 8.67455 4.79723C8.67563 5.47466 8.67617 6.15209 8.674 6.82952C8.674 6.88908 8.70974 6.89937 8.75034 6.91345C9.07303 7.02446 9.39138 7.14684 9.69837 7.29738C10.1396 7.51344 10.5506 7.77283 10.8787 8.14647C11.2365 8.55369 11.4157 9.03455 11.4618 9.57173C11.51 10.1349 11.4287 10.6726 11.1602 11.1746C10.8408 11.7724 10.3497 12.1818 9.74222 12.4629C9.42874 12.608 9.09956 12.7071 8.76009 12.7672C8.68483 12.7802 8.674 12.811 8.67455 12.8766C8.67671 13.3406 8.67455 13.8047 8.67725 14.2688C8.67779 14.3381 8.66426 14.3646 8.58684 14.3636C8.13908 14.3598 7.69079 14.3608 7.24304 14.3636C7.17536 14.3641 7.15803 14.3424 7.15803 14.2769C7.1602 13.8475 7.15695 13.4181 7.16074 12.9887C7.16128 12.9128 7.14179 12.8906 7.06491 12.8863C6.31992 12.843 5.59658 12.699 4.90303 12.4174C4.78229 12.3681 4.66426 12.3112 4.54948 12.2495C4.51321 12.23 4.50075 12.2116 4.51158 12.1688C4.66318 11.5943 4.81369 11.0197 4.96204 10.4446C4.97829 10.3824 5.00373 10.4024 5.03947 10.4214C5.63557 10.7387 6.2674 10.9477 6.93768 11.036C7.01672 11.0463 7.09685 11.0501 7.1759 11.0614C7.23383 11.0695 7.24737 11.0479 7.24737 10.9927C7.24412 10.6147 7.2452 10.2383 7.2452 9.86252ZM8.68537 9.36325C8.67942 9.37245 8.67455 9.37678 8.67455 9.38112C8.674 9.83978 8.67401 10.2984 8.67292 10.7571C8.67292 10.8177 8.70216 10.7928 8.72598 10.7755C8.82452 10.7046 8.90736 10.619 8.96691 10.5123C9.17698 10.1333 9.05679 9.63725 8.68537 9.36325ZM7.23871 6.11147C7.23871 5.75354 7.23871 5.40589 7.23871 5.05174C6.92522 5.33982 6.92522 5.77249 7.23871 6.11147Z"
-                                fill="#FEFEFE"
-                              />
-                              <path
-                                d="M8.68433 9.36328C9.05574 9.63729 9.17539 10.1333 8.96586 10.5118C8.90631 10.619 8.82347 10.7046 8.72493 10.775C8.70111 10.7918 8.67188 10.8172 8.67188 10.7566C8.67242 10.2979 8.67296 9.83927 8.6735 9.38061C8.67404 9.37682 8.67891 9.37249 8.68433 9.36328Z"
-                                fill="#59BE59"
-                              />
-                              <path
-                                d="M7.23882 6.11149C6.92533 5.77305 6.92587 5.33984 7.23882 5.05176C7.23882 5.40591 7.23882 5.75355 7.23882 6.11149Z"
-                                fill="#59BE59"
-                              />
-                            </svg>
-                          </span>
-                          <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                            6392.99$
-                          </span>
-                        </div>
-                      </td>
-                      <td className="text-center py-4 px-2">
-                        <span className="text-base text-light-red whitespace-nowrap">
-                          -24.75 (11.5%)
-                        </span>
-                      </td>
-                      <td className="text-right py-4 px-2">
-                        <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                          343
-                        </span>
-                      </td>
-                      <td className="text-right py-4 px-2">
-                        <span className="text-base text-thin-light-gray whitespace-nowrap">
-                          2 Hours 1 min 30s
-                        </span>
-                      </td>
-                      <td className="text-right py-4 px-2">
-                        <button
-                          type="button"
-                          className="text-sm text-white bg-purple px-2.5 py-1.5 rounded-full"
-                        >
-                          Active
-                        </button>
-                      </td>
-                    </tr>
-                  ))
-                : selectedCategory === "Explore"
-                ? currentTask.map((item, index) => (
-                    <tr
-                      key={index}
-                      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">
-                          <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
-                            <img
-                              src={dataImage2}
-                              alt="data"
-                              className="w-full h-full"
-                            />
-                          </div>
-                          <div className="flex flex-col">
-                            <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                              Mullican Computer Joy
-                            </h1>
-                            <span className="text-sm text-thin-light-gray">
-                              Owned by{" "}
-                              <span className="text-purple">Xoeyam</span>
-                            </span>
-                          </div>
-                        </div>
-                      </td>
-                      <td className="text-center py-4 px-2">
-                        <div className="flex space-x-1 items-center justify-center">
-                          <span>
-                            <svg
-                              width="18"
-                              height="18"
-                              viewBox="0 0 18 18"
-                              fill="none"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M9 18C13.9706 18 18 13.9706 18 9C18 4.02944 13.9706 0 9 0C4.02944 0 0 4.02944 0 9C0 13.9706 4.02944 18 9 18Z"
-                                fill="#627EEA"
-                              />
-                              <path
-                                d="M9.28125 2.25V7.23937L13.4983 9.12375L9.28125 2.25Z"
-                                fill="white"
-                                fillOpacity="0.602"
-                              />
-                              <path
-                                d="M9.28012 2.25L5.0625 9.12375L9.28012 7.23937V2.25Z"
-                                fill="white"
-                              />
-                              <path
-                                d="M9.28125 12.3582V15.7483L13.5011 9.91016L9.28125 12.3582Z"
-                                fill="white"
-                                fillOpacity="0.602"
-                              />
-                              <path
-                                d="M9.28012 15.7483V12.3576L5.0625 9.91016L9.28012 15.7483Z"
-                                fill="white"
-                              />
-                              <path
-                                d="M9.28125 11.572L13.4983 9.12348L9.28125 7.24023V11.572Z"
-                                fill="white"
-                                fillOpacity="0.2"
-                              />
-                              <path
-                                d="M5.0625 9.12348L9.28012 11.572V7.24023L5.0625 9.12348Z"
-                                fill="white"
-                                fillOpacity="0.602"
-                              />
-                            </svg>
-                          </span>
-                          <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                            7473 ETH
-                          </span>
-                        </div>
-                      </td>
-                      <td className="text-center py-4 px-2">
-                        <div className="flex space-x-1 items-center justify-center">
-                          <span>
-                            <svg
-                              width="16"
-                              height="16"
-                              viewBox="0 0 16 16"
-                              fill="none"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M7.55225 0C7.8457 0 8.13914 0 8.43205 0C8.44829 0.026534 8.47537 0.0151623 8.49756 0.0162453C9.28966 0.0649812 10.0606 0.220936 10.8013 0.505229C12.7699 1.26172 14.2323 2.58354 15.183 4.46638C15.5999 5.29218 15.8506 6.16997 15.9561 7.08891C15.9691 7.201 15.9621 7.3158 16 7.42465C16 7.80858 16 8.19251 16 8.57698C15.9778 8.5916 15.9854 8.61543 15.9838 8.63546C15.9475 9.10387 15.8744 9.56686 15.7515 10.0206C15.1787 12.1342 13.9524 13.7603 12.0818 14.8942C11.1516 15.4579 10.1397 15.8002 9.06064 15.941C8.89497 15.9626 8.72875 15.98 8.56308 15.9995C8.17217 15.9995 7.78127 15.9995 7.39036 16C7.3752 15.9789 7.35138 15.9865 7.33135 15.9848C6.96752 15.9545 6.60639 15.9009 6.25068 15.8197C4.77639 15.4829 3.48998 14.793 2.4131 13.7311C0.998917 12.3372 0.204656 10.6461 0.0270709 8.66687C0.0205739 8.59431 0.033568 8.51904 0 8.44972C0 8.15081 0 7.85244 0 7.55352C0.0265295 7.53403 0.0151597 7.50479 0.016784 7.47988C0.0730915 6.64162 0.251218 5.83044 0.564158 5.05066C1.10179 3.71043 1.93774 2.59058 3.07634 1.70142C4.33839 0.715876 5.77098 0.159745 7.36762 0.0270755C7.4288 0.0216604 7.49432 0.0341151 7.55225 0ZM7.24635 9.86252C7.24635 10.2383 7.24526 10.6147 7.24743 10.9905C7.24797 11.0457 7.23389 11.0679 7.17596 11.0593C7.09691 11.0479 7.01678 11.0446 6.93774 11.0338C6.26746 10.9461 5.63563 10.7371 5.03952 10.4192C5.00379 10.4002 4.97834 10.3802 4.9621 10.4425C4.81375 11.0176 4.66324 11.5926 4.51164 12.1666C4.50027 12.2094 4.51272 12.2278 4.54954 12.2473C4.66486 12.3096 4.78235 12.3665 4.90309 12.4152C5.5961 12.6968 6.31998 12.8408 7.06497 12.8842C7.14131 12.8885 7.16134 12.9112 7.1608 12.9865C7.15701 13.4159 7.16026 13.8453 7.15809 14.2747C7.15755 14.3397 7.17488 14.3619 7.2431 14.3614C7.69085 14.3581 8.13914 14.3576 8.5869 14.3614C8.66432 14.3619 8.67731 14.3359 8.67731 14.2666C8.67461 13.8026 8.67677 13.3385 8.67461 12.8744C8.67407 12.8089 8.68544 12.7786 8.76015 12.765C9.09962 12.7049 9.4288 12.6058 9.74228 12.4607C10.3498 12.1802 10.8408 11.7703 11.1603 11.1724C11.4288 10.6699 11.51 10.1327 11.4618 9.56957C11.4158 9.03239 11.2366 8.55207 10.8787 8.14431C10.5506 7.77121 10.1402 7.51129 9.69843 7.29522C9.39145 7.14523 9.07363 7.02284 8.75041 6.91129C8.7098 6.89721 8.67407 6.88693 8.67407 6.82736C8.67623 6.14993 8.67569 5.4725 8.67461 4.79507C8.67461 4.75121 8.68489 4.73117 8.73308 4.73767C8.87547 4.75717 9.01895 4.77016 9.16134 4.79236C9.634 4.86493 10.0796 5.02467 10.5116 5.22395C10.5717 5.25157 10.5945 5.24886 10.6123 5.17684C10.7434 4.6467 10.8771 4.1171 11.0162 3.58913C11.0379 3.5079 11.0244 3.47541 10.948 3.44076C10.2799 3.13751 9.57282 3.01025 8.8457 2.97614C8.78018 2.97289 8.76123 2.95556 8.76178 2.88896C8.76503 2.50232 8.76232 2.11568 8.76448 1.72904C8.76503 1.66785 8.75041 1.64727 8.68489 1.64727C8.23173 1.64998 7.77802 1.64998 7.32485 1.64727C7.26151 1.64673 7.24418 1.66406 7.24418 1.72742C7.24689 2.1433 7.24256 2.55972 7.24797 2.9756C7.24905 3.06116 7.2209 3.08661 7.14239 3.10285C6.73579 3.18679 6.34651 3.32271 5.98646 3.53281C5.20628 3.98822 4.72117 4.64724 4.61938 5.5586C4.51597 6.48837 4.83812 7.2427 5.57661 7.81778C6.05739 8.19251 6.60639 8.43781 7.1738 8.64683C7.2274 8.66633 7.24743 8.68907 7.24689 8.7481C7.24472 9.12066 7.24635 9.49159 7.24635 9.86252Z"
-                                fill="#59BE59"
-                              />
-                              <path
-                                d="M7.2452 9.86252C7.2452 9.49158 7.24358 9.12119 7.24683 8.75026C7.24737 8.69123 7.22734 8.66903 7.17374 8.64899C6.60687 8.43997 6.05787 8.19467 5.57655 7.81994C4.8386 7.24486 4.51591 6.49053 4.61933 5.56076C4.72057 4.6494 5.20568 3.99092 5.98641 3.53497C6.34645 3.32486 6.73519 3.18894 7.14233 3.10501C7.22084 3.08876 7.24899 3.06277 7.24791 2.97775C7.2425 2.56187 7.24683 2.14545 7.24412 1.72957C7.24358 1.66621 7.2609 1.64888 7.32479 1.64943C7.77796 1.65213 8.23167 1.65213 8.68483 1.64943C8.7498 1.64888 8.76442 1.66946 8.76442 1.73119C8.76171 2.11783 8.76496 2.50447 8.76171 2.89111C8.76117 2.95717 8.78012 2.97504 8.84563 2.97829C9.57276 3.01295 10.2793 3.13966 10.948 3.44291C11.0243 3.47757 11.0373 3.51006 11.0162 3.59128C10.877 4.11926 10.7433 4.64885 10.6123 5.17899C10.5944 5.25156 10.5717 5.25372 10.5116 5.2261C10.079 5.02683 9.63394 4.86708 9.16128 4.79452C9.01889 4.77286 8.87595 4.75932 8.73302 4.73983C8.68483 4.73333 8.67455 4.75337 8.67455 4.79723C8.67563 5.47466 8.67617 6.15209 8.674 6.82952C8.674 6.88908 8.70974 6.89937 8.75034 6.91345C9.07303 7.02446 9.39138 7.14684 9.69837 7.29738C10.1396 7.51344 10.5506 7.77283 10.8787 8.14647C11.2365 8.55369 11.4157 9.03455 11.4618 9.57173C11.51 10.1349 11.4287 10.6726 11.1602 11.1746C10.8408 11.7724 10.3497 12.1818 9.74222 12.4629C9.42874 12.608 9.09956 12.7071 8.76009 12.7672C8.68483 12.7802 8.674 12.811 8.67455 12.8766C8.67671 13.3406 8.67455 13.8047 8.67725 14.2688C8.67779 14.3381 8.66426 14.3646 8.58684 14.3636C8.13908 14.3598 7.69079 14.3608 7.24304 14.3636C7.17536 14.3641 7.15803 14.3424 7.15803 14.2769C7.1602 13.8475 7.15695 13.4181 7.16074 12.9887C7.16128 12.9128 7.14179 12.8906 7.06491 12.8863C6.31992 12.843 5.59658 12.699 4.90303 12.4174C4.78229 12.3681 4.66426 12.3112 4.54948 12.2495C4.51321 12.23 4.50075 12.2116 4.51158 12.1688C4.66318 11.5943 4.81369 11.0197 4.96204 10.4446C4.97829 10.3824 5.00373 10.4024 5.03947 10.4214C5.63557 10.7387 6.2674 10.9477 6.93768 11.036C7.01672 11.0463 7.09685 11.0501 7.1759 11.0614C7.23383 11.0695 7.24737 11.0479 7.24737 10.9927C7.24412 10.6147 7.2452 10.2383 7.2452 9.86252ZM8.68537 9.36325C8.67942 9.37245 8.67455 9.37678 8.67455 9.38112C8.674 9.83978 8.67401 10.2984 8.67292 10.7571C8.67292 10.8177 8.70216 10.7928 8.72598 10.7755C8.82452 10.7046 8.90736 10.619 8.96691 10.5123C9.17698 10.1333 9.05679 9.63725 8.68537 9.36325ZM7.23871 6.11147C7.23871 5.75354 7.23871 5.40589 7.23871 5.05174C6.92522 5.33982 6.92522 5.77249 7.23871 6.11147Z"
-                                fill="#FEFEFE"
-                              />
-                              <path
-                                d="M8.68433 9.36328C9.05574 9.63729 9.17539 10.1333 8.96586 10.5118C8.90631 10.619 8.82347 10.7046 8.72493 10.775C8.70111 10.7918 8.67188 10.8172 8.67188 10.7566C8.67242 10.2979 8.67296 9.83927 8.6735 9.38061C8.67404 9.37682 8.67891 9.37249 8.68433 9.36328Z"
-                                fill="#59BE59"
-                              />
-                              <path
-                                d="M7.23882 6.11149C6.92533 5.77305 6.92587 5.33984 7.23882 5.05176C7.23882 5.40591 7.23882 5.75355 7.23882 6.11149Z"
-                                fill="#59BE59"
-                              />
-                            </svg>
-                          </span>
-                          <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                            6392.99$
-                          </span>
-                        </div>
-                      </td>
-                      <td className="text-center py-4 px-2">
-                        <span className="text-base text-light-red whitespace-nowrap">
-                          -24.75 (11.5%)
-                        </span>
-                      </td>
-                      <td className="text-right py-4 px-2">
-                        <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                          343
-                        </span>
-                      </td>
-                      <td className="text-right py-4 px-2">
-                        <span className="text-base text-thin-light-gray whitespace-nowrap">
-                          2 Hours 1 min 30s
-                        </span>
-                      </td>
-                      <td className="text-right py-4 px-2">
-                        <button
-                          type="button"
-                          className="text-sm text-white bg-purple px-2.5 py-1.5 rounded-full"
-                        >
-                          Active
-                        </button>
-                      </td>
-                    </tr>
-                  ))
-                : currentTask.map((item, index) => (
-                    <tr
-                      key={index}
-                      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">
-                          <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
-                            <img
-                              src={dataImage3}
-                              alt="data"
-                              className="w-full h-full"
-                            />
-                          </div>
-                          <div className="flex flex-col">
-                            <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                              Mullican Computer Joy
-                            </h1>
-                            <span className="text-sm text-thin-light-gray">
-                              Owned by{" "}
-                              <span className="text-purple">Xoeyam</span>
-                            </span>
-                          </div>
-                        </div>
-                      </td>
-                      <td className="text-center py-4 px-2">
-                        <div className="flex space-x-1 items-center justify-center">
-                          <span>
-                            <svg
-                              width="18"
-                              height="18"
-                              viewBox="0 0 18 18"
-                              fill="none"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M9 18C13.9706 18 18 13.9706 18 9C18 4.02944 13.9706 0 9 0C4.02944 0 0 4.02944 0 9C0 13.9706 4.02944 18 9 18Z"
-                                fill="#627EEA"
-                              />
-                              <path
-                                d="M9.28125 2.25V7.23937L13.4983 9.12375L9.28125 2.25Z"
-                                fill="white"
-                                fillOpacity="0.602"
-                              />
-                              <path
-                                d="M9.28012 2.25L5.0625 9.12375L9.28012 7.23937V2.25Z"
-                                fill="white"
-                              />
-                              <path
-                                d="M9.28125 12.3582V15.7483L13.5011 9.91016L9.28125 12.3582Z"
-                                fill="white"
-                                fillOpacity="0.602"
-                              />
-                              <path
-                                d="M9.28012 15.7483V12.3576L5.0625 9.91016L9.28012 15.7483Z"
-                                fill="white"
-                              />
-                              <path
-                                d="M9.28125 11.572L13.4983 9.12348L9.28125 7.24023V11.572Z"
-                                fill="white"
-                                fillOpacity="0.2"
-                              />
-                              <path
-                                d="M5.0625 9.12348L9.28012 11.572V7.24023L5.0625 9.12348Z"
-                                fill="white"
-                                fillOpacity="0.602"
-                              />
-                            </svg>
-                          </span>
-                          <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                            7473 ETH
-                          </span>
-                        </div>
-                      </td>
-                      <td className="text-center py-4 px-2">
-                        <div className="flex space-x-1 items-center justify-center">
-                          <span>
-                            <svg
-                              width="16"
-                              height="16"
-                              viewBox="0 0 16 16"
-                              fill="none"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M7.55225 0C7.8457 0 8.13914 0 8.43205 0C8.44829 0.026534 8.47537 0.0151623 8.49756 0.0162453C9.28966 0.0649812 10.0606 0.220936 10.8013 0.505229C12.7699 1.26172 14.2323 2.58354 15.183 4.46638C15.5999 5.29218 15.8506 6.16997 15.9561 7.08891C15.9691 7.201 15.9621 7.3158 16 7.42465C16 7.80858 16 8.19251 16 8.57698C15.9778 8.5916 15.9854 8.61543 15.9838 8.63546C15.9475 9.10387 15.8744 9.56686 15.7515 10.0206C15.1787 12.1342 13.9524 13.7603 12.0818 14.8942C11.1516 15.4579 10.1397 15.8002 9.06064 15.941C8.89497 15.9626 8.72875 15.98 8.56308 15.9995C8.17217 15.9995 7.78127 15.9995 7.39036 16C7.3752 15.9789 7.35138 15.9865 7.33135 15.9848C6.96752 15.9545 6.60639 15.9009 6.25068 15.8197C4.77639 15.4829 3.48998 14.793 2.4131 13.7311C0.998917 12.3372 0.204656 10.6461 0.0270709 8.66687C0.0205739 8.59431 0.033568 8.51904 0 8.44972C0 8.15081 0 7.85244 0 7.55352C0.0265295 7.53403 0.0151597 7.50479 0.016784 7.47988C0.0730915 6.64162 0.251218 5.83044 0.564158 5.05066C1.10179 3.71043 1.93774 2.59058 3.07634 1.70142C4.33839 0.715876 5.77098 0.159745 7.36762 0.0270755C7.4288 0.0216604 7.49432 0.0341151 7.55225 0ZM7.24635 9.86252C7.24635 10.2383 7.24526 10.6147 7.24743 10.9905C7.24797 11.0457 7.23389 11.0679 7.17596 11.0593C7.09691 11.0479 7.01678 11.0446 6.93774 11.0338C6.26746 10.9461 5.63563 10.7371 5.03952 10.4192C5.00379 10.4002 4.97834 10.3802 4.9621 10.4425C4.81375 11.0176 4.66324 11.5926 4.51164 12.1666C4.50027 12.2094 4.51272 12.2278 4.54954 12.2473C4.66486 12.3096 4.78235 12.3665 4.90309 12.4152C5.5961 12.6968 6.31998 12.8408 7.06497 12.8842C7.14131 12.8885 7.16134 12.9112 7.1608 12.9865C7.15701 13.4159 7.16026 13.8453 7.15809 14.2747C7.15755 14.3397 7.17488 14.3619 7.2431 14.3614C7.69085 14.3581 8.13914 14.3576 8.5869 14.3614C8.66432 14.3619 8.67731 14.3359 8.67731 14.2666C8.67461 13.8026 8.67677 13.3385 8.67461 12.8744C8.67407 12.8089 8.68544 12.7786 8.76015 12.765C9.09962 12.7049 9.4288 12.6058 9.74228 12.4607C10.3498 12.1802 10.8408 11.7703 11.1603 11.1724C11.4288 10.6699 11.51 10.1327 11.4618 9.56957C11.4158 9.03239 11.2366 8.55207 10.8787 8.14431C10.5506 7.77121 10.1402 7.51129 9.69843 7.29522C9.39145 7.14523 9.07363 7.02284 8.75041 6.91129C8.7098 6.89721 8.67407 6.88693 8.67407 6.82736C8.67623 6.14993 8.67569 5.4725 8.67461 4.79507C8.67461 4.75121 8.68489 4.73117 8.73308 4.73767C8.87547 4.75717 9.01895 4.77016 9.16134 4.79236C9.634 4.86493 10.0796 5.02467 10.5116 5.22395C10.5717 5.25157 10.5945 5.24886 10.6123 5.17684C10.7434 4.6467 10.8771 4.1171 11.0162 3.58913C11.0379 3.5079 11.0244 3.47541 10.948 3.44076C10.2799 3.13751 9.57282 3.01025 8.8457 2.97614C8.78018 2.97289 8.76123 2.95556 8.76178 2.88896C8.76503 2.50232 8.76232 2.11568 8.76448 1.72904C8.76503 1.66785 8.75041 1.64727 8.68489 1.64727C8.23173 1.64998 7.77802 1.64998 7.32485 1.64727C7.26151 1.64673 7.24418 1.66406 7.24418 1.72742C7.24689 2.1433 7.24256 2.55972 7.24797 2.9756C7.24905 3.06116 7.2209 3.08661 7.14239 3.10285C6.73579 3.18679 6.34651 3.32271 5.98646 3.53281C5.20628 3.98822 4.72117 4.64724 4.61938 5.5586C4.51597 6.48837 4.83812 7.2427 5.57661 7.81778C6.05739 8.19251 6.60639 8.43781 7.1738 8.64683C7.2274 8.66633 7.24743 8.68907 7.24689 8.7481C7.24472 9.12066 7.24635 9.49159 7.24635 9.86252Z"
-                                fill="#59BE59"
-                              />
-                              <path
-                                d="M7.2452 9.86252C7.2452 9.49158 7.24358 9.12119 7.24683 8.75026C7.24737 8.69123 7.22734 8.66903 7.17374 8.64899C6.60687 8.43997 6.05787 8.19467 5.57655 7.81994C4.8386 7.24486 4.51591 6.49053 4.61933 5.56076C4.72057 4.6494 5.20568 3.99092 5.98641 3.53497C6.34645 3.32486 6.73519 3.18894 7.14233 3.10501C7.22084 3.08876 7.24899 3.06277 7.24791 2.97775C7.2425 2.56187 7.24683 2.14545 7.24412 1.72957C7.24358 1.66621 7.2609 1.64888 7.32479 1.64943C7.77796 1.65213 8.23167 1.65213 8.68483 1.64943C8.7498 1.64888 8.76442 1.66946 8.76442 1.73119C8.76171 2.11783 8.76496 2.50447 8.76171 2.89111C8.76117 2.95717 8.78012 2.97504 8.84563 2.97829C9.57276 3.01295 10.2793 3.13966 10.948 3.44291C11.0243 3.47757 11.0373 3.51006 11.0162 3.59128C10.877 4.11926 10.7433 4.64885 10.6123 5.17899C10.5944 5.25156 10.5717 5.25372 10.5116 5.2261C10.079 5.02683 9.63394 4.86708 9.16128 4.79452C9.01889 4.77286 8.87595 4.75932 8.73302 4.73983C8.68483 4.73333 8.67455 4.75337 8.67455 4.79723C8.67563 5.47466 8.67617 6.15209 8.674 6.82952C8.674 6.88908 8.70974 6.89937 8.75034 6.91345C9.07303 7.02446 9.39138 7.14684 9.69837 7.29738C10.1396 7.51344 10.5506 7.77283 10.8787 8.14647C11.2365 8.55369 11.4157 9.03455 11.4618 9.57173C11.51 10.1349 11.4287 10.6726 11.1602 11.1746C10.8408 11.7724 10.3497 12.1818 9.74222 12.4629C9.42874 12.608 9.09956 12.7071 8.76009 12.7672C8.68483 12.7802 8.674 12.811 8.67455 12.8766C8.67671 13.3406 8.67455 13.8047 8.67725 14.2688C8.67779 14.3381 8.66426 14.3646 8.58684 14.3636C8.13908 14.3598 7.69079 14.3608 7.24304 14.3636C7.17536 14.3641 7.15803 14.3424 7.15803 14.2769C7.1602 13.8475 7.15695 13.4181 7.16074 12.9887C7.16128 12.9128 7.14179 12.8906 7.06491 12.8863C6.31992 12.843 5.59658 12.699 4.90303 12.4174C4.78229 12.3681 4.66426 12.3112 4.54948 12.2495C4.51321 12.23 4.50075 12.2116 4.51158 12.1688C4.66318 11.5943 4.81369 11.0197 4.96204 10.4446C4.97829 10.3824 5.00373 10.4024 5.03947 10.4214C5.63557 10.7387 6.2674 10.9477 6.93768 11.036C7.01672 11.0463 7.09685 11.0501 7.1759 11.0614C7.23383 11.0695 7.24737 11.0479 7.24737 10.9927C7.24412 10.6147 7.2452 10.2383 7.2452 9.86252ZM8.68537 9.36325C8.67942 9.37245 8.67455 9.37678 8.67455 9.38112C8.674 9.83978 8.67401 10.2984 8.67292 10.7571C8.67292 10.8177 8.70216 10.7928 8.72598 10.7755C8.82452 10.7046 8.90736 10.619 8.96691 10.5123C9.17698 10.1333 9.05679 9.63725 8.68537 9.36325ZM7.23871 6.11147C7.23871 5.75354 7.23871 5.40589 7.23871 5.05174C6.92522 5.33982 6.92522 5.77249 7.23871 6.11147Z"
-                                fill="#FEFEFE"
-                              />
-                              <path
-                                d="M8.68433 9.36328C9.05574 9.63729 9.17539 10.1333 8.96586 10.5118C8.90631 10.619 8.82347 10.7046 8.72493 10.775C8.70111 10.7918 8.67188 10.8172 8.67188 10.7566C8.67242 10.2979 8.67296 9.83927 8.6735 9.38061C8.67404 9.37682 8.67891 9.37249 8.68433 9.36328Z"
-                                fill="#59BE59"
-                              />
-                              <path
-                                d="M7.23882 6.11149C6.92533 5.77305 6.92587 5.33984 7.23882 5.05176C7.23882 5.40591 7.23882 5.75355 7.23882 6.11149Z"
-                                fill="#59BE59"
-                              />
-                            </svg>
-                          </span>
-                          <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                            6392.99$
-                          </span>
-                        </div>
-                      </td>
-                      <td className="text-center py-4 px-2">
-                        <span className="text-base text-light-red whitespace-nowrap">
-                          -24.75 (11.5%)
-                        </span>
-                      </td>
-                      <td className="text-right py-4 px-2">
-                        <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                          343
-                        </span>
-                      </td>
-                      <td className="text-right py-4 px-2">
-                        <span className="text-base text-thin-light-gray whitespace-nowrap">
-                          2 Hours 1 min 30s
-                        </span>
-                      </td>
-                      <td className="text-right py-4 px-2">
-                        <button
-                          type="button"
-                          className="text-sm text-white bg-purple px-2.5 py-1.5 rounded-full"
-                        >
-                          Active
-                        </button>
-                      </td>
-                    </tr>
-                  ))}
-            </tbody>
-          </table> */}
-
-          <div className="overflow-y-scroll h-auto w-full">
             {tasksData?.length > 0 ? (
-              tasksData?.map((task, idx) => (
+              currentTask?.map((task, idx) => (
                 <div
                   className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] w-full flex justify-between items-center hover:bg-gray-50"
                   key={idx}
                 >
                   <div className=" py-4">
                     <div className="flex space-x-2 items-center">
-                      <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+                      <div className="w-full min-w-[60px] flex-[0.1] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
                         <img
                           src={dataImage1}
                           alt="data"
                           className="w-full h-full"
                         />
                       </div>
-                      <div className="flex flex-col">
+                      <div className="flex flex-col flex-[0.9]">
                         <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
                           {task?.title}
                         </h1>
@@ -494,19 +84,29 @@ export default function MyJobTable({ className }) {
                         </span>
                         <span className="text-sm text-thin-light-gray">
                           Price:
-                          <span className="text-purple ml-1">{task?.price}</span>
+                          <span className="text-purple ml-1">
+                            {Number(task?.price) * 0.01}
+                          </span>
                         </span>
                         <span className="text-sm text-thin-light-gray">
                           Duration:
-                          <span className="text-purple ml-1">{Number(task?.timeline_days) === 1 ? `${task?.timeline_days} day` : `${task?.timeline_days} day(s)`}</span>
+                          <span className="text-purple ml-1">
+                            {Number(task?.timeline_days) === 1
+                              ? `${task?.timeline_days} day`
+                              : `${task?.timeline_days} day(s)`}
+                          </span>
                         </span>
                         <span className="text-sm text-thin-light-gray">
                           Due Date:
-                          <span className="text-purple ml-1">{task?.delivery_date}</span>
+                          <span className="text-purple ml-1">
+                            {task?.delivery_date}
+                          </span>
                         </span>
                         <span className="text-sm text-thin-light-gray">
                           Confirmation:
-                          <span className="text-purple ml-1">{task?.contract}</span>
+                          <span className="text-purple ml-1">
+                            {task?.contract}
+                          </span>
                         </span>
                       </div>
                     </div>
@@ -515,6 +115,11 @@ export default function MyJobTable({ className }) {
                   <div className="text-right py-4 px-2">
                     <button
                       type="button"
+                      onClick={() => {
+                        navigate("/manage-active-job", {
+                          state: {...task, pathname},
+                        });
+                      }}
                       className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                     >
                       Manage
@@ -537,11 +142,11 @@ export default function MyJobTable({ className }) {
             prev={currentPage == 0 ? true : false}
             next={
               currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
-              data.length
+              tasksData?.length
                 ? true
                 : false
             }
-            data={data}
+            data={tasksData}
             start={indexOfFirstItem}
             stop={indexOfLastItem}
           />

src/components/MyTasks/index.jsx

@@ -4,14 +4,14 @@ import Layout from "../Partials/Layout";
 import MyJobTable from "./MyJobTable";
 import CommonHead from "../UserHeader/CommonHead";
 
-export default function MyTasks() {
+export default function MyTasks({commonHeadData}) {
   const [selectTab, setValue] = useState("today");
   const filterHandler = (value) => {
     setValue(value);
   };
   return (
     <Layout>
-      <CommonHead />
+      <CommonHead commonHeadData={commonHeadData} />
       <div className="notification-page w-full mb-10">
         <div className="notification-wrapper w-full">
           {/* heading */}

src/components/MyWallet/Balance.jsx

@@ -10,7 +10,7 @@ function Balance({wallet, coupon}) {
         <div className="content-wrapper">
             <div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
                 {/* WALLET SECTION */}
-                <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+                <div className="lg:w-3/4 w-full mb-10 lg:mb-0">
                     <div className="wallet w-full  md:p-8 p-4 h-full bg-white dark:bg-dark-white rounded-2xl shadow">
                         <div className='flex items-baseline justify-between'>
                             <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Wallet</h2>
@@ -42,9 +42,11 @@ function Balance({wallet, coupon}) {
                             <div className='w-full my-2 md:my-0 md:w-1/2 flex space-x-2 items-center justify-start md:justify-end'>
                                 {
                                     item.action_type != 'AC_AD_FD_ONLY' ?
-                                        <Link to='transfer-fund' className='text-base text-white px-3 py-1 bg-purple rounded-md hover:opacity-80'>Transfer</Link>:''
+                                        <Link to='transfer-fund' className='lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px]
+                                                                   items-center rounded-full relative  bg-purple pr-1.5 pl-4'>Transfer</Link>:''
                                 }
-                                <Link to='add-fund' className='text-base text-white px-3 py-1 bg-[orange] rounded-md hover:opacity-80'>Top Up</Link>
+                                <Link to='add-fund' className='lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px]
+                                                                   items-center rounded-full relative  bg-purple pr-1.5 pl-4'>+Add Credit</Link>
                             </div>
                         </div>
                         ))
@@ -68,8 +70,13 @@ function Balance({wallet, coupon}) {
                 {/* END OF WALLET SECTION */}
 
 
+
+            </div>
+
+            <div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
+
                 {/* COUPON SECTION */}
-                <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+                <div className="lg:w-3/4 w-full mb-10 lg:mb-0">
                     <div className="wallet w-full  md:p-8 p-4 h-full max-h-[500px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
                         <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Coupons</h2>
                         {coupon.loading ?
@@ -80,6 +87,7 @@ function Balance({wallet, coupon}) {
                     </div>
                 </div>
                 {/* END OF COUPON SECTION */}
+
             </div>
         </div>
       )

src/components/Partials/Layout.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, {useEffect, useState} from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
@@ -9,6 +9,8 @@ import Header from "./Header";
 import MobileSidebar from "./MobileSideBar";
 import RightSideBar from "./RightSideBar";
 import Sidebar from "./Sidebar";
+import usersService from "../../services/UsersService";
+
 
 export default function Layout({ children }) {
   const { drawer } = useSelector((state) => state.drawer);
@@ -20,14 +22,43 @@ export default function Layout({ children }) {
   };
   const navigate = useNavigate();
   const logOut = () => {
-    localStorage.removeItem("email");
+    localStorage.removeItem("session_token");
-    localStorage.clear();
+    localStorage.removeItem("member_id");
+    localStorage.removeItem("uid");
+    // localStorage.clear();
     // toast.success("Come Back Soon", {
     //   icon: `🙂`,
     // });
 
     navigate("/login", { replace: true });
   };
+
+  //---------------------------------------
+  /* LET U DEAL WITH JOB LIST - we need to centralize this list  */
+  const {jobListTable} = useSelector((state) => state.tableReload)
+  const [MyJobList, setMyJobList] = useState({loading: true, data:[]});
+  const api = new usersService();
+
+  const getMyJobList = async () => {
+    setMyJobList({loading: true, data:[]})
+    try {
+      const res = await api.getMyJobList();
+      setMyJobList({loading: false, data:res.data})
+      // setMyJobList(res.data);
+    } catch (error) {
+      setMyJobList({loading: false, data:[]})
+      console.log("Error getting mode");
+    }
+  };
+  useEffect(() => {
+    getMyJobList();
+  }, [jobListTable]);
+  // const getJobList = ()=>{
+  //   let  jobLists  = useSelector((state) => state.jobLists);
+  //   return jobLists;
+  // }
+  //---------------------------------------
+
   return (
     <>
       <div className="nft-main-wrapper-layout">

src/components/Partials/MobileSideBar.jsx

@@ -1,10 +1,12 @@
 import React, { useContext } from "react";
+import { useSelector } from "react-redux";
 import { NavLink } from "react-router-dom";
-import logo from "../../assets/images/wrenchboard.png"; //logo-2.svg";
+import {
-import logo3 from "../../assets/images/wrenchboard.png"; //logo-3.svg";
+  default as logo,
+  default as logo3,
+} from "../../assets/images/wrenchboard.png"; //logo-2.svg";
 import DarkModeContext from "../Contexts/DarkModeContext";
 import Icons from "../Helpers/Icons";
-import { useSelector } from "react-redux";
 
 export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
   let { userDetails } = useSelector((state) => state.userDetails);
@@ -81,174 +83,128 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
           <div className="items">
             <ul className="flex flex-col space-y-6">
               {/* Using mini component reduces the bulk amount of html */}
-              {[
-                { name: "Dashboard", path: "/" },
-                { name: "Market", path: "/market", bubble: noOfJobs },
-                { name: "My Task(s)", path: "/mytask" },
-              ].map(({ name, path, bubble }, idx) => (
               <ListItem
-                  key={idx}
+                title="Dashboard"
-                  title={name}
+                route="/"
-                  route={path}
+                sidebar={sidebar}
-                  bubble={bubble}
+                iconName="market"
-                  sidebar
+              />
+              {userDetails && userDetails?.account_type !== "FAMILY" && (
+                <ListItem
+                  title="Market"
+                  route="/market"
+                  bubble={noOfJobs}
+                  sidebar={sidebar}
+                  iconName="market"
+                />
+              )}
+              <ListItem
+                title="My Task(s)"
+                route="/mytask"
+                sidebar={sidebar}
+                iconName="market"
               />
-              ))}
-              {/*<li className="item group">*/}
-              {/*  <NavLink*/}
-              {/*    to="/notification"*/}
-              {/*    className="nav-item flex items-center justify-start space-x-3.5"*/}
-              {/*  >*/}
-              {/*    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">*/}
-              {/*      <Icons name="notification" />*/}
-              {/*    </span>*/}
-              {/*    <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">*/}
-              {/*      Messages*/}
-              {/*    </span>*/}
-              {/*  </NavLink>*/}
-              {/*</li>*/}
-              {/*<li className="item group">*/}
-              {/*  <NavLink*/}
-              {/*      to="/my-wallet"*/}
-              {/*      className="nav-item flex items-center justify-start space-x-3.5"*/}
-              {/*  >*/}
-              {/*    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">*/}
-              {/*      <Icons name="wallet-two" />*/}
-              {/*    </span>*/}
-              {/*    <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">*/}
-              {/*       My Wallet*/}
-              {/*    </span>*/}
-              {/*  </NavLink>*/}
-              {/*</li>*/}
-              {/*<li className="item group">*/}
-              {/*  <NavLink*/}
-              {/*    to="/resources"*/}
-              {/*    className="nav-item flex items-center justify-start space-x-3.5"*/}
-              {/*  >*/}
-              {/*    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">*/}
-              {/*      <Icons name="star" />*/}
-              {/*    </span>*/}
-              {/*    <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">*/}
-              {/*      Resources*/}
-              {/*    </span>*/}
-              {/*  </NavLink>*/}
-              {/*</li>*/}
-              {/*<li className="item group">*/}
-              {/*  <NavLink*/}
-              {/*    to="/history"*/}
-              {/*    className="nav-item flex items-center justify-start space-x-3.5"*/}
-              {/*  >*/}
-              {/*    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">*/}
-              {/*      <Icons name="history" />*/}
-              {/*    </span>*/}
-              {/*    <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">*/}
-              {/*      History*/}
-              {/*    </span>*/}
-              {/*  </NavLink>*/}
-              {/*</li>*/}
-              {/*<li className="item group">*/}
-              {/*  <NavLink*/}
-              {/*    to="/referral"*/}
-              {/*    className="nav-item flex items-center justify-start space-x-3.5"*/}
-              {/*  >*/}
-              {/*    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">*/}
-              {/*      <Icons name="history" />*/}
-              {/*    </span>*/}
-              {/*    <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">*/}
-              {/*    Refer a Friend*/}
-              {/*    </span>*/}
-              {/*  </NavLink>*/}
-              {/*</li>*/}
             </ul>
           </div>
         </div>
 
-        {!userDetails.post_jobs ? (
+        {userDetails?.account_type !== "FAMILY" && (
-          <div className="setting-item">
+          <>
-            <div className="top-platform bg-pink dark:bg-dark-white   rounded-2xl p-16 2xl:w-[180px] w-full 2xl:mb-10 2xl:border-none  border ">
+            {!userDetails?.post_jobs ? (
+              <div className="menu-setting-items mb-11">
+                {/* menus item */}
+                <div
+                  className={`menu-item transition-all duration-300 ease-in-out bg-pink dark:bg-dark-white rounded-2xl p-3 ${
+                    sidebar ? "mb-14" : "rounded-none p-0"
+                  }`}
+                >
+                  <div className="items">
+                    <div className="heading mb-5">
+                      <h1 className="title text-xl font-bold text-purple">
+                        Job Post
+                      </h1>
+                    </div>
+                    <ul className="flex flex-col space-y-6">
+                      <li className="item group">
                         <NavLink
                           to="/start-job"
-                className="nav-item flex items-center justify-start space-x-3.5"
+                          className={`nav-item flex items-center ${
+                            ((navData) => (navData.isActive ? "active" : ""),
+                            sidebar
+                              ? "justify-start space-x-3.5"
+                              : "justify-center")
+                          }`}
+                        >
+                          <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
+                            <Icons name="people-two" />
+                          </span>
+                          <span
+                            className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                              sidebar ? "active flex-1" : "w-0"
+                            }`}
                           >
-                <span className="item-content relative group-hover:text-purple text-xl transition-all duration-300 ease-in-out text-lighter-gray font-medium active flex-1">
                             Enable Job Post
                           </span>
                         </NavLink>
+                      </li>
+                    </ul>
+                  </div>
                 </div>
               </div>
             ) : jobLists?.result_list?.length ? (
               <div className="setting-item">
                 <div className="heading mb-5">
-              <h1 className="title text-xl font-bold text-purple">My Jobs</h1>
+                  <h1 className="title text-xl font-bold text-purple">
+                    My Jobs
+                  </h1>
                 </div>
                 <div className="items">
                   <ul className="flex flex-col space-y-6">
-                <li className="item group">
+                    {[
-                  <NavLink
+                      { name: "List", path: "/myjobs", iconName: "people-two" },
-                    to="/myjobs"
+                      {
-                    className="nav-item flex items-center justify-start space-x-3.5"
+                        name: "Pending",
-                  >
+                        path: "/my-pending-jobs",
-                    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">
+                        iconName: "people-two",
-                      <Icons name="people-two" />
+                      },
-                    </span>
+                      {
-                    <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
+                        name: "Active",
-                      My Jobs
+                        path: "/my-active-jobs",
-                    </span>
+                        iconName: "people-two",
-                  </NavLink>
+                      },
-                </li>
+                    ].map(({ name, path, iconName }, idx) => (
-                <li className="item group">
+                      <ListItem
-                  <NavLink
+                        key={idx}
-                    to="/my-active-jobs"
+                        title={name}
-                    className="nav-item flex items-center justify-start space-x-3.5"
+                        route={path}
-                  >
+                        sidebar={sidebar}
-                    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">
+                        iconName={iconName}
-                      <Icons name="setting" />
+                      />
-                    </span>
+                    ))}
-                    <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
-                      Pending
-                    </span>
-                  </NavLink>
-                </li>
-                <li className="item group">
-                  <NavLink
-                    to="/my-active-jobs"
-                    className="nav-item flex items-center justify-start space-x-3.5"
-                  >
-                    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">
-                      <Icons name="setting" />
-                    </span>
-                    <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
-                      Active Job(s)
-                    </span>
-                  </NavLink>
-                </li>
                   </ul>
                 </div>
               </div>
             ) : (
               <div className="setting-item">
                 <div className="heading mb-5">
-              <h1 className="title text-xl font-bold text-purple">My Jobs</h1>
+                  <h1 className="title text-xl font-bold text-purple">
+                    My Jobs
+                  </h1>
                 </div>
                 <div className="items">
                   <ul className="flex flex-col space-y-6">
-                <li className="item group">
+                    <ListItem
-                  <NavLink
+                      title="Add Job"
-                    to="/add-job"
+                      route="/add-job"
-                    className="nav-item flex items-center justify-start space-x-3.5"
+                      iconName="people-two"
-                  >
+                      sidebar={sidebar}
-                    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">
+                    />
-                      <Icons name="people-two" />
-                    </span>
-                    <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
-                      My Jobs
-                    </span>
-                  </NavLink>
-                </li>
                   </ul>
                 </div>
               </div>
             )}
+          </>
+        )}
       </div>
       {/* signout area */}
       {sidebar ? (

src/components/Partials/RightSideBar.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { NavLink } from "react-router-dom";
+import { useSelector } from "react-redux";
 //import SideStatistics from "./SideStatistics";
 
 export default function RightSideBar() {
@@ -30,6 +31,8 @@ export default function RightSideBar() {
     setRateStaticsDropdown(!filterRateStatics);
   };
 
+  const { userDetails } = useSelector((state) => state?.userDetails);
+
   return (
     <>
       <div className="right-sidebar-wrapper overflow-y-scroll overflow-style-none 2xl:fixed 2xl:grid-cols-none 2xl:block grid lg:grid-cols-2 grid-cols-1 xl:gap-7 gap-4 h-full 2xl:pb-96">
@@ -43,34 +46,6 @@ export default function RightSideBar() {
           </div>
 
           <div className="platform-list">
-            {/*<div className="item flex space-x-3 items-center mb-4">*/}
-            {/*  /!* image *!/*/}
-            {/*  <div className="w-8 h-8 rounded-full">*/}
-            {/*    <svg*/}
-            {/*        width="40"*/}
-            {/*        height="41"*/}
-            {/*        viewBox="0 0 40 41"*/}
-            {/*        fill="none"*/}
-            {/*        xmlns="http://www.w3.org/2000/svg"*/}
-            {/*    >*/}
-            {/*      <path*/}
-            {/*          d="M40 20.7556C40.0074 31.7371 31.0431 40.6838 20.0369 40.6912C8.95687 40.6838 0 31.7812 0 20.741C0 9.69341 8.92002 0.80542 20.0295 0.80542C31.08 0.80542 39.9926 9.7081 40 20.7556ZM15.4736 10.3178C15.5326 10.4206 15.5621 10.5088 15.6211 10.5749C16.2772 11.4784 16.808 12.448 17.2282 13.4763C18.6878 17.0242 18.5256 20.3957 16.174 23.5396C16.0855 23.6571 15.9307 23.7673 16.0413 23.9509C16.1445 24.1125 16.314 24.0758 16.4689 24.0758C17.0807 24.0758 17.6926 24.0831 18.3045 24.0758C18.5477 24.0684 18.6804 24.1199 18.6731 24.4063C18.6583 25.016 18.6657 25.6257 18.6731 26.2353C18.6731 26.4557 18.5993 26.5292 18.3708 26.5218C17.7663 26.5145 17.1471 26.4778 16.5426 26.5145C14.8765 26.6173 14.39 26.0591 13.7928 24.59C13.7707 24.5312 13.7486 24.4724 13.7265 24.4137C13.6602 24.1713 13.5127 24.0758 13.2473 24.0684C11.397 24.0244 9.54663 23.973 7.69628 23.8995C7.36454 23.8848 7.26871 23.9803 7.28345 24.3108C7.37191 26.0517 7.96167 27.5722 9.09694 28.9164C9.94471 29.9228 10.962 30.5618 12.2374 30.8263C13.6528 31.1127 15.0903 31.267 16.5352 31.3037C19.2186 31.3698 21.8946 31.1201 24.5853 31.098C25.8459 31.0833 26.878 30.5618 27.711 29.6069C28.3229 28.9091 28.8316 28.1452 29.355 27.3812C30.0479 26.3676 30.7409 25.2804 31.9278 24.8618C32.7313 24.5753 32.7976 24.1272 32.7313 23.4808C32.7313 23.4514 32.7313 23.4147 32.7313 23.3853C32.7682 22.9593 32.5765 22.8785 32.1858 22.9887C30.6082 23.4074 29.0306 23.804 27.453 24.2227C26.8633 24.377 26.2514 24.5532 25.8386 25.038C24.9466 26.1031 23.7892 26.5218 22.4327 26.5365C21.1353 26.5512 21.1353 26.5732 21.1353 25.2731C21.1353 24.1933 21.1353 24.1786 22.2042 24.2007C22.7792 24.2154 23.2805 24.1346 23.7154 23.7159C24.5042 22.9666 25.2046 22.1513 25.6911 21.1743C26.185 20.1754 26.3472 19.1397 26.045 18.0378C25.7059 16.7891 25.0866 15.702 24.2905 14.703C23.4427 13.6453 22.4254 12.7711 21.3859 11.9044C21.1943 11.7501 21.1279 11.5812 21.1353 11.3461C21.15 10.7218 21.1426 10.0974 21.1353 9.47305C21.1279 8.71646 20.5824 8.14352 19.8968 8.15087C19.1891 8.16556 18.6878 8.70912 18.6731 9.48039C18.6657 9.8697 18.6583 10.2664 18.6731 10.6557C18.6878 10.9421 18.5993 11.0082 18.3266 10.9274C17.6926 10.7438 17.0586 10.5675 16.4173 10.4206C16.1297 10.3545 15.8349 10.2296 15.4736 10.3178ZM8.63251 21.7179C8.86841 21.7326 9.00848 21.7473 9.14117 21.7473C10.7409 21.7473 12.3406 21.7326 13.9403 21.7546C14.5522 21.762 14.9871 21.5269 15.3262 21.0348C15.7833 20.3737 16.0781 19.6612 16.0487 18.8458C15.9749 16.936 15.5547 15.107 14.8102 13.3514C14.5964 12.8519 14.4563 12.8593 14.1688 13.2927C13.0188 15.0409 11.8614 16.7891 10.7114 18.5447C10.0405 19.5804 9.36233 20.6087 8.63251 21.7179Z"*/}
-            {/*          fill="#2481E1"*/}
-            {/*      />*/}
-            {/*      <path*/}
-            {/*          d="M15.4729 10.3178C15.8267 10.2223 16.129 10.3472 16.4165 10.4207C17.0578 10.5676 17.6918 10.7439 18.3258 10.9275C18.5986 11.0083 18.687 10.9422 18.6723 10.6557C18.6502 10.2664 18.6649 9.87709 18.6723 9.48044C18.6797 8.70917 19.181 8.15826 19.896 8.15091C20.5816 8.13622 21.1271 8.70916 21.1345 9.47309C21.1419 10.0975 21.1419 10.7218 21.1345 11.3462C21.1271 11.5886 21.2009 11.7502 21.3852 11.9044C22.4246 12.7638 23.4419 13.638 24.2897 14.703C25.0859 15.702 25.7051 16.7892 26.0442 18.0379C26.3465 19.1397 26.1843 20.1754 25.6904 21.1744C25.2038 22.1587 24.5035 22.9667 23.7147 23.7159C23.2797 24.1346 22.7711 24.208 22.2034 24.2007C21.1345 24.1787 21.1345 24.1934 21.1345 25.2731C21.1345 26.5733 21.1345 26.5512 22.432 26.5366C23.7884 26.5219 24.9458 26.1032 25.8378 25.0381C26.2506 24.5459 26.8551 24.377 27.4522 24.2227C29.0298 23.8041 30.6074 23.4074 32.185 22.9887C32.5757 22.8859 32.7674 22.9593 32.7305 23.3854C32.7305 23.4147 32.7305 23.4515 32.7305 23.4809C32.7969 24.1346 32.7305 24.5753 31.927 24.8618C30.7401 25.2878 30.0472 26.3676 29.3542 27.3813C28.8308 28.1452 28.3221 28.9091 27.7103 29.607C26.8772 30.5545 25.8452 31.0834 24.5846 31.0981C21.9012 31.1275 19.2252 31.3699 16.5344 31.3037C15.0895 31.267 13.6594 31.1128 12.2366 30.8263C10.9539 30.5692 9.94395 29.9228 9.09618 28.9165C7.96091 27.5723 7.37115 26.0518 7.28269 24.3109C7.26795 23.973 7.36378 23.8849 7.69552 23.8995C9.54587 23.9657 11.3962 24.0171 13.2466 24.0685C13.512 24.0758 13.6594 24.164 13.7257 24.4137C13.7405 24.4725 13.7626 24.5312 13.7921 24.59C14.3892 26.0591 14.8758 26.6174 16.5418 26.5145C17.1537 26.4778 17.7655 26.5145 18.3774 26.5366C18.6059 26.5439 18.6797 26.4704 18.6797 26.2501C18.6723 25.6404 18.6649 25.0307 18.6797 24.4211C18.687 24.1346 18.5617 24.0832 18.3111 24.0905C17.6992 24.0979 17.0873 24.0905 16.4755 24.0905C16.3207 24.0905 16.1511 24.1199 16.0479 23.9657C15.9299 23.782 16.0921 23.6792 16.1806 23.5543C18.5249 20.4031 18.6944 17.0389 17.2348 13.491C16.8072 12.4553 16.2838 11.4931 15.6277 10.5896C15.5687 10.5088 15.5319 10.4207 15.4729 10.3178Z"*/}
-            {/*          fill="#FEFEFE"*/}
-            {/*      />*/}
-            {/*    </svg>*/}
-            {/*  </div>*/}
-            {/*  /!* name *!/*/}
-            {/*  <div>*/}
-            {/*    <p className="text-thin-light-gray text-base font-medium">*/}
-            {/*      OpenSea*/}
-            {/*    </p>*/}
-            {/*  </div>*/}
-            {/*  /!* action *!/*/}
-            {/*</div>*/}
             <div className="item flex space-x-3 items-center mb-4">
               {/* image */}
               <div className="w-8 h-8 rounded-full">
@@ -102,6 +77,8 @@ export default function RightSideBar() {
               </div>
               {/* action */}
             </div>
+            {userDetails && userDetails?.account_type !== "FAMILY" && (
+              <>
                 <div className="item flex space-x-3 items-center mb-4">
                   {/* image */}
                   <div className="w-8 h-8 rounded-full">
@@ -179,6 +156,8 @@ export default function RightSideBar() {
                     </p>
                   </div>
                 </div>
+              </>
+            )}
           </div>
         </div>
         {/*<SideStatistics />*/}

src/components/Partials/Sidebar.jsx

@@ -1,16 +1,19 @@
 import React, { useContext, useEffect } from "react";
+import { useSelector } from "react-redux";
 import { NavLink } from "react-router-dom";
-import logo from "../../assets/images/wrenchboard.png"; //logo-2.svg";
+import {
-import logo3 from "../../assets/images/wrenchboard.png"; //logo-3.svg";
+  default as logo,
+  default as logo3,
+} from "../../assets/images/wrenchboard.png"; //logo-2.svg";
 import DarkModeContext from "../Contexts/DarkModeContext";
 import Icons from "../Helpers/Icons";
-import { useSelector } from "react-redux";
 
 export default function Sidebar({ sidebar, action, logoutModalHandler }) {
   const darkMode = useContext(DarkModeContext);
 
   let { userDetails } = useSelector((state) => state.userDetails);
-
+  console.log('user-details for job',userDetails);
+  //const jobLists =  getJobList(); // pass from upper - we need in a lot of places
   let { jobLists } = useSelector((state) => state.jobLists);
   const marketData = jobLists?.result_list;
   let noOfJobs = marketData?.length <= 0 ? "0" : marketData?.length;
@@ -26,7 +29,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
         elm.classList.remove("active");
       });
     }
-  });
+  }, [jobLists]);
   return (
     <div className="w-full h-full">
       {/* logo-area */}
@@ -102,197 +105,73 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
           <div className="items">
             <ul className="flex flex-col space-y-6">
               {/* Using mini component reduces the bulk amount of html */}
-              {[
-                { name: "Dashboard", path: "/" },
-                { name: "Market", path: "/market", bubble: noOfJobs },
-                { name: "My Task(s)", path: "/mytask" },
-              ].map(({ name, path, bubble }, idx) => (
               <ListItem
-                  key={idx}
+                title="Dashboard"
-                  title={name}
+                route="/"
-                  route={path}
+                sidebar={sidebar}
-                  bubble={bubble}
+                iconName="market"
-                  sidebar = {sidebar}
+              />
+              {userDetails && userDetails?.account_type !== "FAMILY" && (
+                <ListItem
+                  title="Market"
+                  route="/market"
+                  bubble={noOfJobs}
+                  sidebar={sidebar}
+                  iconName="market"
+                />
+              )}
+              <ListItem
+                title="My Task(s)"
+                route="/mytask"
+                sidebar={sidebar}
+                iconName="market"
               />
-              ))}
-              {/*<li className="item group">*/}
-              {/*  <NavLink*/}
-              {/*    to="/notification"*/}
-              {/*    className={`nav-item flex items-center  ${*/}
-              {/*      ((navData) => (navData.isActive ? "active" : ""),*/}
-              {/*      sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
-              {/*    }`}*/}
-              {/*  >*/}
-              {/*    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">*/}
-              {/*      <Icons name="notification-setting" />*/}
-              {/*    </span>*/}
-              {/*    <span*/}
-              {/*      className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${*/}
-              {/*        sidebar ? "active flex-1" : "w-0"*/}
-              {/*      }`}*/}
-              {/*    >*/}
-              {/*     Messages*/}
-              {/*    </span>*/}
-              {/*  </NavLink>*/}
-              {/*</li>*/}
-              {/*<li className="item group">*/}
-              {/*  <NavLink*/}
-              {/*    to="/my-wallet"*/}
-              {/*    className={`nav-item flex items-center  ${*/}
-              {/*      ((navData) => (navData.isActive ? "active" : ""),*/}
-              {/*      sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
-              {/*    }`}*/}
-              {/*  >*/}
-              {/*    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">*/}
-              {/*      <Icons name="wallet-two" />*/}
-              {/*    </span>*/}
-              {/*    <span*/}
-              {/*      className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${*/}
-              {/*        sidebar ? "active flex-1" : "w-0"*/}
-              {/*      }`}*/}
-              {/*    >*/}
-              {/*     My Wallet*/}
-              {/*    </span>*/}
-              {/*  </NavLink>*/}
-              {/*</li>*/}
-              {/*<li className="item group">*/}
-              {/*  <NavLink*/}
-              {/*    to="/resources"*/}
-              {/*    className={`nav-item flex items-center ${*/}
-              {/*      ((navData) => (navData.isActive ? "active" : ""),*/}
-              {/*      sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
-              {/*    }`}*/}
-              {/*  >*/}
-              {/*    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">*/}
-              {/*      <Icons name="star" />*/}
-              {/*    </span>*/}
-              {/*    <span*/}
-              {/*      className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${*/}
-              {/*        sidebar ? "active flex-1" : "w-0"*/}
-              {/*      }`}*/}
-              {/*    >*/}
-              {/*      Resources*/}
-              {/*    </span>*/}
-              {/*  </NavLink>*/}
-              {/*</li>*/}
-
-              {/*<li className="item group">*/}
-              {/*  <NavLink*/}
-              {/*    to="/history"*/}
-              {/*    className={`nav-item flex items-center ${*/}
-              {/*      ((navData) => (navData.isActive ? "active" : ""),*/}
-              {/*      sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
-              {/*    }`}*/}
-              {/*  >*/}
-              {/*    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">*/}
-              {/*      <Icons name="history" />*/}
-              {/*    </span>*/}
-              {/*    <span*/}
-              {/*      className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${*/}
-              {/*        sidebar ? "active flex-1" : "w-0"*/}
-              {/*      }`}*/}
-              {/*    >*/}
-              {/*      History*/}
-              {/*    </span>*/}
-              {/*  </NavLink>*/}
-              {/*</li>*/}
-
-              {/*<li className="item group">*/}
-              {/*  <NavLink*/}
-              {/*    to="/referral"*/}
-              {/*    className={`nav-item flex items-center ${*/}
-              {/*      ((navData) => (navData.isActive ? "active" : ""),*/}
-              {/*      sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
-              {/*    }`}*/}
-              {/*  >*/}
-              {/*    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">*/}
-              {/*      <Icons name="history" />*/}
-              {/*    </span>*/}
-              {/*    <span*/}
-              {/*      className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${*/}
-              {/*        sidebar ? "active flex-1" : "w-0"*/}
-              {/*      }`}*/}
-              {/*    >*/}
-              {/*      Refer a Friend*/}
-              {/*    </span>*/}
-              {/*  </NavLink>*/}
-              {/*</li>*/}
             </ul>
           </div>
         </div>
 
-        {/* <div className="setting-item">
-         <div class="heading bg-pink dark:bg-dark-white   rounded-2xl p-6 2xl:w-[180px] w-full 2xl:mb-10 2xl:border-none  border ">
-           <NavLink to="/acc-family">
-             <span className="item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium active flex-1">
-               Family Account
-             </span>
-           </NavLink>
-         </div>
-        </div> */}
-
         {/* menu and settings item */}
+        {userDetails?.account_type !== "FAMILY" && (
           <div className="menu-setting-items mb-11">
             {/* menus item */}
-          <div className={`menu-item transition-all duration-300 ease-in-out ${
+            <div
+              className={`menu-item transition-all duration-300 ease-in-out ${
                 sidebar ? "mb-14" : ""
-            }`}>
+              }`}
-            {/* <div className="heading mb-5 bg-dark-blue   rounded-2xl p-2 2xl:w-[180px] w-full 2xl:mb-10 2xl:border-none  border">
+            >
-              <NavLink to="/acc-family">
-                <h1 className="title text-xl font-bold text-purple">
-                  Family Corner
-                </h1>
-              </NavLink>
-            </div> */}
               <div className="items">
                 <div className="heading mb-5">
-                  <h1 className="title text-xl font-bold text-purple">Family</h1>
+                  <h1 className="title text-xl font-bold text-purple">
+                    Family
+                  </h1>
                 </div>
                 <ul className="flex flex-col space-y-6">
-                  <li className="item group">
+                  <ListItem
-                    <NavLink
+                    title="Family Corner"
-                      to="/acc-family"
+                    route="/acc-family"
-                      className={`nav-item flex items-center ${
+                    iconName="people-two"
-                        ((navData) => (navData.isActive ? "active" : ""),
+                    sidebar={sidebar}
-                        sidebar ? "justify-start space-x-3.5" : "justify-center")
+                  />
-                      }`}
-                    >
-                      <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                        <Icons name="people-two" />
-                      </span>
-                      <span
-                        className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
-                          sidebar ? "active flex-1" : "w-0"
-                        }`}
-                      >
-                        Family Corner
-                      </span>
-                    </NavLink>
-                  </li>
                 </ul>
               </div>
             </div>
           </div>
-
+        )}
-        {!userDetails.post_jobs ? (
+        {userDetails?.account_type !== "FAMILY" && (
-          
+          <>
+            {!userDetails?.post_jobs ? (
               <div className="menu-setting-items mb-11">
                 {/* menus item */}
-            <div className={`menu-item transition-all duration-300 ease-in-out bg-pink dark:bg-dark-white rounded-2xl p-3 ${
+                <div
+                  className={`menu-item transition-all duration-300 ease-in-out bg-pink dark:bg-dark-white rounded-2xl p-3 ${
                     sidebar ? "mb-14" : "rounded-none p-0"
-              }`}>
+                  }`}
-              {/* <div className="setting-item">
+                >
-                <div className="top-platform bg-pink dark:bg-dark-white rounded-2xl p-16 2xl:w-[180px] w-full 2xl:mb-10 2xl:border-none border">
-                  <NavLink to="/start-job">
-                    <span className="item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium active flex-1">
-                      Enable Job Post
-                    </span>
-                  </NavLink>
-                </div>
-              </div> */}
                   <div className="items">
                     <div className="heading mb-5">
-                  <h1 className="title text-xl font-bold text-purple">Job Post</h1>
+                      <h1 className="title text-xl font-bold text-purple">
+                        Job Post
+                      </h1>
                     </div>
                     <ul className="flex flex-col space-y-6">
                       <li className="item group">
@@ -300,7 +179,9 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                           to="/start-job"
                           className={`nav-item flex items-center ${
                             ((navData) => (navData.isActive ? "active" : ""),
-                        sidebar ? "justify-start space-x-3.5" : "justify-center")
+                            sidebar
+                              ? "justify-start space-x-3.5"
+                              : "justify-center")
                           }`}
                         >
                           <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
@@ -320,146 +201,65 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                 </div>
               </div>
             ) : jobLists?.result_list?.length ? (
+              <>
                 <div className="setting-item">
                   <div className="heading mb-5">
-              <h1 className="title text-xl font-bold text-purple">My Jobs</h1>
+                    <h1 className="title text-xl font-bold text-purple">
+                      My Jobs
+                    </h1>
                   </div>
                   <div className="items">
                     <ul className="flex flex-col space-y-6">
-                <li className="item group">
+                      {[
-                  <NavLink
+                        {
-                    to="/myjobs"
+                          name: "List",
-                    className={`nav-item flex items-center ${
+                          path: "/myjobs",
-                      ((navData) => (navData.isActive ? "active" : ""),
+                          iconName: "people-two",
-                      sidebar ? "justify-start space-x-3.5" : "justify-center")
+                        },
-                    }`}
+                        {
-                  >
+                          name: "Pending",
-                    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
+                          path: "/my-pending-jobs",
-                      <Icons name="people-two" />
+                          iconName: "people-two",
-                    </span>
+                        },
-                    <span
+                        {
-                      className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                          name: "Active",
-                        sidebar ? "active flex-1" : "w-0"
+                          path: "/my-active-jobs",
-                      }`}
+                          iconName: "people-two",
-                    >
+                        },
-                      List
+                      ].map(({ name, path, iconName }, idx) => (
-                    </span>
+                        <ListItem
-                  </NavLink>
+                          key={idx}
-                </li>
+                          title={name}
-                <li className="item group">
+                          route={path}
-                  <NavLink
+                          sidebar={sidebar}
-                    to="/my-pending-jobs"
+                          iconName={iconName}
-                    className={`nav-item flex items-center ${
+                        />
-                      ((navData) => (navData.isActive ? "active" : ""),
+                      ))}
-                      sidebar ? "justify-start space-x-3.5" : "justify-center")
-                    }`}
-                  >
-                    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                      <Icons name="people-two" />
-                    </span>
-                    <span
-                      className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
-                        sidebar ? "active flex-1" : "w-0"
-                      }`}
-                    >
-                      Pending
-                    </span>
-                  </NavLink>
-                </li>
-                <li className="item group">
-                  <NavLink
-                    to="/my-active-jobs"
-                    className={`nav-item flex items-center ${
-                      ((navData) => (navData.isActive ? "active" : ""),
-                      sidebar ? "justify-start space-x-3.5" : "justify-center")
-                    }`}
-                  >
-                    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                      <Icons name="people-two" />
-                    </span>
-                    <span
-                      className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
-                        sidebar ? "active flex-1" : "w-0"
-                      }`}
-                    >
-                      Active
-                    </span>
-                  </NavLink>
-                </li>
-                {/*<li className="item group">*/}
-                {/*  <NavLink*/}
-                {/*    to="/profile"*/}
-                {/*    className={`nav-item flex items-center ${*/}
-                {/*      ((navData) => (navData.isActive ? "active" : ""),*/}
-                {/*      sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
-                {/*    }`}*/}
-                {/*  >*/}
-                {/*    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">*/}
-                {/*      <Icons name="people-two" />*/}
-                {/*    </span>*/}
-                {/*    <span*/}
-                {/*      className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${*/}
-                {/*        sidebar ? "active flex-1" : "w-0"*/}
-                {/*      }`}*/}
-                {/*    >*/}
-                {/*      My Profile*/}
-                {/*    </span>*/}
-                {/*  </NavLink>*/}
-                {/*</li>*/}
-                {/*<li className="item group">*/}
-                {/*  <NavLink*/}
-                {/*    to="/settings"*/}
-                {/*    className={`nav-item flex items-center ${*/}
-                {/*      ((navData) => (navData.isActive ? "active" : ""),*/}
-                {/*      sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
-                {/*    }`}*/}
-                {/*  >*/}
-                {/*    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">*/}
-                {/*      <Icons name="setting" />*/}
-                {/*    </span>*/}
-                {/*    <span*/}
-                {/*      className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${*/}
-                {/*        sidebar ? "active flex-1" : "w-0"*/}
-                {/*      }`}*/}
-                {/*    >*/}
-                {/*      Settings*/}
-                {/*    </span>*/}
-                {/*  </NavLink>*/}
-                {/*</li>*/}
                     </ul>
                   </div>
                 </div>
+              </>
             ) : (
               <div className="setting-item">
                 <div className="heading mb-5">
-              <h1 className="title text-xl font-bold text-purple">My Jobs</h1>
+                  <h1 className="title text-xl font-bold text-purple">
+                    My Jobs
+                  </h1>
                 </div>
                 <div className="items">
                   <ul className="flex flex-col space-y-6">
-                <li className="item group">
+                    <ListItem
-                  <NavLink
+                      title="Add Job"
-                    to="/add-job"
+                      route="/add-job"
-                    className={`nav-item flex items-center ${
+                      iconName="people-two"
-                      ((navData) => (navData.isActive ? "active" : ""),
+                      sidebar={sidebar}
-                      sidebar ? "justify-start space-x-3.5" : "justify-center")
+                    />
-                    }`}
-                  >
-                    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                      <Icons name="people-two" />
-                    </span>
-                    <span
-                      className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
-                        sidebar ? "active flex-1" : "w-0"
-                      }`}
-                    >
-                      Add Job
-                    </span>
-                  </NavLink>
-                </li>
                   </ul>
                 </div>
               </div>
             )}
+          </>
+        )}
       </div>
       {/* signout area */}
       {sidebar ? (
@@ -526,9 +326,9 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
   );
 }
 
-const ListItem = ({ sidebar, route, title, bubble }) => {
+const ListItem = ({ sidebar, route, title, bubble, iconName }) => {
   return (
-    <li className="item group">
+    <li className={`item group`}>
       <NavLink
         to={route}
         className={`nav-item flex items-center  ${
@@ -537,7 +337,7 @@ const ListItem = ({ sidebar, route, title, bubble }) => {
         }`}
       >
         <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-          <Icons name="market" />
+          <Icons name={iconName} />
         </span>
         <span
           className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${

src/components/UserHeader/CommonHead.jsx

@@ -1,7 +1,9 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
-export default function CommonHead({ className }) {
+export default function CommonHead({ className,commonHeadData }) {
+    const vvv=  commonHeadData();
+    console.log("UUUUUUUU-",vvv);
     return (
         <div
             className={`create-nft w-full lg:h-[140px] shadow lg:flex rounded-lg justify-between items-center  md:p-9 p-4 bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29] -2 border-pink mb-10 ${

src/components/jobPopout/DeleteJobPopout.jsx

@@ -3,8 +3,11 @@ import ModalCom from '../Helpers/ModalCom'
 import { useNavigate } from 'react-router-dom'
 import usersService from '../../services/UsersService'
 import LoadingSpinner from '../Spinners/LoadingSpinner'
+import { useDispatch } from 'react-redux'
+import { tableReload } from '../../store/TableReloads'
 
 function DeleteJobPopout({details, onClose, situation}) {
+  let dispatch = useDispatch()
     const navigate = useNavigate()
     const ApiCall = new usersService()
 
@@ -26,9 +29,9 @@ function DeleteJobPopout({details, onClose, situation}) {
             }
             setRequestStatus({laoding: false, status:true, message: 'Job deleted successfully'})
             setTimeout(()=>{
+              dispatch(tableReload({type:'JOBTABLE'}))
               navigate('/myjobs', {replace: true})
               onClose()
-                window.location.reload()
           }, 1000)
         }).catch(error => {
             setRequestStatus({laoding: false, status:false, message: 'Opps! something went wrong, try again'})
@@ -97,7 +100,7 @@ function DeleteJobPopout({details, onClose, situation}) {
                   {details.title}
                 </p>
                 <p className="text-lg tracking-wide text-dark-gray dark:text-white">
-                  Price: {details.price}
+                  Price: {details.price * 0.01}
                 </p>
                 <p className="text-lg tracking-wide text-dark-gray dark:text-white">
                   Duration: {details.timeline_days} day(s)

src/components/jobPopout/EditJobPopout.jsx

@@ -7,7 +7,13 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
 import usersService from "../../services/UsersService";
 import { useNavigate } from "react-router-dom";
 
+import { tableReload } from "../../store/TableReloads";
+import { useDispatch } from "react-redux";
+
 const EditJobPopOut = ({ details, onClose, situation, country }) => {
+
+  const dispatch = useDispatch()
+
   let [requestStatus, setRequestStatus] = useState({
     loading: false,
     status: false,
@@ -62,12 +68,14 @@ const EditJobPopOut = ({ details, onClose, situation, country }) => {
         job_uid: details.job_uid,
         ...values,
       };
+      delete reqData?.country
       try {
         let res = await jobApi.jobManagerUpdateJob(reqData);
         let { data } = await res;
         if (data?.internal_return < 0) return;
         setRequestStatus({ loading: false, message: null });
         setTimeout(() => {
+          dispatch(tableReload({type:'JOBTABLE'}))
           navigate("/myjobs", { replace: true });
           onClose();
         }, 1000);
@@ -155,7 +163,7 @@ const EditJobPopOut = ({ details, onClose, situation, country }) => {
                           type="number"
                           name="price"
                           // placeholder="Please Enter Amount"
-                          value={props.values.price}
+                          value={props.values.price * 0.01}
                           inputHandler={props.handleChange}
                           blurHandler={props.handleBlur}
                         />

src/components/jobPopout/PendingJobsPopout.jsx

@@ -7,10 +7,10 @@ function PendingJobsPopout({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-header w-full flex items-center justify-end lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
+        <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">
+          <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
-            Confirm
+            Manage Pending Item
-          </h1> */}
+          </h1>
           <button
             type="button"
             className="text-[#374557] dark:text-red-500"

src/index.js

@@ -6,11 +6,15 @@ import App from "./App";
 import "./index.css";
 import store from "./store/store";
 
+import { GoogleOAuthProvider } from '@react-oauth/google';
+
 const root = document.getElementById("root");
 ReactDOM.createRoot(root).render(
   <BrowserRouter>
     <Provider store={store}>
+      <GoogleOAuthProvider clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}>
         <App />
+      </GoogleOAuthProvider>
     </Provider>
   </BrowserRouter>
 );

src/middleware/AuthRoute.jsx

@@ -77,7 +77,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     // Getting market data
     const getMarketActiveJobList = async () => {
       try {
-        const res = await apiCall.getActiveJobList();
+        const res = await apiCall.getMyJobList();
         dispatch(updateJobs(res.data));
       } catch (error) {
         console.log("Error getting mode");

src/services/UsersService.js

@@ -6,21 +6,22 @@ class usersService {
     console.log("WRB Service Entry");
   }
 
-    CreateUser(reqData){
+  CreateUser(reqData) {
     localStorage.setItem("session_token", ``);
     return this.postAuxEnd("/createuser", reqData);
   }
 
-    CompleteSignUp(reqData){
+  CompleteSignUp(reqData) {
     localStorage.setItem("session_token", ``);
     return this.postAuxEnd("/completesignuplink", reqData);
   }
 
-    getHomeDate(){
+  getHomeDate() {
     var postData = {
-            uuid: localStorage.getItem("uuid"),
+      uuid: localStorage.getItem("uid"),
+      uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
-            sessionid: localStorage.getItem("session_token")
+      sessionid: localStorage.getItem("session_token"),
     };
     return this.postAuxEnd("/dashdata", postData);
   }
@@ -32,74 +33,75 @@ class usersService {
     var postData = {
       uuid: localStorage.getItem("uuid"),
       member_id: localStorage.getItem("member_id"),
-            sessionid: localStorage.getItem("session_token")
+      sessionid: localStorage.getItem("session_token"),
     };
     return this.postAuxEnd("/getjobsdata", postData);
   }
-//
+  //
-    getUserBankList(reqData){
+  getUserBankList(reqData) {
     var postData = {
       uuid: localStorage.getItem("uuid"),
       member_id: localStorage.getItem("member_id"),
-            sessionid: localStorage.getItem("session_token")
+      sessionid: localStorage.getItem("session_token"),
     };
     return this.postAuxEnd("/mybanklist", postData);
   }
-    getUserWallets(reqData){
+  getUserWallets(reqData) {
     var postData = {
       uuid: localStorage.getItem("uuid"),
       member_id: localStorage.getItem("member_id"),
-            sessionid: localStorage.getItem("session_token")
+      sessionid: localStorage.getItem("session_token"),
     };
     return this.postAuxEnd("/getwallets", postData);
   }
-    getApiGate(){
+  getApiGate() {
     // localStorage.setItem("session_token", ``);
     return this.postAuxEnd("/apigate", null);
   }
 
-    getLoadProfile(){
+  getLoadProfile() {
     var postData = {
       uuid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-            page:0,
+      page: 0,
-            limit :100
+      limit: 100,
     };
     return this.postAuxEnd("/loadprofile", null);
   }
 
-    getOffersList(){
+  getOffersList() {
     var postData = {
       uuid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-            page:0,
+      page: 0,
-            limit :100
+      limit: 100,
     };
     return this.postAuxEnd("/offerslist", null);
   }
 
-    getPendingJob(){
+  getPendingJob() {
     var postData = {
       uuid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-            page:0,
+      page: 0,
-            limit :100};
+      limit: 100,
+    };
     return this.postAuxEnd("/pendingjob", postData);
   }
 
   /*
     getActiveJobList -  All available Jobs
      */
-    getActiveJobList(){
+  getActiveJobList() {
     var postData = {
-            uuid: localStorage.getItem("uid"),
+      uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-            page:0,
+      page: 0,
-            limit :100
+      limit: 100,
     };
     return this.postAuxEnd("/getjobsdata", postData);
   }
@@ -118,210 +120,222 @@ class usersService {
   //     };
   //     return this.postAuxEnd("/getjobsdata", postData);
   // }
-    getHeroJBanners(){
+  getHeroJBanners() {
     var postData = {
       uuid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-            page:0,
+      page: 0,
-            limit :100
+      limit: 100,
     };
     return this.postAuxEnd("/homebanners", postData);
   }
 
-    getGetPendingJobs(){
+  getGetPendingJobs() {
     var postData = {
       uuid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-            page:0,
+      page: 0,
-            limit :100
+      limit: 100,
     };
     return this.postAuxEnd("/getpendingjobs", postData);
   }
 
-    getUsersCards(){
+  getUsersCards() {
     var postData = {
       uuid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-            page:0,
+      page: 0,
-            limit :100
+      limit: 100,
     };
     return this.postAuxEnd("/userscards", postData);
   }
 
-    getCouponPending(){
+  getCouponPending() {
     var postData = {
       uuid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-        page:0,
+      page: 0,
-        limit :100
+      limit: 100,
     };
     return this.postAuxEnd("/couponpending", postData);
   }
 
   // API FUNCTION TO GET COUPON HISTORY
-    getRecipient(){
+  getRecipient() {
     var postData = {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-            page:1,
+      page: 1,
-            limit :20,
+      limit: 20,
-            action: 11175
+      action: 11175,
     };
     return this.postAuxEnd("/recipients", postData);
   }
 
   //END POINT CALL FOR UPDATE PROFILE
-    addRecipient(data){
+  addRecipient(data) {
     var postData = {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-        ...data
+      ...data,
     };
     return this.postAuxEnd("/addrecipient", postData);
   }
 
   // API FUNCTION TO GET SEND MONEY FEE
-    getSendMoneyFee(amount){
+  getSendMoneyFee(amount) {
     var postData = {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       amount,
-            action: 33025
+      action: 33025,
     };
     return this.postAuxEnd("/sendmoneyfee", postData);
   }
 
+  // Family Manage
+  ManageFamily(reqData) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: 22025,
+      ...reqData
+    };
+    return this.postAuxEnd("/familymanage", postData);
+  }
+
   // Task for the person doing the job
-    getMyActiveTaskList(){
+  getMyActiveTaskList() {
     var postData = {
       uuid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-            page:0,
+      page: 0,
-            offset:0,
+      offset: 0,
-            limit :100
+      limit: 100,
     };
     return this.postAuxEnd("/activetaskslist", postData);
   }
-    getMyActiveJobList(){
+  getMyActiveJobList() {
     var postData = {
       uuid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-            page:0,
+      page: 0,
-            offset:0,
+      offset: 0,
-            limit :100
+      limit: 100,
     };
     return this.postAuxEnd("/jobmanageractive", postData);
   }
 
-    getMyPendingJobList(){
+  getMyPendingJobList() {
     var postData = {
       uuid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-            page:0,
+      page: 0,
-            offset:0,
+      offset: 0,
-            limit :100
+      limit: 100,
     };
     return this.postAuxEnd("/jobmanageroffers", postData);
   }
-    getMyJobList(){
+  getMyJobList() {
     var postData = {
       uuid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-            page:0,
+      page: 0,
-            offset:0,
+      offset: 0,
-            limit :100
+      limit: 100,
     };
     return this.postAuxEnd("/jobmanagerlist", postData);
   }
   // API FUNCTION TO GET COUPON HISTORY
-    getCouponHx(){
+  getCouponHx() {
     var postData = {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-            page:1,
+      page: 1,
-            limit :20,
+      limit: 20,
-            action: 85025
+      action: 85025,
     };
     return this.postAuxEnd("/couponhx", postData);
   }
 
-    getPurchaseHx(){
+  getPurchaseHx() {
     var postData = {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-            page:1,
+      page: 1,
-            limit :20,
+      limit: 20,
-            action: 15049
+      action: 15049,
     };
     return this.postAuxEnd("/purchasehx", postData);
   }
 
   // API FUNCTION TO GET PAYMENT HISTORY
-    getPaymentHx(){
+  getPaymentHx() {
     var postData = {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-            page:1,
+      page: 1,
-            limit :20,
+      limit: 20,
-            action: 15046
+      action: 15046,
     };
     return this.postAuxEnd("/paymenthx", postData);
   }
 
   // API FUNCTION TO GET PAYMENT HISTORY
-    sendMoney(reqData){
+  sendMoney(reqData) {
     var postData = {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       senderid: localStorage.getItem("member_id"),
       action: 33020,
-            ...reqData
+      ...reqData,
     };
     return this.postAuxEnd("/sendmoney", postData);
   }
 
   //END POINT CALL FOR REFERRAL HISTORY
-    getReferralHx(){
+  getReferralHx() {
     var postData = {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       offset: 1,
-        limit :100,
+      limit: 100,
-        action: 11064
+      action: 11064,
     };
     return this.postAuxEnd("/refferhx", postData);
   }
 
   //END POINT CALL FOR UPDATE PROFILE
-    updateProfile(post){
+  updateProfile(post) {
     var postData = {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       action: 5031,
-        ...post
+      ...post,
     };
     return this.postAuxEnd("/updateprofile", postData);
   }
 
   //END POINT CALL FOR GETTING USER PROFILE
-    loadProfile(post){
+  loadProfile(post) {
     var postData = {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
@@ -330,82 +344,82 @@ class usersService {
     return this.postAuxEnd("/loadprofile", postData);
   }
 
-    getFamilyList(){
+  getFamilyList() {
     var postData = {
       uuid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-            page:0,
+      page: 0,
-            limit :100
+      limit: 100,
     };
     return this.postAuxEnd("/familylist", postData);
   }
 
-    getFamilyAdd(){
+  getFamilyAdd() {
     var postData = {
       uuid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-            page:0,
+      page: 0,
-            limit :100
+      limit: 100,
     };
     return this.postAuxEnd("/familyadd", postData);
   }
 
-    getFamilyUpdate(){
+  getFamilyUpdate() {
     var postData = {
       uuid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-            page:0,
+      page: 0,
-            limit :100
+      limit: 100,
     };
     return this.postAuxEnd("/familyupdate", postData);
   }
 
-    getFamilyManage(){
+  getFamilyManage() {
     var postData = {
       uuid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-            page:0,
+      page: 0,
-            limit :100
+      limit: 100,
     };
     return this.postAuxEnd("/familymanage", postData);
   }
 
   //END POINT CALL FOR ACCOUNT TOP
-     startTopUp(post){
+  startTopUp(post) {
     var postData = {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       action: 11062,
-        ...post
+      ...post,
     };
     return this.postAuxEnd("/starttopup", postData);
   }
 
   //END POINT CALL FOR SENDING REFERRAL MESSAGE
-    sendReferralMsg(postData){
+  sendReferralMsg(postData) {
     return this.postAuxEnd("/sendreferral", postData);
   }
 
-    StartResetPassword(reqData){
+  StartResetPassword(reqData) {
-        return this.postAuxEnd("/startresetpasword", reqData)
+    return this.postAuxEnd("/startresetpasword", reqData);
   }
 
-    CompleteResetPassword(reqData){
+  CompleteResetPassword(reqData) {
-        return this.postAuxEnd("/stepresetpass", reqData)
+    return this.postAuxEnd("/stepresetpass", reqData);
   }
 
-    getCouponRedeem(){
+  getCouponRedeem() {
     var postData = {
       uuid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-        page:0,
+      page: 0,
-        limit :100
+      limit: 100,
     };
     return this.postAuxEnd("/couponredeem", postData);
   }
@@ -422,7 +436,7 @@ class usersService {
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       action: 11183,
-            country: 'NG'
+      country: "NG",
     };
     return this.postAuxEnd("/countrybanks", postData);
   }
@@ -433,7 +447,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-            action: 11177
+      action: 11177,
     };
     return this.postAuxEnd("/accounttypes", postData);
   }
@@ -444,7 +458,7 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-            action: 13002
+      action: 13002,
     };
     return this.postAuxEnd("/jobmanageragree", postData);
   }
@@ -456,7 +470,7 @@ class usersService {
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       action: 13010,
-            ...reqData
+      ...reqData,
     };
     return this.postAuxEnd("/jobmanagercreatejob", postData);
   }
@@ -466,9 +480,8 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-            job_id: localStorage.getItem("job_id"),
       action: 13010,
-            ...reqData
+      ...reqData,
     };
     return this.postAuxEnd("/jobmanagerupdatejob", postData);
   }
@@ -482,7 +495,7 @@ class usersService {
       limit: 30,
       action: 14011,
       offset: 0,
-            ...reqData
+      ...reqData,
     };
     return this.postAuxEnd("/activejobmsglist", postData);
   }
@@ -494,7 +507,7 @@ class usersService {
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       action: 14010,
-            ...reqData
+      ...reqData,
     };
     return this.postAuxEnd("/sendtaskmessage", postData);
   }
@@ -506,7 +519,7 @@ class usersService {
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       action: 13011,
-            ...reqData
+      ...reqData,
     };
     return this.postAuxEnd("/jobmanagerdeletejob", postData);
   }
@@ -514,8 +527,8 @@ class usersService {
   verifyEmail(code) {
     const reqData = {
       verify_link: code,
-            action: 11015
+      action: 11015,
-        }
+    };
     return this.postAuxEnd("/verifysignuplink", reqData);
   }
 
@@ -566,7 +579,7 @@ class usersService {
 
     */
 
-    getUserReminders(){
+  getUserReminders() {
     return this.getAuxEnd("/reminders", null);
   }
   //----------------------------------------  -----
@@ -578,16 +591,17 @@ class usersService {
     const session_token = localStorage.getItem("session_token");
     let axiosConfig = {
       headers: {
-                'Accept': 'application/json',
+        Accept: "application/json",
-                'Content-Type': 'application/json;charset=UTF-8',
+        "Content-Type": "application/json;charset=UTF-8",
-                'Authorization': `Basic ${session_token}`,
+        Authorization: `Basic ${session_token}`,
-            }
+      },
     };
     const endPoint = process.env.REACT_APP_USERS_ENDPOINT + uri;
-        return Axios.get(endPoint,{
+    return Axios.get(endPoint, {
       params: {
-                reqData
+        reqData,
-            }})
+      },
+    })
       .then((response) => {
         console.log("~~~~~~~ Toks2 GET ~~~~~~~~");
         return response;
@@ -606,7 +620,6 @@ class usersService {
       });
   }
 
-
   postAuxEnd(uri, reqData) {
     const endPoint = process.env.REACT_APP_USERS_ENDPOINT + uri;
     const session_token = localStorage.getItem("session_token");
@@ -614,18 +627,18 @@ class usersService {
     //   'Authorization': `Basic ${(session_token !=null) ?session_token : ''}`,
     let axiosConfig = {
       headers: {
-                'Accept': 'application/json',
+        Accept: "application/json",
-                'Access-Control-Allow-Origin': '*',
+        "Access-Control-Allow-Origin": "*",
-                'Access-Control-Expose-Headers': 'Access-Control-Allow-Origin',
+        "Access-Control-Expose-Headers": "Access-Control-Allow-Origin",
-                'Access-Control-Allow-Headers':'Origin, X-API-KEY, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Allow-Headers, Authorization, observe, enctype, Content-Length, X-Csrf-Token',
+        "Access-Control-Allow-Headers":
-                'Content-Type': 'application/json;charset=UTF-8',
+          "Origin, X-API-KEY, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Allow-Headers, Authorization, observe, enctype, Content-Length, X-Csrf-Token",
-
+        "Content-Type": "application/json;charset=UTF-8",
-            }
+      },
     };
     //  Axios.defaults.headers.post['Content-Type'] ='application/json;charset=utf-8';
     //     Axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*'; //,axiosConfig
     //     Axios.defaults.withCredentials = true;
-//debugger;
+    //debugger;
     return Axios.post(endPoint, reqData)
       .then((response) => {
         console.log(response);
@@ -636,19 +649,31 @@ class usersService {
       .catch((error) => {
         if (error.response) {
           //response status is an error code
-                    console.log("ERROR-------------------------------------------------------");
+          console.log(
+            "ERROR-------------------------------------------------------"
+          );
           console.log(error.response.status);
-                    console.log("ERROR-------------------------------------------------------");
+          console.log(
+            "ERROR-------------------------------------------------------"
+          );
         } else if (error.request) {
           //response not received though the request was sent
-                    console.log("ERROR2-------------------------------------------------------");
+          console.log(
+            "ERROR2-------------------------------------------------------"
+          );
           console.log(error?.request);
-                    console.log("ERROR2-------------------------------------------------------");
+          console.log(
+            "ERROR2-------------------------------------------------------"
+          );
         } else {
           //an error occurred when setting up the request
-                    console.log("ERROR3-------------------------------------------------------");
+          console.log(
+            "ERROR3-------------------------------------------------------"
+          );
           console.log(error);
-                    console.log("ERROR3-------------------------------------------------------");
+          console.log(
+            "ERROR3-------------------------------------------------------"
+          );
         }
       });
   }

src/store/TableReloads.js

@@ -0,0 +1,29 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  jobListTable: false,
+  pendingListTable: false
+};
+
+export const tableReloadSlice = createSlice({
+  name: "tableReload",
+  initialState,
+  reducers: {
+    tableReload: (state, action) => {
+      switch(action.payload.type){
+        case 'JOBTABLE':
+          state.jobListTable = !state.jobListTable;
+          return
+        case 'PENDINGTABLE' :
+          state.pendingListTable = !state.pendingListTable;
+          return
+        default:
+          return state
+      }
+    },
+  },
+});
+
+export const { tableReload } = tableReloadSlice.actions;
+
+export default tableReloadSlice.reducer;

src/store/UserDetails.js

@@ -8,8 +8,8 @@ export const userSlice = createSlice({
   name: "userDetails",
   initialState,
   reducers: {
-    updateUserDetails: (state,payload) => {
+    updateUserDetails: (state,action) => {
-      state.userDetails = {...payload.payload}
+      state.userDetails = {...action.payload}
     },
   },
 });

src/store/jobLists.js

@@ -8,8 +8,8 @@ export const jobSlice = createSlice({
   name: "jobLists",
   initialState,
   reducers: {
-    updateJobs: (state, payload) => {
+    updateJobs: (state, action) => {
-      state.jobLists = { ...payload.payload };
+      state.jobLists = { ...action.payload };
     },
   },
 });

src/store/store.js

@@ -3,11 +3,13 @@ import drawerReducer from "./drawer";
 
 import userDetailReducer from "./UserDetails";
 import jobReducer from "./jobLists";
+import tableReloadReducer from "./TableReloads";
 
 export default configureStore({
   reducer: {
     drawer: drawerReducer,
     userDetails: userDetailReducer,
-    jobLists: jobReducer
+    jobLists: jobReducer,
+    tableReload: tableReloadReducer
   },
 });

src/views/FamilyManagePage.jsx

@@ -0,0 +1,9 @@
+import FamilyManage from "../components/FamilyAcc/FamilyManage";
+
+export default function FamilyManagePage() {
+    return (
+        <>
+            <FamilyManage />
+        </>
+    );
+}

src/views/HomePages.jsx

@@ -3,24 +3,28 @@ import Home from "../components/Home";
 import usersService from "../services/UsersService";
 export default function HomePages() {
 
-    const [marketActiveJobList, setMarketActiveJobList] = useState([]);
+   // const [marketActiveJobList, setMarketActiveJobList] = useState([]);
+    const [bannerList, setBannerList] = useState([]);
     const api = new usersService();
 
-    const getMarketActiveJobList = async () => {
+    const getHeroJBannersList = async () => {
         try {
             const res = await api.getHeroJBanners();
-            setMarketActiveJobList(res.data);
+           // console.log("BANNERS->",res.data);
+            setBannerList(res.data?.result_list);
         } catch (error) {
-            console.log("Error getting mode");
+            console.log("Error getting BANNERS....");
         }
     };
     useEffect(() => {
-        getMarketActiveJobList();
+        getHeroJBannersList();
     }, []);
 
   return (
     <>
-      <Home />
+      <Home
+          bannerList={bannerList}
+      />
     </>
   );
 }

src/views/ManageActiveJobs.jsx

@@ -32,7 +32,8 @@ function ManageActiveJobs() {
 
   useEffect(()=>{
     if(!state){
-      navigate('/my-active-jobs', {replace: true})
+      navigate('/', {replace: true})
+      return
     }
     setDetails(state)
     getActiveJobMesList()

src/views/MarketPlacePage.jsx

@@ -1,9 +1,16 @@
 import MarketPlace from "../components/MarketPlace";
 
 export default function MarketPlacePage() {
+
+    const commonHeadData =()=>{
+        console.log("COMMON HEAD DATA ----------------=====---------------------");
+        return 0;
+    }
+
   return (
     <>
-      <MarketPlace />
+      <MarketPlace
+          commonHeadData={commonHeadData} />
     </>
   );
 }

src/views/MyActiveJobsPage.jsx

@@ -4,7 +4,10 @@ import usersService from "../services/UsersService";
 import MyActiveJobs from "../components/MyActiveJobs";
 
 export default function MyActiveJobsPage() {
-
+    const commonHeadData =()=>{
+        console.log("COMMON HEAD DATA ----------------=====---------------------");
+        return 0;
+    }
     const [MyJobList, setMyJobList] = useState([]);
     const api = new usersService();
 //TARGET ENDPOINT[POST]http://10.204.5.100:9083/en/wrench/api/v1/jobmanageractive
@@ -23,7 +26,10 @@ export default function MyActiveJobsPage() {
     // debugger;
     return (
         <>
-            <MyActiveJobs MyJobList={MyJobList} />
+            <MyActiveJobs
+                MyJobList={MyJobList}
+                commonHeadData={commonHeadData}
+            />
         </>
     );
 }

src/views/MyCouponPage.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import WalletRoutes from "../components/MyWallet/Wallet";
+
+export default function MyCouponPage() {
+    return (
+        <>
+            <WalletRoutes />
+        </>
+    );
+}

src/views/MyJobsPage.jsx

@@ -4,30 +4,43 @@ import React, { useContext,useState, useEffect } from "react";
 // import UsersService from "../services/UsersService";
 import usersService from "../services/UsersService";
 import MyJobs from "../components/MyJobs";
+import { useSelector } from "react-redux";
 
 export default function MyJobsPage() {
 
+    const commonHeadData =()=>{
+        console.log("COMMON HEAD DATA ----------------=====---------------------");
+        return 0;
+    }
+
+    const {jobListTable} = useSelector((state) => state.tableReload)
+
     // const userApi = new usersService();
     // const activeJobList  = userApi.getMyJobList();
-    const [MyJobList, setMyJobList] = useState([]);
+    const [MyJobList, setMyJobList] = useState({loading: true, data:[]});
     const api = new usersService();
 
     const getMyJobList = async () => {
+        setMyJobList({loading: true, data:[]})
         try {
             const res = await api.getMyJobList();
-            setMyJobList(res.data);
+            setMyJobList({loading: false, data:res.data})
+            // setMyJobList(res.data);
         } catch (error) {
+            setMyJobList({loading: false, data:[]})
             console.log("Error getting mode");
         }
     };
     useEffect(() => {
         getMyJobList();
-    }, []);
+    }, [jobListTable]);
 
    // debugger;
     return (
         <>
-            <MyJobs MyJobList={MyJobList} />
+            <MyJobs
+                MyJobList={MyJobList}
+                commonHeadData={commonHeadData} />
         </>
     );
 }

src/views/MyPendingJobsPage.jsx

@@ -5,7 +5,10 @@ import MyActiveJobs from "../components/MyActiveJobs";
 import MyPendingJobs from "../components/MyPendingJobs";
 
 export default function MyPendingJobsPage() {
-
+    const commonHeadData =()=>{
+        console.log("COMMON HEAD DATA ----------------=====---------------------");
+        return 0;
+    }
     const [MyJobList, setMyJobList] = useState([]);
     const api = new usersService();
 
@@ -24,7 +27,10 @@ export default function MyPendingJobsPage() {
     // debugger;
     return (
         <>
-            <MyPendingJobs MyJobList={MyJobList} />
+            <MyPendingJobs
+                MyJobList={MyJobList}
+                commonHeadData={commonHeadData}
+            />
         </>
     );
 }

src/views/MyTaskPage.jsx

@@ -7,7 +7,10 @@ export default function MyTaskPage() {
 
     const [MyActiveJobList, setMyActiveJobList] = useState([]);
     const api = new usersService();
-
+    const commonHeadData =()=>{
+        console.log("COMMON HEAD DATA ----------------=====---------------------");
+    return 0;
+    }
     const getMyActiveJobList = async () => {
         try {
             const res = await api.getMyActiveTaskList();
@@ -23,7 +26,8 @@ export default function MyTaskPage() {
     //debugger;
     return (
         <>
-            <MyTasks ActiveJobList={MyActiveJobList}/>
+            <MyTasks ActiveJobList={MyActiveJobList}
+                     commonHeadData={commonHeadData}/>
         </>
     );
 }