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

Mobile
Merge branch 'job_menu_control' of WrenchBoard/Users-Wrench into master
2023-05-08 22:24:35 +01:00 · 2023-05-08 22:22:40 +01:00 · 2023-05-08 21:08:45 +00:00 · 2023-05-08 21:58:20 +01:00 · 2023-05-08 20:25:24 +00:00 · 2023-05-08 21:13:00 +01:00
33 changed files with 1820 additions and 524 deletions
@@ -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
@@ -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
@@ -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
@@ -33,6 +33,7 @@ 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 (
@@ -77,6 +78,7 @@ export default function Routers() {
          <Route exact path="/myjobs" 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"
@@ -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>
  );
 }
@@ -1,4 +1,4 @@
-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";
@@ -6,7 +6,59 @@ 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>
@@ -148,7 +200,35 @@ export default function History() {
              </div>
            </div>
            {/*<MarketHistorySection />*/}
-            <TopHxBox className="mb-11" />
+            {/* <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>
@@ -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>
    </>
  );
@@ -5,16 +5,30 @@ 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 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="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 ">*/}
@@ -26,9 +40,8 @@ export default function MyActiveJobTable({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">
+                                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">
@@ -54,6 +67,10 @@ export default function MyActiveJobTable({MyJobList, className }) {
                                                        <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>
@@ -68,8 +85,6 @@ export default function MyActiveJobTable({MyJobList, className }) {
                                                </button>
                                            </td>
                                        </tr>
-
-                                    </>
                                ))}


@@ -77,7 +92,11 @@ export default function MyActiveJobTable({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>
    );
 }
@@ -5,12 +5,25 @@ 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 || ""
            }`}
        >
@@ -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,47 +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>
-                                                       <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>
+                                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="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                                               >
-                                                   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>
                                ))}


@@ -95,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>
    );
 }
@@ -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>
+    );
+}
@@ -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>
    );
 }
@@ -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' />
                    :
@@ -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>
      )
 }
@@ -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' />
                    :
@@ -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' />
                    :
@@ -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' />
                    :
@@ -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='/' />} />
@@ -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>
  )
 }

@@ -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>
  )
 }

@@ -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>
  )
 }

@@ -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
@@ -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))
+    }
+  }
@@ -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;
@@ -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,49 +80,20 @@ 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)
-
-                  </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"*/}
@@ -184,41 +162,67 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
            </ul>
          </div>
        </div>
-        <div className="setting-item">
-          <div className="heading mb-5">
-            <h1 className="title text-xl font-bold text-purple">My Jobs</h1>
-          </div>
-          <div className="items">
-            <ul className="flex flex-col space-y-6">
-              <li className="item group">
-                <NavLink
-                  to="/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 Job(s)
-                  </span>
-                </NavLink>
-              </li>
-            </ul>
+
+        {!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="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>
      {/* 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>
+  );
+};
@@ -13,7 +13,6 @@ import LtcIco from "../Helpers/Icons/LtcIco";
 import Usdt from "../Helpers/Icons/Usdt";
 import SelectBox from "../Helpers/SelectBox";
 import { NavLink } from "react-router-dom";
-import SideStatistics from "./SideStatistics";

 export default function RightSideBar() {
  const filterDatas = ["Last 15 days", "Last Month", "Last 6 month"];
@@ -202,129 +201,129 @@ export default function RightSideBar() {
          </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">*/}
-        {/*      <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>*/}
-      <SideStatistics />
+        <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>
+
      </div>
    </>
  );
@@ -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"*/}
@@ -262,23 +221,26 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
          </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>
+          <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>
-        <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>

+        {!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>
@@ -287,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>
@@ -368,6 +350,8 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
            </ul>
          </div>
        </div>
+        }
+
      </div>
      {/* signout area */}
      {sidebar ? (
@@ -433,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>
+  );
+};
@@ -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>
@@ -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;
@@ -307,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 = {
@@ -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;
@@ -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
  },
 });
@@ -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 />
    </>
  );
 }
@@ -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} />
+        </>
+    );
+}
Author	SHA1	Message	Date
Ebube	c50f8d10c0	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into task-bubble-length	2023-05-08 22:24:35 +01:00
Ebube	cef0860a4b	Mobile	2023-05-08 22:22:40 +01:00
tokslaw	1c7b107ac1	Merge branch 'job_menu_control' of WrenchBoard/Users-Wrench into master	2023-05-08 21:08:45 +00:00
victorAnumudu	0aefc601bb	implemented job menu control based on post jobs date	2023-05-08 21:58:20 +01:00
ameye	a202cfffe8	Merge branch 'pagination_alignment' of WrenchBoard/Users-Wrench into master	2023-05-08 20:25:24 +00:00
victorAnumudu	3624743c67	pagination display re-aligned	2023-05-08 21:13:00 +01:00
ameye	efeb282468	Merge branch 'task-bubble-length' of WrenchBoard/Users-Wrench into master	2023-05-08 16:57:35 +00:00
Ebube	6583d2600b	few cleanups	2023-05-08 17:25:55 +01:00
Ebube	25884c5194	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into task-bubble-length	2023-05-08 17:13:26 +01:00
Ebube	dc288937ac	Added the number	2023-05-08 17:12:37 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	293c165ab9	Family starter	2023-05-08 10:38:08 -04:00
ameye	6b380d7ca5	Merge branch 'history_table' of WrenchBoard/Users-Wrench into master	2023-05-08 14:13:20 +00:00
victorAnumudu	4ff53fbfa1	added history table to history page	2023-05-08 12:52:21 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	e201d4726d	Start job page	2023-05-08 07:19:56 -04:00
ameye	2786f41971	Merge branch 'pagination_implementation' of WrenchBoard/Users-Wrench into master	2023-05-08 11:08:50 +00:00
ameye	a11ecd9f0c	Merge branch 'login-home-links' of WrenchBoard/Users-Wrench into master	2023-05-08 11:07:32 +00:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	a7d41f8a06	menu adjust	2023-05-07 18:22:07 -04:00
victorAnumudu	e34bb0d51b	'merged master into branch'	2023-05-07 22:17:16 +01:00
victorAnumudu	0259e9a113	made pagination not to display no item in array	2023-05-07 22:09:43 +01:00
victorAnumudu	6bf0231e4a	merged master into branch	2023-05-07 21:44:56 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	8169a7090f	Contents palace holder	2023-05-07 16:29:01 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	f39e0e3bfc	job to added	2023-05-07 15:58:07 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	8702a66371	Start job page	2023-05-07 15:51:48 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	10657e835e	job page	2023-05-07 15:06:15 -04:00
victorAnumudu	c17f933537	list pagination implemented	2023-05-07 18:42:39 +01:00