Button Centralized

package-lock.json

@@ -8,6 +8,7 @@
       "name": "WrenchBoard-Users",
       "version": "0.2.0",
       "dependencies": {
+        "@react-oauth/google": "^0.11.0",
         "@reduxjs/toolkit": "^1.8.2",
         "@tailwindcss/line-clamp": "^0.3.1",
         "@testing-library/jest-dom": "^5.11.4",
@@ -18,15 +19,15 @@
         "chartjs": "^0.3.24",
         "cors": "^2.8.5",
         "faker": "^6.6.6",
+        "flutterwave-react-v3": "^1.3.0",
         "formik": "^2.2.9",
-        "react": "^18.0.0",
+        "react": "^18.2.0",
         "react-chartjs-2": "^4.1.0",
         "react-countup": "^6.2.0",
-        "react-dom": "^18.0.0",
+        "react-dom": "^18.2.0",
-        "react-lottie": "^1.2.3",
+        "react-redux": "^8.0.5",
-        "react-redux": "^8.0.2",
         "react-router-dom": "^6.0.2",
-        "react-scripts": "5.0.0",
+        "react-scripts": "5.0.1",
         "react-slick": "^0.29.0",
         "react-toastify": "^9.0.1",
         "redux": "^4.2.0",
@@ -3509,6 +3510,15 @@
         }
       }
     },
+    "node_modules/@react-oauth/google": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@react-oauth/google/-/google-0.11.0.tgz",
+      "integrity": "sha512-yeypwdQCcFIAo43OqVOLBfUXuxmxt3xiybfP9h3smtBW4UeFXFVQDsq+d+GlbZFo0TpONPR2+KCk/KT1/pQnvQ==",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@reduxjs/toolkit": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.1.tgz",
@@ -5476,20 +5486,6 @@
         "babel-plugin-transform-react-remove-prop-types": "^0.4.24"
       }
     },
-    "node_modules/babel-runtime": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
-      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
-      "dependencies": {
-        "core-js": "^2.4.0",
-        "regenerator-runtime": "^0.11.0"
-      }
-    },
-    "node_modules/babel-runtime/node_modules/regenerator-runtime": {
-      "version": "0.11.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
-    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -6173,13 +6169,6 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
     },
-    "node_modules/core-js": {
-      "version": "2.6.12",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
-      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
-      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
-      "hasInstallScript": true
-    },
     "node_modules/core-js-compat": {
       "version": "3.27.1",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.27.1.tgz",
@@ -8307,6 +8296,26 @@
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
     },
+    "node_modules/flutterwave-react-v3": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/flutterwave-react-v3/-/flutterwave-react-v3-1.3.0.tgz",
+      "integrity": "sha512-y0dGSgxh9H/KMSDFurnoPYO3D6DSeOCZHPdLt8DnbtCkjgYgzNdqeXKvxerEaOJyitzXITsmlbzYdrEO/Lju3g==",
+      "dependencies": {
+        "axios": "^0.21.1"
+      },
+      "peerDependencies": {
+        "react": "^15.0.0 || ^18.0.0",
+        "react-dom": "^15.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/flutterwave-react-v3/node_modules/axios": {
+      "version": "0.21.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
+      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+      "dependencies": {
+        "follow-redirects": "^1.14.0"
+      }
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.2",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
@@ -12506,11 +12515,6 @@
         "loose-envify": "cli.js"
       }
     },
-    "node_modules/lottie-web": {
-      "version": "5.10.1",
-      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.10.1.tgz",
-      "integrity": "sha512-u17bVNf/vA3oK9Wkyb1Vpo83WUIEQwaT0GeEN0qcvaExizyJ/RjmcbjSDj0CnwQCtpGqTgYhqprCC7cTWuXMNw=="
-    },
     "node_modules/lower-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
@@ -15045,21 +15049,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
-    "node_modules/react-lottie": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/react-lottie/-/react-lottie-1.2.3.tgz",
-      "integrity": "sha512-qLCERxUr8M+4mm1LU0Ruxw5Y5Fn/OmYkGfnA+JDM/dZb3oKwVAJCjwnjkj9TMHtzR2U6sMEUD3ZZ1RaHagM7kA==",
-      "dependencies": {
-        "babel-runtime": "^6.26.0",
-        "lottie-web": "^5.1.3"
-      },
-      "engines": {
-        "npm": "^3.0.0"
-      },
-      "peerDependencies": {
-        "react": "^0.14.7 || ^15.0.0 || ^16.0.0"
-      }
-    },
     "node_modules/react-redux": {
       "version": "8.0.5",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz",
@@ -15142,9 +15131,9 @@
       }
     },
     "node_modules/react-scripts": {
-      "version": "5.0.0",
+      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
-      "integrity": "sha512-3i0L2CyIlROz7mxETEdfif6Sfhh9Lfpzi10CtcGs1emDQStmZfWjJbAIMtRD0opVUjQuFWqHZyRZ9PPzKCFxWg==",
+      "integrity": "sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==",
       "dependencies": {
         "@babel/core": "^7.16.0",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
@@ -15162,7 +15151,7 @@
         "dotenv": "^10.0.0",
         "dotenv-expand": "^5.1.0",
         "eslint": "^8.3.0",
-        "eslint-config-react-app": "^7.0.0",
+        "eslint-config-react-app": "^7.0.1",
         "eslint-webpack-plugin": "^3.1.1",
         "file-loader": "^6.2.0",
         "fs-extra": "^10.0.0",
@@ -15179,7 +15168,7 @@
         "postcss-preset-env": "^7.0.1",
         "prompts": "^2.4.2",
         "react-app-polyfill": "^3.0.0",
-        "react-dev-utils": "^12.0.0",
+        "react-dev-utils": "^12.0.1",
         "react-refresh": "^0.11.0",
         "resolve": "^1.20.0",
         "resolve-url-loader": "^4.0.0",

src/Routers.jsx

@@ -36,6 +36,7 @@ import FamilyAccPage from "./views/FamilyAccPage";
 import StartJob from "./components/MyJobs/StartJob";
 import AddJobPage from "./views/AddJobPage";
 import MyPendingJobsPage from "./views/MyPendingJobsPage";
+import ManageActiveJobs from "./views/ManageActiveJobs";
 
 export default function Routers() {
   return (
@@ -83,6 +84,7 @@ export default function Routers() {
           <Route exact path="/my-pending-jobs"  element={<MyPendingJobsPage />} />
           <Route exact path="/acc-family"  element={<FamilyAccPage />} />
           <Route exact path="/start-job"  element={<StartJob />} />
+          <Route exact path="/manage-active-job"  element={<ManageActiveJobs />} />
           <Route
             exact
             path="/my-collection/collection-item"

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -0,0 +1,157 @@
+import React, { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import ModalCom from "../Helpers/ModalCom";
+import Layout from "../Partials/Layout";
+import { useLocation, useNavigate } from "react-router-dom";
+
+function ActiveJobs() {
+  let { userDetails } = useSelector((state) => state.userDetails);
+  let navigate = useNavigate()
+  let {state} = useLocation()
+
+  let [details, setDetails] = useState({})
+
+  // console.log(state, userDetails);
+
+  useEffect(()=>{
+    if(!state){
+      navigate('/my-active-jobs', {replace: true})
+    }
+    setDetails(state)
+  },[])
+  return (
+    <Layout>
+      {/* <div className="logout-modal-wrapper min-w-[850px] h-full lg:h-auto lg:rounded-2xl overflow-y-auto"> */}
+
+        <div className="p-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0 rounded-lg shadow-lg bg-slate-100">
+          <div className="w-full lg:w-3/4">
+            <div className="py-[20px] bg-white px-4 rounded-md shadow-md">
+              {/* back btn and title */}
+              <div className="w-full flex justify-start space-x-3 items-center">
+                <button
+                  type="button"
+                  className="text-[#374557] border border-sky-blue p-1 rounded-full"
+                  onClick={() => navigate('/my-active-jobs', {replace: true})}
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="35"
+                    height="35"
+                    viewBox="0 0 24 24"
+                    fill="skyblue"
+                  >
+                    <path d="M19 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H19v-2z" />
+                  </svg>
+                </button>
+                <h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
+                  {details.title && details.title}
+                </h1>
+              </div>
+              {/* END of back btn and title */}
+
+              <div className="mt-2 w-full lg:flex lg:justify-between lg:items-center lg:space-x-2">
+                <div className="my-2 lg:my-0">
+                  <p className="text-base text-slate-700 dark:text-black">
+                    {details.contract && details.contract}
+                  </p>
+                  <p className="text-base text-slate-700 dark:text-black">
+                    <span className="font-semibold">Description: </span>
+                    {details.description && details.description}
+                  </p>
+                  <p className="text-base text-sky-blue">Delivery Detail</p>
+                </div>
+                <div className="">
+                  <p className="text-base text-sky-blue">
+                    {userDetails.firstname && userDetails.firstname}
+                  </p>
+                  <p className="text-base text-slate-700 dark:text-black">
+                    <span className="font-semibold">Due: </span>
+                    {details.delivery_date &&
+                      details.delivery_date.split(" ")[0]}
+                  </p>
+                  <p className="text-base text-slate-700 dark:text-black">
+                    {details.delivery_date &&
+                      details.delivery_date.split(" ")[1]}
+                  </p>
+                  <p className="text-base text-slate-700 dark:text-black">
+                    {details.timeline_days && details.timeline_days} day(s)
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-5 bg-white p-4 rounded-md shadow-md">
+              <div className="">
+                <p className="text-lg font-bold text-slate-600 dark:text-blask tracking-wide">Message(s)</p>
+                <textarea
+                  className="p-4 w-full text-base text-slate-600 border border-slate-300 outline-none rounded-md"
+                  rows="10"
+                  style={{ resize: "none" }}
+                />
+              </div>
+
+              {/* Buttons Sections */}
+              <div className="py-2 mb-8 sm:flex sm:justify-center sm:items-center">
+                <div className="w-full sm:w-3/4 mb-5 sm:mb-0">
+                  <button
+                    onClick={()=> console.log('working')}
+                    type="button"
+                    className="btn-gradient text-base tracking-wide px-4 py-2 rounded-md flex justify-center items-center"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill='white'>
+                      <path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z"/>
+                    </svg>
+
+                    <span className="text-white">Upload Files</span>
+                  </button>
+                </div>
+
+                <div className="w-full sm:w-1/4 flex justify-between items-center space-x-2">
+                  <button
+                      type="button"
+                      className="bg-red-600 text-base text-white tracking-wide px-4 py-2 rounded-md hover:opacity-90"
+                  >
+                      <span className="text-white">Clear</span>
+                  </button>
+                  <button
+                      type="button"
+                      className="btn-gradient text-base text-white tracking-wide px-4 py-2 rounded-md"
+                  >
+                      <span className="text-white">Send</span>
+                  </button>
+                </div>
+              </div>
+              {/* end of Buttons Sections  */}
+            </div>
+          </div>
+
+          {/* ACTION SECTION */}
+          <div className="w-full lg:w-1/4 h-full">
+            <div className="py-[20px] bg-white px-4 rounded-md shadow-md">
+              <h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Actions</h1>
+
+              <p className="my-3 py-1 text-base">
+                Waiting for the completion message from the client before you can approve.
+              </p>
+            </div>
+
+            <div className="mt-5 bg-white p-4 rounded-md shadow-md">
+              <div className="">
+                <p className="text-lg font-bold text-dark-gray dark:text-black tracking-wide">Message</p>
+                <textarea
+                  className="p-4 w-full text-base text-slate-600 border border-slate-300 outline-none rounded-md"
+                  rows="10"
+                  style={{ resize: "none" }}
+                />
+              </div>
+            </div>
+
+          </div>
+        </div>
+
+      {/* </div> */}
+    </Layout>
+  );
+}
+
+export default ActiveJobs;

src/components/MyActiveJobs/MyActiveJobTable.jsx

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

src/components/MyPendingJobs/MyPendingJobTable.jsx

@@ -4,7 +4,7 @@ import dataImage2 from "../../assets/images/data-table-user-2.png";
 import dataImage3 from "../../assets/images/data-table-user-3.png";
 import dataImage4 from "../../assets/images/data-table-user-4.png";
 import SelectBox from "../Helpers/SelectBox";
-import ActiveJobsPopout from "../jobPopout/ActiveJobsPopout";
+import PendingJobsPopout from "../jobPopout/PendingJobsPopout";
 
 import PaginatedList from "../Pagination/PaginatedList";
 import { handlePagingFunc } from "../Pagination/HandlePagination";
@@ -104,7 +104,7 @@ export default function MyPendingJobTable({MyJobList, className }) {
 
             {/* Active Job Popout */}
             {jobPopout.show &&
-                <ActiveJobsPopout details={jobPopout.data} onClose={()=>{setJobPopout({show:false, data:{}})}} situation={jobPopout.show} />
+                <PendingJobsPopout details={jobPopout.data} onClose={()=>{setJobPopout({show:false, data:{}})}} situation={jobPopout.show} />
             }
             {/* End of Active Job Popout */}
         </div>

src/components/MyWallet/WalletHeader.jsx

@@ -1,4 +1,4 @@
-import {Link} from 'react-router-dom'
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import Icons from "../Helpers/Icons";
 import bank1 from "../../assets/images/bank-1.png";
 import bank2 from "../../assets/images/bank-2.png";
@@ -8,180 +8,194 @@ import Accordion from "../Helpers/Accordion";
 
 export default function WalletHeader(props) {
   //  debugger;
-    //props.myWalletList.result_list
+  //props.myWalletList.result_list
-    return (
+  let { pathname } = useLocation();
-        <>
+  let navigate = useNavigate();
-            <div
+  return (
-                className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px]  items-center rounded-full relative  bg-purple pr-1.5 pl-4">
+    <>
-                <div
+      <div className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px]  items-center rounded-full relative  bg-purple pr-1.5 pl-4">
-                    onClick={() => props.handlerBalance()}
+        <div
-                    className="flex items-center lg:justify-between justify-center w-full h-full"
+          onClick={() => props.handlerBalance()}
-                >
+          className="flex items-center lg:justify-between justify-center w-full h-full"
-                <span className="lg:block hidden">
+        >
-                  <Icons name="wallet"/>
+          <span className="lg:block hidden">
-                </span>
+            <Icons name="wallet" />
-                    <p className="lg:text-xl text-lg font-bold text-white">
+          </span>
-                        Wallet
+          <p className="lg:text-xl text-lg font-bold text-white">Wallet</p>
-                    </p>
+          <span className="lg:block hidden">
-                    <span className="lg:block hidden">
+            <Icons name="deep-plus" />
-                  <Icons name="deep-plus"/>
+          </span>
-                </span>
+        </div>
-                </div>
+        <div
-                <div
+          className={`balance-dropdown w-96 z-30 bg-white dark:bg-dark-white   absolute -left-24 rounded-lg cursor-pointer ${
-                    className={`balance-dropdown w-96 z-30 bg-white dark:bg-dark-white   absolute -left-24 rounded-lg cursor-pointer ${
+            props.balanceDropdown ? "active" : ""
-                        props.balanceDropdown ? "active" : ""
+          }`}
-                    }`}
+        >
-                >
+          <div className="heading border-b dark:border-[#5356fb29]  border-light-purple px-7 py-6">
-                    <div className="heading border-b dark:border-[#5356fb29]  border-light-purple px-7 py-6">
+            <h3 className="text-xl font-bold   text-dark-gray dark:text-white">
-                        <h3 className="text-xl font-bold   text-dark-gray dark:text-white">
+              Wallet
-                            Wallet
+            </h3>
-                        </h3>
+          </div>
+          <div className="content px-7 pb-7">
+            <ul>
+              {props.myWalletList &&
+                props.myWalletList?.result_list?.length > 0 &&
+                props.myWalletList.result_list.map((value, index) => (
+                  <li
+                    key={index}
+                    className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple"
+                  >
+                    <div className="sm:flex justify-between items-center">
+                      <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
+                        <div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
+                          <img src={bank1} alt="" />
+                        </div>
+                        <div className="name">
+                          <p className="text-base text-dark-gray dark:text-white font-medium">
+                            {value.description}
+                          </p>
+                        </div>
+                      </div>
+                      <div>
+                        <p className="eth text-xl font-bold text-purple">
+                          {(value.amount * 0.01).toFixed(2)} {value.code}
+                        </p>
+                        <p className="usd text-base text-thin-light-gray text-right">
+                          {/*(773.69 USD)*/}
+                        </p>
+                      </div>
                     </div>
-                    <div className="content px-7 pb-7">
+                  </li>
-                        <ul>
+                ))}
 
-                            {props.myWalletList &&
+              {/*<li className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple">*/}
-                                props.myWalletList?.result_list?.length > 0 &&
+              {/*    <div className="sm:flex justify-between items-center">*/}
-                                props.myWalletList.result_list.map((value, index) => (
+              {/*        <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
-                                    <li key={index} className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple">
+              {/*            <div*/}
-                                        <div className="sm:flex justify-between items-center">
+              {/*                className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
-                                            <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
+              {/*                <img src={bank1} alt=""/>*/}
-                                                <div
+              {/*            </div>*/}
-                                                    className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
+              {/*            <div className="name">*/}
-                                                    <img src={bank1} alt=""/>
+              {/*                <p className="text-base text-dark-gray dark:text-white font-medium">*/}
-                                                </div>
+              {/*                    MetaMask*/}
-                                                <div className="name">
+              {/*                </p>*/}
-                                                    <p className="text-base text-dark-gray dark:text-white font-medium">
+              {/*            </div>*/}
-                                                        {value.description}
+              {/*        </div>*/}
-                                                    </p>
+              {/*        <div>*/}
-                                                </div>
+              {/*            <p className="eth text-xl font-bold text-purple">*/}
-                                            </div>
+              {/*                75,320 ETH*/}
-                                            <div>
+              {/*            </p>*/}
-                                                <p className="eth text-xl font-bold text-purple">
+              {/*            <p className="usd text-base text-thin-light-gray text-right">*/}
-                                                    {(value.amount*0.01).toFixed(2)} {value.code}
+              {/*                (773.69 USD)*/}
-                                                </p>
+              {/*            </p>*/}
-                                                <p className="usd text-base text-thin-light-gray text-right">
+              {/*        </div>*/}
-                                                    {/*(773.69 USD)*/}
+              {/*    </div>*/}
-                                                </p>
+              {/*</li>*/}
-                                            </div>
+              {/*<li className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple">*/}
-                                        </div>
+              {/*    <div className="sm:flex justify-between items-center">*/}
-                                    </li>
+              {/*        <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
-                                ))}
+              {/*            <div*/}
-
+              {/*                className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
-                            {/*<li className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple">*/}
+              {/*                <img src={bank2} alt=""/>*/}
-                            {/*    <div className="sm:flex justify-between items-center">*/}
+              {/*            </div>*/}
-                            {/*        <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
+              {/*            <div className="name">*/}
-                            {/*            <div*/}
+              {/*                <p className="text-base text-dark-gray dark:text-white font-medium">*/}
-                            {/*                className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
+              {/*                    Coinbase Wallet*/}
-                            {/*                <img src={bank1} alt=""/>*/}
+              {/*                </p>*/}
-                            {/*            </div>*/}
+              {/*            </div>*/}
-                            {/*            <div className="name">*/}
+              {/*        </div>*/}
-                            {/*                <p className="text-base text-dark-gray dark:text-white font-medium">*/}
+              {/*        <div>*/}
-                            {/*                    MetaMask*/}
+              {/*            <p className="eth text-xl font-bold text-purple">*/}
-                            {/*                </p>*/}
+              {/*                56,124 ETH*/}
-                            {/*            </div>*/}
+              {/*            </p>*/}
-                            {/*        </div>*/}
+              {/*            <p className="usd text-base text-thin-light-gray text-right">*/}
-                            {/*        <div>*/}
+              {/*                (773.69 USD)*/}
-                            {/*            <p className="eth text-xl font-bold text-purple">*/}
+              {/*            </p>*/}
-                            {/*                75,320 ETH*/}
+              {/*        </div>*/}
-                            {/*            </p>*/}
+              {/*    </div>*/}
-                            {/*            <p className="usd text-base text-thin-light-gray text-right">*/}
+              {/*</li>*/}
-                            {/*                (773.69 USD)*/}
+              {/*<li className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple">*/}
-                            {/*            </p>*/}
+              {/*    <div className="sm:flex justify-between items-center">*/}
-                            {/*        </div>*/}
+              {/*        <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
-                            {/*    </div>*/}
+              {/*            <div*/}
-                            {/*</li>*/}
+              {/*                className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
-                            {/*<li className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple">*/}
+              {/*                <img src={bank3} alt=""/>*/}
-                            {/*    <div className="sm:flex justify-between items-center">*/}
+              {/*            </div>*/}
-                            {/*        <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
+              {/*            <div className="name">*/}
-                            {/*            <div*/}
+              {/*                <p className="text-base text-dark-gray dark:text-white font-medium">*/}
-                            {/*                className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
+              {/*                    Bitski*/}
-                            {/*                <img src={bank2} alt=""/>*/}
+              {/*                </p>*/}
-                            {/*            </div>*/}
+              {/*            </div>*/}
-                            {/*            <div className="name">*/}
+              {/*        </div>*/}
-                            {/*                <p className="text-base text-dark-gray dark:text-white font-medium">*/}
+              {/*        <div>*/}
-                            {/*                    Coinbase Wallet*/}
+              {/*            <p className="eth text-xl font-bold text-purple">*/}
-                            {/*                </p>*/}
+              {/*                99,123 ETH*/}
-                            {/*            </div>*/}
+              {/*            </p>*/}
-                            {/*        </div>*/}
+              {/*            <p className="usd text-base text-thin-light-gray text-right">*/}
-                            {/*        <div>*/}
+              {/*                (773.69 USD)*/}
-                            {/*            <p className="eth text-xl font-bold text-purple">*/}
+              {/*            </p>*/}
-                            {/*                56,124 ETH*/}
+              {/*        </div>*/}
-                            {/*            </p>*/}
+              {/*    </div>*/}
-                            {/*            <p className="usd text-base text-thin-light-gray text-right">*/}
+              {/*</li>*/}
-                            {/*                (773.69 USD)*/}
+              {/*<li className="content-item py-5">*/}
-                            {/*            </p>*/}
+              {/*    <div className="sm:flex justify-between items-center">*/}
-                            {/*        </div>*/}
+              {/*        <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
-                            {/*    </div>*/}
+              {/*            <div*/}
-                            {/*</li>*/}
+              {/*                className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
-                            {/*<li className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple">*/}
+              {/*                <img src={bank4} alt=""/>*/}
-                            {/*    <div className="sm:flex justify-between items-center">*/}
+              {/*            </div>*/}
-                            {/*        <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
+              {/*            <div className="name">*/}
-                            {/*            <div*/}
+              {/*                <p className="text-base text-dark-gray dark:text-white font-medium">*/}
-                            {/*                className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
+              {/*                    WalletConnect*/}
-                            {/*                <img src={bank3} alt=""/>*/}
+              {/*                </p>*/}
-                            {/*            </div>*/}
+              {/*            </div>*/}
-                            {/*            <div className="name">*/}
+              {/*        </div>*/}
-                            {/*                <p className="text-base text-dark-gray dark:text-white font-medium">*/}
+              {/*        <div>*/}
-                            {/*                    Bitski*/}
+              {/*            <p className="eth text-xl font-bold text-purple">*/}
-                            {/*                </p>*/}
+              {/*                43,728 ETH*/}
-                            {/*            </div>*/}
+              {/*            </p>*/}
-                            {/*        </div>*/}
+              {/*            <p className="usd text-base text-thin-light-gray text-right">*/}
-                            {/*        <div>*/}
+              {/*                (773.69 USD)*/}
-                            {/*            <p className="eth text-xl font-bold text-purple">*/}
+              {/*            </p>*/}
-                            {/*                99,123 ETH*/}
+              {/*        </div>*/}
-                            {/*            </p>*/}
+              {/*    </div>*/}
-                            {/*            <p className="usd text-base text-thin-light-gray text-right">*/}
+              {/*</li>*/}
-                            {/*                (773.69 USD)*/}
+            </ul>
-                            {/*            </p>*/}
+            <div className="add-money-btn flex justify-center items-center mt-3">
-                            {/*        </div>*/}
+              {/* <button
-                            {/*    </div>*/}
+                                onClick={() => {
-                            {/*</li>*/}
+                                if(pathname == '/my-wallet') props.setBalanceDropdown.toggle()
-                            {/*<li className="content-item py-5">*/}
+                                else navigate('/my-wallet', {replace: true})
-                            {/*    <div className="sm:flex justify-between items-center">*/}
+                                }}
-                            {/*        <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
-                            {/*            <div*/}
-                            {/*                className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
-                            {/*                <img src={bank4} alt=""/>*/}
-                            {/*            </div>*/}
-                            {/*            <div className="name">*/}
-                            {/*                <p className="text-base text-dark-gray dark:text-white font-medium">*/}
-                            {/*                    WalletConnect*/}
-                            {/*                </p>*/}
-                            {/*            </div>*/}
-                            {/*        </div>*/}
-                            {/*        <div>*/}
-                            {/*            <p className="eth text-xl font-bold text-purple">*/}
-                            {/*                43,728 ETH*/}
-                            {/*            </p>*/}
-                            {/*            <p className="usd text-base text-thin-light-gray text-right">*/}
-                            {/*                (773.69 USD)*/}
-                            {/*            </p>*/}
-                            {/*        </div>*/}
-                            {/*    </div>*/}
-                            {/*</li>*/}
-                        </ul>
-                        <div className="add-money-btn flex justify-center items-center mt-3">
-                            {/* <button
-                                onClick={() => props.addMoneyHandler()}
                                 type="button"
                                 className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                             >
                                 Manage
                             </button> */}
-                            <Link to='/my-wallet' className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">Manage</Link>
+              <Link
-                        </div>
+                to="/my-wallet"
-                    </div>
+                onClick={() => {
-                </div>
+                  if (pathname == "/my-wallet")
+                    props.setBalanceDropdown.toggle();
+                  else navigate("/my-wallet", { replace: true });
+                }}
+                className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+              >
+                Manage
+              </Link>
             </div>
-            {/*<div*/}
+          </div>
-            {/*    className="lg:hidden flex user-balance cursor-pointer lg:w-[252px] w-[150px] h-[48px]  items-center rounded-full relative  bg-purple">*/}
+        </div>
-            {/*    <div className="flex items-center lg:justify-between justify-center w-full h-full">*/}
+      </div>
-            {/*        <p className="lg:text-xl text-lg font-bold text-white">*/}
+      {/*<div*/}
-            {/*            $ 234,435.34*/}
+      {/*    className="lg:hidden flex user-balance cursor-pointer lg:w-[252px] w-[150px] h-[48px]  items-center rounded-full relative  bg-purple">*/}
-            {/*        </p>*/}
+      {/*    <div className="flex items-center lg:justify-between justify-center w-full h-full">*/}
-            {/*    </div>*/}
+      {/*        <p className="lg:text-xl text-lg font-bold text-white">*/}
-            {/*</div>*/}
+      {/*            $ 234,435.34*/}
-            <div className="lg:hidden block"></div>
+      {/*        </p>*/}
-        </>);
+      {/*    </div>*/}
+      {/*</div>*/}
+      <div className="lg:hidden block"></div>
+    </>
+  );
 }

src/components/Partials/Header.jsx

@@ -1,5 +1,5 @@
 import React, { useContext,useState, useEffect } from "react";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import bank1 from "../../assets/images/bank-1.png";
 import bank2 from "../../assets/images/bank-2.png";
 import bank3 from "../../assets/images/bank-3.png";
@@ -91,6 +91,15 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
     setToggleNotification.toggle()
   }
 
+  // getting the location of head
+  let {pathname} = useLocation()
+  
+  const handleWalletBtn = () => {
+    if (pathname === "/my-wallet"){
+      setbalanceValue.set(false)
+    } else return balanceDropdown
+  }
+
   // User Profile
   let {firstname, lastname, email, profile_pic} = userDetails
   let userEmail = email.split('@')[0]
@@ -234,7 +243,8 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                 myWalletList={myWalletList}
                 handlerBalance={handlerBalance}
                 balanceDropdown={balanceDropdown}
-                addMoneyHandler={addMoneyHandler} />
+                addMoneyHandler={addMoneyHandler}
+                setBalanceDropdown = {setbalanceValue} />
             {/* notification */}
             <div className="user-notification lg:block hidden relative">
               <div

src/components/jobPopout/PendingJobsPopout.jsx

@@ -3,7 +3,7 @@ import Detail from './popoutcomponent/Detail'
 import ModalCom from '../Helpers/ModalCom'
 
 
-function ActiveJobsPopout({details, onClose, situation}) {
+function PendingJobsPopout({details, onClose, situation}) {
   return (
     <ModalCom action={onClose} situation={situation}>
     <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
@@ -66,7 +66,7 @@ function ActiveJobsPopout({details, onClose, situation}) {
             <div className='my-2 md:flex'>
               <Detail 
                   label='Offer Expire' 
-                  value={`${details.expire.split(' ')[0]} ${details.expire.split(' ')[1].split('.')[0]}`} 
+                  value={details.expire && `${details.expire.split(' ')[0]} ${details.expire.split(' ')[1].split('.')[0]}`}
               />
             </div>
   
@@ -139,4 +139,4 @@ function ActiveJobsPopout({details, onClose, situation}) {
     )
 }
 
-export default ActiveJobsPopout
+export default PendingJobsPopout

src/services/UsersService.js

@@ -198,6 +198,18 @@ class usersService {
         return this.postAuxEnd("/sendmoneyfee", postData);
     }
 
+    // Task for the person doing the job
+    getMyActiveTaskList(){
+        var postData = {
+            uuid: localStorage.getItem("uid"),
+            member_id: localStorage.getItem("member_id"),
+            sessionid: localStorage.getItem("session_token"),
+            page:0,
+            offset:0,
+            limit :100
+        };
+        return this.postAuxEnd("/activetaskslist", postData);
+    }
     getMyActiveJobList(){
         var postData = {
             uuid: localStorage.getItem("uid"),

src/views/ManageActiveJobs.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ActiveJobs from '../components/MyActiveJobs/ActiveJobs'
+
+function ManageActiveJobs() {
+  return (
+    <ActiveJobs />
+  )
+}
+
+export default ManageActiveJobs

src/views/MyTaskPage.jsx

@@ -10,7 +10,7 @@ export default function MyTaskPage() {
 
     const getMyActiveJobList = async () => {
         try {
-            const res = await api.getMyActiveJobList();
+            const res = await api.getMyActiveTaskList();
             setMyActiveJobList(res.data);
         } catch (error) {
             console.log("Error getting mode");

yarn.lock

@@ -1596,6 +1596,11 @@
     schema-utils "^3.0.0"
     source-map "^0.7.3"
 
+"@react-oauth/google@^0.11.0":
+  version "0.11.0"
+  resolved "https://registry.npmjs.org/@react-oauth/google/-/google-0.11.0.tgz"
+  integrity sha512-yeypwdQCcFIAo43OqVOLBfUXuxmxt3xiybfP9h3smtBW4UeFXFVQDsq+d+GlbZFo0TpONPR2+KCk/KT1/pQnvQ==
+
 "@reduxjs/toolkit@^1.8.2":
   version "1.9.1"
   resolved "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.1.tgz"
@@ -2747,6 +2752,13 @@ axe-core@^4.6.2:
   resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.6.2.tgz"
   integrity sha512-b1WlTV8+XKLj9gZy2DZXgQiyDp9xkkoe2a6U6UbYccScq2wgH/YwCeI2/Jq2mgo0HzQxqJOjWZBLeA/mqsk5Mg==
 
+axios@^0.21.1:
+  version "0.21.4"
+  resolved "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz"
+  integrity sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==
+  dependencies:
+    follow-redirects "^1.14.0"
+
 axios@^0.24.0:
   version "0.24.0"
   resolved "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz"
@@ -2897,14 +2909,6 @@ babel-preset-react-app@^10.0.1:
     babel-plugin-macros "^3.1.0"
     babel-plugin-transform-react-remove-prop-types "^0.4.24"
 
-babel-runtime@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz"
-  integrity sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==
-  dependencies:
-    core-js "^2.4.0"
-    regenerator-runtime "^0.11.0"
-
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
@@ -3396,11 +3400,6 @@ core-js-pure@^3.23.3, core-js-pure@^3.25.1:
   resolved "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.27.1.tgz"
   integrity sha512-BS2NHgwwUppfeoqOXqi08mUqS5FiZpuRuJJpKsaME7kJz0xxuk0xkhDdfMIlP/zLa80krBqss1LtD7f889heAw==
 
-core-js@^2.4.0:
-  version "2.6.12"
-  resolved "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz"
-  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
-
 core-js@^3.19.2:
   version "3.27.1"
   resolved "https://registry.npmjs.org/core-js/-/core-js-3.27.1.tgz"
@@ -4176,7 +4175,7 @@ escodegen@^2.0.0:
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-config-react-app@^7.0.0:
+eslint-config-react-app@^7.0.1:
   version "7.0.1"
   resolved "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-7.0.1.tgz"
   integrity sha512-K6rNzvkIeHaTd8m/QEh1Zko0KI7BACWkkneSs6s9cKZC/J27X3eZR6Upt1jkmZ/4FK+XUOPPxMEN7+lbUXfSlA==
@@ -4703,7 +4702,14 @@ flatted@^3.1.0:
   resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz"
   integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
 
-follow-redirects@^1.0.0, follow-redirects@^1.14.4:
+flutterwave-react-v3@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/flutterwave-react-v3/-/flutterwave-react-v3-1.3.0.tgz"
+  integrity sha512-y0dGSgxh9H/KMSDFurnoPYO3D6DSeOCZHPdLt8DnbtCkjgYgzNdqeXKvxerEaOJyitzXITsmlbzYdrEO/Lju3g==
+  dependencies:
+    axios "^0.21.1"
+
+follow-redirects@^1.0.0, follow-redirects@^1.14.0, follow-redirects@^1.14.4:
   version "1.15.2"
   resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz"
   integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
@@ -6402,11 +6408,6 @@ loose-envify@^1.1.0, loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
-lottie-web@^5.1.3:
-  version "5.10.1"
-  resolved "https://registry.npmjs.org/lottie-web/-/lottie-web-5.10.1.tgz"
-  integrity sha512-u17bVNf/vA3oK9Wkyb1Vpo83WUIEQwaT0GeEN0qcvaExizyJ/RjmcbjSDj0CnwQCtpGqTgYhqprCC7cTWuXMNw==
-
 lower-case@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz"
@@ -7760,7 +7761,7 @@ react-countup@^6.2.0:
     "@rollup/plugin-babel" "^6.0.2"
     countup.js "^2.3.2"
 
-react-dev-utils@^12.0.0:
+react-dev-utils@^12.0.1:
   version "12.0.1"
   resolved "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz"
   integrity sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ==
@@ -7790,7 +7791,7 @@ react-dev-utils@^12.0.0:
     strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
-react-dom@^18.0.0:
+react-dom@^18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
   integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
@@ -7823,15 +7824,7 @@ react-is@^18.0.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
-react-lottie@^1.2.3:
+react-redux@^8.0.5:
-  version "1.2.3"
-  resolved "https://registry.npmjs.org/react-lottie/-/react-lottie-1.2.3.tgz"
-  integrity sha512-qLCERxUr8M+4mm1LU0Ruxw5Y5Fn/OmYkGfnA+JDM/dZb3oKwVAJCjwnjkj9TMHtzR2U6sMEUD3ZZ1RaHagM7kA==
-  dependencies:
-    babel-runtime "^6.26.0"
-    lottie-web "^5.1.3"
-
-react-redux@^8.0.2:
   version "8.0.5"
   resolved "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz"
   integrity sha512-Q2f6fCKxPFpkXt1qNRZdEDLlScsDWyrgSj0mliK59qU6W5gvBiKkdMEG2lJzhd1rCctf0hb6EtePPLZ2e0m1uw==
@@ -7863,10 +7856,10 @@ react-router@6.6.2:
   dependencies:
     "@remix-run/router" "1.2.1"
 
-react-scripts@5.0.0:
+react-scripts@5.0.1:
-  version "5.0.0"
+  version "5.0.1"
-  resolved "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz"
+  resolved "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz"
-  integrity sha512-3i0L2CyIlROz7mxETEdfif6Sfhh9Lfpzi10CtcGs1emDQStmZfWjJbAIMtRD0opVUjQuFWqHZyRZ9PPzKCFxWg==
+  integrity sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==
   dependencies:
     "@babel/core" "^7.16.0"
     "@pmmmwh/react-refresh-webpack-plugin" "^0.5.3"
@@ -7884,7 +7877,7 @@ react-scripts@5.0.0:
     dotenv "^10.0.0"
     dotenv-expand "^5.1.0"
     eslint "^8.3.0"
-    eslint-config-react-app "^7.0.0"
+    eslint-config-react-app "^7.0.1"
     eslint-webpack-plugin "^3.1.1"
     file-loader "^6.2.0"
     fs-extra "^10.0.0"
@@ -7901,7 +7894,7 @@ react-scripts@5.0.0:
     postcss-preset-env "^7.0.1"
     prompts "^2.4.2"
     react-app-polyfill "^3.0.0"
-    react-dev-utils "^12.0.0"
+    react-dev-utils "^12.0.1"
     react-refresh "^0.11.0"
     resolve "^1.20.0"
     resolve-url-loader "^4.0.0"
@@ -7936,7 +7929,7 @@ react-toastify@^9.0.1:
   dependencies:
     clsx "^1.1.1"
 
-react@^18.0.0:
+react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
@@ -8018,11 +8011,6 @@ regenerate@^1.4.2:
   resolved "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz"
   integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
 
-regenerator-runtime@^0.11.0:
-  version "0.11.1"
-  resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz"
-  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
-
 regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.9:
   version "0.13.11"
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz"