From ab9e98093c176c663836b13aebf8bda6d539233b Mon Sep 17 00:00:00 2001
From: Ebube <chukwumdiebubeojinta@gmail.com>
Date: Mon, 22 May 2023 17:41:55 +0100
Subject: [PATCH] fixed bug

---
 src/components/AuthPages/Login/index.jsx  |   2 +-
 src/components/Partials/Header.jsx        | 366 +++++++++++-----------
 src/components/Partials/MobileSideBar.jsx |  46 +--
 src/components/Partials/Sidebar.jsx       | 247 ++++++++-------
 4 files changed, 334 insertions(+), 327 deletions(-)

diff --git a/src/components/AuthPages/Login/index.jsx b/src/components/AuthPages/Login/index.jsx
index b67f13a..17e0818 100644
--- a/src/components/AuthPages/Login/index.jsx
+++ b/src/components/AuthPages/Login/index.jsx
@@ -154,7 +154,7 @@ export default function Login() {
                   Sign in
                 </button>
                 <button
-                  name="family"
+                  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] ${
                     loginCom.family && "border-l-2 h-[45px]"
                   }`}
diff --git a/src/components/Partials/Header.jsx b/src/components/Partials/Header.jsx
index bac5487..5a4590b 100644
--- a/src/components/Partials/Header.jsx
+++ b/src/components/Partials/Header.jsx
@@ -1,4 +1,4 @@
-import React, { useContext,useState, useEffect } from "react";
+import React, { useContext, useState, useEffect } from "react";
 import { Link, useLocation } from "react-router-dom";
 import bank1 from "../../assets/images/bank-1.png";
 import bank2 from "../../assets/images/bank-2.png";
@@ -13,20 +13,18 @@ import SearchCom from "../Helpers/SearchCom";
 import WalletHeader from "../MyWallet/WalletHeader";
 import usersService from "../../services/UsersService";
 
-import siteLogo from '../../assets/images/wrenchboard.png'
-import Flag from '../../assets/images/united-states.svg'
+import siteLogo from "../../assets/images/wrenchboard.png";
+import Flag from "../../assets/images/united-states.svg";
 import { useSelector } from "react-redux";
 
-
 export default function Header({ logoutModalHandler, sidebarHandler }) {
   const [balanceDropdown, setbalanceValue] = useToggle(false);
   const [notificationDropdown, setNotificationValue] = useToggle(false);
   const [userProfileDropdown, setProfileDropdown] = useToggle(false);
   const [moneyPopup, setPopup] = useToggle(false);
-  const [toggleNotification, setToggleNotification] = useToggle(false)
+  const [toggleNotification, setToggleNotification] = useToggle(false);
   const darkMode = useContext(DarkModeContext);
-  const {userDetails} = useSelector((state) => state?.userDetails)
-
+  const { userDetails } = useSelector((state) => state?.userDetails);
 
   const [myWalletList, setMyWalletList] = useState([]);
   const api = new usersService();
@@ -34,7 +32,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
   const getMyWalletList = async () => {
     try {
       const res = await api.getUserWallets(null);
-      console.log("wallet - > ",res.data);
+      console.log("wallet - > ", res.data);
       setMyWalletList(res.data);
     } catch (error) {
       console.log("Error getting mode");
@@ -87,22 +85,22 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
     setbalanceValue.set(false);
   };
 
-  const setNotification = ()=> {
-    setToggleNotification.toggle()
-  }
+  const setNotification = () => {
+    setToggleNotification.toggle();
+  };
 
   // getting the location of head
-  let {pathname} = useLocation()
-  
+  let { pathname } = useLocation();
+
   const handleWalletBtn = () => {
-    if (pathname === "/my-wallet"){
-      setbalanceValue.set(false)
-    } else return balanceDropdown
-  }
+    if (pathname === "/my-wallet") {
+      setbalanceValue.set(false);
+    } else return balanceDropdown;
+  };
 
   // User Profile
-  let {firstname, lastname, email, profile_pic} = userDetails
-  let userEmail = email.split('@')[0]
+  let { firstname, lastname, email, profile_pic } = userDetails;
+  let userEmail = email.split("@")[0];
 
   return (
     <>
@@ -240,11 +238,12 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
 
             {/*<div className="lg:hidden block"></div>*/}
             <WalletHeader
-                myWalletList={myWalletList}
-                handlerBalance={handlerBalance}
-                balanceDropdown={balanceDropdown}
-                addMoneyHandler={addMoneyHandler}
-                setBalanceDropdown = {setbalanceValue} />
+              myWalletList={myWalletList}
+              handlerBalance={handlerBalance}
+              balanceDropdown={balanceDropdown}
+              addMoneyHandler={addMoneyHandler}
+              setBalanceDropdown={setbalanceValue}
+            />
             {/* notification */}
             <div className="user-notification lg:block hidden relative">
               <div
@@ -481,18 +480,16 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                 {/* profile-image */}
                 <div className="lg:w-[62px] lg:h-[62px] w-[50px] h-[50px] rounded-full overflow-hidden">
                   <img
-                    src={profile_pic != '' ? profile_pic : profileImg}
+                    src={profile_pic != "" ? profile_pic : profileImg}
                     alt="profile"
                     className="w-full h-full"
                   />
                 </div>
                 <div className="lg:block hidden">
                   <h1 className="text-xl font-bold   text-dark-gray dark:text-white">
-                  {`${firstname} ${lastname}`}
+                    {`${firstname} ${lastname}`}
                   </h1>
-                  <p className="text-sm text-thin-light-gray">
-                    @{userEmail}
-                  </p>
+                  <p className="text-sm text-thin-light-gray">@{userEmail}</p>
                 </div>
               </div>
               <div
@@ -505,7 +502,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                 </div>
                 <div className="heading border-b dark:border-[#5356fb29]  border-light-purple px-7 py-2">
                   <h3 className="text-xl font-bold   text-dark-gray dark:text-white">
-                  Fullname
+                    Fullname
                   </h3>
                   <p className="text-base text-gray-400 dark:text-white hover:text-sky-blue cursor-pointer">{`${firstname} ${lastname}`}</p>
                 </div>
@@ -657,23 +654,19 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                       </div>
                     </li> */}
 
+                    {userDetails && userDetails?.account_type !== "FAMILY" && (
+                      <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
+                        <Link to="/settings" className="notifications">
+                          <div className="name">
+                            <p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
+                              My Profile
+                            </p>
+                          </div>
+                        </Link>
+                      </li>
+                    )}
                     <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
-                      <Link
-                        to="/settings"
-                        className="notifications"
-                      >
-                        <div className="name">
-                          <p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
-                            My Profile
-                          </p>
-                        </div>
-                      </Link>
-                    </li>
-                    <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
-                      <Link
-                        to="/my-wallet"
-                        className="notifications"
-                      >
+                      <Link to="/my-wallet" className="notifications">
                         <div className="name">
                           <p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
                             My Wallet
@@ -681,155 +674,150 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                         </div>
                       </Link>
                     </li>
-                    <li className="content-item relative my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
-                      <Link
-                        to="#"
-                        className="notifications"
-                      >
-                        <div className="name">
-                          <p className="flex items-center justify-between text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
-                            <span>Reports</span> <span>&gt;</span>
-                          </p>
-                        </div>
-                      </Link>
-                      {/* report list items*/}
-                      <div className="inner-list-items absolute rounded-lg" onClick={setNotification}>
-                        <ul className="p-3">
-                          <li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
-                            <Link
-                              to="/referral"
-                              className="notifications"
-                            >
-                              <div className="name">
-                                <p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
-                                  Referrals
-                                </p>
+                    {userDetails && userDetails?.account_type !== "FAMILY" && (
+                      <>
+                        <li className="content-item relative my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
+                          <Link to="#" className="notifications">
+                            <div className="name">
+                              <p className="flex items-center justify-between text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
+                                <span>Reports</span> <span>&gt;</span>
+                              </p>
+                            </div>
+                          </Link>
+                          {/* report list items*/}
+                          <div
+                            className="inner-list-items absolute rounded-lg"
+                            onClick={setNotification}
+                          >
+                            <ul className="p-3">
+                              <li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
+                                <Link to="/referral" className="notifications">
+                                  <div className="name">
+                                    <p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
+                                      Referrals
+                                    </p>
+                                  </div>
+                                </Link>
+                              </li>
+                              <li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
+                                <Link to="#" className="notifications">
+                                  <div className="name">
+                                    <p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
+                                      Billing
+                                    </p>
+                                  </div>
+                                </Link>
+                              </li>
+                              <li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
+                                <Link to="#" className="notifications">
+                                  <div className="name">
+                                    <p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
+                                      Payments
+                                    </p>
+                                  </div>
+                                </Link>
+                              </li>
+                              <li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
+                                <Link to="#" className="notifications">
+                                  <div className="name">
+                                    <p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
+                                      Completed Jobs
+                                    </p>
+                                  </div>
+                                </Link>
+                              </li>
+                              <li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
+                                <Link to="#" className="notifications">
+                                  <div className="name">
+                                    <p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
+                                      Previous Task
+                                    </p>
+                                  </div>
+                                </Link>
+                              </li>
+                            </ul>
+                            <hr />
+                            <div className="px-7 py-3 cursor-pointer flex items-center">
+                              <div
+                                className={`h-6 w-8 mr-1 p-1 ${
+                                  toggleNotification
+                                    ? "bg-sky-blue flex justify-end items-center"
+                                    : "bg-slate-200"
+                                } rounded-full transition`}
+                              >
+                                <div className="w-4 h-full bg-white rounded-full"></div>
                               </div>
-                            </Link>
-                          </li>
-                          <li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
-                            <Link
-                              to="#"
-                              className="notifications"
-                            >
-                              <div className="name">
-                                <p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
-                                  Billing
-                                </p>
-                              </div>
-                            </Link>
-                          </li>
-                          <li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
-                            <Link
-                              to="#"
-                              className="notifications"
-                            >
-                              <div className="name">
-                                <p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
-                                  Payments
-                                </p>
-                              </div>
-                            </Link>
-                          </li>
-                          <li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
-                            <Link
-                              to="#"
-                              className="notifications"
-                            >
-                              <div className="name">
-                                <p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
-                                  Completed Jobs
-                                </p>
-                              </div>
-                            </Link>
-                          </li>
-                          <li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
-                            <Link
-                              to="#"
-                              className="notifications"
-                            >
-                              <div className="name">
-                                <p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
-                                  Previous Task
-                                </p>
-                              </div>
-                            </Link>
-                          </li>
-                        </ul>
-                        <hr />
-                        <div className="px-7 py-3 cursor-pointer flex items-center">
-                          <div className={`h-6 w-8 mr-1 p-1 ${toggleNotification ? 'bg-sky-blue flex justify-end items-center': 'bg-slate-200'} rounded-full transition`}>
-                            <div className="w-4 h-full bg-white rounded-full"></div>  
+                              <p className="text-sm py-2 px-4 text-slate-400 dark:text-white">
+                                Notifications
+                              </p>
+                            </div>
                           </div>
-                          <p className="text-sm py-2 px-4 text-slate-400 dark:text-white">
-                            Notifications
-                          </p>
-                        </div>
-                      </div>
-                    {/* end report list items*/}
-                    </li>
-                    <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
-                      <Link
-                        to="#"
-                        className="notifications"
-                      >
-                        <div className="name">
-                          <p className="text-sm py-2 px-4 text-dark-gray dark:text-white font-medium">
-                            My Statements
-                          </p>
-                        </div>
-                      </Link>
-                    </li>
+                          {/* end report list items*/}
+                        </li>
+                        <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
+                          <Link to="#" className="notifications">
+                            <div className="name">
+                              <p className="text-sm py-2 px-4 text-dark-gray dark:text-white font-medium">
+                                My Statements
+                              </p>
+                            </div>
+                          </Link>
+                        </li>
+                      </>
+                    )}
                   </ul>
                   <hr />
                   <ul className="px-7">
-                    <li className="content-item relative my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
-                      <Link
-                        to="#"
-                        className="notifications"
-                      >
-                        <div className="name">
-                          <div className="flex items-center justify-between text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
-                            <p>Language</p> 
-                            <div className="px-1 flex items-center space-x-1 bg-slate-100 rounded-sm">
-                              <p className="text-[10px]">English </p>
-                              <img className="w-[10px] h-[10px]" src={Flag} alt="U.S.A Flag" />
+                    {userDetails && userDetails?.account_type !== "FAMILY" && (
+                      <>
+                        <li className="content-item relative my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
+                          <Link to="#" className="notifications">
+                            <div className="name">
+                              <div className="flex items-center justify-between text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
+                                <p>Language</p>
+                                <div className="px-1 flex items-center space-x-1 bg-slate-100 rounded-sm">
+                                  <p className="text-[10px]">English </p>
+                                  <img
+                                    className="w-[10px] h-[10px]"
+                                    src={Flag}
+                                    alt="U.S.A Flag"
+                                  />
+                                </div>
+                              </div>
                             </div>
+                          </Link>
+                          {/* langauge list items*/}
+                          <div className="inner-list-items absolute rounded-lg">
+                            <ul className="p-3">
+                              <li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
+                                <Link to="#" className="notifications">
+                                  <div className="name">
+                                    <div className="px-1 flex items-center space-x-1 bg-slate-100 rounded-sm text-sm py-1 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
+                                      <img
+                                        className="w-[15px] h-[15px]"
+                                        src={Flag}
+                                        alt="U.S.A Flag"
+                                      />
+                                      <p className="text-sm">English </p>
+                                    </div>
+                                  </div>
+                                </Link>
+                              </li>
+                            </ul>
                           </div>
-                        </div>
-                      </Link>
-                       {/* langauge list items*/}
-                       <div className="inner-list-items absolute rounded-lg">
-                        <ul className="p-3">
-                          <li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
-                            <Link
-                              to="#"
-                              className="notifications"
-                            >
-                              <div className="name">
-                              <div className="px-1 flex items-center space-x-1 bg-slate-100 rounded-sm text-sm py-1 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
-                                <img className="w-[15px] h-[15px]" src={Flag} alt="U.S.A Flag" />
-                                <p className="text-sm">English </p>
-                              </div>
-                              </div>
-                            </Link>
-                          </li>
-                        </ul>
-                      </div>
-                    {/* end Language list items*/}
-                    </li>
-                    <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
-                      <Link
-                        to="#"
-                        className="notifications"
-                      >
-                        <div className="name">
-                          <p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
-                            Account Settings
-                          </p>
-                        </div>
-                      </Link>
-                    </li>
+                          {/* end Language list items*/}
+                        </li>
+                        <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
+                          <Link to="#" className="notifications">
+                            <div className="name">
+                              <p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
+                                Account Settings
+                              </p>
+                            </div>
+                          </Link>
+                        </li>
+                      </>
+                    )}
 
                     <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg cursor-pointer">
                       <div className="name" onClick={logoutModalHandler}>
@@ -839,7 +827,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                       </div>
                     </li>
                   </ul>
-                  <hr className="mb-3"/>
+                  <hr className="mb-3" />
                 </div>
               </div>
             </div>
diff --git a/src/components/Partials/MobileSideBar.jsx b/src/components/Partials/MobileSideBar.jsx
index 37ea8af..b35704c 100644
--- a/src/components/Partials/MobileSideBar.jsx
+++ b/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,32 +83,32 @@ 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: "/", iconName: "market" },
-                userDetails?.account_type !== "family"
-                  ? {
-                      name: "Market",
-                      path: "/market",
-                      bubble: noOfJobs,
-                      iconName: "market",
-                    }
-                  : {},
-                { name: "My Task(s)", path: "/mytask", iconName: "market" },
-              ].map(({ name, path, bubble, iconName }, idx) => (
+              <ListItem
+                title="Dashboard"
+                route="/"
+                sidebar={sidebar}
+                iconName="market"
+              />
+              {userDetails && userDetails?.account_type !== "FAMILY" && (
                 <ListItem
-                  key={idx}
-                  title={name}
-                  route={path}
-                  bubble={bubble}
+                  title="Market"
+                  route="/market"
+                  bubble={noOfJobs}
                   sidebar={sidebar}
-                  iconName={iconName}
+                  iconName="market"
                 />
-              ))}
+              )}
+              <ListItem
+                title="My Task(s)"
+                route="/mytask"
+                sidebar={sidebar}
+                iconName="market"
+              />
             </ul>
           </div>
         </div>
 
-        {userDetails?.account_type !== "family" && (
+        {userDetails?.account_type !== "FAMILY" && (
           <>
             {!userDetails?.post_jobs ? (
               <div className="menu-setting-items mb-11">
diff --git a/src/components/Partials/Sidebar.jsx b/src/components/Partials/Sidebar.jsx
index 670a022..3296517 100644
--- a/src/components/Partials/Sidebar.jsx
+++ b/src/components/Partials/Sidebar.jsx
@@ -1,10 +1,12 @@
 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);
@@ -16,6 +18,10 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
   const marketData = jobLists?.result_list;
   let noOfJobs = marketData?.length <= 0 ? "0" : marketData?.length;
 
+  function accntType() {
+    return userDetails?.account_type !== "FAMILY";
+  }
+
   useEffect(() => {
     const title = document.querySelectorAll(".menu-setting-items .heading");
     if (sidebar) {
@@ -103,33 +109,33 @@ 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: "/", iconName: "market" },
-                userDetails?.account_type !== "family"
-                  ? {
-                      name: "Market",
-                      path: "/market",
-                      bubble: noOfJobs,
-                      iconName: "market",
-                    }
-                  : {},
-                { name: "My Task(s)", path: "/mytask", iconName: "market" },
-              ].map(({ name, path, bubble, iconName }, idx) => (
+              <ListItem
+                title="Dashboard"
+                route="/"
+                sidebar={sidebar}
+                iconName="market"
+              />
+              {userDetails && userDetails?.account_type !== "FAMILY" && (
                 <ListItem
-                  key={idx}
-                  title={name}
-                  route={path}
-                  bubble={bubble}
+                  title="Market"
+                  route="/market"
+                  bubble={noOfJobs}
                   sidebar={sidebar}
-                  iconName={iconName}
+                  iconName="market"
                 />
-              ))}
+              )}
+              <ListItem
+                title="My Task(s)"
+                route="/mytask"
+                sidebar={sidebar}
+                iconName="market"
+              />
             </ul>
           </div>
         </div>
 
         {/* menu and settings item */}
-        {userDetails?.account_type !== "family" && (
+        {userDetails?.account_type !== "FAMILY" && (
           <div className="menu-setting-items mb-11">
             {/* menus item */}
             <div
@@ -156,17 +162,16 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
           </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="setting-item">
+        <>
+          {!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="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">
@@ -175,93 +180,98 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                   </NavLink>
                 </div>
               </div> */}
-                  <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")
+                <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"
                           }`}
                         >
-                          <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>
+                          Enable Job Post
+                        </span>
+                      </NavLink>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          ) : jobLists?.result_list?.length ? (
+            <>
+              {userDetails?.account_type !== "FAMILY" && (
+                <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>
-            ) : 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 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 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>
+          )}
+        </>
       </div>
       {/* signout area */}
       {sidebar ? (
@@ -328,9 +338,16 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
   );
 }
 
-const ListItem = ({ sidebar, route, title, bubble, iconName }) => {
+const ListItem = ({
+  sidebar,
+  route,
+  title,
+  bubble,
+  iconName,
+  listClassName,
+}) => {
   return (
-    <li className="item group">
+    <li className={`item group ${listClassName}`}>
       <NavLink
         to={route}
         className={`nav-item flex items-center  ${