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 { googleLogout, useGoogleLogin } from '@react-oauth/google';
+// import { GoogleOAuthProvider } 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 () => {
-    try {
-      if (email !== "" && password !== "") {
-        var postData = {
-          username: email,
-          password: password,
-          sessionid: "STARTING",
-        };
-        const loginResult = await userApi.logInUser(postData); // just for a test
-        //debugger;
-        // if (email === "support@mermsemr.com") {
-        if (
-          loginResult.data.status > 0 &&
-          loginResult.data.internal_return == 100 &&
-          loginResult.data.session != ""
-        ) {
-          // just for a start
-          localStorage.setItem("member_id", `${loginResult.data.member_id}`);
-          localStorage.setItem("uid", `${loginResult.data.uid}`);
-          localStorage.setItem("session_token", `${loginResult.data.session}`);
-          localStorage.setItem("session", `${loginResult.data.session}`);
-          setLoginLoading(true);
-          // userApi.getUserReminders(); //testing
-          dispatch(updateUserDetails(loginResult.data));
-          setTimeout(() => {
-            navigate("/", { replace: true });
-            setLoginLoading(false);
-          }, 2000);
-        } else {
-          // toast.error("Invalid Credential");
-          setLoginError(true);
-        }
-      } else {
-        setMsgError("Please fill in the fields");
-      }
-    } catch (error) {
-      setMsgError("An error occurred");
-    } finally {
+  // FUNCTION TO HANDLE USER LOGIN
+  const doLogin = ({ target: { name } }) => {
+    setMsgError("");
+    setLoginError(false)
+    setLoginLoading(true);
+    let postData; // Post Data for API
+    if (!email || !password) {
+      setLoginLoading(false);
+      setMsgError("Please fill all the fields");
       setTimeout(() => {
-        setLoginError(false);
-        setMsgError(null);
+        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,
+      };
+    } else if (name == "loginfamily") { // Post Data Info for family Login
+      postData = {
+        username: email,
+        pin: password,
+        sessionid: "20067A92714",
+        login_mode: 1105,
+        action: 11025,
+      };
+    }else{
+      setLoginLoading(false);
+      setMsgError("Invalid Login Type. Consider refreshing the page");
+      setTimeout(() => {
+        setMsgError("");
+      }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
+      return;
+    }
+    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);
+      }).catch((error) => {
+        setMsgError("Unable to login, try again");
+        setLoginLoading(false);
+      }).finally(() => {
+        setTimeout(() => {
+          setLoginError(false);
+          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,80 +166,190 @@ export default function Login() {
                   </Link>
                 </span>
               </div>
-              <div className="input-area">
-                <div className="input-item mb-5">
-                  <InputCom
-                    fieldClass="px-6"
-                    value={email}
-                    inputHandler={handleEmail}
-                    placeholder="support@mermsemr.com"
-                    label="Email"
-                    name="email"
-                    type="email"
-                    iconName="message"
-                  />
-                </div>
 
-                <div className="input-item mb-5">
-                  <InputCom
-                    fieldClass="px-6"
-                    value={password}
-                    inputHandler={handlePassword}
-                    placeholder="● ● ● ● ● ●"
-                    label="Password"
-                    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- Please{" "}
-                    <Link to="/#" className="text-[#009ef7]">
-                      reset your password
-                    </Link>{" "}
-                    or{" "}
-                    <Link to="/signup" className="text-[#009ef7]">
-                      create a new account
-                    </Link>
+              {/* 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
+                        labelClass="tracking-wider"
+                        fieldClass="sm:px-6 px-2"
+                        value={email}
+                        inputHandler={handleEmail}
+                        placeholder="support@mermsemr.com"
+                        label="Email"
+                        name="email"
+                        type="email"
+                        iconName="message"
+                      />
+                    </div>
+
+                    <div className="input-item mb-5">
+                      <InputCom
+                        labelClass="tracking-wider"
+                        fieldClass="sm:px-6 px-2"
+                        value={password}
+                        inputHandler={handlePassword}
+                        placeholder="● ● ● ● ● ●"
+                        label="Password"
+                        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- Please{" "}
+                        <Link to="/#" className="text-[#009ef7]">
+                          reset your password
+                        </Link>{" "}
+                        or{" "}
+                        <Link to="/signup" className="text-[#009ef7]">
+                          create a new account
+                        </Link>
+                      </div>
+                    )}
+                    {msgError && (
+                      <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
+                        {msgError}
+                      </div>
+                    )}
+                    <div className="signin-area mb-3.5">
+                      <div className="flex justify-center">
+                        <button
+                          name="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>
+                          ) : (
+                            <>Continue</>
+                          )}
+                        </button>
+                      </div>
+                      <div className="sm:flex sm:justify-between sm:items-center sm:space-x-2">
+                        <BrandBtn link="#" imgSrc={googleLogo} brand="Google" onClick={googleLogin} />
+                        <BrandBtn link="#" imgSrc={appleLogo} brand="Apple" />
+                      </div>
+                      <div className="sm:flex sm:justify-between sm:items-center sm:space-x-2">
+                        <BrandBtn
+                          link="#"
+                          imgSrc={facebookLogo}
+                          brand="Facebook"
+                        />
+                        <BrandBtn
+                          link="#"
+                          imgSrc={linkedInLogo}
+                          brand="LinkedIn"
+                        />
+                      </div>
+                    </div>
                   </div>
-                )}
-                {msgError && (
-                  <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
-                    {msgError}
+                ) : (
+                  // 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>
-                )}
-                <div className="signin-area mb-3.5">
-                  <div className="flex justify-center">
-                    <button
-                      onClick={doLogin}
-                      type="button"
-                      className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
-                    >
-                      {loginLoading ? (
-                        <div className="signup btn-loader"></div>
-                      ) : (
-                        <span>Continue</span>
-                      )}
-                    </button>
-                  </div>
-                  <BrandBtn link="#"  imgSrc={googleLogo} brand="Google" />
-                  <BrandBtn link="#"   imgSrc={facebookLogo} brand="Facebook" />
-                  <BrandBtn link="#"    imgSrc={appleLogo} brand="Apple" />
-                </div>
-                {/* <div className="signup-area flex justify-center">
-                <p className="sm:text-lg text-sm text-thin-light-gray font-normal">
-                  Don't have an account ?
-                  <a href="/signup" className="ml-2   text-dark-gray dark:text-white">
-                    Sign up free
-                  </a>
-                </p>
-              </div> */}
-                <div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
-                  This site is protected by hCaptcha and the our Privacy Policy
-                  and Terms of Service apply.
-                </div>
+                )
+                // 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.
               </div>
             </div>
           </div>
@@ -198,11 +359,10 @@ export default function Login() {
   );
 }
 
-const BrandBtn = ({ link, imgSrc, brand }) => {
-
-  const doGoogle = async ()=>{
-    alert('start google');
-  }
+const BrandBtn = ({ link, imgSrc, brand, onClick }) => {
+  // const doGoogle = async () => {
+  //   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 ()=>{
-    alert('start apple');
-  }
+  // const doApple = async () => {
+  //   alert("start apple");
+  // };
 
-  const doFacebook = async ()=>{
-    alert('start facebook');
-  }
+  // const doFacebook = async () => {
+  //   alert("start facebook");
+  // };
 
   return (
-    <div className="flex justify-center bottomMargin">
-      <a
-          // onClick={doGoogle}
-          href="#dd"
+    <div className="w-full sm:w-1/2 flex justify-center bottomMargin">
+      <button
+        onClick={onClick}
+        // href="#dd"
         className="w-full border border-light-purple dark:border-[#5356fb29]  rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F]  items-center font-medium cursor-pointer"
       >
         <img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />
         <span className="text-lg text-thin-light-gray font-normal text-[15px]">
           Continue with {brand}
         </span>
-      </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,71 +40,81 @@ 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(
-                      (
-                        { firstname, lastname, age, added, last_login },
-                        idx
-                      ) => {
-                        let addedDate = added?.split(" ")[0];
-                        return (
-                          <tr
-                            className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29]  hover:bg-gray-50"
-                            key={idx}
-                          >
-                            <td className=" py-4">
-                              <div className="flex space-x-2 items-center w-full">
-                                <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] max-w-[60px]">
-                                  <img
-                                    src={dataImage1}
-                                    alt="data"
-                                    className="w-full h-full"
-                                  />
-                                </div>
-                                <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>
-                                  <span className="text-sm text-thin-light-gray">
-                                    Added:{" "}
-                                    <span className="text-purple ml-1">
-                                      {addedDate}
-                                    </span>
+                    currentFamilyList?.map((props, idx) => {
+                      let {
+                        firstname,
+                        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={family_uid}
+                        >
+                          <td className=" py-4">
+                            <div className="flex space-x-2 items-center w-full">
+                              <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 flex-[0.9]">
+                                <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                                  {`${firstname} ${lastname} (${age})`}
+                                </h1>
+                                <span className="text-sm text-thin-light-gray">
+                                  Added:{" "}
+                                  <span className="text-purple ml-1">
+                                    {addedDate}
                                   </span>
-                                </div>
-                              </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">
-                                  {last_login}
                                 </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
-                                </span>
-                              </div>
-                            </td>
-                            <td className="text-right py-4 px-2 flex items-center justify-center">
-                              <button
-                                type="button"
-                                className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                              >
-                                Manage
-                              </button>
-                            </td>
-                          </tr>
-                        );
-                      }
-                    )
+                            </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">
+                                {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">
+                                {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"
+                            >
+                              Manage
+                            </button>
+                          </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
-          .slice(startLength, endLength)
+        datas?.length >= endLength &&
+        datas?.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">
-                            <img src={slider1} 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={slider1} 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={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>
-                        <div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">
-                           <HomeBannerOffersCard />
-                        </div>
+                        {props.bannerList.map((item, index) => (
+                            <div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">
+                                <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() {
-    const trending = datas.datas;
-    const jobData =  datas.datas; // api calls or cache
-    //getHomeDate
+export default function Home(props) {
+
+    console.log("PROPS IN HOME->",props);
+
+//    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} />
-                {/* <CreateNft />
-        <TrendingSection trending={trending} className="mb-10" />*/}
-                <HomeTaskDisplay
-                    jobData={jobData}
-                    className="mb-10"/>
-                {/*  <SellHistoryMarketVisitorAnalytic className="mb-10"/>
-                <TopSellerTopBuyerSliderSection className="mb-10" />
-                <UpdateTable className="mb-10"/>*/}
+                {userDetails && userDetails?.account_type == "FAMILY" && (
+                    <FamilyDash commonHeadData={commonHeadData} />
+                )}
+                {userDetails && userDetails?.account_type == "FULL" && (
+                    <FullAccountDash   bannerList={props.bannerList} />
+
+                )}
             </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/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

@@ -111,7 +111,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, 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 w-full">
-                              <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] max-w-[60px]">
+                              <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"

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} reloadJobList={props.reloadJobList} />
+          <MyJobTable
+              MyJobList={props.MyJobList}
+              reloadJobList={props.reloadJobList}
+          />
         </div>
       </div>
     </Layout>

src/components/MyPendingJobs/index.jsx

@@ -5,37 +5,39 @@ import CommonHead from "../UserHeader/CommonHead";
 import MyPendingJobTable from "./MyPendingJobTable";
 
 export default function MyPendingJobs(props) {
-    const [selectTab, setValue] = useState("today");
-    const filterHandler = (value) => {
-        setValue(value);
-    };
-    console.log("AMEYE LOC1", props.MyJobList);
-    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   text-dark-gray dark:text-white">
+  const [selectTab, setValue] = useState("today");
+  const filterHandler = (value) => {
+    setValue(value);
+  };
+  console.log("AMEYE LOC1", props.MyJobList);
+  return (
+    <Layout>
+      <CommonHead
+          commonHeadData={props.commonHeadData}
+      />
+      <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"}`}
+                  className={`${selectTab === "today" ? "block" : "hidden"}`}
                 >
                   Pending Job(s)
                 </span>
-
-                            </h1>
-                        </div>
-                        <div className="slider-btns flex space-x-4">
-                            <div onClick={() => filterHandler("today")} className="relative">
-
-                            </div>
-                        </div>
-                    </div>
-                    <MyPendingJobTable MyJobList={props.MyJobList} />
-                </div>
+              </h1>
             </div>
-        </Layout>
-    );
+            <div className="slider-btns flex space-x-4">
+              <div
+                onClick={() => filterHandler("today")}
+                className="relative"
+              ></div>
+            </div>
+          </div>
+          <MyPendingJobTable MyJobList={props.MyJobList} />
+        </div>
+      </div>
+    </Layout>
+  );
 }

src/components/MyTasks/MyJobTable.jsx

@@ -68,7 +68,7 @@ export default function MyJobTable({ className }) {
                 >
                   <div className=" py-4">
                     <div className="flex space-x-2 items-center">
-                      <div className="w-full max-w-[60px] flex-[0.1] 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"

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,19 +70,25 @@ 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 ? 
-                        <LoadingSpinner size='16' color='sky-blue' />
-                        :
-                        <CouponTable coupon={coupon} />
+                        {coupon.loading ?
+                            <LoadingSpinner size='16' color='sky-blue' />
+                            :
+                            <CouponTable coupon={coupon} />
                         }
                     </div>
                 </div>
                 {/* END OF COUPON SECTION */}
-            </div>            
+
+            </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.clear();
+    localStorage.removeItem("session_token");
+    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 logo3 from "../../assets/images/wrenchboard.png"; //logo-3.svg";
+import {
+  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,173 +83,127 @@ 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
+                title="Dashboard"
+                route="/"
+                sidebar={sidebar}
+                iconName="market"
+              />
+              {userDetails && userDetails?.account_type !== "FAMILY" && (
                 <ListItem
-                  key={idx}
-                  title={name}
-                  route={path}
-                  bubble={bubble}
-                  sidebar
+                  title="Market"
+                  route="/market"
+                  bubble={noOfJobs}
+                  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>*/}
+              )}
+              <ListItem
+                title="My Task(s)"
+                route="/mytask"
+                sidebar={sidebar}
+                iconName="market"
+              />
             </ul>
           </div>
         </div>
 
-        {!userDetails.post_jobs ? (
-          <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"
-                className="nav-item flex items-center justify-start space-x-3.5"
-              >
-                <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>
-            </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>
-            </div>
-            <div className="items">
-              <ul className="flex flex-col space-y-6">
-                <li className="item group">
-                  <NavLink
-                    to="/myjobs"
-                    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="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>
-                <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">
-                      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>
-            </div>
-            <div className="items">
-              <ul className="flex flex-col space-y-6">
-                <li className="item group">
-                  <NavLink
-                    to="/add-job"
-                    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="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>
+        {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 ${
+                    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 ${
+                            ((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"
+                            }`}
+                          >
+                            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>
+                </div>
+                <div className="items">
+                  <ul className="flex flex-col space-y-6">
+                    {[
+                      { name: "List", path: "/myjobs", iconName: "people-two" },
+                      {
+                        name: "Pending",
+                        path: "/my-pending-jobs",
+                        iconName: "people-two",
+                      },
+                      {
+                        name: "Active",
+                        path: "/my-active-jobs",
+                        iconName: "people-two",
+                      },
+                    ].map(({ name, path, iconName }, idx) => (
+                      <ListItem
+                        key={idx}
+                        title={name}
+                        route={path}
+                        sidebar={sidebar}
+                        iconName={iconName}
+                      />
+                    ))}
+                  </ul>
+                </div>
+              </div>
+            ) : (
+              <div className="setting-item">
+                <div className="heading mb-5">
+                  <h1 className="title text-xl font-bold text-purple">
+                    My Jobs
+                  </h1>
+                </div>
+                <div className="items">
+                  <ul className="flex flex-col space-y-6">
+                    <ListItem
+                      title="Add Job"
+                      route="/add-job"
+                      iconName="people-two"
+                      sidebar={sidebar}
+                    />
+                  </ul>
+                </div>
+              </div>
+            )}
+          </>
         )}
       </div>
       {/* signout area */}

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() {
@@ -29,7 +30,9 @@ 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,83 +77,87 @@ export default function RightSideBar() {
               </div>
               {/* action */}
             </div>
-            <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"
-                >
-                  <ellipse
-                    cx="20"
-                    cy="20.4043"
-                    rx="20"
-                    ry="19.9392"
-                    fill="url(#paint0_linear_249_2794)"
-                  />
-                  <path
-                    d="M16.7403 14.4243C17.8836 14.4243 19.0272 14.4261 20.1705 14.4233C20.5666 14.4226 20.9612 14.4431 21.3489 14.5184C22.272 14.698 23.0864 15.0843 23.742 15.7545C23.8172 15.8312 23.8625 15.8401 23.9512 15.7762C24.8988 15.091 25.9527 14.6419 27.1244 14.484C27.8811 14.3821 28.6353 14.4115 29.3836 14.5947C30.3403 14.829 31.1613 15.277 31.8103 16.0013C32.413 16.674 32.7934 17.4511 32.9361 18.3386C33.054 19.0731 32.9989 19.7955 32.8499 20.5197C32.6718 21.3867 32.5167 22.2578 32.3477 23.1265C32.1933 23.92 32.0337 24.7123 31.8768 25.5054C31.7749 26.0202 31.6807 26.5367 31.5694 27.0493C31.5198 27.2772 31.3745 27.371 31.1365 27.3713C29.9446 27.3727 28.7528 27.3742 27.561 27.3745C27.2971 27.3745 27.1996 27.273 27.2463 27.0252C27.3872 26.2776 27.5365 25.5313 27.6807 24.7844C27.8136 24.095 27.9428 23.4052 28.076 22.7158C28.2148 21.9976 28.356 21.2798 28.4958 20.5616C28.5601 20.2311 28.6272 19.9038 28.5196 19.5662C28.3527 19.0422 27.8877 18.7075 27.3171 18.667C26.2023 18.5882 25.2894 19.4682 25.1459 20.415C25.0269 21.2017 24.844 21.9788 24.6918 22.7609C24.5703 23.386 24.4546 24.0126 24.3319 24.6378C24.1727 25.4483 24.0125 26.2587 23.8446 27.0674C23.8026 27.2694 23.65 27.3749 23.4365 27.3752C22.2322 27.377 21.028 27.3774 19.8237 27.3763C19.5956 27.3759 19.4854 27.2393 19.5292 27.0142C19.6609 26.3365 19.7956 25.6591 19.9278 24.9814C20.0869 24.1649 20.2446 23.3481 20.4031 22.5312C20.5549 21.7495 20.7017 20.9671 20.8604 20.1868C21.013 19.4359 20.4038 18.7124 19.6179 18.6688C18.5688 18.6102 17.6843 19.3695 17.4934 20.2162C17.3587 20.8144 17.2583 21.42 17.1415 22.0225C16.9389 23.0648 16.7359 24.1067 16.5322 25.1486C16.4114 25.7681 16.2895 26.3873 16.1683 27.0067C16.1187 27.2602 15.9832 27.3798 15.7197 27.3802C13.4145 27.3816 11.1097 27.3816 8.8045 27.3795C8.47305 27.3791 8.20621 27.1083 8.20548 26.7866C8.20475 26.471 8.48911 26.192 8.82823 26.1902C9.56414 26.186 10.3 26.1916 11.0359 26.1863C11.4995 26.1828 11.7854 25.749 11.5864 25.3581C11.5003 25.1888 11.3524 25.0904 11.1641 25.0503C11.0078 25.0169 10.8491 25.0304 10.6914 25.0301C9.77293 25.029 8.85451 25.0304 7.93645 25.0287C7.58712 25.0279 7.36408 24.893 7.27063 24.636C7.12754 24.242 7.42395 23.8444 7.87878 23.8323C8.18869 23.8241 8.49897 23.8305 8.80925 23.8305C9.95253 23.8302 11.0962 23.8312 12.2395 23.8287C12.5326 23.828 12.7702 23.6388 12.8148 23.3814C12.867 23.0807 12.7301 22.839 12.4494 22.7243C12.3493 22.6835 12.2468 22.6885 12.1442 22.6885C11.2805 22.687 10.4169 22.687 9.55318 22.6863C9.25933 22.686 9.03557 22.5749 8.91766 22.3001C8.76471 21.944 8.9998 21.5713 9.39257 21.5209C10.0653 21.4346 10.7403 21.5028 11.4138 21.4793C11.5171 21.4758 11.6207 21.4804 11.7237 21.4719C12.0642 21.4435 12.2891 21.206 12.2814 20.8886C12.2741 20.5943 12.0037 20.3351 11.6861 20.3277C11.4127 20.3213 11.1385 20.3316 10.8651 20.3231C10.5895 20.3142 10.3292 20.098 10.2884 19.8601C10.2362 19.5556 10.365 19.3056 10.633 19.1849C10.7487 19.1327 10.871 19.1402 10.9914 19.1398C11.7211 19.1367 12.4512 19.1388 13.1809 19.1342C13.5488 19.1317 13.7376 19.0099 13.8482 18.7444C13.9891 18.4064 13.6992 18.0148 13.3919 17.9829C13.1791 17.9609 12.967 17.9687 12.7549 17.9683C11.8124 17.9673 10.8699 17.9729 9.92734 17.9744C9.65539 17.9747 9.39002 17.6992 9.37468 17.4074C9.35899 17.1096 9.62181 16.8153 9.93318 16.7865C10.0117 16.7794 10.0912 16.7826 10.1701 16.7826C11.5689 16.7823 12.9677 16.783 14.3665 16.7819C14.6666 16.7816 14.8754 16.6342 14.9535 16.3754C15.0312 16.1184 14.9316 15.8546 14.702 15.7112C14.5728 15.6303 14.4264 15.625 14.28 15.6246C13.8055 15.6235 13.3313 15.6285 12.8567 15.6221C12.4822 15.6171 12.2252 15.4088 12.1876 15.0964C12.1435 14.7271 12.4253 14.4282 12.8359 14.4254C13.5963 14.4204 14.3563 14.4236 15.1167 14.4236C15.658 14.4236 16.1993 14.4236 16.7407 14.4236C16.7403 14.424 16.7403 14.424 16.7403 14.4243Z"
-                    fill="white"
-                  />
-                  <defs>
-                    <linearGradient
-                      id="paint0_linear_249_2794"
-                      x1="3"
-                      y1="16.4165"
-                      x2="26.9783"
-                      y2="26.4379"
-                      gradientUnits="userSpaceOnUse"
+            {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">
+                    <svg
+                      width="40"
+                      height="41"
+                      viewBox="0 0 40 41"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <stop stopColor="#E100C5" />
-                      <stop offset="1" stopColor="#FF812B" />
-                    </linearGradient>
-                  </defs>
-                </svg>
-              </div>
-              {/* name */}
-              <div>
-                <p className="text-thin-light-gray text-base font-medium">
-                  <NavLink to="/referral">Refer a Friend</NavLink>
-                </p>
-              </div>
-            </div>
-            <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"
-                >
-                  <ellipse
-                    cx="20"
-                    cy="20.2341"
-                    rx="20"
-                    ry="19.9392"
-                    fill="#5165FF"
-                  />
-                  <path
-                    d="M26.1647 27.2085C22.5316 27.2448 19.3317 24.2111 19.3359 20.2195C19.3402 16.4128 22.3393 13.2525 26.1704 13.2554C30.0813 13.2583 33.012 16.5264 33.0006 20.2501C32.9892 24.1456 29.8505 27.2492 26.1647 27.2085Z"
-                    fill="white"
-                  />
-                  <path
-                    d="M20.5815 27.1983C20.5217 27.2245 20.4405 27.207 20.3607 27.207C16.0039 27.2085 11.647 27.2085 7.29019 27.2085C7.25742 27.2085 7.22465 27.2099 7.1933 27.2085C7.01094 27.2026 7.00951 27.2026 7.00381 27.0076C7.00239 26.9581 7.00381 26.9086 7.00381 26.8576C7.00381 22.4395 7.00381 18.0214 7.00381 13.6033C7.00381 13.5072 6.99099 13.4082 7.01236 13.334C11.5373 17.9559 16.0566 22.5749 20.5815 27.1983Z"
-                    fill="white"
-                  />
-                </svg>
-              </div>
-              {/* name */}
-              <div>
-                <p className="text-thin-light-gray text-base font-medium">
-                  <NavLink to="/resources">Resources</NavLink>
-                </p>
-              </div>
-            </div>
+                      <ellipse
+                        cx="20"
+                        cy="20.4043"
+                        rx="20"
+                        ry="19.9392"
+                        fill="url(#paint0_linear_249_2794)"
+                      />
+                      <path
+                        d="M16.7403 14.4243C17.8836 14.4243 19.0272 14.4261 20.1705 14.4233C20.5666 14.4226 20.9612 14.4431 21.3489 14.5184C22.272 14.698 23.0864 15.0843 23.742 15.7545C23.8172 15.8312 23.8625 15.8401 23.9512 15.7762C24.8988 15.091 25.9527 14.6419 27.1244 14.484C27.8811 14.3821 28.6353 14.4115 29.3836 14.5947C30.3403 14.829 31.1613 15.277 31.8103 16.0013C32.413 16.674 32.7934 17.4511 32.9361 18.3386C33.054 19.0731 32.9989 19.7955 32.8499 20.5197C32.6718 21.3867 32.5167 22.2578 32.3477 23.1265C32.1933 23.92 32.0337 24.7123 31.8768 25.5054C31.7749 26.0202 31.6807 26.5367 31.5694 27.0493C31.5198 27.2772 31.3745 27.371 31.1365 27.3713C29.9446 27.3727 28.7528 27.3742 27.561 27.3745C27.2971 27.3745 27.1996 27.273 27.2463 27.0252C27.3872 26.2776 27.5365 25.5313 27.6807 24.7844C27.8136 24.095 27.9428 23.4052 28.076 22.7158C28.2148 21.9976 28.356 21.2798 28.4958 20.5616C28.5601 20.2311 28.6272 19.9038 28.5196 19.5662C28.3527 19.0422 27.8877 18.7075 27.3171 18.667C26.2023 18.5882 25.2894 19.4682 25.1459 20.415C25.0269 21.2017 24.844 21.9788 24.6918 22.7609C24.5703 23.386 24.4546 24.0126 24.3319 24.6378C24.1727 25.4483 24.0125 26.2587 23.8446 27.0674C23.8026 27.2694 23.65 27.3749 23.4365 27.3752C22.2322 27.377 21.028 27.3774 19.8237 27.3763C19.5956 27.3759 19.4854 27.2393 19.5292 27.0142C19.6609 26.3365 19.7956 25.6591 19.9278 24.9814C20.0869 24.1649 20.2446 23.3481 20.4031 22.5312C20.5549 21.7495 20.7017 20.9671 20.8604 20.1868C21.013 19.4359 20.4038 18.7124 19.6179 18.6688C18.5688 18.6102 17.6843 19.3695 17.4934 20.2162C17.3587 20.8144 17.2583 21.42 17.1415 22.0225C16.9389 23.0648 16.7359 24.1067 16.5322 25.1486C16.4114 25.7681 16.2895 26.3873 16.1683 27.0067C16.1187 27.2602 15.9832 27.3798 15.7197 27.3802C13.4145 27.3816 11.1097 27.3816 8.8045 27.3795C8.47305 27.3791 8.20621 27.1083 8.20548 26.7866C8.20475 26.471 8.48911 26.192 8.82823 26.1902C9.56414 26.186 10.3 26.1916 11.0359 26.1863C11.4995 26.1828 11.7854 25.749 11.5864 25.3581C11.5003 25.1888 11.3524 25.0904 11.1641 25.0503C11.0078 25.0169 10.8491 25.0304 10.6914 25.0301C9.77293 25.029 8.85451 25.0304 7.93645 25.0287C7.58712 25.0279 7.36408 24.893 7.27063 24.636C7.12754 24.242 7.42395 23.8444 7.87878 23.8323C8.18869 23.8241 8.49897 23.8305 8.80925 23.8305C9.95253 23.8302 11.0962 23.8312 12.2395 23.8287C12.5326 23.828 12.7702 23.6388 12.8148 23.3814C12.867 23.0807 12.7301 22.839 12.4494 22.7243C12.3493 22.6835 12.2468 22.6885 12.1442 22.6885C11.2805 22.687 10.4169 22.687 9.55318 22.6863C9.25933 22.686 9.03557 22.5749 8.91766 22.3001C8.76471 21.944 8.9998 21.5713 9.39257 21.5209C10.0653 21.4346 10.7403 21.5028 11.4138 21.4793C11.5171 21.4758 11.6207 21.4804 11.7237 21.4719C12.0642 21.4435 12.2891 21.206 12.2814 20.8886C12.2741 20.5943 12.0037 20.3351 11.6861 20.3277C11.4127 20.3213 11.1385 20.3316 10.8651 20.3231C10.5895 20.3142 10.3292 20.098 10.2884 19.8601C10.2362 19.5556 10.365 19.3056 10.633 19.1849C10.7487 19.1327 10.871 19.1402 10.9914 19.1398C11.7211 19.1367 12.4512 19.1388 13.1809 19.1342C13.5488 19.1317 13.7376 19.0099 13.8482 18.7444C13.9891 18.4064 13.6992 18.0148 13.3919 17.9829C13.1791 17.9609 12.967 17.9687 12.7549 17.9683C11.8124 17.9673 10.8699 17.9729 9.92734 17.9744C9.65539 17.9747 9.39002 17.6992 9.37468 17.4074C9.35899 17.1096 9.62181 16.8153 9.93318 16.7865C10.0117 16.7794 10.0912 16.7826 10.1701 16.7826C11.5689 16.7823 12.9677 16.783 14.3665 16.7819C14.6666 16.7816 14.8754 16.6342 14.9535 16.3754C15.0312 16.1184 14.9316 15.8546 14.702 15.7112C14.5728 15.6303 14.4264 15.625 14.28 15.6246C13.8055 15.6235 13.3313 15.6285 12.8567 15.6221C12.4822 15.6171 12.2252 15.4088 12.1876 15.0964C12.1435 14.7271 12.4253 14.4282 12.8359 14.4254C13.5963 14.4204 14.3563 14.4236 15.1167 14.4236C15.658 14.4236 16.1993 14.4236 16.7407 14.4236C16.7403 14.424 16.7403 14.424 16.7403 14.4243Z"
+                        fill="white"
+                      />
+                      <defs>
+                        <linearGradient
+                          id="paint0_linear_249_2794"
+                          x1="3"
+                          y1="16.4165"
+                          x2="26.9783"
+                          y2="26.4379"
+                          gradientUnits="userSpaceOnUse"
+                        >
+                          <stop stopColor="#E100C5" />
+                          <stop offset="1" stopColor="#FF812B" />
+                        </linearGradient>
+                      </defs>
+                    </svg>
+                  </div>
+                  {/* name */}
+                  <div>
+                    <p className="text-thin-light-gray text-base font-medium">
+                      <NavLink to="/referral">Refer a Friend</NavLink>
+                    </p>
+                  </div>
+                </div>
+                <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"
+                    >
+                      <ellipse
+                        cx="20"
+                        cy="20.2341"
+                        rx="20"
+                        ry="19.9392"
+                        fill="#5165FF"
+                      />
+                      <path
+                        d="M26.1647 27.2085C22.5316 27.2448 19.3317 24.2111 19.3359 20.2195C19.3402 16.4128 22.3393 13.2525 26.1704 13.2554C30.0813 13.2583 33.012 16.5264 33.0006 20.2501C32.9892 24.1456 29.8505 27.2492 26.1647 27.2085Z"
+                        fill="white"
+                      />
+                      <path
+                        d="M20.5815 27.1983C20.5217 27.2245 20.4405 27.207 20.3607 27.207C16.0039 27.2085 11.647 27.2085 7.29019 27.2085C7.25742 27.2085 7.22465 27.2099 7.1933 27.2085C7.01094 27.2026 7.00951 27.2026 7.00381 27.0076C7.00239 26.9581 7.00381 26.9086 7.00381 26.8576C7.00381 22.4395 7.00381 18.0214 7.00381 13.6033C7.00381 13.5072 6.99099 13.4082 7.01236 13.334C11.5373 17.9559 16.0566 22.5749 20.5815 27.1983Z"
+                        fill="white"
+                      />
+                    </svg>
+                  </div>
+                  {/* name */}
+                  <div>
+                    <p className="text-thin-light-gray text-base font-medium">
+                      <NavLink to="/resources">Resources</NavLink>
+                    </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 logo3 from "../../assets/images/wrenchboard.png"; //logo-3.svg";
+import {
+  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,363 +105,160 @@ 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
+                title="Dashboard"
+                route="/"
+                sidebar={sidebar}
+                iconName="market"
+              />
+              {userDetails && userDetails?.account_type !== "FAMILY" && (
                 <ListItem
-                  key={idx}
-                  title={name}
-                  route={path}
-                  bubble={bubble}
-                  sidebar = {sidebar}
+                  title="Market"
+                  route="/market"
+                  bubble={noOfJobs}
+                  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>*/}
+              )}
+              <ListItem
+                title="My Task(s)"
+                route="/mytask"
+                sidebar={sidebar}
+                iconName="market"
+              />
             </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 */}
-        <div className="menu-setting-items mb-11">
-          {/* menus item */}
-          <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>
-                </div>
-                <ul className="flex flex-col space-y-6">
-                  <li className="item group">
-                    <NavLink
-                      to="/acc-family"
-                      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"
-                        }`}
-                      >
-                        Family Corner
-                      </span>
-                    </NavLink>
-                  </li>
-                </ul>
-              </div>
-          </div>
-        </div>
-
-        {!userDetails.post_jobs ? (
-          
+        {userDetails?.account_type !== "FAMILY" && (
           <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="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> */}
+            {/* menus item */}
+            <div
+              className={`menu-item transition-all duration-300 ease-in-out ${
+                sidebar ? "mb-14" : ""
+              }`}
+            >
               <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">
+                    Family
+                  </h1>
                 </div>
                 <ul className="flex flex-col space-y-6">
-                  <li className="item group">
-                    <NavLink
-                      to="/start-job"
-                      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"
-                        }`}
-                      >
-                        Enable Job Post
-                      </span>
-                    </NavLink>
-                  </li>
+                  <ListItem
+                    title="Family Corner"
+                    route="/acc-family"
+                    iconName="people-two"
+                    sidebar={sidebar}
+                  />
                 </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>
-            </div>
-            <div className="items">
-              <ul className="flex flex-col space-y-6">
-                <li className="item group">
-                  <NavLink
-                    to="/myjobs"
-                    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"
-                      }`}
-                    >
-                      List
-                    </span>
-                  </NavLink>
-                </li>
-                <li className="item group">
-                  <NavLink
-                    to="/my-pending-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"
-                      }`}
-                    >
-                      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>
-            </div>
-            <div className="items">
-              <ul className="flex flex-col space-y-6">
-                <li className="item group">
-                  <NavLink
-                    to="/add-job"
-                    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"
-                      }`}
-                    >
-                      Add Job
-                    </span>
-                  </NavLink>
-                </li>
-              </ul>
-            </div>
-          </div>
+        )}
+        {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 ${
+                    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 ${
+                            ((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"
+                            }`}
+                          >
+                            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>
+                  </div>
+                  <div className="items">
+                    <ul className="flex flex-col space-y-6">
+                      {[
+                        {
+                          name: "List",
+                          path: "/myjobs",
+                          iconName: "people-two",
+                        },
+                        {
+                          name: "Pending",
+                          path: "/my-pending-jobs",
+                          iconName: "people-two",
+                        },
+                        {
+                          name: "Active",
+                          path: "/my-active-jobs",
+                          iconName: "people-two",
+                        },
+                      ].map(({ name, path, iconName }, idx) => (
+                        <ListItem
+                          key={idx}
+                          title={name}
+                          route={path}
+                          sidebar={sidebar}
+                          iconName={iconName}
+                        />
+                      ))}
+                    </ul>
+                  </div>
+                </div>
+              </>
+            ) : (
+              <div className="setting-item">
+                <div className="heading mb-5">
+                  <h1 className="title text-xl font-bold text-purple">
+                    My Jobs
+                  </h1>
+                </div>
+                <div className="items">
+                  <ul className="flex flex-col space-y-6">
+                    <ListItem
+                      title="Add Job"
+                      route="/add-job"
+                      iconName="people-two"
+                      sidebar={sidebar}
+                    />
+                  </ul>
+                </div>
+              </div>
+            )}
+          </>
         )}
       </div>
       {/* signout area */}
@@ -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/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}>
-      <App />
+      <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/store/UserDetails.js

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

src/store/jobLists.js

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

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/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

@@ -8,6 +8,11 @@ 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();
@@ -33,7 +38,9 @@ export default function MyJobsPage() {
    // 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}/>
         </>
     );
 }