Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into task-bubble-length

.env

@@ -28,5 +28,8 @@ REACT_APP_FLUTTERWAVE_APIKEY=FLWPUBK_TEST-54c90141b028789d671067bd72f781a9-X
 # Had to change the error time to 3sec cause it took too long
 REACT_APP_RESET_START_ERROR_TIMEOUT=3000
 
+#NUMBER OF ITEMS PER PAGE
+REACT_APP_ITEM_PER_PAGE=5
+
 #apigate.lotus.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227

.env.development

@@ -28,5 +28,8 @@ REACT_APP_FLUTTERWAVE_APIKEY=FLWPUBK_TEST-54c90141b028789d671067bd72f781a9-X
 # Had to change the error time to 3sec cause it took too long
 REACT_APP_RESET_START_ERROR_TIMEOUT=3000
 
+#NUMBER OF ITEMS PER PAGE
+REACT_APP_ITEM_PER_PAGE=5
+
 #apigate.lotus.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227

.env.poduction

@@ -28,5 +28,8 @@ REACT_APP_FLUTTERWAVE_APIKEY=FLWPUBK_TEST-54c90141b028789d671067bd72f781a9-X
 # Had to change the error time to 3sec cause it took too long
 REACT_APP_RESET_START_ERROR_TIMEOUT=3000
 
+#NUMBER OF ITEMS PER PAGE
+REACT_APP_ITEM_PER_PAGE=5
+
 #apigate.orion.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227

src/Routers.jsx

@@ -22,7 +22,7 @@ import UpdatePasswordPages from "./views/UpdatePasswordPages";
 import UploadProductPage from "./views/UploadProductPage";
 import UserProfilePage from "./views/UserProfilePage";
 import VerifyYouPages from "./views/VerifyYouPages";
-
+import VerifyPasswordPages from "./views/VerifyPasswordPages";
 import RemindersPage from './views/RemindersPage';
 import TrackingPage from "./views/TrackingPage";
 import CalendarPage from "./views/CalendarPage";
@@ -31,6 +31,9 @@ import MyTaskPage from "./views/MyTaskPage";
 import MyJobsPage from "./views/MyJobsPage";
 import ReferralPage from "./views/ReferralPage";
 import VerifyLinkPages from "./views/VerifyLinkPages";
+import MyActiveJobsPage from "./views/MyActiveJobsPage";
+import FamilyAccPage from "./views/FamilyAccPage";
+import StartJob from "./components/MyJobs/StartJob";
 
 export default function Routers() {
   return (
@@ -50,6 +53,7 @@ export default function Routers() {
           element={<UpdatePasswordPages />}
         />
         <Route path="/vemail" element={<VerifyLinkPages />} />
+        <Route path="/complereset" element={<VerifyPasswordPages />} />
         <Route exact path="/outmessage" element={<VerifyYouPages />} />
 
         {/* private route */}
@@ -72,7 +76,9 @@ export default function Routers() {
           <Route exact path="/notification" element={<Notification />} />
           <Route exact path="/mytask" element={<MyTaskPage />} />
           <Route exact path="/myjobs" element={<MyJobsPage />} />
-          <Route exact path="/my-active-jobs"  element={<MyJobsPage />} />
+          <Route exact path="/my-active-jobs"  element={<MyActiveJobsPage />} />
+          <Route exact path="/acc-family"  element={<FamilyAccPage />} />
+          <Route exact path="/start-job"  element={<StartJob />} />
           <Route
             exact
             path="/my-collection/collection-item"

src/components/AuthPages/Login/index.jsx

@@ -4,17 +4,16 @@ import { toast } from "react-toastify";
 import googleLogo from "../../../assets/images/google-logo.svg";
 import appleLogo from "../../../assets/images/apple-black.svg";
 import facebookLogo from "../../../assets/images/facebook-4.svg";
-import WrenchBoard from "../../../assets/images/wrenchboard.png"
+import WrenchBoard from "../../../assets/images/wrenchboard.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
 
 import { useDispatch, useSelector } from "react-redux";
-import {updateUserDetails} from '../../../store/UserDetails'
+import { updateUserDetails } from "../../../store/UserDetails";
 
 export default function Login() {
-
-  const dispatch = useDispatch()
+  const dispatch = useDispatch();
 
   const [checked, setValue] = useState(false);
   const [loginLoading, setLoginLoading] = useState(false);
@@ -22,7 +21,7 @@ export default function Login() {
   //login error state
   const [loginError, setLoginError] = useState(false);
   // for the catch error
-  const [msgError, setMsgError] = useState('');
+  const [msgError, setMsgError] = useState("");
 
   const rememberMe = () => {
     setValue(!checked);
@@ -41,57 +40,62 @@ export default function Login() {
   const navigate = useNavigate();
   const userApi = new usersService();
 
-
   const doLogin = async () => {
-    if (email == '' && password == '') {
-      setMsgError('Please fill in fields')
-    }
     try {
       if (email !== "" && password !== "") {
         var postData = {
           username: email,
           password: password,
-          sessionid: 'STARTING'
+          sessionid: "STARTING",
         };
-        const loginResult = await userApi.logInUser(postData);  // just for a test
+        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
+        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))
+          dispatch(updateUserDetails(loginResult.data));
           setTimeout(() => {
             navigate("/", { replace: true });
             setLoginLoading(false);
           }, 2000);
         } else {
           // toast.error("Invalid Credential");
-          setLoginError(true)
+          setLoginError(true);
         }
+      } else {
+        setMsgError("Please fill in fields");
       }
     } catch (error) {
-      setMsgError('An error occurred')
+      setMsgError("An error occurred");
     } finally {
       setTimeout(() => {
-        setLoginError(false)
-        setMsgError(null)
-      }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT))
+        setLoginError(false);
+        setMsgError(null);
+      }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
     }
   };
 
   return (
     <>
-      <AuthLayout
-        slogan="Welcome to WrenchBoard"
-      >
+      <AuthLayout slogan="Welcome to WrenchBoard">
         <div className="w-full">
-          <div className='mb-12'>
-            <Link to='#'>
-              <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
+          <div className="mb-12">
+            <Link to="#">
+              <img
+                src={WrenchBoard}
+                alt="wrenchboard"
+                className="h-10 mx-auto"
+              />
             </Link>
           </div>
           <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5">
@@ -100,7 +104,15 @@ export default function Login() {
                 <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
                   Sign In to WrenchBoard
                 </h1>
-                <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">New Here? <Link to='/signup' className='font-semibold text-[#4687ba] hover:text-[#009ef7] transition'>Create an Account</Link></span>
+                <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                  New Here?{" "}
+                  <Link
+                    to="/signup"
+                    className="font-semibold text-[#4687ba] hover:text-[#009ef7] transition"
+                  >
+                    Create an Account
+                  </Link>
+                </span>
               </div>
               <div className="input-area">
                 <div className="input-item mb-5">
@@ -160,8 +172,23 @@ export default function Login() {
                   Forgot Password
                 </a>
               </div> */}
-                {loginError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px] 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>}
+                {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
@@ -176,9 +203,9 @@ export default function Login() {
                       )}
                     </button>
                   </div>
-                  <BrandBtn link='#' imgSrc={googleLogo} brand='Google' />
-                  <BrandBtn link='#' imgSrc={facebookLogo} brand='Facebook' />
-                  <BrandBtn link='#' imgSrc={appleLogo} brand='Apple' />
+                  <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">
@@ -188,7 +215,10 @@ export default function Login() {
                   </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>
+                <div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
+                  This site is protected by hCaptcha and the our Privacy Policy
+                  and Terms of Service apply.
+                </div>
               </div>
             </div>
           </div>
@@ -198,11 +228,7 @@ export default function Login() {
   );
 }
 
-const BrandBtn = ({
-  link,
-  imgSrc,
-  brand
-}) => {
+const BrandBtn = ({ link, imgSrc, brand }) => {
   return (
     <div className="flex justify-center bottomMargin">
       <a
@@ -215,5 +241,5 @@ const BrandBtn = ({
         </span>
       </a>
     </div>
-  )
-}
+  );
+};

src/components/AuthPages/SignUp/index.jsx

@@ -56,17 +56,13 @@ export default function SignUp() {
 
   const handleSignUp = async () => {
     let { country, first_name, last_name, email, password } = formData;
-
-    if (email === "" && password === "" && first_name === "") {
-      setMsgError("Please fill in fields");
-    }
-
     try {
       if (
         email !== "" &&
         password !== "" &&
         first_name !== "" &&
-        last_name !== ""
+        last_name !== "" &&
+        country !== ""
       ) {
         setSignUpLoading(true);
         const reqData = {
@@ -98,6 +94,8 @@ export default function SignUp() {
           setSignUpLoading(false);
           setMsgError("An error occurred");
         }
+      } else {
+        setMsgError("Please fill in fields");
       }
     } catch (error) {
       throw new Error(error);
@@ -106,7 +104,7 @@ export default function SignUp() {
         setMsgError(null);
       }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
     }
-  };  
+  };
 
   useEffect(() => {
     getCountryList();
@@ -262,7 +260,7 @@ export default function SignUp() {
                           <button
                             type="button"
                             onClick={handleSignUp}
-                            className={`rounded-[0.475rem] mb-6 text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px]`}
+                            className={`rounded-[0.475rem] mb-6 text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
                           >
                             {signUpLoading ? (
                               <div className="signup btn-loader"></div>
@@ -278,26 +276,41 @@ export default function SignUp() {
               </div>
             </div>
             <div className="flex-1 flex justify-center items-center p-10">
-            <div className="flex items-center">
-              <Link to="#" className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]">
-                About
-              </Link>
-              <Link to="#" className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]">
-                Services
-              </Link>
-              <Link to="#" className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]">
-                Contact Us
-              </Link>
+              <div className="flex items-center">
+                <a
+                  href="https://www.wrenchboard.com/about-us"
+                  className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  About
+                </a>
+                <a
+                  href="https://www.wrenchboard.com/service"
+                  className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Services
+                </a>
+                <a
+                  href="https://www.wrenchboard.com/contact"
+                  className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Contact Us
+                </a>
+              </div>
+            </div>
+            <div className="flex-1 flex justify-center items-center p-10">
+              <p className="text-black text-[15px] px-2 font-medium flex items-center">
+                <span className="text-3xl mt-2 mr-1">©</span> 2023 -{" "}
+                <Link to="/" className="text-[#009ef7] ml-1">
+                  WrenchBoard
+                </Link>{" "}
+              </p>
             </div>
-          </div>
-          <div className="flex-1 flex justify-center items-center p-10">
-            <p className="text-black text-[15px] px-2 font-medium flex items-center">
-             <span className="text-3xl mt-2 mr-1">©</span>  2023 - {" "}
-              <Link to="/" className="text-[#009ef7] ml-1">
-                WrenchBoard
-              </Link>{" "}
-            </p>
-          </div>
           </div>
         </div>
       </div>

src/components/AuthPages/VerifyLink/index.jsx

@@ -30,10 +30,6 @@ export default function VerifyLink() {
 
   // if verification is okay. set a complete signup form
   const completeSignup = async () => {
-    if (email === "" && password === "") {
-      setMsgError("Please fill in fields");
-    }
-
     try {
       if (email !== "" && password !== "") {
         setLinkLoader(true);
@@ -45,7 +41,7 @@ export default function VerifyLink() {
           verify_link: token,
           action: 11012,
         };
-        const res = await userApi.CompleteSignUp(postData);
+        const res = await userApi?.CompleteSignUp(postData);
 
         if (res.status === 200) {
           const { data } = res;
@@ -67,13 +63,15 @@ export default function VerifyLink() {
           }
         } else {
           setLinkLoader(false);
-          setLinkSuccess(false)
+          setLinkSuccess(false);
           setMsgError("An error occurred");
         }
+      } else {
+        setMsgError("Please fill in fields");
       }
     } catch (error) {
       setLinkLoader(false);
-      setLinkSuccess(false)
+      setLinkSuccess(false);
       throw new Error(error);
     } finally {
       setTimeout(() => {

src/components/AuthPages/VerifyPassword/index.jsx

@@ -0,0 +1,233 @@
+import { useState, useEffect, useCallback } from "react";
+import { useLocation, Link, useNavigate } from "react-router-dom";
+import AuthLayout from "../AuthLayout";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import usersService from "../../../services/UsersService";
+import WrenchBoard from "../../../assets/images/wrenchboard.png";
+
+const VerifyPassword = () => {
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [msgError, setMsgError] = useState("");
+  const [linkLoader, setLinkLoader] = useState(false);
+  const [linkSuccess, setLinkSuccess] = useState(true);
+  const [showPassword, setShowPassword] = useState(false);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location?.search);
+  const token = queryParams.get("passlink");
+  const userApi = new usersService();
+
+  // To Show and Hide Password
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
+  // little checker for the validity of the token
+  if (token?.length != 64) {
+    setLinkSuccess(false);
+  }
+
+  // Password
+  const handlePassword = (e) => {
+    let { name, value } = e?.target;
+    if (name == "password") setPassword(value);
+    if (name == "confirm_password") setConfirmPassword(value);
+  };
+
+  const completeReset = async () => {
+    try {
+      if (password !== "" && confirmPassword !== "") {
+        if (password === confirmPassword) {
+          setLinkLoader(true);
+          var reqData = {
+            sessionid: "DUMMY-CANNOT_BE_EMPTY",
+            reset_link: token,
+            newpass: password,
+            step: 300,
+            action: 730,
+          };
+
+          const res = await userApi?.CompleteResetPassword(reqData);
+
+          if (res.status === 200) {
+            const { data } = res;
+
+            if (data?.status > 0 && data?.email) {
+              setTimeout(() => {
+                navigate("/login", { replace: true });
+                setLinkLoader(false);
+              }, 2000);
+            } else if (data && data?.status == "Invalid Request") {
+              setLinkLoader(false);
+              setLinkSuccess(false);
+            } else {
+              setLinkLoader(false);
+              setMsgError("An error occurred");
+            }
+          } else {
+            setLinkLoader(false);
+            setLinkSuccess(false);
+          }
+        } else {
+          setLinkLoader(false);
+          setMsgError("Passwords does not match");
+        }
+      } else {
+        setMsgError("Please fill in fields");
+      }
+    } catch (error) {
+      setLinkLoader(false);
+      setLinkSuccess(false);
+      throw new Error(error);
+    } finally {
+      setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
+    }
+  };
+
+  return (
+    <>
+      <AuthLayout slogan="Welcome to WrenchBoard">
+        <div className="w-full">
+          <div className="mb-12">
+            <Link to="#">
+              <img
+                src={WrenchBoard}
+                alt="wrenchboard"
+                className="h-10 mx-auto"
+              />
+            </Link>
+          </div>
+          <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5">
+            <div className="w-full">
+              <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
+                  {linkSuccess ? "Password Reset" : "Invalid verification link"}
+                </h1>
+                {linkSuccess && (
+                  <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                    Enter a new password to reset
+                  </span>
+                )}
+                {linkSuccess && (
+                  <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                    We'll send an email to confirm reset
+                  </span>
+                )}
+              </div>
+              {/* If the verification was a success */}
+              {linkSuccess ? (
+                <SuccessfulComponent
+                  password={password}
+                  confirmPassword={confirmPassword}
+                  handlePassword={handlePassword}
+                  onSubmit={completeReset}
+                  msgErr={msgError}
+                  loader={linkLoader}
+                  showPassword={showPassword}
+                  onClick={togglePasswordVisibility}
+                  navigateHandler={() => navigate("/login")}
+                />
+              ) : (
+                <ErrorComponent onClick={() => navigate("/login")} />
+              )}
+            </div>
+          </div>
+        </div>
+      </AuthLayout>
+    </>
+  );
+};
+
+export default VerifyPassword;
+
+const SuccessfulComponent = ({
+  onSubmit,
+  navigateHandler,
+  showPassword,
+  onClick,
+  password,
+  confirmPassword,
+  handlePassword,
+  msgErr,
+  loader,
+}) => (
+  <div className="input-area">
+    {/* INPUT */}
+    <div className="mb-5">
+      <InputCom
+        value={password}
+        inputHandler={handlePassword}
+        placeholder="● ● ● ● ● ●"
+        label="Password"
+        name="password"
+        type={showPassword ? "text" : "password"}
+        onClick={onClick}
+        passIcon={
+          showPassword ? "show-password" : "hide-password"
+        }
+      />
+    </div>
+    <div className="mb-5">
+      <InputCom
+        value={confirmPassword}
+        inputHandler={handlePassword}
+        placeholder="● ● ● ● ● ●"
+        label="Confirm Password"
+        name="confirm_password"
+        type="password"
+      />
+    </div>
+    {msgErr && (
+      <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
+        {msgErr}
+      </div>
+    )}
+    <div className="signin-area mb-3.5">
+      <button
+        onClick={onSubmit}
+        type="button"
+        className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
+      >
+        {loader ? (
+          <div className="signup btn-loader"></div>
+        ) : (
+          <span>Continue</span>
+        )}
+      </button>
+    </div>
+    <div className="signin-area mb-3.5">
+      <button
+        onClick={navigateHandler}
+        type="button"
+        className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem] btn-login`}
+      >
+        <span>Return Home</span>
+      </button>
+    </div>
+  </div>
+);
+
+const ErrorComponent = ({ onClick }) => (
+  <div className="input-area">
+    <div className="my-5">
+      <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
+        This error occurs because you have already used this link or the link
+        has broken/expired. Start with the reset process again. If it doesn't
+        work, try to create the account from the start.
+      </p>
+    </div>
+
+    <div className="signin-area flex justify-center mb-3.5">
+      <button
+        onClick={onClick}
+        type="button"
+        className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+      >
+        <span>Return Home</span>
+      </button>
+    </div>
+  </div>
+);

src/components/AuthPages/VerifyYou/index.jsx

@@ -1,18 +1,20 @@
 import { useNavigate, Link } from "react-router-dom";
 import AuthLayout from "../AuthLayout";
-import WrenchBoard from "../../../assets/images/wrenchboard.png"
+import WrenchBoard from "../../../assets/images/wrenchboard.png";
 
 export default function VerifyYou() {
-  const navigate = useNavigate()
+  const navigate = useNavigate();
   return (
     <>
-      <AuthLayout
-        slogan="Welcome to WrenchBoard"
-      >
+      <AuthLayout slogan="Welcome to WrenchBoard">
         <div className="w-full">
-          <div className='mb-12'>
-            <Link to='#'>
-              <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
+          <div className="mb-12">
+            <Link to="#">
+              <img
+                src={WrenchBoard}
+                alt="wrenchboard"
+                className="h-10 mx-auto"
+              />
             </Link>
           </div>
           <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5">
@@ -21,29 +23,38 @@ export default function VerifyYou() {
                 <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
                   Let's verify your email now
                 </h1>
-                <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">Check your email.</span>
+                <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                  Check your email.
+                </span>
               </div>
               <div className="input-area">
                 <div className="mb-5">
                   <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
-                    <b>Verify Email.</b> Help us secure your WrenchBoard account by verifying your email registration address. Verification will let you access all of WrenchBoard's features.
+                    <b>Verify Email.</b> Help us secure your WrenchBoard account
+                    by verifying your email registration address. Verification
+                    will let you access all of WrenchBoard's features.
                   </p>
                 </div>
                 <div className="mb-5">
                   <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
-                    If you do not receive the confirmation message within a few minutes of signing up, please check your Junk E-mail folder just in case the confirmation email got delivered there instead of your inbox. If so, select the confirmation message and click Not Junk, which will allow future messages to get through.
+                    If you do not receive the confirmation message within a few
+                    minutes of signing up, please check your Junk E-mail folder
+                    just in case the confirmation email got delivered there
+                    instead of your inbox. If so, select the confirmation
+                    message and click Not Junk, which will allow future messages
+                    to get through.
                   </p>
                 </div>
               </div>
-            <div className="signin-area flex justify-center mb-3.5">
-              <button
-                onClick={() => navigate("/")}
-                type="button"
-                className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
-              >
-                <span>Return Home</span>
-              </button>
-            </div>
+              <div className="signin-area flex justify-center mb-3.5">
+                <button
+                  onClick={() => navigate("/")}
+                  type="button"
+                  className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+                >
+                  <span>Return Home</span>
+                </button>
+              </div>
             </div>
           </div>
         </div>

src/components/FamilyAcc/FamilyTable.jsx

@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+import dataImage1 from "../../assets/images/data-table-user-1.png";
+import dataImage2 from "../../assets/images/data-table-user-2.png";
+import dataImage3 from "../../assets/images/data-table-user-3.png";
+import dataImage4 from "../../assets/images/data-table-user-4.png";
+import SelectBox from "../Helpers/SelectBox";
+
+export default function FamilyTable({ className }) {
+    const filterCategories = ["All Categories", "Explore", "Featured"];
+    const [selectedCategory, setCategory] = useState(filterCategories[0]);
+    return (
+        <div
+            className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
+                className || ""
+            }`}
+        >
+
+            <div className="relative w-full overflow-x-auto sm:rounded-lg">
+                <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+                    <tbody>
+                    <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">
+                        <td className="py-4">Name</td>
+                        <td className="py-4 text-center">Last Login</td>
+                        <td className="py-4 text-center">No of Tasks</td>
+                        <td className="py-4 text-right">Status</td>
+                    </tr>
+                    <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
+                        <td className=" py-4">
+                            <div className="flex space-x-2 items-center">
+                                <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+                                    <img
+                                        src={dataImage1}
+                                        alt="data"
+                                        className="w-full h-full"
+                                    />
+                                </div>
+                                <div className="flex flex-col">
+                                    <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                                        Firstname Lastname (age)
+                                    </h1>
+                                    <span className="text-sm text-thin-light-gray">
+                          Added <span className="text-purple">10-10-2029</span>
+                        </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">
+                       10-10-2019
+                      </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">
+                            <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>
+
+
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    );
+}

src/components/FamilyAcc/index.jsx

@@ -0,0 +1,40 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import Layout from "../Partials/Layout";
+import CommonHead from "../UserHeader/CommonHead";
+import FamilyTable from "./FamilyTable";
+
+export default function FamilyAcc() {
+    const [selectTab, setValue] = useState("today");
+    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   text-dark-gray dark:text-white">
+                <span
+                    className={`${selectTab === "today" ? "block" : "hidden"}`}
+                >
+                  Family Accounts
+                </span>
+
+                            </h1>
+                        </div>
+                        <div className="slider-btns flex space-x-4">
+                            <div onClick={() => filterHandler("today")} className="relative">
+
+                            </div>
+                        </div>
+                    </div>
+                    <FamilyTable />
+                </div>
+            </div>
+        </Layout>
+    );
+}

src/components/History/HistoryTable.jsx

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

src/components/History/TopHxBox.jsx

@@ -0,0 +1,137 @@
+import React, { useState } from "react";
+import MarketVisitorAnalytic from "../Charts/MarketVisitorAnalytic";
+import SelectBox from "../Helpers/SelectBox";
+//import SellHistoryWidget from "./SellHistoryWidget";
+import TopHxWidgetBox from "./TopHxWidgetBox";
+
+export default function TopHxBox({ className }) {
+    const [currencyDataLvl, setCurrencyDataLvl] = useState([
+        "Jan 1",
+        "Jan 2",
+        "Jan 3",
+        "Jan 4",
+        "Jan 5",
+        "Jan 6",
+        "Jan 7",
+        "Jan 8",
+        "Jan 9",
+        "Jan 10",
+        "Jan 11",
+        "Jan 12",
+        "Jan 13",
+        "Jan 14",
+        "Jan 15",
+    ]);
+    const filterDatas = ["Last 15 days", "Last 7 days", "Last Month"];
+    const [filterDataSet, setFilterDataSet] = useState([
+        50, 30, 100, 20, 50, 30, 100, 20, 50, 30, 100, 20, 50, 30, 100,
+    ]);
+    const dataSetHandler = (value) => {
+        if (value === "Last Month") {
+            setCurrencyDataLvl([
+                "Jan 1",
+                "Jan 2",
+                "Jan 3",
+                "Jan 4",
+                "Jan 5",
+                "Jan 6",
+                "Jan 7",
+                "Jan 8",
+                "Jan 9",
+                "Jan 10",
+                "Jan 11",
+                "Jan 12",
+                "Jan 13",
+                "Jan 14",
+                "Jan 15",
+                "Jan 16",
+                "Jan 17",
+                "Jan 18",
+                "Jan 19",
+                "Jan 20",
+                "Jan 21",
+                "Jan 22",
+                "Jan 23",
+                "Jan 24",
+                "Jan 25",
+                "Jan 26",
+                "Jan 27",
+                "Jan 28",
+                "Jan 29",
+                "Jan 30",
+            ]);
+            setFilterDataSet([
+                50, 30, 100, 20, 50, 30, 100, 20, 50, 30, 100, 20, 50, 30, 100, 50, 30,
+                50, 30, 100, 20, 50, 30, 100, 20, 50, 30, 100, 20, 50, 30, 100,
+            ]);
+        } else if (value === "Last 7 days") {
+            setCurrencyDataLvl([
+                "Jan 1",
+                "Jan 2",
+                "Jan 3",
+                "Jan 4",
+                "Jan 5",
+                "Jan 6",
+                "Jan 7",
+            ]);
+            setFilterDataSet([50, 30, 100, 20, 50, 30, 100]);
+        } else {
+            setCurrencyDataLvl([
+                "Jan 1",
+                "Jan 2",
+                "Jan 3",
+                "Jan 4",
+                "Jan 5",
+                "Jan 6",
+                "Jan 7",
+                "Jan 8",
+                "Jan 9",
+                "Jan 10",
+                "Jan 11",
+                "Jan 12",
+                "Jan 13",
+                "Jan 14",
+                "Jan 15",
+            ]);
+            setFilterDataSet([
+                50, 30, 100, 20, 50, 30, 100, 20, 50, 30, 100, 20, 50, 30, 100,
+            ]);
+        }
+    };
+    return (
+        <div
+            className={`sell-history-market-visitor-analytic w-full ${
+                className || ""
+            }`}
+        >
+            <div className="content-wrapper w-full  lg:flex xl:space-x-8 lg:space-x-4">
+
+                <div className="flex-1 ">
+                    <div className="market-visitor w-full  md:p-8 p-4 h-full bg-white dark:bg-dark-white   overflow-hidden rounded-2xl  section-shadow">
+                        <div className="flex flex-col justify-between h-full">
+                            <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">
+                                        Purchases
+                                    </h1>
+                                </div>
+                                <SelectBox datas={filterDatas} action={dataSetHandler} />
+                            </div>
+                            <div className="h-[233px]">
+                                <MarketVisitorAnalytic
+                                    datasets={filterDataSet}
+                                    dataLvls={currencyDataLvl}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+                    <TopHxWidgetBox />
+                </div>
+
+            </div>
+        </div>
+    );
+}

src/components/History/TopHxWidgetBox.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import SellHistoryAnalytic from "../Charts/SellHistoryAnalytic";
+
+export default function TopHxWidgetBox() {
+    return (
+        <div className="sell-history w-full h-full md:p-8 p-4 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow">
+            <div className="flex flex-col justify-between h-full">
+                <div className="content lg:flex justify-between items-center mb-5">
+                    <div>
+                        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide mb-1 sm:mb-0">
+                            Activities
+                        </h1>
+                    </div>
+                    <div className="flex space-x-2  mb-4 sm:mb-0">
+                        <div className="flex space-x-2 items-center">
+                            <span className="w-4 h-4 bg-purple block rounded-full"></span>
+                            <p className="text-sm text-thin-light-gray font-medium">
+                                Avg: Sell Price
+                            </p>
+                        </div>
+                        <div className="flex space-x-2 items-center">
+                            <span className="w-4 h-4 bg-pink block rounded-full"></span>
+                            <p className="text-sm text-thin-light-gray font-medium">
+                                Total Sell
+                            </p>
+                        </div>
+                    </div>
+                    <span className="text-sm text-pink">Current Week</span>
+                </div>
+                <div>
+                    <SellHistoryAnalytic />
+                </div>
+            </div>
+        </div>
+    );
+}

src/components/History/index.jsx

@@ -1,11 +1,64 @@
-import React from "react";
+import React, {useState, useEffect} from "react";
 import HistoryAnalyticsCard from "../Cards/HistoryAnalyticsCard";
 import SellHistoryMarketVisitorAnalytic from "../Home/SellHistoryMarketVisitorAnalytic";
 import Layout from "../Partials/Layout";
 import HistoryTable from "./HistoryTable";
 import MarketHistorySection from "./MarketHistorySection";
+import TopHxBox from "./TopHxBox";
+
+import usersService from "../../services/UsersService";
+import PurchasesTable from "../MyWallet/WalletComponent/PurchasesTable";
+import RecentActivityTable from "../MyWallet/WalletComponent/RecentActivityTable";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 
 export default function History() {
+
+  const apiCall = new usersService()
+
+    let [paymentHistory, setPaymentHistory] = useState({ // FOR PAYMENT HISTORY
+        loading: true,
+        data: [],
+        error: false
+    })
+
+    let [purchaseHistory, setPurchaseHistory] = useState({ // FOR PURCHASE HISTORY
+        loading: true,
+        data: [],
+        error: false
+    })
+
+    //FUNCTION TO GET PAYMENT HISTORY
+    const getPaymentHistory = ()=>{
+      apiCall.getPaymentHx().then((res)=>{
+          if(res.data.internal_return < 0){ // success but no data
+              setPaymentHistory(prev => ({...prev, loading: false}))
+              return
+          }
+          setPaymentHistory(prev => ({...prev, loading: false, data: res.data.result_list}))
+      }).catch((error)=>{
+          setPaymentHistory(prev => ({...prev, loading: false, error: true}))
+      })
+  }
+
+  //FUNCTION TO GET PURCHASE HISTORY
+  const getPurchaseHistory = ()=>{
+      apiCall.getPurchaseHx().then((res)=>{
+          if(res.data.internal_return < 0){ // success but no data
+              setPurchaseHistory(prev => ({...prev, loading: false}))
+              return
+          }
+          // console.log('purchase',res.data)
+          setPurchaseHistory(prev => ({...prev, loading: false, data: res.data.result_list}))
+      }).catch((error)=>{
+          setPurchaseHistory(prev => ({...prev, loading: false, error: true}))
+      })
+  }
+
+  useEffect(()=>{
+    getPaymentHistory()
+    getPurchaseHistory()
+  }, [])
+
   return (
     <>
       <Layout>
@@ -146,8 +199,36 @@ export default function History() {
                 </HistoryAnalyticsCard>
               </div>
             </div>
-            <MarketHistorySection />
-            <SellHistoryMarketVisitorAnalytic className="mb-11" />
+            {/*<MarketHistorySection />*/}
+            {/* <TopHxBox className="mb-11" /> */}
+            <div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
+                {/* PURCHASE SECTION */}
+                <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+                    <div className="wallet w-full md:p-8 p-4 h-full max-h-[700px] 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'>Purchases</h2>
+                        {purchaseHistory.loading ? 
+                        <LoadingSpinner size='16' color='sky-blue' />
+                        :
+                        <PurchasesTable purchase={purchaseHistory} />
+                        }
+                    </div>
+                </div>
+                {/* END OF PURCHASE SECTION */}
+
+                {/* RECENT ACTIVITY SECTION */}
+                <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+                    <div className="wallet w-full md:p-8 p-4 h-full max-h-[700px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+                        <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
+                        {/* <p className='text-base text-slate-500 dark:text-white'>Activity Report</p> */}
+                        {paymentHistory.loading ? 
+                        <LoadingSpinner size='16' color='sky-blue' />
+                        :
+                        <RecentActivityTable payment={paymentHistory} />
+                    }
+                    </div>
+                </div>
+                {/* END OF RECENT ACTIVITY SECTION */}
+            </div>
             <HistoryTable />
           </div>
         </div>

src/components/Home/Hero.jsx

@@ -95,7 +95,7 @@ export default function Hero({ className }) {
         {/* action */}
         <div className="flex lg:space-x-3 space-x-1 items-center">
           <Link
-            to="/market-place"
+            to="/mytask"
             className="text-white text-base sm:block hidden"
           >
             <span className=" border-b dark:border-[#5356fb29]  border-white">

src/components/MarketPlace/index.jsx

@@ -1,19 +1,21 @@
 import React from "react";
-import products from "../../data/marketplace_data.json";
+// import products from "../../data/marketplace_data.json";
 //import CreateNft from "../Home/CreateNft";
 import Layout from "../Partials/Layout";
 import MainSection from "./MainSection";
 import CommonHead from "../UserHeader/CommonHead";
+import { useSelector } from "react-redux";
 
-export default function MarketPlace(props) {
-  const JobList =  props.activeJobList?.result_list;
-    console.log("activeJobList->",props.activeJobList.result_list);
-  const marketProduct = products.data;
+export default function MarketPlace() {
+  let { jobLists } = useSelector((state) => state.jobLists);
+  const marketData = jobLists?.result_list;
+
+  // const marketProduct = products.data;
   return (
     <>
       <Layout>
         <CommonHead />
-        <MainSection marketPlaceProduct={JobList} className="mb-10" />
+        <MainSection marketPlaceProduct={marketData} className="mb-10" />
       </Layout>
     </>
   );

src/components/MyActiveJobs/MyActiveJobTable.jsx

@@ -0,0 +1,102 @@
+import React, { useState } from "react";
+import dataImage1 from "../../assets/images/data-table-user-1.png";
+import dataImage2 from "../../assets/images/data-table-user-2.png";
+import dataImage3 from "../../assets/images/data-table-user-3.png";
+import dataImage4 from "../../assets/images/data-table-user-4.png";
+import SelectBox from "../Helpers/SelectBox";
+
+import PaginatedList from "../Pagination/PaginatedList";
+import { handlePagingFunc } from "../Pagination/HandlePagination";
+
+export default function MyActiveJobTable({MyJobList, className }) {
+    const filterCategories = ["All Categories", "Explore", "Featured"];
+    const [selectedCategory, setCategory] = useState(filterCategories[0]);
+
+    const [currentPage, setCurrentPage] = useState(0);
+    const indexOfFirstItem = Number(currentPage);
+    const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
+    const currentActiveJobList = MyJobList?.result_list?.slice(indexOfFirstItem, indexOfLastItem);
+  
+    const handlePagination = (e) => {
+        handlePagingFunc(e,setCurrentPage)
+    }
+
+    return (
+        <div
+            className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow ${
+                className || ""
+            }`}
+        >
+            {MyJobList && MyJobList?.result_list &&
+            <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
+                <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+                    <tbody>
+                    {/*<tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">*/}
+                    {/*    <td className="py-4">All Product</td>*/}
+                    {/*    <td className="py-4 text-right">.</td>*/}
+                    {/*</tr>*/}
+
+                    {
+                        <>
+                            {MyJobList && MyJobList?.result_list &&
+                                MyJobList.result_list.length > 0 &&
+                                currentActiveJobList.map((value, index) => (
+                                    <tr key={index} className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
+                                            <td className=" py-4">
+                                                <div className="flex space-x-2 items-center">
+                                                    <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+                                                        <img
+                                                            src={dataImage2}
+                                                            alt="data"
+                                                            className="w-full h-full"
+                                                        />
+                                                    </div>
+                                                    <div className="flex flex-col">
+                                                        <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                                                            {value.title}
+                                                        </h1>
+                                                        <div>
+                                                            {value.description}
+                                                        </div>
+                                                        <span className="text-sm text-thin-light-gray">
+                                                        Price: <span className="text-purple">{value.price*0.01}</span>
+                                                        </span>
+                                                        <span className="text-sm text-thin-light-gray">
+                                                        Duration:   <span className="text-purple"> {value.timeline_days} day(s)</span>
+                                                        </span>
+                                                        <span className="text-sm text-thin-light-gray">
+                                                        Expire:   <span className="text-purple"> {value.expire}</span>
+                                                        </span>
+                                                        <span className="text-sm text-thin-light-gray">
+                                                        Send to:   <span className="text-purple"> {value.job_to}</span>
+                                                        </span>
+
+                                                    </div>
+                                                </div>
+                                            </td>
+
+
+                                            <td className="text-right py-4 px-2">
+                                                <button
+                                                    type="button"
+                                                    className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                                >
+                                                    View
+                                                </button>
+                                            </td>
+                                        </tr>
+                                ))}
+
+
+                        </>
+                    }
+                    </tbody>
+                </table>
+                {/* PAGINATION BUTTON */}
+                <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= MyJobList?.result_list.length ? true : false} data={MyJobList?.result_list} start={indexOfFirstItem} stop={indexOfLastItem} />
+                {/* END OF PAGINATION BUTTON */}
+            </div>
+            }
+        </div>
+    );
+}

src/components/MyActiveJobs/index.jsx

@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import Layout from "../Partials/Layout";
+import CommonHead from "../UserHeader/CommonHead";
+import MyActiveJobTable from "./MyActiveJobTable";
+
+export default function MyActiveJobs(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">
+                <span
+                    className={`${selectTab === "today" ? "block" : "hidden"}`}
+                >
+                  Current Job(s)
+                </span>
+
+                            </h1>
+                        </div>
+                        <div className="slider-btns flex space-x-4">
+                            <div onClick={() => filterHandler("today")} className="relative">
+
+                            </div>
+                        </div>
+                    </div>
+                    <MyActiveJobTable MyJobList={props.MyJobList} />
+                </div>
+            </div>
+        </Layout>
+    );
+}

src/components/MyJobs/MyJobTable.jsx

@@ -5,19 +5,32 @@ import dataImage3 from "../../assets/images/data-table-user-3.png";
 import dataImage4 from "../../assets/images/data-table-user-4.png";
 import SelectBox from "../Helpers/SelectBox";
 
+import PaginatedList from "../Pagination/PaginatedList";
+import { handlePagingFunc } from "../Pagination/HandlePagination";
+
 export default function MyJobTable({MyJobList, className }) {
     const filterCategories = ["All Categories", "Explore", "Featured"];
     const [selectedCategory, setCategory] = useState(filterCategories[0]);
+
+    const [currentPage, setCurrentPage] = useState(0);
+    const indexOfFirstItem = Number(currentPage);
+    const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
+    const currentJobList = MyJobList?.result_list?.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-hidden rounded-2xl section-shadow min-h-[520px] ${
+            className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow ${
                 className || ""
             }`}
         >
             <div className="header w-full flex justify-between items-center mb-5">
                 <div className="flex space-x-2 items-center">
                     <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
-                        Products History
+
                     </h1>
                 </div>
                 <SelectBox
@@ -27,7 +40,8 @@ export default function MyJobTable({MyJobList, className }) {
                     contentBodyClasses="w-auto min-w-max"
                 />
             </div>
-            <div className="relative w-full overflow-x-auto sm:rounded-lg">
+            {MyJobList && MyJobList?.result_list &&
+            <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
                 <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                     <tbody>
                     <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">
@@ -39,42 +53,44 @@ export default function MyJobTable({MyJobList, className }) {
                         <>
                             {MyJobList && MyJobList?.result_list &&
                                 MyJobList.result_list.length > 0 &&
-                                MyJobList.result_list.map((value) => (
-                                   <>
-                                       <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
-                                           <td className=" py-4">
-                                               <div className="flex space-x-2 items-center">
-                                                   <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
-                                                       <img
-                                                           src={dataImage2}
-                                                           alt="data"
-                                                           className="w-full h-full"
-                                                       />
-                                                   </div>
-                                                   <div className="flex flex-col">
-                                                       <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                                                           {value.title}
-                                                       </h1>
-                                                       <span className="text-sm text-thin-light-gray">
-                          Price <span className="text-purple">{value.price*0.01}</span>
-                                                           {value.timeline_days} day(s)
-                        </span>
-                                                   </div>
-                                               </div>
-                                           </td>
+                                currentJobList.map((value, index) => (
+                                    <tr key={index} className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
+                                        <td className=" py-4">
+                                            <div className="flex space-x-2 items-center">
+                                                <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+                                                    <img
+                                                        src={dataImage2}
+                                                        alt="data"
+                                                        className="w-full h-full"
+                                                    />
+                                                </div>
+                                                <div className="flex flex-col">
+                                                    <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                                                        {value.title}
+                                                    </h1>
+                                                    <div>
+                                                        {value.description}
+                                                    </div>
+                                                    <span className="text-sm text-thin-light-gray">
+                                                    Price: <span className="text-purple">{value.price*0.01}</span>
+                                                    </span>
+                                                    <span className="text-sm text-thin-light-gray">
+                                                    Duration:   <span className="text-purple"> {value.timeline_days} day(s)</span>
+                                                    </span>
+                                                </div>
+                                            </div>
+                                        </td>
 
 
-                                           <td className="text-right py-4 px-2">
-                                               <button
-                                                   type="button"
-                                                   className="text-sm text-white bg-light-green px-2.5 py-1.5 rounded-full"
-                                               >
-                                                   View
-                                               </button>
-                                           </td>
-                                       </tr>
-
-                                   </>
+                                        <td className="text-right py-4 px-2">
+                                            <button
+                                                type="button"
+                                                className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                            >
+                                                View
+                                            </button>
+                                        </td>
+                                    </tr>
                                 ))}
 
 
@@ -90,7 +106,12 @@ export default function MyJobTable({MyJobList, className }) {
                     )}
                     </tbody>
                 </table>
+
+                {/* PAGINATION BUTTON */}
+                <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= MyJobList?.result_list?.length ? true : false} data={MyJobList?.result_list} start={indexOfFirstItem} stop={indexOfLastItem} />
+                {/* END OF PAGINATION BUTTON */}
             </div>
+            }
         </div>
     );
 }

src/components/MyJobs/StartJob.jsx

@@ -0,0 +1,81 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import Layout from "../Partials/Layout";
+import MyJobTable from "./MyJobTable";
+import CommonHead from "../UserHeader/CommonHead";
+import SelectBox from "../Helpers/SelectBox";
+import dataImage2 from "../../assets/images/data-table-user-2.png";
+
+export default function StartJob(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">
+                <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]`}
+                    >
+                        <div className="header w-full flex justify-between items-center mb-5">
+                            <div className="flex space-x-2 items-center">
+                                <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
+                                Terms & Agreement
+                                </h1>
+                            </div>
+                            {/*<SelectBox*/}
+                            {/*    action={setCategory}*/}
+                            {/*    datas={filterCategories}*/}
+                            {/*    className="Update-table-dropdown"*/}
+                            {/*    contentBodyClasses="w-auto min-w-max"*/}
+                            {/*/>*/}
+                        </div>
+                        <div className="relative w-full overflow-x-auto sm:rounded-lg">
+                            All terms of sale must follow WrenchBoard policies for buying and selling. Setting and meeting expectations in a listing's terms of sale ensure a smooth transaction and buyer satisfaction while helping WrenchBoard remain a reputable marketplace.
+
+                            What is the policy?
+                            Task or Job owners should provide clear and accurate delivery terms and conditions required to meet the expectations they have set in their listings. These should include:
+                            Delivery mode, timelines, and reviews
+                            The forms of payment available for the task
+                            A returns policy:
+                            Clearly stated criteria under which cancellation will be accepted.
+                            Clearly stated the time period in which the buyer must notify the seller about the delivery delay.
+                            How refunds/returns/cancellations will be issued
+
+
+
+                            Activity that doesn't follow WrenchBoard policy could result in a range of actions, including for example: administratively ending or canceling listings, hiding or demoting all listings from search results, lowering rating, buying or selling restrictions, and account suspension.
+                            All fees paid or payable concerning listings or accounts on which we take any action will not be refunded or otherwise credited to your account.
+
+                            Why does WrencBoard have this policy?
+                            Buyers and sellers enter a contract when they complete transactions, so it's necessary to have precise details on what the transaction entails to guarantee satisfaction. This policy also helps sellers meet our performance standards.
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </Layout>
+    );
+}

src/components/MyTasks/MyJobTable.jsx

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

src/components/MyWallet/AddFund.jsx

@@ -71,9 +71,9 @@ function AddFund({payment}) {
             </div>
     
             <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-                <div className="wallet w-full  md:p-8 p-4 h-full max-h-[600px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+                <div className="wallet w-full  md:p-8 p-4 h-full max-h-[590px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
                     <h2 className='text-gray-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
-                    <p className='text-base text-gray-600 dark:text-white'>Activity Report</p>
+                    {/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
                     {payment.loading ?
                     <LoadingSpinner size='16' color='sky-blue' />
                     :

src/components/MyWallet/Balance.jsx

@@ -5,7 +5,7 @@ import PurchasesTable from './WalletComponent/PurchasesTable'
 import CouponTable from './WalletComponent/CouponTable'
 import LoadingSpinner from '../Spinners/LoadingSpinner'
 
-function Balance({wallet, payment, coupon, purchase}) {
+function Balance({wallet, coupon}) {
     return (
         <div className="content-wrapper">
             <div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
@@ -65,39 +65,9 @@ function Balance({wallet, payment, coupon, purchase}) {
                 {/* END OF WALLET SECTION */}
 
 
-                {/* RECENT ACTIVITY SECTION */}
-                <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-                    <div className="wallet w-full md:p-8 p-4 h-full max-h-[300px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
-                        <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
-                        <p className='text-base text-slate-500 dark:text-white'>Activity Report</p>
-                        {payment.loading ? 
-                        <LoadingSpinner size='16' color='sky-blue' />
-                        :
-                        <RecentActivityTable payment={payment} />
-                    }
-                    </div>
-                </div>
-                {/* END OF RECENT ACTIVITY SECTION */}
-            </div>
-            
-            
-            <div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
-                {/* PURCHASE SECTION */}
-                <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-                    <div className="wallet w-full md:p-8 p-4 h-full max-h-[200px] 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'>Purchases</h2>
-                        {purchase.loading ? 
-                        <LoadingSpinner size='16' color='sky-blue' />
-                        :
-                        <PurchasesTable purchase={purchase} />
-                        }
-                    </div>
-                </div>
-                {/* END OF PURCHASE SECTION */}
-
                 {/* COUPON SECTION */}
                 <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-                    <div className="wallet w-full  md:p-8 p-4 h-full max-h-[200px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+                    <div className="wallet w-full  md:p-8 p-4 h-full max-h-[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' />
@@ -107,8 +77,7 @@ function Balance({wallet, payment, coupon, purchase}) {
                     </div>
                 </div>
                 {/* END OF COUPON SECTION */}
-            </div>
-            
+            </div>            
         </div>
       )
 }

src/components/MyWallet/ConfirmAddFund.jsx

@@ -117,7 +117,7 @@ function ConfirmAddFund({payment}) {
             <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
                 <div className="wallet w-full  md:p-8 p-4 h-full max-h-[600px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
                     <h2 className='text-gray-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
-                    <p className='text-base text-gray-600 dark:text-white'>Activity Report</p>
+                    {/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
                     {payment.loading ?
                     <LoadingSpinner size='16' color='sky-blue' />
                     :

src/components/MyWallet/ConfirmTransfer.jsx

@@ -151,9 +151,9 @@ function ConfirmTransfer({payment, wallet}) {
             }
     
             <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-                <div className="wallet w-full px-4 md:px-8 py-4 h-full max-h-[800px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+                <div className="wallet w-full px-4 md:px-8 py-4 h-full max-h-[700px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
                     <h2 className='text-gray-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
-                    <p className='text-base text-gray-600 dark:text-white'>Activity Report</p>
+                    {/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
                     {payment.loading ?
                     <LoadingSpinner size='16' color='sky-blue' />
                     :

src/components/MyWallet/TransferFund.jsx

@@ -223,9 +223,9 @@ function TransferFund({payment, wallet}) {
             </div>
     
             <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-                <div className="wallet w-full  md:p-8 p-4 h-full max-h-[800px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+                <div className="wallet w-full  md:p-8 p-4 h-full max-h-[650px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
                     <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
-                    <p className='text-base text-slate-500 dark:text-white'>Activity Report</p>
+                    {/* <p className='text-base text-slate-500 dark:text-white'>Activity Report</p> */}
                     {payment.loading ?
                     <LoadingSpinner size='16' color='sky-blue' />
                     :

src/components/MyWallet/Wallet.jsx

@@ -115,7 +115,7 @@ const WalletRoutes = () => {
                 <Route path='add-fund' element={<AddFund payment={paymentHistory} />} />
                 <Route path='add-fund/confirm-add-fund' element={<ConfirmAddFund payment={paymentHistory} />} />
                 <Route path='transfer-fund' element={<TransferFund payment={paymentHistory} wallet={walletList} />} />
-                <Route index element={<Balance payment={paymentHistory} purchase={purchaseHistory} coupon={couponHistory} wallet={walletList} />} />
+                <Route index element={<Balance coupon={couponHistory} wallet={walletList} />} />
                 <Route path='transfer-fund/add-recipient' element={<AddRecipient />} />
                 <Route path='transfer-fund/confirm-transfer' element={<ConfirmTransfer payment={paymentHistory} wallet={walletList} />} />
                 <Route path='*' element={<Navigate to='/' />} />

src/components/MyWallet/WalletComponent/CouponTable.jsx

@@ -1,7 +1,21 @@
-import React from 'react'
+import React, {useState} from 'react'
+
+import PaginatedList from '../../Pagination/PaginatedList'
+import { handlePagingFunc } from '../../Pagination/HandlePagination';
 
 function CouponTable({coupon}) {
+
+    const [currentPage, setCurrentPage] = useState(0);
+    const indexOfFirstItem = Number(currentPage);
+    const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
+    const currentCoupon = coupon?.data?.slice(indexOfFirstItem, indexOfLastItem);
+  
+    const handlePagination = (e) => {
+      handlePagingFunc(e,setCurrentPage)
+    }
+
   return (
+    <div className='flex flex-col justify-between h-full'>
     <table className="wallet-activity w-full table-auto border-collapse text-left">
         <thead className='border-b-2'>
             <tr className='text-slate-600'>
@@ -14,7 +28,7 @@ function CouponTable({coupon}) {
         {coupon.data.length ?
         (
         <tbody>
-            {coupon.data.map((item, index) => (
+            {currentCoupon.map((item, index) => (
             <tr key={index} className='text-slate-500'>
                 <td className="p-2">{item.added}</td>
                 <td className="p-2">{item.code}</td>
@@ -41,6 +55,11 @@ function CouponTable({coupon}) {
         </tbody>
         }
     </table>
+
+    {/* PAGINATION BUTTON */}
+    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= coupon?.data?.length ? true : false} data={coupon?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+    {/* END OF PAGINATION BUTTON */}
+    </div>
   )
 }
 

src/components/MyWallet/WalletComponent/PurchasesTable.jsx

@@ -1,7 +1,21 @@
-import React from 'react'
+import React, {useState} from 'react'
+
+import PaginatedList from '../../Pagination/PaginatedList';
+import { handlePagingFunc } from '../../Pagination/HandlePagination';
 
 function PurchasesTable({purchase}) {
+
+    const [currentPage, setCurrentPage] = useState(0);
+    const indexOfFirstItem = Number(currentPage);
+    const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
+    const currentPurchase = purchase?.data?.slice(indexOfFirstItem, indexOfLastItem);
+  
+    const handlePagination = (e) => {
+      handlePagingFunc(e,setCurrentPage)
+    }
+
   return (
+    <div className='flex flex-col justify-between h-full'>
     <table className="wallet-activity w-full table-auto border-collapse text-left">
         <thead className='border-b-2'>
             <tr className='text-slate-600'>
@@ -14,7 +28,7 @@ function PurchasesTable({purchase}) {
         {purchase.data.length ?
         (
         <tbody>
-            {purchase.data.map((item, index) => (
+            {currentPurchase.map((item, index) => (
             <tr key={index} className='text-slate-500'>
                 <td className="p-2">{item.added_date}</td>
                 <td className="p-2">{item.confirmation}</td>
@@ -41,6 +55,11 @@ function PurchasesTable({purchase}) {
         </tbody>
         }
     </table>
+
+    {/* PAGINATION BUTTON */}
+    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= purchase?.data?.length ? true : false} data={purchase?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+    {/* END OF PAGINATION BUTTON */}
+    </div>
   )
 }
 

src/components/MyWallet/WalletComponent/RecentActivityTable.jsx

@@ -1,7 +1,21 @@
-import React from 'react'
+import React, {useState} from 'react'
+
+import PaginatedList from '../../Pagination/PaginatedList';
+import {handlePagingFunc} from '../../Pagination/HandlePagination';
 
 function RecentActivityTable({payment}) {
+
+    const [currentPage, setCurrentPage] = useState(0);
+    const indexOfFirstItem = Number(currentPage);
+    const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
+    const currentActivity = payment?.data?.slice(indexOfFirstItem, indexOfLastItem);
+  
+    const handlePagination = (e) => {
+      handlePagingFunc(e,setCurrentPage)
+    }
+
   return (
+    <div className='flex flex-col justify-between h-full'>
     <table className="wallet-activity w-full table-auto border-collapse text-left">
         <thead className='border-b-2'>
             <tr className='text-slate-600'>
@@ -14,7 +28,7 @@ function RecentActivityTable({payment}) {
         {payment.data.length ?
         (
         <tbody>
-            {payment.data.map((item, index) => (
+            {currentActivity.map((item, index) => (
             <tr key={index} className='text-slate-500'>
                 <td className="p-2">{item.trx_date}</td>
                 <td className="p-2" dangerouslySetInnerHTML={{__html:item.recipient}}></td>
@@ -41,6 +55,11 @@ function RecentActivityTable({payment}) {
         </tbody>
         }
     </table>
+
+    {/* PAGINATION BUTTON */}
+    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= payment?.data?.length ? true : false} data={payment?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+    {/* END OF PAGINATION BUTTON */}
+    </div>
   )
 }
 

src/components/MyWallet/WalletComponent/ReferralTable.jsx

@@ -0,0 +1,60 @@
+import React, {useState} from 'react'
+
+import PaginatedList from '../../Pagination/PaginatedList';
+import {handlePagingFunc} from '../../Pagination/HandlePagination';
+
+function ReferralTable({history}) {
+
+    const [currentPage, setCurrentPage] = useState(0);
+    const indexOfFirstItem = Number(currentPage);
+    const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
+    const currentReferral = history?.data?.slice(indexOfFirstItem, indexOfLastItem);
+  
+    const handlePagination = (e) => {
+      handlePagingFunc(e,setCurrentPage)
+    }
+
+  return (
+    <div className='flex flex-col justify-between h-full'>
+        <table className="referral-list w-full table-auto border-collapse text-left">
+            <thead className='border-b-2'>
+                <tr className='text-slate-600'>
+                <th className="p-3">Added/Name</th>
+                <th className="p-3">Email</th>
+                <th className="p-3">Status</th>
+                </tr>
+            </thead>
+            <tbody>
+                {history.data.length ? 
+                currentReferral.map((item, index) => (
+                    <tr key={index} className='text-slate-500'>
+                        <td className="p-3">{item.added_date} / {item.firstname} {item.lastname}</td>
+                        <td className="p-3">{item.email}</td>
+                        <td className="p-3">{item.status}</td>
+                    </tr>
+                ))
+                :
+                (
+                history.error ?
+                <tr className='text-slate-500'>
+                    <td colSpan={3}>Opps! couldn't get referral history. Try reloading the page</td>
+                </tr>
+                :
+                (
+                <tr className='text-slate-500'>
+                    <td colSpan={3}>No Item Found on referral List</td>
+                </tr>
+                )
+                )
+                }
+            </tbody>
+        </table>
+
+        {/* PAGINATION BUTTON */}
+        <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= history?.data?.length ? true : false} data={history?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+        {/* END OF PAGINATION BUTTON */}
+    </div>
+  )
+}
+
+export default ReferralTable

src/components/Pagination/HandlePagination.jsx

@@ -0,0 +1,17 @@
+
+
+export const handlePagingFunc = ({target:{name, value}},setCurrentPage) => {
+    if(name == 'prev'){
+      setCurrentPage((prev)=>{
+        return prev-Number(process.env.REACT_APP_ITEM_PER_PAGE)
+      })
+    }
+    if(name == 'next'){
+      setCurrentPage((prev)=>{
+        return prev+Number(process.env.REACT_APP_ITEM_PER_PAGE)
+      }) 
+    }
+    if(name == 'page_num'){
+      setCurrentPage(Number(value))
+    }
+  }

src/components/Pagination/PaginatedList.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { createRoutesFromChildren } from 'react-router-dom';
+
+const PaginatedList = ({ onClick, prev, next, data, start, stop }) => {
+
+  if(data.length){
+    return (
+      <div className='p-3 flex justify-center items-center space-x-2 border-t-2'>
+        {/* Render pagination buttons */}
+          {!prev &&
+              <button
+                className={`p-2 ${prev ? 'border' : null}`}
+                name='prev'
+                onClick={onClick}
+              >
+                <>&lt;</>
+              </button>
+            }
+
+            {
+              data.map((item, index)=>{
+                  if(index%process.env.REACT_APP_ITEM_PER_PAGE == 0 && index >= start && index <= stop){
+                  return (
+                    <button
+                      key={index}
+                      value={index}
+                      className={`p-2 ${index==start ? 'border' : null}`}
+                      onClick={onClick}
+                      name='page_num'
+                      disabled={index == start}
+                    >
+                      {index <= 0 ? index+1 : (index/process.env.REACT_APP_ITEM_PER_PAGE)+1}
+                    </button>
+                  )
+                }
+              })
+            }
+            
+            {!next &&
+              <button
+                className={`p-2 ${next ? 'border' : null}`}
+                name='next'
+                onClick={onClick}
+              >
+                <>&gt;</>
+              </button>
+            }
+        </div>
+    )
+  }else{
+    return null
+  }
+};
+
+export default PaginatedList;

src/components/Partials/MobileSideBar.jsx

@@ -4,9 +4,16 @@ import logo from "../../assets/images/wrenchboard.png"; //logo-2.svg";
 import logo3 from "../../assets/images/wrenchboard.png"; //logo-3.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);
   const darkMode = useContext(DarkModeContext);
+
+  let { jobLists } = useSelector((state) => state.jobLists);
+  const marketData = jobLists?.result_list;
+  let noOfJobs = marketData?.length;
+
   return (
     <div className="w-full h-full">
       {/* logo-area */}
@@ -73,152 +80,149 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
           </div>
           <div className="items">
             <ul className="flex flex-col space-y-6">
-              <li className="item group">
-                <NavLink
-                  className="nav-item flex items-center justify-start space-x-3.5"
-                  to="/"
-                >
-                  <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="dashboard" />
-                  </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">
-                    Dashboard
-                  </span>
-                </NavLink>
-              </li>
-              <li className="item group">
-                <NavLink
-                  to="/market"
-                  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="active-bids" />
-                  </span>
-                  <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">
-                    Market
-                    <span className="absolute left-24 -top-1 text-sm flex justify-center items-center w-5 h-5 primary-gradient rounded-full text-white">
-                      0
-                    </span>
-                  </span>
-                </NavLink>
-              </li>
-              <li className="item group">
-                <NavLink
-                  to="/mytask"
-                  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="market" />
-                  </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 Task(s)
+              {/* Using mini component reduces the bulk amount of html */}
+              {[
+                { name: "Dashboard", path: "/" },
+                { name: "Market", path: "/market", bubble: noOfJobs },
+                { name: "My Task(s)", path: "/mytask" },
+              ].map(({ name, path, bubble }, idx) => (
+                <ListItem
+                  key={idx}
+                  title={name}
+                  route={path}
+                  bubble={bubble}
+                  sidebar
+                />
+              ))}
+              {/*<li className="item group">*/}
+              {/*  <NavLink*/}
+              {/*    to="/notification"*/}
+              {/*    className="nav-item flex items-center justify-start space-x-3.5"*/}
+              {/*  >*/}
+              {/*    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">*/}
+              {/*      <Icons name="notification" />*/}
+              {/*    </span>*/}
+              {/*    <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">*/}
+              {/*      Messages*/}
+              {/*    </span>*/}
+              {/*  </NavLink>*/}
+              {/*</li>*/}
+              {/*<li className="item group">*/}
+              {/*  <NavLink*/}
+              {/*      to="/my-wallet"*/}
+              {/*      className="nav-item flex items-center justify-start space-x-3.5"*/}
+              {/*  >*/}
+              {/*    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">*/}
+              {/*      <Icons name="wallet-two" />*/}
+              {/*    </span>*/}
+              {/*    <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">*/}
+              {/*       My Wallet*/}
+              {/*    </span>*/}
+              {/*  </NavLink>*/}
+              {/*</li>*/}
+              {/*<li className="item group">*/}
+              {/*  <NavLink*/}
+              {/*    to="/resources"*/}
+              {/*    className="nav-item flex items-center justify-start space-x-3.5"*/}
+              {/*  >*/}
+              {/*    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">*/}
+              {/*      <Icons name="star" />*/}
+              {/*    </span>*/}
+              {/*    <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">*/}
+              {/*      Resources*/}
+              {/*    </span>*/}
+              {/*  </NavLink>*/}
+              {/*</li>*/}
+              {/*<li className="item group">*/}
+              {/*  <NavLink*/}
+              {/*    to="/history"*/}
+              {/*    className="nav-item flex items-center justify-start space-x-3.5"*/}
+              {/*  >*/}
+              {/*    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">*/}
+              {/*      <Icons name="history" />*/}
+              {/*    </span>*/}
+              {/*    <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">*/}
+              {/*      History*/}
+              {/*    </span>*/}
+              {/*  </NavLink>*/}
+              {/*</li>*/}
+              {/*<li className="item group">*/}
+              {/*  <NavLink*/}
+              {/*    to="/referral"*/}
+              {/*    className="nav-item flex items-center justify-start space-x-3.5"*/}
+              {/*  >*/}
+              {/*    <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">*/}
+              {/*      <Icons name="history" />*/}
+              {/*    </span>*/}
+              {/*    <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">*/}
+              {/*    Refer a Friend*/}
+              {/*    </span>*/}
+              {/*  </NavLink>*/}
+              {/*</li>*/}
+            </ul>
+          </div>
+        </div>
 
-                  </span>
-                </NavLink>
-              </li>
-              <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"
+        {!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>
+        :
+          <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="wallet-two" />
-                  </span>
-                  <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
-                     My Wallet
-                  </span>
-                </NavLink>
-              </li>
-              <li className="item group">
-                <NavLink
-                  to="/resources"
-                  className="nav-item flex items-center justify-start space-x-3.5"
-                >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">
-                    <Icons name="star" />
-                  </span>
-                  <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
-                    Resources
-                  </span>
-                </NavLink>
-              </li>
-              <li className="item group">
-                <NavLink
-                  to="/history"
-                  className="nav-item flex items-center justify-start space-x-3.5"
-                >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">
-                    <Icons name="history" />
-                  </span>
-                  <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
-                    History
-                  </span>
-                </NavLink>
-              </li>
-              <li className="item group">
-                <NavLink
-                  to="/referral"
-                  className="nav-item flex items-center justify-start space-x-3.5"
-                >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">
-                    <Icons name="history" />
-                  </span>
-                  <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
-                  Refer a Friend
-                  </span>
-                </NavLink>
-              </li>
-            </ul>
+                  >
+                    <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>
-        <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="/market"
-                  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 Jobs
-                  </span>
-                </NavLink>
-              </li>
-            </ul>
-          </div>
-        </div>
+      }
       </div>
       {/* signout area */}
       {sidebar ? (
@@ -284,3 +288,33 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
     </div>
   );
 }
+
+const ListItem = ({ sidebar, route, title, bubble }) => {
+  return (
+    <li className="item group">
+      <NavLink
+        to={route}
+        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="market" />
+        </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"
+          }`}
+        >
+          {title && title}
+          {bubble && (
+            <span className="absolute left-24 -top-1 text-sm flex justify-center items-center w-5 h-5 primary-gradient rounded-full text-white">
+              {bubble}
+            </span>
+          )}
+        </span>
+      </NavLink>
+    </li>
+  );
+};

src/components/Partials/RightSideBar.jsx

@@ -55,34 +55,34 @@ 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">*/}
+            {/*    <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">
@@ -200,6 +200,7 @@ export default function RightSideBar() {
             </div>
           </div>
         </div>
+
         <div className="chart-one bg-white dark:bg-dark-white   rounded-2xl p-8 2xl:w-[268px] w-full 2xl:mb-10 2xl:border-none  border flex flex-col sm:flex-row 2xl:flex-col 2xl:block lg:justify-between sm:items-center space-x-5 2xl:space-x-0 ">
           <div>
             <div className="chart-heading mb-4 xl:flex justify-between items-center">

src/components/Partials/SideStatistics.jsx

@@ -0,0 +1,159 @@
+import React, { useState } from "react";
+import DoughnutChart from "../Charts/DoughnutChart";
+import SelectBox from "../Helpers/SelectBox";
+
+export default function SideStatistics() {
+    const filterDatas = ["Last 15 days", "Last Month", "Last 6 month"];
+    const [filterDataSet, setFilterDataSet] = useState([10, 30, 20, 40]);
+    const dataSetHandler = (value) => {
+        if (value === "Last 15 days") {
+            setFilterDataSet([10, 30, 20, 40]);
+        } else if (value === "Last Month") {
+            setFilterDataSet([15, 35, 10, 20]);
+        } else {
+            setFilterDataSet([8, 15, 40, 30]);
+        }
+    };
+
+    const [selectedRate, setSelectedRate] = useState("ETH");
+    const [rateStaticsDropdown, setRateStaticsDropdown] = useState(false);
+    const [filterRateStatics, setFilterRateStatics] = useState([50, 30, 90, 20]);
+    const rateDataSetHandler = (value) => {
+        setSelectedRate(value);
+        if (value === "USD") {
+            setFilterRateStatics([50, 30, 90, 20]);
+        } else if (value === "BTC") {
+            setFilterRateStatics([15, 35, 10, 20]);
+        } else {
+            setFilterRateStatics([8, 15, 20, 30]);
+        }
+        setRateStaticsDropdown(!filterRateStatics);
+    };
+    return (
+        <>
+                <div className="chart-one bg-white dark:bg-dark-white   rounded-2xl p-8 2xl:w-[268px] w-full 2xl:mb-10 2xl:border-none  border flex flex-col sm:flex-row 2xl:flex-col 2xl:block lg:justify-between sm:items-center space-x-5 2xl:space-x-0 ">
+                    <div>
+                        <div className="chart-heading mb-4 xl:flex justify-between items-center">
+                            <h3 className="text-xl font-bold   text-dark-gray dark:text-white">
+                                Statistics
+                            </h3>
+                            <SelectBox datas={filterDatas} action={dataSetHandler} />
+                        </div>
+                        <div id="chartjs-tooltip" className="chart relative 2xl:mb-6">
+                            <DoughnutChart dataSets={filterDataSet} />
+                            <div className="sm:flex hidden absolute 2xl:top-[19%] 2xl:left-[20%] xl:top-[28%] xl:left-[28%] lg:left-[20%] lg:top-[20%] left-[30%] top-[30%] justify-center">
+                <span>
+                  <svg
+                      width="123"
+                      height="123"
+                      viewBox="0 0 123 123"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                        d="M70.7788 45.749C70.7788 46.2809 70.7788 46.5811 70.7788 46.8865C70.7788 59.9678 70.7735 73.0544 70.8052 86.1357C70.8052 87.0204 70.5881 87.2679 69.7035 87.2311C67.8601 87.1573 66.0167 87.1889 64.1733 87.2205C63.5324 87.2311 63.2464 87.1257 63.2517 86.3779C63.2781 74.7396 63.2728 63.1012 63.2728 51.4681C63.2728 51.0784 63.2623 50.7467 63.6807 50.4781C65.9849 48.9667 68.268 47.4237 70.7788 45.749Z"
+                        fill="#ECECEC"
+                    />
+                    <path
+                        d="M81.6339 55.6284C81.6339 56.0918 81.6339 56.3604 81.6339 56.6343C81.6339 66.4663 81.6233 76.2983 81.6604 86.1304C81.6657 87.0098 81.4432 87.2574 80.5586 87.2258C78.6835 87.152 76.803 87.1731 74.9226 87.2205C74.2392 87.2363 74.1068 87.0046 74.1068 86.3832C74.128 78.0309 74.1227 69.6787 74.128 61.3265C74.128 61.021 74.0379 60.6893 74.3717 60.4628C76.75 58.8882 79.1178 57.3083 81.6339 55.6284Z"
+                        fill="#ECECEC"
+                    />
+                    <path
+                        d="M56.158 64.1334C54.3623 64.1228 53.0433 62.8115 53.0698 60.942C53.0751 60.3891 52.9109 60.1258 52.4553 59.894C51.1046 59.2042 49.7591 58.4932 48.4296 57.756C47.9528 57.4926 47.6138 57.4505 47.1106 57.8086C45.8658 58.6933 44.2767 58.5512 43.1908 57.5769C42.1684 56.6606 41.8771 55.007 42.5233 53.7905C43.1855 52.5371 44.6581 51.8736 46.03 52.2106C47.5026 52.5687 48.456 53.7115 48.4243 55.2808C48.4137 55.8864 48.6308 56.1708 49.1129 56.4131C50.0293 56.8765 50.9351 57.3505 51.8356 57.8507C52.8844 58.4353 53.9067 59.2568 55.0827 58.093C55.1038 58.0719 55.1515 58.0561 55.1833 58.0561C57.0955 58.1983 57.4239 56.708 58.0384 55.4178C59.8765 51.5787 61.7781 47.7659 63.6586 43.9427C63.844 43.5635 64.0294 43.1843 64.2201 42.8051C64.665 41.9099 65.11 41.1463 64.2677 40.0825C63.4573 39.0661 63.9022 37.4336 64.861 36.5173C65.8568 35.5746 67.2765 35.3798 68.5001 36.017C69.729 36.6595 70.4229 38.0024 70.0415 39.4032C69.8349 40.1615 70.0574 40.5407 70.5818 40.9988C72.2557 42.4681 73.9031 43.969 75.524 45.4962C75.9424 45.8912 76.2656 45.9596 76.8164 45.749C78.199 45.2171 79.6821 45.7174 80.4661 46.8917C81.2236 48.0187 81.1388 49.6249 80.2754 50.636C79.3431 51.7261 77.8176 52.0474 76.5145 51.426C75.2167 50.8045 74.4646 49.4406 74.8671 48.0029C75.079 47.234 74.8512 46.8654 74.3321 46.4125C72.69 44.9643 71.0639 43.4898 69.4641 41.9889C69.0033 41.5518 68.5901 41.3253 68.0022 41.694C67.9439 41.7308 67.8644 41.7782 67.8062 41.7677C66.2435 41.4939 65.9204 42.7051 65.4278 43.7215C63.5103 47.6817 61.5768 51.6313 59.6699 55.5968C59.2991 56.3657 58.727 57.0187 58.4992 57.8876C58.3562 58.4353 58.3827 58.7513 58.7111 59.1989C59.4633 60.2206 59.5216 61.3686 58.9336 62.4903C58.3509 63.5857 57.3975 64.1176 56.158 64.1334Z"
+                        fill="url(#paint0_linear_197_92226)"
+                    />
+                    <path
+                        d="M49.0697 62.2479C49.0697 68.0039 49.0697 73.5018 49.0697 78.9998C49.0697 81.4696 49.0485 83.9342 49.0856 86.4041C49.0962 87.0676 48.8949 87.2362 48.2434 87.2204C46.2941 87.1782 44.3395 87.1835 42.3901 87.2204C41.7863 87.2309 41.532 87.1203 41.5373 86.4252C41.5691 80.2531 41.5532 74.0811 41.5585 67.9091C41.5585 67.6037 41.4896 67.293 41.8339 67.0613C44.1911 65.513 46.5324 63.9436 49.0697 62.2479Z"
+                        fill="#ECECEC"
+                    />
+                    <path
+                        d="M59.9298 68.0092C59.9298 74.355 59.9245 80.4796 59.9351 86.6042C59.9351 87.0518 59.7973 87.2203 59.3312 87.2151C57.2071 87.194 55.083 87.1993 52.9589 87.2151C52.5457 87.2203 52.408 87.0729 52.408 86.6674C52.4186 82.2648 52.4186 77.8675 52.4133 73.465C52.4133 73.149 52.5298 72.9489 52.7946 72.7751C55.1095 71.2321 57.419 69.6838 59.9298 68.0092Z"
+                        fill="#ECECEC"
+                    />
+                    <path
+                        d="M30.9572 92.2319C14.058 75.3327 14.058 47.8462 30.9572 30.947C47.8564 14.0478 75.3428 14.0478 92.242 30.947C109.141 47.8462 109.141 75.3327 92.242 92.2319C75.3428 109.131 47.8564 109.131 30.9572 92.2319ZM90.691 32.498C74.655 16.462 48.5577 16.4485 32.5082 32.498C16.4722 48.534 16.4722 74.6448 32.5082 90.6809C48.5442 106.717 74.655 106.717 90.691 90.6809C106.727 74.6448 106.727 48.534 90.691 32.498Z"
+                        fill="#EBEDED"
+                    />
+                    <defs>
+                      <linearGradient
+                          id="paint0_linear_197_92226"
+                          x1="42.1803"
+                          y1="35.6461"
+                          x2="71.0724"
+                          y2="74.1629"
+                          gradientUnits="userSpaceOnUse"
+                      >
+                        <stop stopColor="#F539F8" />
+                        <stop offset="0.416763" stopColor="#C342F9" />
+                        <stop offset="1" stopColor="#5356FB" />
+                      </linearGradient>
+                    </defs>
+                  </svg>
+                </span>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="chart-analysis mt-5">
+                        <div className="heading text-center">
+                            <h1 className="text-base font-medium text-dark-gray dark:text-white mb-4">
+                                Your All Artwork Statistics
+                            </h1>
+                        </div>
+                        <div className="analysis-list">
+                            <ul>
+                                <li className="flex items-center mb-3.5">
+                                    <span className="w-4 h-4 bg-light-purple  rounded-full block mr-2"></span>
+                                    <div>
+                    <span className="text-sm text-thin-light-gray mr-2">
+                      Profit :
+                    </span>
+                                        <span className="text-sm text-dark-gray dark:text-white font-bold">
+                      {/* don't change variable only change state */}
+                                            {filterDataSet[0]}%
+                    </span>
+                                    </div>
+                                </li>
+                                <li className="flex items-center mb-3.5">
+                                    <span className="w-4 h-4 bg-purple rounded-full block mr-2"></span>
+                                    <div>
+                    <span className="text-sm text-thin-light-gray mr-2">
+                      Total Sold :
+                    </span>
+                                        <span className="text-sm text-dark-gray dark:text-white font-bold">
+                      {/* don't change variable only change state */}
+                                            {filterDataSet[1]}%
+                    </span>
+                                    </div>
+                                </li>
+                                <li className="flex items-center mb-3.5">
+                                    <span className="w-4 h-4 bg-pink rounded-full block mr-2"></span>
+                                    <div>
+                    <span className="text-sm text-thin-light-gray mr-2">
+                      Total Sold :
+                    </span>
+                                        <span className="text-sm text-dark-gray dark:text-white font-bold">
+                      {/* don't change variable only change state */}
+                                            {filterDataSet[2]}%
+                    </span>
+                                    </div>
+                                </li>
+                                <li className="flex items-center mb-3.5">
+                                    <span className="w-4 h-4 bg-[#FFCD00] rounded-full block mr-2"></span>
+                                    <div>
+                    <span className="text-sm text-thin-light-gray mr-2">
+                      Total Sold :
+                    </span>
+                                        <span className="text-sm text-dark-gray dark:text-white font-bold">
+                      {/* don't change variable only change state */}
+                                            {filterDataSet[3]}%
+                    </span>
+                                    </div>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+        </>
+    );
+}

src/components/Partials/Sidebar.jsx

@@ -4,9 +4,17 @@ import logo from "../../assets/images/wrenchboard.png"; //logo-2.svg";
 import logo3 from "../../assets/images/wrenchboard.png"; //logo-3.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);
+
+  let { jobLists } = useSelector((state) => state.jobLists);
+  const marketData = jobLists?.result_list;
+  let noOfJobs = marketData?.length;
+
   useEffect(() => {
     const title = document.querySelectorAll(".menu-setting-items .heading");
     if (sidebar) {
@@ -93,69 +101,20 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
           </div>
           <div className="items">
             <ul className="flex flex-col space-y-6">
-              <li className="item group">
-                <NavLink
-                  className={`nav-item flex items-center ${
-                    ((navData) => (navData.isActive ? "active" : ""),
-                    sidebar ? "justify-start space-x-3.5" : "justify-center")
-                  } `}
-                  to="/"
-                >
-                  <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="dashboard" />
-                  </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"
-                    }`}
-                  >
-                    Dashboard
-                  </span>
-                </NavLink>
-              </li>
-              <li className="item group">
-                <NavLink
-                  to="/market"
-                  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="market" />
-                  </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"
-                    }`}
-                  >
-                   Market
-                    <span className="absolute left-24 -top-1 text-sm flex justify-center items-center w-5 h-5 primary-gradient rounded-full text-white">
-                      0
-                    </span>
-                  </span>
-                </NavLink>
-              </li>
-              <li className="item group">
-                <NavLink
-                    to="/mytask"
-                    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="active-bids" />
-                  </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 Task(s)
-                  </span>
-                </NavLink>
-              </li>
+              {/* Using mini component reduces the bulk amount of html */}
+              {[
+                { name: "Dashboard", path: "/" },
+                { name: "Market", path: "/market", bubble: noOfJobs },
+                { name: "My Task(s)", path: "/mytask" },
+              ].map(({ name, path, bubble }, idx) => (
+                <ListItem
+                  key={idx}
+                  title={name}
+                  route={path}
+                  bubble={bubble}
+                  sidebar
+                />
+              ))}
               {/*<li className="item group">*/}
               {/*  <NavLink*/}
               {/*    to="/notification"*/}
@@ -216,7 +175,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
               {/*    </span>*/}
               {/*  </NavLink>*/}
               {/*</li>*/}
-          
+
               {/*<li className="item group">*/}
               {/*  <NavLink*/}
               {/*    to="/history"*/}
@@ -261,7 +220,27 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
             </ul>
           </div>
         </div>
+        <div className="setting-item">
+          <div class="top-platform 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>
 
+        {!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">
+              <span className="item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium active flex-1">
+                Enable Job Post
+              </span>
+            </NavLink>
+          </div>
+        </div>
+        :
         <div className="setting-item">
           <div className="heading mb-5">
             <h1 className="title text-xl font-bold text-purple">My Jobs</h1>
@@ -270,41 +249,61 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
             <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")
-                    }`}
+                  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"
-                      }`}
+                    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"
+                    }`}
                   >
-                    Job List
+                    List
                   </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")
-                    }`}
+                  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"
-                      }`}
+                    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 Jobs
+                    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>
@@ -351,6 +350,8 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
             </ul>
           </div>
         </div>
+        }
+
       </div>
       {/* signout area */}
       {sidebar ? (
@@ -416,3 +417,33 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
     </div>
   );
 }
+
+const ListItem = ({ sidebar, route, title, bubble }) => {
+  return (
+    <li className="item group">
+      <NavLink
+        to={route}
+        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="market" />
+        </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"
+          }`}
+        >
+          {title && title}
+          {bubble && (
+            <span className="absolute left-24 -top-1 text-sm flex justify-center items-center w-5 h-5 primary-gradient rounded-full text-white">
+              {bubble}
+            </span>
+          )}
+        </span>
+      </NavLink>
+    </li>
+  );
+};

src/components/Referral/ReferralDisplay.jsx

@@ -7,6 +7,7 @@ import LoadingSpinner from '../Spinners/LoadingSpinner';
 
 import {Formik, Form} from 'formik'
 import * as Yup from 'yup'
+import ReferralTable from '../MyWallet/WalletComponent/ReferralTable';
 
 const validationSchema = Yup.object().shape({
     email: Yup.string()
@@ -161,7 +162,7 @@ function ReferralDisplay() {
         </div>
 
         <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-            <div className="referral w-full md:p-8 p-4 h-full max-h-[500px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+            <div className="referral w-full md:p-8 p-4 h-full max-h-[700px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
                 <h2 className='mb-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Referral List</h2>
                 {referralList.loading ? 
                 (
@@ -169,39 +170,7 @@ function ReferralDisplay() {
                 )
                 :
                 (
-                <table className="referral-list w-full table-auto border-collapse text-left">
-                    <thead className='border-b-2'>
-                        <tr className='text-slate-600'>
-                        <th className="p-3">Added/Name</th>
-                        <th className="p-3">Email</th>
-                        <th className="p-3">Status</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {referralList.data.length ? 
-                        referralList.data.map((item, index) => (
-                            <tr key={index} className='text-slate-500'>
-                                <td className="p-3">{item.added_date} / {item.firstname} {item.lastname}</td>
-                                <td className="p-3">{item.email}</td>
-                                <td className="p-3">{item.status}</td>
-                            </tr>
-                        ))
-                        :
-                        (
-                        referralList.error ?
-                        <tr className='text-slate-500'>
-                            <td colSpan={3}>Opps! couldn't get referral history. Try reloading the page</td>
-                        </tr>
-                        :
-                        (
-                        <tr className='text-slate-500'>
-                            <td colSpan={3}>No Item Found on referral List</td>
-                        </tr>
-                        )
-                        )
-                        }
-                    </tbody>
-                </table>
+                <ReferralTable history={referralList} />
                 )
                 }
             </div>

src/middleware/AuthRoute.jsx

@@ -1,84 +1,102 @@
-import { useEffect, useState, useCallback } from "react";
+import { useEffect, useState, useCallback, useMemo } from "react";
 import { Navigate, Outlet, useLocation, useNavigate } from "react-router-dom";
-import usersService from '../services/UsersService'
-import LoadingSpinner from '../components/Spinners/LoadingSpinner'
-import WrenchBoard from "../assets/images/wrenchboard.png"
+import usersService from "../services/UsersService";
+import LoadingSpinner from "../components/Spinners/LoadingSpinner";
 import { useDispatch, useSelector } from "react-redux";
-import {updateUserDetails} from '../store/UserDetails'
-
+import { updateUserDetails } from "../store/UserDetails";
+import { updateJobs } from "../store/jobLists";
 
 const AuthRoute = ({ redirectPath = "/login", children }) => {
-  const apiCall = new usersService()
-
-  const dispatch = useDispatch()
-
+  const apiCall = useMemo(() => new usersService(), []);
+  const dispatch = useDispatch();
   const [lastActivityTime, setLastActivityTime] = useState(Date.now());
-  let [isLogin, setIsLogin] = useState({loading: true, status: false})
-
+  const [isLogin, setIsLogin] = useState({ loading: true, status: false });
   const navigate = useNavigate();
-
-  //Removing Data stored at localStorage after session expires
-  const expireSession = () => {
-    localStorage.removeItem('session_token');
-    localStorage.removeItem('member_id');
-    localStorage.removeItem('uid');
-    localStorage.removeItem('session');
-    navigate("/login", { replace: true }); // redirects user to login page after session expires
-  };
-
-  // Reset last activity time on user input
-  const resetTime = () => {
-    setLastActivityTime(Date.now());
-  }
-  window.addEventListener('mousemove', resetTime)
-  window.addEventListener('keydown', resetTime)
-
-  const loadProfile = ()=>{ // function to load user profile
-    setIsLogin({loading: true, status: false})
-    apiCall.loadProfile().then((res)=>{
-      if(res.data.internal_return < 0){
-        setIsLogin({loading: false, status: false})
-        return
-      }
-      dispatch(updateUserDetails(res.data))
-      setIsLogin({loading: false, status: true})
-    }).catch(error =>{
-      setIsLogin({loading: false, status: false})
-    })
-  }
   
   useEffect(() => {
-    if(!isLogin.status){
-      loadProfile() // LOADS USER PROFILE DETAILS AND CALLS DISPATCH UPDATEUSERDETAILS TO UPDATE USERDETAILS SLICE IN STORE
-    }
+    //Removing Data stored at localStorage after session expires
+    const expireSession = () => {
+      localStorage.clear();
+      navigate("/login", { replace: true }); // redirects user to login page after session expires
+    };
 
     const checkInactivity = setInterval(() => {
-      if (Date.now() - lastActivityTime > process.env.REACT_APP_SESSION_EXPIRE_MINUTES) {
-        expireSession()
+      if (
+        Date.now() - lastActivityTime >
+        process.env.REACT_APP_SESSION_EXPIRE_MINUTES
+      ) {
+        expireSession();
       }
-    }, process.env.REACT_APP_SESSION_EXPIRE_CHECKER) // Checks for inactivity every minute
+    }, process.env.REACT_APP_SESSION_EXPIRE_CHECKER); // Checks for inactivity every minute
 
     // cleaning up listeners
     return () => {
-      clearInterval(checkInactivity)
-      window.removeEventListener('mousemove', resetTime)
-      window.removeEventListener('keydown', resetTime)
-    }
-  }, [lastActivityTime])
+      clearInterval(checkInactivity);
+    };
+  }, [lastActivityTime, navigate]);
 
-  return (
-    isLogin.loading ?
-      <LoadingSpinner size='32' color='sky-blue' height='h-screen' />
-      // Stills needs fixing
-      // <div className="h-screen m-auto">
-      //   <img src={WrenchBoard} alt="wrenchboard" className="h-10" />
-      // </div>
-      :
-      !isLogin.status ?
-      <Navigate to={redirectPath} replace />
-      :
-      (children || <Outlet />)
-  )
+  // Reset last activity time on user input
+  const resetTime = useCallback(() => {
+    setLastActivityTime(Date.now());
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener("mousemove", resetTime);
+    window.addEventListener("keydown", resetTime);
+
+    return () => {
+      window.removeEventListener("mousemove", resetTime);
+      window.removeEventListener("keydown", resetTime);
+    };
+  }, [resetTime]);
+
+  useEffect(() => {
+    if (!isLogin.status) {
+      const loadProfile = () => {
+        // function to load user profile
+        setIsLogin({ loading: true, status: false });
+        apiCall
+          .loadProfile()
+          .then((res) => {
+            if (res.data.internal_return < 0) {
+              setIsLogin({ loading: false, status: false });
+              return;
+            }
+            dispatch(updateUserDetails(res.data));
+            setIsLogin({ loading: false, status: true });
+          })
+          .catch((error) => {
+            setIsLogin({ loading: false, status: false });
+          });
+      };
+      loadProfile();
+    }
+  }, []);
+
+  useEffect(() => {
+    // Getting market data
+    const getMarketActiveJobList = async () => {
+      try {
+        const res = await apiCall.getActiveJobList();
+        dispatch(updateJobs(res.data));
+      } catch (error) {
+        console.log("Error getting mode");
+      }
+    };
+    getMarketActiveJobList();
+  }, [apiCall, dispatch]);
+
+  return isLogin.loading ? (
+    <LoadingSpinner size="32" color="sky-blue" height="h-screen" />
+  ) : // Stills needs fixing
+  // <div className="h-screen m-auto">
+  //   <img src={WrenchBoard} alt="wrenchboard" className="h-10" />
+  // </div>
+  !isLogin.status ? (
+    <Navigate to={redirectPath} replace />
+  ) : (
+    children || <Outlet />
+  );
 };
 
-export default AuthRoute;
+export default AuthRoute;

src/services/UsersService.js

@@ -90,6 +90,9 @@ class usersService {
         return this.postAuxEnd("/pendingjob", postData);
     }
 
+    /*
+    getActiveJobList -  All available Jobs
+     */
     getActiveJobList(){
         var postData = {
             uuid: localStorage.getItem("uid"),
@@ -101,6 +104,20 @@ class usersService {
         return this.postAuxEnd("/getjobsdata", postData);
     }
 
+    /*
+    getMyActiveJobList  - List of jobs active under this user
+     */
+    getMyActiveJobList(){
+        var postData = {
+            uuid: localStorage.getItem("uid"),
+            member_id: localStorage.getItem("member_id"),
+            sessionid: localStorage.getItem("session_token"),
+            page:0,
+            offset:0,
+            limit :100
+        };
+        return this.postAuxEnd("/getjobsdata", postData);
+    }
     getHeroJBanners(){
         var postData = {
             uuid: localStorage.getItem("uid"),
@@ -112,18 +129,6 @@ class usersService {
         return this.postAuxEnd("/homebanners", postData);
     }
 
-    getMyJobList(){
-        var postData = {
-            uuid: localStorage.getItem("uid"),
-            member_id: localStorage.getItem("member_id"),
-            sessionid: localStorage.getItem("session_token"),
-            page:0,
-            offset:0,
-            limit :100
-        };
-        return this.postAuxEnd("/jobmanagerlist", postData);
-    }
-
     getGetPendingJobs(){
         var postData = {
             uuid: localStorage.getItem("uid"),
@@ -193,6 +198,29 @@ class usersService {
         return this.postAuxEnd("/sendmoneyfee", postData);
     }
 
+    getMyActiveJobList(){
+        var postData = {
+            uuid: localStorage.getItem("uid"),
+            member_id: localStorage.getItem("member_id"),
+            sessionid: localStorage.getItem("session_token"),
+            page:0,
+            offset:0,
+            limit :100
+        };
+        return this.postAuxEnd("/jobmanageroffers", postData);
+    }
+
+    getMyJobList(){
+        var postData = {
+            uuid: localStorage.getItem("uid"),
+            member_id: localStorage.getItem("member_id"),
+            sessionid: localStorage.getItem("session_token"),
+            page:0,
+            offset:0,
+            limit :100
+        };
+        return this.postAuxEnd("/jobmanagerlist", postData);
+    }
     // API FUNCTION TO GET COUPON HISTORY
     getCouponHx(){
         var postData = {
@@ -279,6 +307,50 @@ class usersService {
         return this.postAuxEnd("/loadprofile", postData);
     }
 
+    getFamilyList(){
+        var postData = {
+            uuid: localStorage.getItem("uid"),
+            member_id: localStorage.getItem("member_id"),
+            sessionid: localStorage.getItem("session_token"),
+            page:0,
+            limit :100
+        };
+        return this.postAuxEnd("/familylist", postData);
+    }
+
+    getFamilyAdd(){
+        var postData = {
+            uuid: localStorage.getItem("uid"),
+            member_id: localStorage.getItem("member_id"),
+            sessionid: localStorage.getItem("session_token"),
+            page:0,
+            limit :100
+        };
+        return this.postAuxEnd("/familyadd", postData);
+    }
+
+    getFamilyUpdate(){
+        var postData = {
+            uuid: localStorage.getItem("uid"),
+            member_id: localStorage.getItem("member_id"),
+            sessionid: localStorage.getItem("session_token"),
+            page:0,
+            limit :100
+        };
+        return this.postAuxEnd("/familyupdate", postData);
+    }
+
+    getFamilyManage(){
+        var postData = {
+            uuid: localStorage.getItem("uid"),
+            member_id: localStorage.getItem("member_id"),
+            sessionid: localStorage.getItem("session_token"),
+            page:0,
+            limit :100
+        };
+        return this.postAuxEnd("/familymanage", postData);
+    }
+    
      //END POINT CALL FOR ACCOUNT TOP
      startTopUp(post){
         var postData = {
@@ -300,6 +372,10 @@ class usersService {
         return this.postAuxEnd("/startresetpasword", reqData)
     }
 
+    CompleteResetPassword(reqData){
+        return this.postAuxEnd("/stepresetpass", reqData)
+    }
+
     getCouponRedeem(){
     var postData = {
         uuid: localStorage.getItem("uid"),

src/store/jobLists.js

@@ -0,0 +1,19 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  jobLists: {}
+};
+
+export const jobSlice = createSlice({
+  name: "jobLists",
+  initialState,
+  reducers: {
+    updateJobs: (state, payload) => {
+      state.jobLists = { ...payload.payload };
+    },
+  },
+});
+
+export const { updateJobs } = jobSlice.actions;
+
+export default jobSlice.reducer;

src/store/store.js

@@ -2,10 +2,12 @@ import { configureStore } from "@reduxjs/toolkit";
 import drawerReducer from "./drawer";
 
 import userDetailReducer from "./UserDetails";
+import jobReducer from "./jobLists";
 
 export default configureStore({
   reducer: {
     drawer: drawerReducer,
     userDetails: userDetailReducer,
+    jobLists: jobReducer
   },
 });

src/views/FamilyAccPage.jsx

@@ -0,0 +1,28 @@
+import React, { useContext,useState, useEffect } from "react";
+import usersService from "../services/UsersService";
+import FamilyAcc from "../components/FamilyAcc";
+
+export default function FamilyAccPage() {
+
+    const [MyActiveJobList, setMyActiveJobList] = useState([]);
+    const api = new usersService();
+
+    const getMyActiveJobList = async () => {
+        try {
+            const res = await api.getMyActiveJobList();
+            setMyActiveJobList(res.data);
+        } catch (error) {
+            console.log("Error getting mode");
+        }
+    };
+    useEffect(() => {
+        getMyActiveJobList();
+    }, []);
+
+    //debugger;
+    return (
+        <>
+            <FamilyAcc ActiveJobList={MyActiveJobList}/>
+        </>
+    );
+}

src/views/MarketPlacePage.jsx

@@ -1,29 +1,9 @@
-import React, {useState, useEffect} from 'react'
 import MarketPlace from "../components/MarketPlace";
-import usersService from "../services/UsersService";
 
 export default function MarketPlacePage() {
-   // const userApi = new usersService();
-   // const activeJobList  = userApi.getActiveJobList();
-   // console.log("activeJobList->",activeJobList);
-
-    const [marketActiveJobList, setMarketActiveJobList] = useState([]);
-    const api = new usersService();
-
-    const getMarketActiveJobList = async () => {
-        try {
-            const res = await api.getActiveJobList();
-            setMarketActiveJobList(res.data);
-        } catch (error) {
-            console.log("Error getting mode");
-        }
-    };
-    useEffect(() => {
-        getMarketActiveJobList();
-    }, []);
   return (
     <>
-      <MarketPlace activeJobList={marketActiveJobList} />
+      <MarketPlace />
     </>
   );
 }

src/views/MyActiveJobsPage.jsx

@@ -0,0 +1,29 @@
+import React, { useContext,useState, useEffect } from "react";
+import usersService from "../services/UsersService";
+//import MyJobs from "../components/MyJobs";
+import MyActiveJobs from "../components/MyActiveJobs";
+
+export default function MyActiveJobsPage() {
+
+    const [MyJobList, setMyJobList] = useState([]);
+    const api = new usersService();
+
+    const getMyJobList = async () => {
+        try {
+            const res = await api.getMyActiveJobList();
+            setMyJobList(res.data);
+        } catch (error) {
+            console.log("Error getting mode");
+        }
+    };
+    useEffect(() => {
+        getMyJobList();
+    }, []);
+
+    // debugger;
+    return (
+        <>
+            <MyActiveJobs MyJobList={MyJobList} />
+        </>
+    );
+}

src/views/MyTaskPage.jsx

@@ -1,16 +1,29 @@
-import React from "react";
+import React, { useContext,useState, useEffect } from "react";
 import MyTasks from "../components/MyTasks";
 import UsersService from "../services/UsersService";
 import usersService from "../services/UsersService";
 
 export default function MyTaskPage() {
 
-    const userApi = new usersService();
-    const activeJobList  = userApi.getActiveJobList();
+    const [MyActiveJobList, setMyActiveJobList] = useState([]);
+    const api = new usersService();
+
+    const getMyActiveJobList = async () => {
+        try {
+            const res = await api.getMyActiveJobList();
+            setMyActiveJobList(res.data);
+        } catch (error) {
+            console.log("Error getting mode");
+        }
+    };
+    useEffect(() => {
+        getMyActiveJobList();
+    }, []);
+
     //debugger;
     return (
         <>
-            <MyTasks />
+            <MyTasks ActiveJobList={MyActiveJobList}/>
         </>
     );
 }

src/views/StartJobPage.jsx

@@ -0,0 +1,30 @@
+import React, { useContext,useState, useEffect } from "react";
+import usersService from "../services/UsersService";
+import StartJob from "../components/MyJobs/StartJob";
+
+export default function StartJobPage() {
+
+    // const userApi = new usersService();
+    // const activeJobList  = userApi.getMyJobList();
+    const [MyJobList, setMyJobList] = useState([]);
+    const api = new usersService();
+
+    const getMyJobList = async () => {
+        try {
+            const res = await api.getMyJobList();
+            setMyJobList(res.data);
+        } catch (error) {
+            console.log("Error getting mode");
+        }
+    };
+    useEffect(() => {
+        getMyJobList();
+    }, []);
+
+    // debugger;
+    return (
+        <>
+            <StartJob MyJobList={MyJobList} />
+        </>
+    );
+}

src/views/VerifyPasswordPages.jsx

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