google login routes to login/auth with coderesponse consoled

my offers
Correct production google redirect
2023-05-27 10:05:00 +01:00 · 2023-05-26 22:15:56 -04:00 · 2023-05-26 19:37:21 -04:00 · 2023-05-26 21:42:32 +00:00 · 2023-05-26 22:27:26 +01:00 · 2023-05-26 22:25:40 +01:00
32 changed files with 905 additions and 446 deletions
@@ -34,5 +34,17 @@ REACT_APP_ITEM_PER_PAGE=5
 # Empty Listings
 REACT_APP_ZERO_STATE=0

+#REACT_APP_GOOGLE_CLIENT_ID_RET=234407841224-k5g7f67p908hqtegiokmjqt8qqf3hi2i.apps.googleusercontent.com
+
+REACT_APP_GOOGLE_CLIENT_ID=817021856543-ad9nsjgdpsu2s2jrl63j3ihrv7lbf6ma.apps.googleusercontent.com
+REACT_APP_GOOGLE_CLIENT_SECRET=aozK_2G8UjaCmLgPPkv9abIm
+REACT_APP_GOOGLE_CLIENT_SCOPE="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile"
+REACT_APP_GOOGLE_REDIRECT_URL=http://localhost:9082/login/auth/
+
+REACT_APP_FACEBOOK_CLIENT_ID=390204307987009
+REACT_APP_FACEBOOK_CLIENT_SECRET=19f778e312f2ab96d147bacb612910c2
+REACT_APP_FACEBOOK_CLIENT_SCOPE="email, public_profile"
+
+
 #apigate.lotus.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227
@@ -33,3 +33,8 @@ REACT_APP_ITEM_PER_PAGE=5

 #apigate.lotus.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227
+
+REACT_APP_GOOGLE_CLIENT_ID=817021856543-ad9nsjgdpsu2s2jrl63j3ihrv7lbf6ma.apps.googleusercontent.com
+REACT_APP_GOOGLE_CLIENT_SECRET=aozK_2G8UjaCmLgPPkv9abIm
+REACT_APP_GOOGLE_CLIENT_SCOPE="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile"
+REACT_APP_GOOGLE_REDIRECT_URL=http://localhost:9082/login/auth/
@@ -33,3 +33,8 @@ REACT_APP_ITEM_PER_PAGE=5

 #apigate.orion.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227
+
+REACT_APP_GOOGLE_CLIENT_ID=817021856543-ad9nsjgdpsu2s2jrl63j3ihrv7lbf6ma.apps.googleusercontent.com
+REACT_APP_GOOGLE_CLIENT_SECRET=aozK_2G8UjaCmLgPPkv9abIm
+REACT_APP_GOOGLE_CLIENT_SCOPE="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile"
+REACT_APP_GOOGLE_REDIRECT_URL=https://users.wrenchboard.com/login/auth/
@@ -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-lottie": "^1.2.3",
-        "react-redux": "^8.0.2",
+        "react-dom": "^18.2.0",
+        "react-redux": "^8.0.5",
        "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",
-      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",
-      "integrity": "sha512-3i0L2CyIlROz7mxETEdfif6Sfhh9Lfpzi10CtcGs1emDQStmZfWjJbAIMtRD0opVUjQuFWqHZyRZ9PPzKCFxWg==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
+      "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",
@@ -39,6 +39,7 @@ import MyPendingJobsPage from "./views/MyPendingJobsPage";
 import ManageActiveJobs from "./views/ManageActiveJobs";
 import FamilyManagePage from "./views/FamilyManagePage";
 import MyCouponPage from "./views/MyCouponPage";
+import AuthRedirect from "./views/AuthRedirect";

 export default function Routers() {
  return (
@@ -47,6 +48,7 @@ export default function Routers() {
        {/* guest routes */}
        <Route exact path="/login" element={<LoginPage />} />
        <Route exact path="/signup" element={<SignupPage />} />
+        <Route exact path="/login/auth" element={<AuthRedirect />} />
        <Route
          exact
          path="/forgot-password"
@@ -4,7 +4,7 @@ import { Link } from "react-router-dom";
 export default function LoginLayout({ slogan, children }) {
  return (
    <div className={`layout-wrapper login`}>
-      <div className={`main-wrapper login-wrapper w-full h-screen overflow-y-auto sm:p-20 p-10`}>
+      <div className={`main-wrapper login-wrapper w-full h-screen overflow-y-auto p-2 sm:p-20`}>
        <div className="w-full h-full">
          <div className="flex-1 flex justify-center items-center">
            {children && children}
@@ -0,0 +1,23 @@
+import React, {useState, useEffect} from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+
+function Redirect() {
+    const location = useLocation();
+    const navigate = useNavigate();
+
+    const queryParams = new URLSearchParams(location?.search);
+    const codeResponse = queryParams.get("code");
+
+    useEffect(()=>{
+        if(!codeResponse){
+            navigate('/login', {replace: true})
+            return
+        }
+        console.log(codeResponse)
+    },[])
+  return (
+    <div>Redirecting ... </div>
+  )
+}
+
+export default Redirect
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import linkedInLogo from "../../../assets/images/Linkedin.png";
 import appleLogo from "../../../assets/images/apple-black.svg";
@@ -8,8 +8,8 @@ import WrenchBoard from "../../../assets/images/wrenchboard.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
-//import { GoogleOAuthProvider } from '@react-oauth/google';
-// import { googleLogout, useGoogleLogin } from '@react-oauth/google';
+// import { GoogleOAuthProvider } from '@react-oauth/google';
+import { googleLogout, useGoogleLogin } from "@react-oauth/google";

 import { useDispatch } from "react-redux";
 import { updateUserDetails } from "../../../store/UserDetails";
@@ -17,7 +17,7 @@ import { updateUserDetails } from "../../../store/UserDetails";
 export default function Login() {
  const dispatch = useDispatch();

-  let [loginCom, setLoginCom] = useState({ user: true, family: false });
+  let [loginType, setLoginType] = useState({ full: true, family: false });

  const [checked, setValue] = useState(false);
  const [loginLoading, setLoginLoading] = useState(false);
@@ -32,11 +32,11 @@ export default function Login() {
  };

  //FUNCTION TO DETERMINE/CHANGE LOGIN COMPONENT
-  const handleLoginCom = ({ target: { name } }) => {
-    if (name == "user") {
-      setLoginCom({ [name]: true, family: false });
-    } else {
-      setLoginCom({ [name]: false, family: true });
+  const handleLoginType = ({ target: { name } }) => {
+    if (name == "full") {
+      setLoginType({ [name]: true, family: false });
+    } else if ((name = "family")) {
+      setLoginType({ [name]: false, family: true });
    }
  };

@@ -56,8 +56,9 @@ export default function Login() {
  // FUNCTION TO HANDLE USER LOGIN
  const doLogin = ({ target: { name } }) => {
    setMsgError("");
+    setLoginError(false);
    setLoginLoading(true);
-    let postData = {}; // Post Data for API
+    let postData; // Post Data for API
    if (!email || !password) {
      setLoginLoading(false);
      setMsgError("Please fill all the fields");
@@ -67,14 +68,17 @@ export default function Login() {
      return;
    }

-    if (name == "userlogin") { // Post Data Info for normal Login
+    if (name == "loginfull") {
+      // Post Data Info for normal Login
      postData = {
        username: email,
        password: password,
        sessionid: "STARTING",
+        login_mode: 1100,
        action: 11025,
      };
-    } else if (name == "familylogin") { // Post Data Info for family Login
+    } else if (name == "loginfamily") {
+      // Post Data Info for family Login
      postData = {
        username: email,
        pin: password,
@@ -82,9 +86,17 @@ export default function Login() {
        login_mode: 1105,
        action: 11025,
      };
+    } else {
+      setLoginLoading(false);
+      setMsgError("Invalid Login Type. Consider refreshing the page");
+      setTimeout(() => {
+        setMsgError("");
+      }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
+      return;
    }
-
-    userApi.logInUser(postData).then((res) => {
+    userApi
+      .logInUser(postData)
+      .then((res) => {
        if (res.status != 200 || res.data.internal_return < 0) {
          // setMsgError("Wrong, email/password");
          setLoginError(true);
@@ -100,18 +112,35 @@ export default function Login() {
          navigate("/", { replace: true });
          setLoginLoading(false);
        }, 2000);
-      }).catch((error) => {
+      })
+      .catch((error) => {
        setMsgError("Unable to login, try again");
        setLoginLoading(false);
-      }).finally(() => {
+      })
+      .finally(() => {
        setTimeout(() => {
          setLoginError(false);
-          setMsgError('');
+          setMsgError("");
          setLoginLoading(false);
        }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
      });
  };

+  const googleLogin = useGoogleLogin({
+    flow: 'auth-code',
+    ux_mode:'redirect',
+    redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
+    onSuccess: async (codeResponse) => {
+      console.log(codeResponse);
+    },
+    onError: (errorResponse) => console.log(errorResponse),
+  });
+
+  useEffect(() => {
+    setMail("");
+    setPassword("");
+  }, [loginType.full, loginType.family]);
+
  return (
    <>
      <AuthLayout slogan="Welcome to WrenchBoard">
@@ -145,20 +174,20 @@ export default function Login() {
              {/* switch login component */}
              <div className="flex justify-start items-end">
                <button
-                  name="user"
+                  name="full"
                  className={`px-2 py-1 w-[100px] text-left h-[40px] text-lg font-bold text-[#4687ba] hover:text-[#009ef7] tracking-wide transition outline-none border-2 border-b-0 border-r-0 border-[#4687ba] ${
-                    loginCom.user && "border-r-2 h-[45px]"
+                    loginType.full && "border-r-2 h-[45px]"
                  }`}
-                  onClick={handleLoginCom}
+                  onClick={handleLoginType}
                >
                  Sign in
                </button>
                <button
                  name="family"
                  className={`px-2 py-1 w-[100px] text-left h-[40px] text-lg font-bold text-[#4687ba] hover:text-[#009ef7] tracking-wide transition outline-none border-2 border-b-0 border-l-0 border-[#4687ba] ${
-                    loginCom.family && "border-l-2 h-[45px]"
+                    loginType.family && "border-l-2 h-[45px]"
                  }`}
-                  onClick={handleLoginCom}
+                  onClick={handleLoginType}
                >
                  Family
                </button>
@@ -168,13 +197,13 @@ export default function Login() {

              {/* for login component */}
              {
-                loginCom.user ? (
-                  //user login compoenent
+                loginType.full ? (
+                  //user login component
                  <div className="p-2 input-area border-2 border-[#4687ba]">
                    <div className="input-item mb-5">
                      <InputCom
                        labelClass="tracking-wider"
-                        fieldClass="px-6"
+                        fieldClass="sm:px-6 px-2"
                        value={email}
                        inputHandler={handleEmail}
                        placeholder="support@mermsemr.com"
@@ -188,7 +217,7 @@ export default function Login() {
                    <div className="input-item mb-5">
                      <InputCom
                        labelClass="tracking-wider"
-                        fieldClass="px-6"
+                        fieldClass="sm:px-6 px-2"
                        value={password}
                        inputHandler={handlePassword}
                        placeholder="● ● ● ● ● ●"
@@ -219,7 +248,7 @@ export default function Login() {
                    <div className="signin-area mb-3.5">
                      <div className="flex justify-center">
                        <button
-                          name="userlogin"
+                          name="loginfull"
                          onClick={doLogin}
                          type="button"
                          disabled={loginLoading}
@@ -228,12 +257,17 @@ export default function Login() {
                          {loginLoading ? (
                            <div className="signup btn-loader"></div>
                          ) : (
-                            <span>Continue</span>
+                            <>Continue</>
                          )}
                        </button>
                      </div>
                      <div className="sm:flex sm:justify-between sm:items-center sm:space-x-2">
-                        <BrandBtn link="#" imgSrc={googleLogo} brand="Google" />
+                        <BrandBtn
+                          link="#"
+                          imgSrc={googleLogo}
+                          brand="Google"
+                          onClick={googleLogin}
+                        />
                        <BrandBtn link="#" imgSrc={appleLogo} brand="Apple" />
                      </div>
                      <div className="sm:flex sm:justify-between sm:items-center sm:space-x-2">
@@ -302,7 +336,7 @@ export default function Login() {
                    <div className="signin-area mb-1.5">
                      <div className="flex justify-center">
                        <button
-                          name="familylogin"
+                          name="loginfamily"
                          onClick={doLogin}
                          disabled={loginLoading}
                          type="button"
@@ -311,7 +345,7 @@ export default function Login() {
                          {loginLoading ? (
                            <div className="signup btn-loader"></div>
                          ) : (
-                            <span>Continue</span>
+                            <>Continue</>
                          )}
                        </button>
                      </div>
@@ -334,10 +368,10 @@ export default function Login() {
  );
 }

-const BrandBtn = ({ link, imgSrc, brand }) => {
-  const doGoogle = async () => {
-    alert("start google");
-  };
+const BrandBtn = ({ link, imgSrc, brand, onClick }) => {
+  // const doGoogle = async () => {
+  //   alert("start google");
+  // };

  //  onSuccess: (codeResponse) => setUser(codeResponse),

@@ -346,26 +380,26 @@ const BrandBtn = ({ link, imgSrc, brand }) => {
  //   onError: (error) => console.log('Login Failed:', error)
  // });

-  const doApple = async () => {
-    alert("start apple");
-  };
+  // const doApple = async () => {
+  //   alert("start apple");
+  // };

-  const doFacebook = async () => {
-    alert("start facebook");
-  };
+  // const doFacebook = async () => {
+  //   alert("start facebook");
+  // };

  return (
    <div className="w-full sm:w-1/2 flex justify-center bottomMargin">
-      <a
-        // onClick={doGoogle}
-        href="#dd"
+      <button
+        onClick={onClick}
+        // href="#dd"
        className="w-full border border-light-purple dark:border-[#5356fb29]  rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F]  items-center font-medium cursor-pointer"
      >
        <img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />
        <span className="text-lg text-thin-light-gray font-normal text-[15px]">
          Continue with {brand}
        </span>
-      </a>
+      </button>
    </div>
  );
 };
@@ -1,76 +1,18 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import InputCom from "../Helpers/Inputs/InputCom";
+import React, { useState } from "react";
 import Layout from "../Partials/Layout";
-import FamilyTable from "./FamilyTable";
-import SiteService from "../../services/SiteService";
-import ModalCom from "../Helpers/ModalCom";
 import FamilyManageTabs from "./FamilyManageTabs";
 import { useLocation } from "react-router-dom";

 export default function FamilyManage() {
  const [selectTab, setValue] = useState("today");
-  const [selectedAge, setSelectedAge] = useState(undefined);
-  const [familyList, setFamilyList] = useState([]);
-  const [loader, setLoader] = useState(false);
-  const [popUp, setPopUp] = useState(false);
-  const [listReload, setListReload] = useState(false);
-  const [msgErr, setMsgErr] = useState("");
-  const [formData, setFormData] = useState({
-    first_name: "",
-    last_name: "",
-  });

  let location = useLocation();
  let accountDetails = location?.state
-
-  const apiCall = useMemo(() => new SiteService(), []);
-
-  // This is to make sure it's called once and used everywhere
-  let memberId = localStorage.getItem("member_id");
-  let uid = localStorage.getItem("uid");
-  let sessionId = localStorage.getItem("session_token");
-
-  const popUpHandler = () => {
-    setPopUp((prev) => !prev);
-  };
-
  //   tab handler
  const filterHandler = (value) => {
    setValue(value);
  };

-  // member listing
-  const memberList = useCallback(async () => {
-    setLoader(true);
-    try {
-      let reqData = {
-        member_id: memberId,
-        uid: uid,
-        session_id: sessionId,
-        limit: 20,
-        offset: 0,
-        action: 22010,
-      };
-
-      let res = await apiCall.familyListings(reqData);
-      const { data } = res;
-      if (data?.internal_return >= 0 && data?.status == "OK") {
-        let { result_list } = data;
-        setFamilyList(result_list);
-        setLoader(false);
-      } else return;
-    } catch (error) {
-      setLoader(false);
-      throw new Error(error);
-    }
-  }, [apiCall, memberId, sessionId, uid]);
-
-  useEffect(() => {
-    memberList();
-  }, [listReload, memberList]);
-
-  console.log('Ebueb', familyList)
-
  return (
    <Layout>
      {/*<CommonHead />*/}
@@ -94,7 +36,7 @@ export default function FamilyManage() {
              ></div>
            </div>
          </div>
-          <FamilyManageTabs accountDetails={accountDetails} loader={loader} />
+          <FamilyManageTabs accountDetails={accountDetails} />
        </div>
      </div>
    </Layout>
@@ -6,7 +6,6 @@ import React, {
  useState,
 } from "react";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
-import cover from "../../assets/images/profile-info-cover.png";
 import profile from "../../assets/images/profile-info-profile.png";
 import usersService from "../../services/UsersService";
 import FamilyTasks from "./FamilyTasks";
@@ -14,6 +13,7 @@ import FamilyTasks from "./FamilyTasks";
 export default function FamilyManageTabs({
  className,
  accountDetails,
+  listReload,
  loader,
 }) {
  const [familyDetails, setFamilyDetails] = useState(null);
@@ -75,9 +75,8 @@ export default function FamilyManageTabs({

  useEffect(() => {
    familyManageHandler();
-  }, []);
+  }, [tab]);

-  console.log(familyDetails);
  return (
    <div
      className={`update-table w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
@@ -212,10 +211,6 @@ function ProfileInfo({
  );
 }

-function Tasks() {
-  return <>Tasks</>;
-}
-
 function Account({ familyDetails }) {
  return (
    <div className="w-full lg:min-h-[400px] h-full flex items-center justify-center">
@@ -2,19 +2,32 @@ import React, { useState } from "react";
 import dataImage1 from "../../assets/images/data-table-user-1.png";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import { useNavigate, useLocation, Link } from "react-router-dom";
+import { handlePagingFunc } from "../Pagination/HandlePagination";
+import PaginatedList from "../Pagination/PaginatedList";

 export default function FamilyTable({ className, familyList, loader }) {
  const filterCategories = ["All Categories", "Explore", "Featured"];
  const [selectedCategory, setCategory] = useState(filterCategories[0]);
  const navigate = useNavigate();
  // let location = useLocation();
+
+  const [currentPage, setCurrentPage] = useState(0);
+  const indexOfFirstItem = Number(currentPage);
+  const indexOfLastItem =
+    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+  const currentFamilyList = familyList?.slice(indexOfFirstItem, indexOfLastItem);
+
+  const handlePagination = (e) => {
+    handlePagingFunc(e, setCurrentPage);
+  };
+
  return (
    <div
-      className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
+      className={`update-table w-full h-full p-8 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow ${
        className || ""
      }`}
    >
-      <div className="relative w-full overflow-x-auto sm:rounded-lg">
+      <div className="relative w-full h-full overflow-x-auto sm:rounded-lg">
        {loader ? (
          <div className="h-full min-h-[500px] w-full overflow-hidden flex justify-center items-center">
            <LoadingSpinner size="16" color="sky-blue" />
@@ -30,10 +43,10 @@ export default function FamilyTable({ className, familyList, loader }) {
                  <th className="py-4 text-right"></th>
                </tr>
              </thead>
-              <tbody className="overflow-y-scroll h-auto">
+              <tbody className="h-full">
                <>
                  {familyList?.length > 0 ? (
-                    familyList?.map((props, idx) => {
+                    currentFamilyList?.map((props, idx) => {
                      let {
                        firstname,
                        lastname,
@@ -115,6 +128,21 @@ export default function FamilyTable({ className, familyList, loader }) {
          </table>
        )}
      </div>
+        {/* PAGINATION BUTTON */}
+        <PaginatedList
+        onClick={handlePagination}
+        prev={currentPage == 0 ? true : false}
+        next={
+          currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
+          familyList?.length
+            ? true
+            : false
+        }
+        data={familyList}
+        start={indexOfFirstItem}
+        stop={indexOfLastItem}
+      />
+      {/* END OF PAGINATION BUTTON */}
    </div>
  );
 }
@@ -73,6 +73,7 @@ export default function FamilyAcc() {
        if (data?.internal_return > 0 && data?.status == "OK") {
          setLoader(false);
          setListReload((prev) => !prev);
+          popUpHandler()
        } else {
          setLoader(false);
          setMsgErr("Sorry, something went wrong");
@@ -93,6 +94,7 @@ export default function FamilyAcc() {
        first_name: "",
        last_name: "",
      });
+      setSelectedAge("")
    }
  };

@@ -5,9 +5,8 @@ function DataIteration(props) {
  return (
    <>
      {datas &&
-        datas.length >= endLength &&
-        datas
-          .slice(startLength, endLength)
+        datas?.length >= endLength &&
+        datas?.slice(startLength, endLength)
          .map((value) => children({ datas: value }))}
    </>
  );
@@ -47,7 +47,7 @@ export default function FamilyActiveLSlde({ className, trending }) {
                <div>
                    <h1 className="text-26 font-bold   text-dark-gray dark:text-white">Current Tasks</h1>
                </div>
-                <div className="slider-btns flex space-x-4">
+                <div className="slider-btns flex space-x-3">
                    <button onClick={nextHandler} type="button">
                        <div className="trending-slider-left-btn relative text-white w-10 h-10 flex justify-center items-center rounded-full overflow-hidden">
                            <svg
@@ -1,14 +1,6 @@
 import React from "react";
 import datas from "../../data/product_data.json";
 import Layout from "../Partials/Layout";
-import CreateNft from "./CreateNft";
-import Hero from "./Hero";
-import SellHistoryMarketVisitorAnalytic from "./SellHistoryMarketVisitorAnalytic";
-import TopSellerTopBuyerSliderSection from "./TopSellerTopBuyerSliderSection";
-import TrendingSection from "./TrendingSection";
-import UpdateTable from "./UpdateTable";
-import HomeTaskDisplay from "./HomeTaskDisplay";
-import UsersService from "../../services/UsersService";
 import usersService from "../../services/UsersService";
 import { useSelector } from "react-redux";
 import FamilyDash from "./FamilyDash";
@@ -19,12 +11,10 @@ export default function Home(props) {

    console.log("PROPS IN HOME->",props);

-    const trending = datas.datas;
-    const jobData =  datas.datas; // api calls or cache
-    //getHomeDate
+//    const trending = datas.datas;
+//    const jobData =  datas.datas; // api calls or cache
    const userApi = new usersService();
-    const homeData = userApi.getHomeDate();
-
+//    const homeData = userApi.getHomeDate();
    const {userDetails} = useSelector((state) => state?.userDetails)

    const commonHeadData =()=>{
@@ -1,8 +1,5 @@
 import React, { useEffect, useState } from "react";
-//import ProductCardStyleTwo from "../Cards/ProductCardStyleTwo";
 import DataIteration from "../Helpers/DataIteration";
-// import SearchCom from "../Helpers/SearchCom";
-// import ActiveJobsCard from "../Cards/ActiveJobsCard";
 import AvailableJobsCard from "../Cards/AvailableJobsCard";

 export default function MainSection({ className, marketPlaceProduct }) {
@@ -13,13 +10,13 @@ export default function MainSection({ className, marketPlaceProduct }) {
  };
  useEffect(() => {
    if (tab === "artist") {
-      setProducts(marketPlaceProduct.slice(0, 3));
+      setProducts(marketPlaceProduct?.slice(0, 3));
    } else if (tab === "market") {
-      setProducts(marketPlaceProduct.slice(0, 6));
+      setProducts(marketPlaceProduct?.slice(0, 6));
    } else if (tab === "shop") {
-      setProducts(marketPlaceProduct.slice(6, 9));
+      setProducts(marketPlaceProduct?.slice(6, 9));
    } else if (tab === "assets") {
-      setProducts(marketPlaceProduct.slice(3, 6));
+      setProducts(marketPlaceProduct?.slice(3, 6));
    } else {
      setProducts(marketPlaceProduct);
    }
@@ -111,7 +111,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
                        <td className="py-9">
                          <div className="sm:flex sm:space-x-2 sm:justify-between sm:items-center job-items">
                            <div className="flex space-x-2 items-center job-items w-full">
-                              <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px]">
+                              <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px] max-w-[60px]">
                                <img
                                  src={dataImage2}
                                  alt="data"
@@ -15,10 +15,6 @@ export default function StartJob(props) {
    const navigate = useNavigate()

    let [request, setRequest] = useState({loading: false, status: false, message: ''})
-    const [selectTab, setValue] = useState("today");
-    const filterHandler = (value) => {
-        setValue(value);
-    };

    const handleOnclick = () => {
        setRequest({loading: true, status: false, message: ''})
@@ -42,25 +38,6 @@ export default function StartJob(props) {
            {/*<CommonHead />*/}
            <div className="notification-page w-full mb-10">
                <div className="notification-wrapper w-full">
-                    {/* heading */}
-                    {/* <div className="sm:flex justify-between items-center mb-6">
-                        <div className="mb-5 sm:mb-0">
-                            <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
-                <span
-                    className={`${selectTab === "today" ? "block" : "hidden"}`}
-                >
-                  Additional Terms for Jobs Posting.
-                </span>
-
-                            </h1>
-                        </div>
-                        <div className="slider-btns flex space-x-4">
-                            <div onClick={() => filterHandler("today")} className="relative">
-
-                            </div>
-                        </div>
-                    </div> */}
-
                    <div
                        className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow min-h-[520px]`}
                    >
@@ -9,7 +9,7 @@ export default function MyJobs(props) {
  const filterHandler = (value) => {
    setValue(value);
  };
-  console.log("AMEYE LOC1", props.MyJobList);
+  
  return (
    <Layout>
      <CommonHead
@@ -0,0 +1,378 @@
+import React, { useRef } from "react";
+import top from "../../assets/images/top-buyer-1png.png";
+import top2 from "../../assets/images/top-buyer-2.png";
+import top3 from "../../assets/images/top-buyer-3.png";
+import top4 from "../../assets/images/top-buyer-4.png";
+import Icons from "../Helpers/Icons";
+import SliderCom from "../Helpers/SliderCom";
+
+
+export default function MyOffersTable({ className, MyActiveOffersList}) {
+    const settings = {
+        arrows: false,
+        dots: false,
+        infinite: true,
+        autoplay: true,
+        slidesToShow: 4,
+        slidesToScroll: 1,
+        responsive: [
+            {
+                breakpoint: 426,
+                settings: {
+                    slidesToShow: 2,
+                    slidesToScroll: 1,
+                },
+            },
+        ],
+    };
+
+    console.log("YES WE SEE OFFERS",MyActiveOffersList);
+    const sellSlider = useRef(null);
+    //const buySlider = useRef(null);
+    const prevHandler = (value) => {
+        if (value === "sell") {
+            sellSlider.current.slickPrev();
+        }
+        // if (value === "buy") {
+        //     buySlider.current.slickPrev();
+        // }
+    };
+    const nextHandler = (value) => {
+        if (value === "sell") {
+            sellSlider.current.slickNext();
+        }
+        // if (value === "buy") {
+        //     buySlider.current.slickNext();
+        // }
+    };
+    return (
+        <>
+            <div className={`top-seller-top-buyer-wrapper ${className || ""}`}>
+                <div className="top-seller-top-buyer-wrapper-container">
+                    <div className="main-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4">
+                        <div className="lg:w-2/2 w-full mb-10 lg:mb-0 sm:p-8 p-4 bg-white dark:bg-dark-white   rounded-2xl section-shadow">
+                            <div className="heading flex justify-between items-center mb-4">
+                                <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
+                                    Offers
+                                </h1>
+                                <div className="slider-btns flex space-x-4">
+                                    <button
+                                        onClick={() => nextHandler("sell")}
+                                        type="button"
+                                        className="transform rotate-180 text-dark-gray dark:text-white dark:opacity-25"
+                                    >
+                                        <Icons name="arrows" />
+                                    </button>
+                                    <button
+                                        onClick={() => prevHandler("sell")}
+                                        type="button"
+                                        className="transform rotate-180"
+                                    >
+                                        <div className="  text-dark-gray dark:text-white">
+                                            <svg
+                                                width="11"
+                                                height="19"
+                                                viewBox="0 0 11 19"
+                                                fill="none"
+                                                xmlns="http://www.w3.org/2000/svg"
+                                            >
+                                                <path
+                                                    d="M9.09766 1.1499L1.13307 9.11449L9.09766 17.0791"
+                                                    stroke="url(#paint0_linear_220_23410)"
+                                                    strokeWidth="2"
+                                                    strokeLinecap="round"
+                                                    strokeLinejoin="round"
+                                                />
+                                                <defs>
+                                                    <linearGradient
+                                                        id="paint0_linear_220_23410"
+                                                        x1="9.09766"
+                                                        y1="1.1499"
+                                                        x2="-4.2474"
+                                                        y2="7.96749"
+                                                        gradientUnits="userSpaceOnUse"
+                                                    >
+                                                        <stop stopColor="#F539F8" />
+                                                        <stop offset="0.416763" stopColor="#C342F9" />
+                                                        <stop offset="1" stopColor="#5356FB" />
+                                                    </linearGradient>
+                                                </defs>
+                                            </svg>
+                                        </div>
+                                    </button>
+                                </div>
+                            </div>
+                            <div className="slider-content">
+                                <SliderCom settings={settings} selector={sellSlider}>
+                                    {MyActiveOffersList &&
+                                        MyActiveOffersList?.result_list?.length > 0 &&
+                                        MyActiveOffersList.result_list.map((value, index) => (
+
+                                            <div className="item">
+
+                                                {/* title */}
+                                                <div className="flex justify-center">
+                                                    <p className="text-base font-bold   text-dark-gray dark:text-white">
+                                                        {value.title}
+                                                    </p>
+                                                </div>
+                                                {/* username */}
+                                                <div className="flex justify-center mb-1">
+                                                    <p className="text-xs text-thin-light-gray">
+                                                        {value.timeline_days} Days
+                                                    </p>
+                                                </div>
+                                                {/* items */}
+                                                <div className="flex justify-center">
+                                                    <div className="flex space-x-1 items-center text-purple text-xs">
+                                                        <span>{value.price*0.01} {value.currency}</span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        ))}
+
+                        {/*            <div className="item">*/}
+                        {/*                /!* img *!/*/}
+                        {/*                <div className="flex justify-center mb-4">*/}
+                        {/*                    <div className=" w-14 h-14 relative">*/}
+                        {/*                        <img src={top2} alt="top" className="w-full h-full" />*/}
+                        {/*                        <div className="absolute right-0 top-0">*/}
+                        {/*                            <svg*/}
+                        {/*                                width="18"*/}
+                        {/*                                height="17"*/}
+                        {/*                                viewBox="0 0 18 17"*/}
+                        {/*                                fill="none"*/}
+                        {/*                                xmlns="http://www.w3.org/2000/svg"*/}
+                        {/*                            >*/}
+                        {/*                                <path*/}
+                        {/*                                    d="M13.3341 14.7394C12.8954 14.7394 12.4564 14.7416 12.0177 14.7375C11.9347 14.7367 11.8877 14.7647 11.8451 14.835C11.4401 15.4977 11.0288 16.1565 10.6273 16.8213C10.5678 16.9196 10.5247 16.9134 10.444 16.8631C9.84979 16.4937 9.25283 16.1283 8.65967 15.7566C8.58338 15.7089 8.53208 15.708 8.45471 15.755C7.84092 16.1275 7.22251 16.4926 6.60872 16.865C6.51805 16.9202 6.48086 16.9117 6.42548 16.8178C6.03646 16.1562 5.63903 15.4993 5.24757 14.8391C5.20251 14.7628 5.15066 14.7373 5.06297 14.7375C4.23961 14.7408 3.41652 14.7397 2.59315 14.7392C2.38765 14.7392 2.41561 14.7563 2.41561 14.5549C2.4148 13.7182 2.41371 12.8812 2.41724 12.0446C2.41778 11.9479 2.39145 11.892 2.30539 11.8396C1.59985 11.4093 0.899185 10.9712 0.193637 10.5406C0.10921 10.4891 0.0950937 10.4578 0.149387 10.3707C0.541931 9.74279 0.926874 9.11 1.31969 8.48236C1.36855 8.40445 1.36611 8.35423 1.31969 8.27768C0.968138 7.69863 0.624187 7.11497 0.272634 6.5362C0.221055 6.45151 0.238972 6.41974 0.317427 6.37332C0.985783 5.97779 1.65088 5.57656 2.31978 5.18157C2.39905 5.13488 2.41751 5.08167 2.41724 4.99697C2.41452 4.12855 2.41778 3.26012 2.41317 2.39169C2.41262 2.27306 2.43624 2.23152 2.566 2.23261C3.39371 2.23912 4.22142 2.23478 5.0494 2.23777C5.13627 2.23804 5.18459 2.21388 5.23183 2.13651C5.64989 1.44996 6.07501 0.767762 6.49497 0.0823035C6.54574 -0.000494485 6.57994 -0.0284558 6.6793 0.0339821C7.333 0.444986 7.99321 0.845131 8.64799 1.25423C8.73351 1.30771 8.79459 1.30799 8.87874 1.25695C9.44231 0.914355 10.01 0.57882 10.5727 0.23514C10.6764 0.171888 10.7209 0.179218 10.7855 0.289706C11.1428 0.901868 11.512 1.50697 11.8725 2.11723C11.9244 2.20492 11.98 2.23939 12.0853 2.23885C12.9402 2.23369 13.795 2.23804 14.6499 2.23342C14.7604 2.23288 14.7943 2.25948 14.7935 2.37404C14.7886 3.21994 14.7921 4.06557 14.7889 4.91146C14.7886 5.0024 14.8133 5.0548 14.895 5.10475C15.5699 5.51575 16.2391 5.93653 16.9156 6.34509C17.0269 6.41241 17.0179 6.45965 16.9596 6.55276C16.5741 7.16927 16.1956 7.79012 15.8085 8.40554C15.742 8.51114 15.7417 8.58742 15.808 8.69574C16.1799 9.3041 16.5396 9.92006 16.9115 10.5287C16.9756 10.6335 16.959 10.6747 16.8597 10.7331C16.2062 11.1186 15.5574 11.5114 14.9037 11.8964C14.8179 11.9468 14.7881 12.0011 14.7886 12.0991C14.7924 12.9315 14.7889 13.7635 14.7932 14.5958C14.7938 14.7074 14.7645 14.7432 14.6499 14.7416C14.2117 14.7359 13.7728 14.7397 13.3341 14.7394ZM6.15184 8.14086C6.10596 8.18103 6.07881 8.20356 6.05329 8.22745C5.80979 8.45685 5.56655 8.68651 5.32358 8.91644C5.15283 9.07824 5.15093 9.08068 5.3111 9.25143C6.0723 10.062 6.8354 10.871 7.59551 11.6824C7.65577 11.7468 7.69975 11.7546 7.75703 11.6854C7.78282 11.6545 7.81676 11.6306 7.84662 11.6026C8.54565 10.9473 9.24522 10.2922 9.94399 9.63665C10.788 8.84477 11.6304 8.05154 12.4765 7.26184C12.5436 7.1994 12.5257 7.16954 12.4735 7.11497C12.2488 6.87934 12.0234 6.64398 11.8087 6.39965C11.7205 6.29921 11.67 6.30926 11.5777 6.3964C10.3569 7.54661 9.13148 8.69194 7.91014 9.84161C7.83223 9.9149 7.79395 9.91246 7.72201 9.83509C7.22034 9.29568 6.71323 8.76116 6.20857 8.2242C6.18713 8.20194 6.17301 8.17262 6.15184 8.14086Z"*/}
+                        {/*                                    fill="#3897EF"*/}
+                        {/*                                />*/}
+                        {/*                            </svg>*/}
+                        {/*                        </div>*/}
+                        {/*                    </div>*/}
+                        {/*                </div>*/}
+                        {/*                /!* title *!/*/}
+                        {/*                <div className="flex justify-center">*/}
+                        {/*                    <p className="text-base font-bold   text-dark-gray dark:text-white">*/}
+                        {/*                        Brokln Simons*/}
+                        {/*                    </p>*/}
+                        {/*                </div>*/}
+                        {/*                /!* username *!/*/}
+                        {/*                <div className="flex justify-center mb-1">*/}
+                        {/*                    <p className="text-xs text-thin-light-gray">*/}
+                        {/*                        @broklinslam_75*/}
+                        {/*                    </p>*/}
+                        {/*                </div>*/}
+                        {/*                /!* items *!/*/}
+                        {/*                <div className="flex justify-center">*/}
+                        {/*                    <div className="flex space-x-1 items-center text-purple text-xs">*/}
+                        {/*<span>*/}
+                        {/*  <svg*/}
+                        {/*      className="fill-current"*/}
+                        {/*      width="13"*/}
+                        {/*      height="11"*/}
+                        {/*      viewBox="0 0 13 11"*/}
+                        {/*      fill="none"*/}
+                        {/*      xmlns="http://www.w3.org/2000/svg"*/}
+                        {/*  >*/}
+                        {/*    <path d="M6.49948 11.0002C6.45633 10.9222 6.44195 10.8402 6.41935 10.7642C5.68171 8.2937 4.94614 5.82125 4.20645 3.35081C4.18385 3.27679 4.19001 3.25879 4.27836 3.25879C5.71459 3.28079 7.15287 3.2968 8.5891 3.3168C8.698 3.3188 8.698 3.3188 8.66923 3.42482C7.9542 5.92527 7.23917 8.42573 6.52414 10.9242C6.51797 10.9462 6.50975 10.9682 6.49948 11.0002Z" />*/}
+                        {/*    <path d="M13.0002 3.25468C10.9619 5.75913 8.93804 8.24759 6.91418 10.736C6.88952 10.71 6.91007 10.69 6.91623 10.67C7.60866 8.24959 8.30109 5.82715 8.99352 3.40671C9.00585 3.3607 9.04489 3.34269 9.07776 3.31469C9.20515 3.19867 9.34898 3.25868 9.48048 3.25868C10.6147 3.25268 11.7489 3.25468 12.883 3.25468C12.9159 3.25468 12.9467 3.25468 13.0002 3.25468Z" />*/}
+                        {/*    <path d="M0 3.25444C0.0472578 3.25444 0.0739687 3.25444 0.10068 3.25444C1.32322 3.25444 2.5437 3.25444 3.76624 3.25244C3.82994 3.25244 3.86281 3.26444 3.88336 3.33046C4.59428 5.72089 5.30725 8.11132 6.01818 10.5018C6.02845 10.5338 6.04694 10.5638 6.03667 10.6078C4.02513 8.15933 2.01976 5.71489 0 3.25444Z" />*/}
+                        {/*    <path d="M8.66592 2.93668C7.16189 2.93668 5.67224 2.93668 4.18054 2.93668C4.17438 2.90268 4.20314 2.88867 4.21753 2.86867C4.94899 1.96651 5.68046 1.06434 6.40988 0.160178C6.44275 0.120171 6.45919 0.0821637 6.51261 0.150176C7.21942 1.06634 7.93034 1.98051 8.63921 2.89668C8.64743 2.90668 8.65154 2.91668 8.66592 2.93668Z" />*/}
+                        {/*    <path d="M2.70399 0.129883C3.0615 1.07205 3.41491 2.00222 3.77037 2.93639C2.52729 2.93639 1.29448 2.93639 0.0390625 2.93639C0.930796 1.99622 1.81226 1.06805 2.70399 0.129883Z" />*/}
+                        {/*    <path d="M12.9687 2.9386C12.7324 2.9386 12.5166 2.9386 12.3009 2.9386C11.3126 2.9386 10.3263 2.9386 9.33803 2.9386C9.28255 2.9386 9.25173 2.9406 9.2805 2.86859C9.63185 1.97642 9.98115 1.08226 10.3304 0.190099C10.3366 0.174096 10.3387 0.154092 10.3633 0.14209C11.2263 1.06826 12.0913 1.99643 12.9687 2.9386Z" />*/}
+                        {/*    <path d="M8.97094 2.81832C8.24152 1.87815 7.52238 0.947984 6.79297 0.0078125C7.89223 0.0078125 8.9771 0.0078125 10.0702 0.0078125C9.70651 0.939982 9.34283 1.87015 8.97094 2.81832Z" />*/}
+                        {/*    <path d="M3.99333 2.65048C3.66252 1.78032 3.33994 0.930169 3.01735 0.0780142C2.99886 0.0320058 2.97626 0 3.0605 0C4.07962 0.00200036 5.09875 0.00200036 6.13842 0.00200036C5.42133 0.888161 4.71247 1.76432 3.99333 2.65048Z" />*/}
+                        {/*  </svg>*/}
+                        {/*</span>*/}
+                        {/*                        <span>3435 Items</span>*/}
+                        {/*                    </div>*/}
+                        {/*                </div>*/}
+                        {/*            </div>*/}
+                        {/*            <div className="item">*/}
+                        {/*                /!* img *!/*/}
+                        {/*                <div className="flex justify-center mb-4">*/}
+                        {/*                    <div className=" w-14 h-14 relative">*/}
+                        {/*                        <img src={top3} alt="top" className="w-full h-full" />*/}
+                        {/*                        <div className="absolute right-0 top-0">*/}
+                        {/*                            <svg*/}
+                        {/*                                width="18"*/}
+                        {/*                                height="17"*/}
+                        {/*                                viewBox="0 0 18 17"*/}
+                        {/*                                fill="none"*/}
+                        {/*                                xmlns="http://www.w3.org/2000/svg"*/}
+                        {/*                            >*/}
+                        {/*                                <path*/}
+                        {/*                                    d="M13.3341 14.7394C12.8954 14.7394 12.4564 14.7416 12.0177 14.7375C11.9347 14.7367 11.8877 14.7647 11.8451 14.835C11.4401 15.4977 11.0288 16.1565 10.6273 16.8213C10.5678 16.9196 10.5247 16.9134 10.444 16.8631C9.84979 16.4937 9.25283 16.1283 8.65967 15.7566C8.58338 15.7089 8.53208 15.708 8.45471 15.755C7.84092 16.1275 7.22251 16.4926 6.60872 16.865C6.51805 16.9202 6.48086 16.9117 6.42548 16.8178C6.03646 16.1562 5.63903 15.4993 5.24757 14.8391C5.20251 14.7628 5.15066 14.7373 5.06297 14.7375C4.23961 14.7408 3.41652 14.7397 2.59315 14.7392C2.38765 14.7392 2.41561 14.7563 2.41561 14.5549C2.4148 13.7182 2.41371 12.8812 2.41724 12.0446C2.41778 11.9479 2.39145 11.892 2.30539 11.8396C1.59985 11.4093 0.899185 10.9712 0.193637 10.5406C0.10921 10.4891 0.0950937 10.4578 0.149387 10.3707C0.541931 9.74279 0.926874 9.11 1.31969 8.48236C1.36855 8.40445 1.36611 8.35423 1.31969 8.27768C0.968138 7.69863 0.624187 7.11497 0.272634 6.5362C0.221055 6.45151 0.238972 6.41974 0.317427 6.37332C0.985783 5.97779 1.65088 5.57656 2.31978 5.18157C2.39905 5.13488 2.41751 5.08167 2.41724 4.99697C2.41452 4.12855 2.41778 3.26012 2.41317 2.39169C2.41262 2.27306 2.43624 2.23152 2.566 2.23261C3.39371 2.23912 4.22142 2.23478 5.0494 2.23777C5.13627 2.23804 5.18459 2.21388 5.23183 2.13651C5.64989 1.44996 6.07501 0.767762 6.49497 0.0823035C6.54574 -0.000494485 6.57994 -0.0284558 6.6793 0.0339821C7.333 0.444986 7.99321 0.845131 8.64799 1.25423C8.73351 1.30771 8.79459 1.30799 8.87874 1.25695C9.44231 0.914355 10.01 0.57882 10.5727 0.23514C10.6764 0.171888 10.7209 0.179218 10.7855 0.289706C11.1428 0.901868 11.512 1.50697 11.8725 2.11723C11.9244 2.20492 11.98 2.23939 12.0853 2.23885C12.9402 2.23369 13.795 2.23804 14.6499 2.23342C14.7604 2.23288 14.7943 2.25948 14.7935 2.37404C14.7886 3.21994 14.7921 4.06557 14.7889 4.91146C14.7886 5.0024 14.8133 5.0548 14.895 5.10475C15.5699 5.51575 16.2391 5.93653 16.9156 6.34509C17.0269 6.41241 17.0179 6.45965 16.9596 6.55276C16.5741 7.16927 16.1956 7.79012 15.8085 8.40554C15.742 8.51114 15.7417 8.58742 15.808 8.69574C16.1799 9.3041 16.5396 9.92006 16.9115 10.5287C16.9756 10.6335 16.959 10.6747 16.8597 10.7331C16.2062 11.1186 15.5574 11.5114 14.9037 11.8964C14.8179 11.9468 14.7881 12.0011 14.7886 12.0991C14.7924 12.9315 14.7889 13.7635 14.7932 14.5958C14.7938 14.7074 14.7645 14.7432 14.6499 14.7416C14.2117 14.7359 13.7728 14.7397 13.3341 14.7394ZM6.15184 8.14086C6.10596 8.18103 6.07881 8.20356 6.05329 8.22745C5.80979 8.45685 5.56655 8.68651 5.32358 8.91644C5.15283 9.07824 5.15093 9.08068 5.3111 9.25143C6.0723 10.062 6.8354 10.871 7.59551 11.6824C7.65577 11.7468 7.69975 11.7546 7.75703 11.6854C7.78282 11.6545 7.81676 11.6306 7.84662 11.6026C8.54565 10.9473 9.24522 10.2922 9.94399 9.63665C10.788 8.84477 11.6304 8.05154 12.4765 7.26184C12.5436 7.1994 12.5257 7.16954 12.4735 7.11497C12.2488 6.87934 12.0234 6.64398 11.8087 6.39965C11.7205 6.29921 11.67 6.30926 11.5777 6.3964C10.3569 7.54661 9.13148 8.69194 7.91014 9.84161C7.83223 9.9149 7.79395 9.91246 7.72201 9.83509C7.22034 9.29568 6.71323 8.76116 6.20857 8.2242C6.18713 8.20194 6.17301 8.17262 6.15184 8.14086Z"*/}
+                        {/*                                    fill="#3897EF"*/}
+                        {/*                                />*/}
+                        {/*                            </svg>*/}
+                        {/*                        </div>*/}
+                        {/*                    </div>*/}
+                        {/*                </div>*/}
+                        {/*                /!* title *!/*/}
+                        {/*                <div className="flex justify-center">*/}
+                        {/*                    <p className="text-base font-bold   text-dark-gray dark:text-white">*/}
+                        {/*                        Brokln Simons*/}
+                        {/*                    </p>*/}
+                        {/*                </div>*/}
+                        {/*                /!* username *!/*/}
+                        {/*                <div className="flex justify-center mb-1">*/}
+                        {/*                    <p className="text-xs text-thin-light-gray">*/}
+                        {/*                        @broklinslam_75*/}
+                        {/*                    </p>*/}
+                        {/*                </div>*/}
+                        {/*                /!* items *!/*/}
+                        {/*                <div className="flex justify-center">*/}
+                        {/*                    <div className="flex space-x-1 items-center text-purple text-xs">*/}
+                        {/*<span>*/}
+                        {/*  <svg*/}
+                        {/*      className="fill-current"*/}
+                        {/*      width="13"*/}
+                        {/*      height="11"*/}
+                        {/*      viewBox="0 0 13 11"*/}
+                        {/*      fill="none"*/}
+                        {/*      xmlns="http://www.w3.org/2000/svg"*/}
+                        {/*  >*/}
+                        {/*    <path d="M6.49948 11.0002C6.45633 10.9222 6.44195 10.8402 6.41935 10.7642C5.68171 8.2937 4.94614 5.82125 4.20645 3.35081C4.18385 3.27679 4.19001 3.25879 4.27836 3.25879C5.71459 3.28079 7.15287 3.2968 8.5891 3.3168C8.698 3.3188 8.698 3.3188 8.66923 3.42482C7.9542 5.92527 7.23917 8.42573 6.52414 10.9242C6.51797 10.9462 6.50975 10.9682 6.49948 11.0002Z" />*/}
+                        {/*    <path d="M13.0002 3.25468C10.9619 5.75913 8.93804 8.24759 6.91418 10.736C6.88952 10.71 6.91007 10.69 6.91623 10.67C7.60866 8.24959 8.30109 5.82715 8.99352 3.40671C9.00585 3.3607 9.04489 3.34269 9.07776 3.31469C9.20515 3.19867 9.34898 3.25868 9.48048 3.25868C10.6147 3.25268 11.7489 3.25468 12.883 3.25468C12.9159 3.25468 12.9467 3.25468 13.0002 3.25468Z" />*/}
+                        {/*    <path d="M0 3.25444C0.0472578 3.25444 0.0739687 3.25444 0.10068 3.25444C1.32322 3.25444 2.5437 3.25444 3.76624 3.25244C3.82994 3.25244 3.86281 3.26444 3.88336 3.33046C4.59428 5.72089 5.30725 8.11132 6.01818 10.5018C6.02845 10.5338 6.04694 10.5638 6.03667 10.6078C4.02513 8.15933 2.01976 5.71489 0 3.25444Z" />*/}
+                        {/*    <path d="M8.66592 2.93668C7.16189 2.93668 5.67224 2.93668 4.18054 2.93668C4.17438 2.90268 4.20314 2.88867 4.21753 2.86867C4.94899 1.96651 5.68046 1.06434 6.40988 0.160178C6.44275 0.120171 6.45919 0.0821637 6.51261 0.150176C7.21942 1.06634 7.93034 1.98051 8.63921 2.89668C8.64743 2.90668 8.65154 2.91668 8.66592 2.93668Z" />*/}
+                        {/*    <path d="M2.70399 0.129883C3.0615 1.07205 3.41491 2.00222 3.77037 2.93639C2.52729 2.93639 1.29448 2.93639 0.0390625 2.93639C0.930796 1.99622 1.81226 1.06805 2.70399 0.129883Z" />*/}
+                        {/*    <path d="M12.9687 2.9386C12.7324 2.9386 12.5166 2.9386 12.3009 2.9386C11.3126 2.9386 10.3263 2.9386 9.33803 2.9386C9.28255 2.9386 9.25173 2.9406 9.2805 2.86859C9.63185 1.97642 9.98115 1.08226 10.3304 0.190099C10.3366 0.174096 10.3387 0.154092 10.3633 0.14209C11.2263 1.06826 12.0913 1.99643 12.9687 2.9386Z" />*/}
+                        {/*    <path d="M8.97094 2.81832C8.24152 1.87815 7.52238 0.947984 6.79297 0.0078125C7.89223 0.0078125 8.9771 0.0078125 10.0702 0.0078125C9.70651 0.939982 9.34283 1.87015 8.97094 2.81832Z" />*/}
+                        {/*    <path d="M3.99333 2.65048C3.66252 1.78032 3.33994 0.930169 3.01735 0.0780142C2.99886 0.0320058 2.97626 0 3.0605 0C4.07962 0.00200036 5.09875 0.00200036 6.13842 0.00200036C5.42133 0.888161 4.71247 1.76432 3.99333 2.65048Z" />*/}
+                        {/*  </svg>*/}
+                        {/*</span>*/}
+                        {/*                        <span>3435 Items</span>*/}
+                        {/*                    </div>*/}
+                        {/*                </div>*/}
+                        {/*            </div>*/}
+                        {/*            <div className="item">*/}
+                        {/*                /!* img *!/*/}
+                        {/*                <div className="flex justify-center mb-4">*/}
+                        {/*                    <div className=" w-14 h-14 relative">*/}
+                        {/*                        <img src={top4} alt="top" className="w-full h-full" />*/}
+                        {/*                        <div className="absolute right-0 top-0">*/}
+                        {/*                            <svg*/}
+                        {/*                                width="18"*/}
+                        {/*                                height="17"*/}
+                        {/*                                viewBox="0 0 18 17"*/}
+                        {/*                                fill="none"*/}
+                        {/*                                xmlns="http://www.w3.org/2000/svg"*/}
+                        {/*                            >*/}
+                        {/*                                <path*/}
+                        {/*                                    d="M13.3341 14.7394C12.8954 14.7394 12.4564 14.7416 12.0177 14.7375C11.9347 14.7367 11.8877 14.7647 11.8451 14.835C11.4401 15.4977 11.0288 16.1565 10.6273 16.8213C10.5678 16.9196 10.5247 16.9134 10.444 16.8631C9.84979 16.4937 9.25283 16.1283 8.65967 15.7566C8.58338 15.7089 8.53208 15.708 8.45471 15.755C7.84092 16.1275 7.22251 16.4926 6.60872 16.865C6.51805 16.9202 6.48086 16.9117 6.42548 16.8178C6.03646 16.1562 5.63903 15.4993 5.24757 14.8391C5.20251 14.7628 5.15066 14.7373 5.06297 14.7375C4.23961 14.7408 3.41652 14.7397 2.59315 14.7392C2.38765 14.7392 2.41561 14.7563 2.41561 14.5549C2.4148 13.7182 2.41371 12.8812 2.41724 12.0446C2.41778 11.9479 2.39145 11.892 2.30539 11.8396C1.59985 11.4093 0.899185 10.9712 0.193637 10.5406C0.10921 10.4891 0.0950937 10.4578 0.149387 10.3707C0.541931 9.74279 0.926874 9.11 1.31969 8.48236C1.36855 8.40445 1.36611 8.35423 1.31969 8.27768C0.968138 7.69863 0.624187 7.11497 0.272634 6.5362C0.221055 6.45151 0.238972 6.41974 0.317427 6.37332C0.985783 5.97779 1.65088 5.57656 2.31978 5.18157C2.39905 5.13488 2.41751 5.08167 2.41724 4.99697C2.41452 4.12855 2.41778 3.26012 2.41317 2.39169C2.41262 2.27306 2.43624 2.23152 2.566 2.23261C3.39371 2.23912 4.22142 2.23478 5.0494 2.23777C5.13627 2.23804 5.18459 2.21388 5.23183 2.13651C5.64989 1.44996 6.07501 0.767762 6.49497 0.0823035C6.54574 -0.000494485 6.57994 -0.0284558 6.6793 0.0339821C7.333 0.444986 7.99321 0.845131 8.64799 1.25423C8.73351 1.30771 8.79459 1.30799 8.87874 1.25695C9.44231 0.914355 10.01 0.57882 10.5727 0.23514C10.6764 0.171888 10.7209 0.179218 10.7855 0.289706C11.1428 0.901868 11.512 1.50697 11.8725 2.11723C11.9244 2.20492 11.98 2.23939 12.0853 2.23885C12.9402 2.23369 13.795 2.23804 14.6499 2.23342C14.7604 2.23288 14.7943 2.25948 14.7935 2.37404C14.7886 3.21994 14.7921 4.06557 14.7889 4.91146C14.7886 5.0024 14.8133 5.0548 14.895 5.10475C15.5699 5.51575 16.2391 5.93653 16.9156 6.34509C17.0269 6.41241 17.0179 6.45965 16.9596 6.55276C16.5741 7.16927 16.1956 7.79012 15.8085 8.40554C15.742 8.51114 15.7417 8.58742 15.808 8.69574C16.1799 9.3041 16.5396 9.92006 16.9115 10.5287C16.9756 10.6335 16.959 10.6747 16.8597 10.7331C16.2062 11.1186 15.5574 11.5114 14.9037 11.8964C14.8179 11.9468 14.7881 12.0011 14.7886 12.0991C14.7924 12.9315 14.7889 13.7635 14.7932 14.5958C14.7938 14.7074 14.7645 14.7432 14.6499 14.7416C14.2117 14.7359 13.7728 14.7397 13.3341 14.7394ZM6.15184 8.14086C6.10596 8.18103 6.07881 8.20356 6.05329 8.22745C5.80979 8.45685 5.56655 8.68651 5.32358 8.91644C5.15283 9.07824 5.15093 9.08068 5.3111 9.25143C6.0723 10.062 6.8354 10.871 7.59551 11.6824C7.65577 11.7468 7.69975 11.7546 7.75703 11.6854C7.78282 11.6545 7.81676 11.6306 7.84662 11.6026C8.54565 10.9473 9.24522 10.2922 9.94399 9.63665C10.788 8.84477 11.6304 8.05154 12.4765 7.26184C12.5436 7.1994 12.5257 7.16954 12.4735 7.11497C12.2488 6.87934 12.0234 6.64398 11.8087 6.39965C11.7205 6.29921 11.67 6.30926 11.5777 6.3964C10.3569 7.54661 9.13148 8.69194 7.91014 9.84161C7.83223 9.9149 7.79395 9.91246 7.72201 9.83509C7.22034 9.29568 6.71323 8.76116 6.20857 8.2242C6.18713 8.20194 6.17301 8.17262 6.15184 8.14086Z"*/}
+                        {/*                                    fill="#3897EF"*/}
+                        {/*                                />*/}
+                        {/*                            </svg>*/}
+                        {/*                        </div>*/}
+                        {/*                    </div>*/}
+                        {/*                </div>*/}
+                        {/*                /!* title *!/*/}
+                        {/*                <div className="flex justify-center">*/}
+                        {/*                    <p className="text-base font-bold   text-dark-gray dark:text-white">*/}
+                        {/*                        Brokln Simons*/}
+                        {/*                    </p>*/}
+                        {/*                </div>*/}
+                        {/*                /!* username *!/*/}
+                        {/*                <div className="flex justify-center mb-1">*/}
+                        {/*                    <p className="text-xs text-thin-light-gray">*/}
+                        {/*                        @broklinslam_75*/}
+                        {/*                    </p>*/}
+                        {/*                </div>*/}
+                        {/*                /!* items *!/*/}
+                        {/*                <div className="flex justify-center">*/}
+                        {/*                    <div className="flex space-x-1 items-center text-purple text-xs">*/}
+                        {/*<span>*/}
+                        {/*  <svg*/}
+                        {/*      className="fill-current"*/}
+                        {/*      width="13"*/}
+                        {/*      height="11"*/}
+                        {/*      viewBox="0 0 13 11"*/}
+                        {/*      fill="none"*/}
+                        {/*      xmlns="http://www.w3.org/2000/svg"*/}
+                        {/*  >*/}
+                        {/*    <path d="M6.49948 11.0002C6.45633 10.9222 6.44195 10.8402 6.41935 10.7642C5.68171 8.2937 4.94614 5.82125 4.20645 3.35081C4.18385 3.27679 4.19001 3.25879 4.27836 3.25879C5.71459 3.28079 7.15287 3.2968 8.5891 3.3168C8.698 3.3188 8.698 3.3188 8.66923 3.42482C7.9542 5.92527 7.23917 8.42573 6.52414 10.9242C6.51797 10.9462 6.50975 10.9682 6.49948 11.0002Z" />*/}
+                        {/*    <path d="M13.0002 3.25468C10.9619 5.75913 8.93804 8.24759 6.91418 10.736C6.88952 10.71 6.91007 10.69 6.91623 10.67C7.60866 8.24959 8.30109 5.82715 8.99352 3.40671C9.00585 3.3607 9.04489 3.34269 9.07776 3.31469C9.20515 3.19867 9.34898 3.25868 9.48048 3.25868C10.6147 3.25268 11.7489 3.25468 12.883 3.25468C12.9159 3.25468 12.9467 3.25468 13.0002 3.25468Z" />*/}
+                        {/*    <path d="M0 3.25444C0.0472578 3.25444 0.0739687 3.25444 0.10068 3.25444C1.32322 3.25444 2.5437 3.25444 3.76624 3.25244C3.82994 3.25244 3.86281 3.26444 3.88336 3.33046C4.59428 5.72089 5.30725 8.11132 6.01818 10.5018C6.02845 10.5338 6.04694 10.5638 6.03667 10.6078C4.02513 8.15933 2.01976 5.71489 0 3.25444Z" />*/}
+                        {/*    <path d="M8.66592 2.93668C7.16189 2.93668 5.67224 2.93668 4.18054 2.93668C4.17438 2.90268 4.20314 2.88867 4.21753 2.86867C4.94899 1.96651 5.68046 1.06434 6.40988 0.160178C6.44275 0.120171 6.45919 0.0821637 6.51261 0.150176C7.21942 1.06634 7.93034 1.98051 8.63921 2.89668C8.64743 2.90668 8.65154 2.91668 8.66592 2.93668Z" />*/}
+                        {/*    <path d="M2.70399 0.129883C3.0615 1.07205 3.41491 2.00222 3.77037 2.93639C2.52729 2.93639 1.29448 2.93639 0.0390625 2.93639C0.930796 1.99622 1.81226 1.06805 2.70399 0.129883Z" />*/}
+                        {/*    <path d="M12.9687 2.9386C12.7324 2.9386 12.5166 2.9386 12.3009 2.9386C11.3126 2.9386 10.3263 2.9386 9.33803 2.9386C9.28255 2.9386 9.25173 2.9406 9.2805 2.86859C9.63185 1.97642 9.98115 1.08226 10.3304 0.190099C10.3366 0.174096 10.3387 0.154092 10.3633 0.14209C11.2263 1.06826 12.0913 1.99643 12.9687 2.9386Z" />*/}
+                        {/*    <path d="M8.97094 2.81832C8.24152 1.87815 7.52238 0.947984 6.79297 0.0078125C7.89223 0.0078125 8.9771 0.0078125 10.0702 0.0078125C9.70651 0.939982 9.34283 1.87015 8.97094 2.81832Z" />*/}
+                        {/*    <path d="M3.99333 2.65048C3.66252 1.78032 3.33994 0.930169 3.01735 0.0780142C2.99886 0.0320058 2.97626 0 3.0605 0C4.07962 0.00200036 5.09875 0.00200036 6.13842 0.00200036C5.42133 0.888161 4.71247 1.76432 3.99333 2.65048Z" />*/}
+                        {/*  </svg>*/}
+                        {/*</span>*/}
+                        {/*                        <span>3435 Items</span>*/}
+                        {/*                    </div>*/}
+                        {/*                </div>*/}
+                        {/*            </div>*/}
+                        {/*            <div className="item">*/}
+                        {/*                /!* img *!/*/}
+                        {/*                <div className="flex justify-center mb-4">*/}
+                        {/*                    <div className=" w-14 h-14 relative">*/}
+                        {/*                        <img src={top3} alt="top" className="w-full h-full" />*/}
+                        {/*                        <div className="absolute right-0 top-0">*/}
+                        {/*                            <svg*/}
+                        {/*                                width="18"*/}
+                        {/*                                height="17"*/}
+                        {/*                                viewBox="0 0 18 17"*/}
+                        {/*                                fill="none"*/}
+                        {/*                                xmlns="http://www.w3.org/2000/svg"*/}
+                        {/*                            >*/}
+                        {/*                                <path*/}
+                        {/*                                    d="M13.3341 14.7394C12.8954 14.7394 12.4564 14.7416 12.0177 14.7375C11.9347 14.7367 11.8877 14.7647 11.8451 14.835C11.4401 15.4977 11.0288 16.1565 10.6273 16.8213C10.5678 16.9196 10.5247 16.9134 10.444 16.8631C9.84979 16.4937 9.25283 16.1283 8.65967 15.7566C8.58338 15.7089 8.53208 15.708 8.45471 15.755C7.84092 16.1275 7.22251 16.4926 6.60872 16.865C6.51805 16.9202 6.48086 16.9117 6.42548 16.8178C6.03646 16.1562 5.63903 15.4993 5.24757 14.8391C5.20251 14.7628 5.15066 14.7373 5.06297 14.7375C4.23961 14.7408 3.41652 14.7397 2.59315 14.7392C2.38765 14.7392 2.41561 14.7563 2.41561 14.5549C2.4148 13.7182 2.41371 12.8812 2.41724 12.0446C2.41778 11.9479 2.39145 11.892 2.30539 11.8396C1.59985 11.4093 0.899185 10.9712 0.193637 10.5406C0.10921 10.4891 0.0950937 10.4578 0.149387 10.3707C0.541931 9.74279 0.926874 9.11 1.31969 8.48236C1.36855 8.40445 1.36611 8.35423 1.31969 8.27768C0.968138 7.69863 0.624187 7.11497 0.272634 6.5362C0.221055 6.45151 0.238972 6.41974 0.317427 6.37332C0.985783 5.97779 1.65088 5.57656 2.31978 5.18157C2.39905 5.13488 2.41751 5.08167 2.41724 4.99697C2.41452 4.12855 2.41778 3.26012 2.41317 2.39169C2.41262 2.27306 2.43624 2.23152 2.566 2.23261C3.39371 2.23912 4.22142 2.23478 5.0494 2.23777C5.13627 2.23804 5.18459 2.21388 5.23183 2.13651C5.64989 1.44996 6.07501 0.767762 6.49497 0.0823035C6.54574 -0.000494485 6.57994 -0.0284558 6.6793 0.0339821C7.333 0.444986 7.99321 0.845131 8.64799 1.25423C8.73351 1.30771 8.79459 1.30799 8.87874 1.25695C9.44231 0.914355 10.01 0.57882 10.5727 0.23514C10.6764 0.171888 10.7209 0.179218 10.7855 0.289706C11.1428 0.901868 11.512 1.50697 11.8725 2.11723C11.9244 2.20492 11.98 2.23939 12.0853 2.23885C12.9402 2.23369 13.795 2.23804 14.6499 2.23342C14.7604 2.23288 14.7943 2.25948 14.7935 2.37404C14.7886 3.21994 14.7921 4.06557 14.7889 4.91146C14.7886 5.0024 14.8133 5.0548 14.895 5.10475C15.5699 5.51575 16.2391 5.93653 16.9156 6.34509C17.0269 6.41241 17.0179 6.45965 16.9596 6.55276C16.5741 7.16927 16.1956 7.79012 15.8085 8.40554C15.742 8.51114 15.7417 8.58742 15.808 8.69574C16.1799 9.3041 16.5396 9.92006 16.9115 10.5287C16.9756 10.6335 16.959 10.6747 16.8597 10.7331C16.2062 11.1186 15.5574 11.5114 14.9037 11.8964C14.8179 11.9468 14.7881 12.0011 14.7886 12.0991C14.7924 12.9315 14.7889 13.7635 14.7932 14.5958C14.7938 14.7074 14.7645 14.7432 14.6499 14.7416C14.2117 14.7359 13.7728 14.7397 13.3341 14.7394ZM6.15184 8.14086C6.10596 8.18103 6.07881 8.20356 6.05329 8.22745C5.80979 8.45685 5.56655 8.68651 5.32358 8.91644C5.15283 9.07824 5.15093 9.08068 5.3111 9.25143C6.0723 10.062 6.8354 10.871 7.59551 11.6824C7.65577 11.7468 7.69975 11.7546 7.75703 11.6854C7.78282 11.6545 7.81676 11.6306 7.84662 11.6026C8.54565 10.9473 9.24522 10.2922 9.94399 9.63665C10.788 8.84477 11.6304 8.05154 12.4765 7.26184C12.5436 7.1994 12.5257 7.16954 12.4735 7.11497C12.2488 6.87934 12.0234 6.64398 11.8087 6.39965C11.7205 6.29921 11.67 6.30926 11.5777 6.3964C10.3569 7.54661 9.13148 8.69194 7.91014 9.84161C7.83223 9.9149 7.79395 9.91246 7.72201 9.83509C7.22034 9.29568 6.71323 8.76116 6.20857 8.2242C6.18713 8.20194 6.17301 8.17262 6.15184 8.14086Z"*/}
+                        {/*                                    fill="#3897EF"*/}
+                        {/*                                />*/}
+                        {/*                            </svg>*/}
+                        {/*                        </div>*/}
+                        {/*                    </div>*/}
+                        {/*                </div>*/}
+                        {/*                /!* title *!/*/}
+                        {/*                <div className="flex justify-center">*/}
+                        {/*                    <p className="text-base font-bold   text-dark-gray dark:text-white">*/}
+                        {/*                        Brokln Simons*/}
+                        {/*                    </p>*/}
+                        {/*                </div>*/}
+                        {/*                /!* username *!/*/}
+                        {/*                <div className="flex justify-center mb-1">*/}
+                        {/*                    <p className="text-xs text-thin-light-gray">*/}
+                        {/*                        @broklinslam_75*/}
+                        {/*                    </p>*/}
+                        {/*                </div>*/}
+                        {/*                /!* items *!/*/}
+                        {/*                <div className="flex justify-center">*/}
+                        {/*                    <div className="flex space-x-1 items-center text-purple text-xs">*/}
+                        {/*<span>*/}
+                        {/*  <svg*/}
+                        {/*      className="fill-current"*/}
+                        {/*      width="13"*/}
+                        {/*      height="11"*/}
+                        {/*      viewBox="0 0 13 11"*/}
+                        {/*      fill="none"*/}
+                        {/*      xmlns="http://www.w3.org/2000/svg"*/}
+                        {/*  >*/}
+                        {/*    <path d="M6.49948 11.0002C6.45633 10.9222 6.44195 10.8402 6.41935 10.7642C5.68171 8.2937 4.94614 5.82125 4.20645 3.35081C4.18385 3.27679 4.19001 3.25879 4.27836 3.25879C5.71459 3.28079 7.15287 3.2968 8.5891 3.3168C8.698 3.3188 8.698 3.3188 8.66923 3.42482C7.9542 5.92527 7.23917 8.42573 6.52414 10.9242C6.51797 10.9462 6.50975 10.9682 6.49948 11.0002Z" />*/}
+                        {/*    <path d="M13.0002 3.25468C10.9619 5.75913 8.93804 8.24759 6.91418 10.736C6.88952 10.71 6.91007 10.69 6.91623 10.67C7.60866 8.24959 8.30109 5.82715 8.99352 3.40671C9.00585 3.3607 9.04489 3.34269 9.07776 3.31469C9.20515 3.19867 9.34898 3.25868 9.48048 3.25868C10.6147 3.25268 11.7489 3.25468 12.883 3.25468C12.9159 3.25468 12.9467 3.25468 13.0002 3.25468Z" />*/}
+                        {/*    <path d="M0 3.25444C0.0472578 3.25444 0.0739687 3.25444 0.10068 3.25444C1.32322 3.25444 2.5437 3.25444 3.76624 3.25244C3.82994 3.25244 3.86281 3.26444 3.88336 3.33046C4.59428 5.72089 5.30725 8.11132 6.01818 10.5018C6.02845 10.5338 6.04694 10.5638 6.03667 10.6078C4.02513 8.15933 2.01976 5.71489 0 3.25444Z" />*/}
+                        {/*    <path d="M8.66592 2.93668C7.16189 2.93668 5.67224 2.93668 4.18054 2.93668C4.17438 2.90268 4.20314 2.88867 4.21753 2.86867C4.94899 1.96651 5.68046 1.06434 6.40988 0.160178C6.44275 0.120171 6.45919 0.0821637 6.51261 0.150176C7.21942 1.06634 7.93034 1.98051 8.63921 2.89668C8.64743 2.90668 8.65154 2.91668 8.66592 2.93668Z" />*/}
+                        {/*    <path d="M2.70399 0.129883C3.0615 1.07205 3.41491 2.00222 3.77037 2.93639C2.52729 2.93639 1.29448 2.93639 0.0390625 2.93639C0.930796 1.99622 1.81226 1.06805 2.70399 0.129883Z" />*/}
+                        {/*    <path d="M12.9687 2.9386C12.7324 2.9386 12.5166 2.9386 12.3009 2.9386C11.3126 2.9386 10.3263 2.9386 9.33803 2.9386C9.28255 2.9386 9.25173 2.9406 9.2805 2.86859C9.63185 1.97642 9.98115 1.08226 10.3304 0.190099C10.3366 0.174096 10.3387 0.154092 10.3633 0.14209C11.2263 1.06826 12.0913 1.99643 12.9687 2.9386Z" />*/}
+                        {/*    <path d="M8.97094 2.81832C8.24152 1.87815 7.52238 0.947984 6.79297 0.0078125C7.89223 0.0078125 8.9771 0.0078125 10.0702 0.0078125C9.70651 0.939982 9.34283 1.87015 8.97094 2.81832Z" />*/}
+                        {/*    <path d="M3.99333 2.65048C3.66252 1.78032 3.33994 0.930169 3.01735 0.0780142C2.99886 0.0320058 2.97626 0 3.0605 0C4.07962 0.00200036 5.09875 0.00200036 6.13842 0.00200036C5.42133 0.888161 4.71247 1.76432 3.99333 2.65048Z" />*/}
+                        {/*  </svg>*/}
+                        {/*</span>*/}
+                        {/*                        <span>3435 Items</span>*/}
+                        {/*                    </div>*/}
+                        {/*                </div>*/}
+                        {/*            </div>*/}
+                                </SliderCom>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}
@@ -3,8 +3,10 @@ import { Link } from "react-router-dom";
 import Layout from "../Partials/Layout";
 import MyJobTable from "./MyJobTable";
 import CommonHead from "../UserHeader/CommonHead";
+import TopSellerTopBuyerSliderSection from "../Home/TopSellerTopBuyerSliderSection";
+import MyOffersTable from "./MyOffersTable";

-export default function MyTasks({commonHeadData}) {
+export default function MyTasks({MyActiveOffersList, commonHeadData}) {
  const [selectTab, setValue] = useState("today");
  const filterHandler = (value) => {
    setValue(value);
@@ -32,6 +34,9 @@ export default function MyTasks({commonHeadData}) {
              ></div>
            </div>
          </div>
+          <MyOffersTable
+              MyActiveOffersList={MyActiveOffersList}
+              className="mb-10" />
          <MyJobTable />
        </div>
      </div>
@@ -10,7 +10,7 @@ function Balance({wallet, coupon}) {
        <div className="content-wrapper">
            <div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
                {/* WALLET SECTION */}
-                <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+                <div className="lg:w-3/4 w-full mb-10 lg:mb-0">
                    <div className="wallet w-full  md:p-8 p-4 h-full bg-white dark:bg-dark-white rounded-2xl shadow">
                        <div className='flex items-baseline justify-between'>
                            <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Wallet</h2>
@@ -42,9 +42,11 @@ function Balance({wallet, coupon}) {
                            <div className='w-full my-2 md:my-0 md:w-1/2 flex space-x-2 items-center justify-start md:justify-end'>
                                {
                                    item.action_type != 'AC_AD_FD_ONLY' ?
-                                        <Link to='transfer-fund' className='text-base text-white px-3 py-1 bg-purple rounded-md hover:opacity-80'>Transfer</Link>:''
+                                        <Link to='transfer-fund' className='lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px]
+                                                                   items-center rounded-full relative  bg-purple pr-1.5 pl-4'>Transfer</Link>:''
                                }
-                                <Link to='add-fund' className='text-base text-white px-3 py-1 bg-[orange] rounded-md hover:opacity-80'>Top Up</Link>
+                                <Link to='add-fund' className='lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px]
+                                                                   items-center rounded-full relative  bg-purple pr-1.5 pl-4'>+Add Credit</Link>
                            </div>
                        </div>
                        ))
@@ -68,19 +70,25 @@ function Balance({wallet, coupon}) {
                {/* END OF WALLET SECTION */}


+
+            </div>
+
+            <div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
+
                {/* COUPON SECTION */}
-                <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+                <div className="lg:w-3/4 w-full mb-10 lg:mb-0">
                    <div className="wallet w-full  md:p-8 p-4 h-full max-h-[500px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
                        <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Coupons</h2>
-                        {coupon.loading ? 
-                        <LoadingSpinner size='16' color='sky-blue' />
-                        :
-                        <CouponTable coupon={coupon} />
+                        {coupon.loading ?
+                            <LoadingSpinner size='16' color='sky-blue' />
+                            :
+                            <CouponTable coupon={coupon} />
                        }
                    </div>
                </div>
                {/* END OF COUPON SECTION */}
-            </div>            
+
+            </div>
        </div>
      )
 }
@@ -12,7 +12,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
  const darkMode = useContext(DarkModeContext);

  let { userDetails } = useSelector((state) => state.userDetails);
-  console.log(userDetails);
+  console.log('user-details for job',userDetails);
  //const jobLists =  getJobList(); // pass from upper - we need in a lot of places
  let { jobLists } = useSelector((state) => state.jobLists);
  const marketData = jobLists?.result_list;
@@ -29,7 +29,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
        elm.classList.remove("active");
      });
    }
-  });
+  }, [jobLists]);
  return (
    <div className="w-full h-full">
      {/* logo-area */}
@@ -167,15 +167,6 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                    sidebar ? "mb-14" : "rounded-none p-0"
                  }`}
                >
-                  {/* <div className="setting-item">
-                <div className="top-platform bg-pink dark:bg-dark-white rounded-2xl p-16 2xl:w-[180px] w-full 2xl:mb-10 2xl:border-none border">
-                  <NavLink to="/start-job">
-                    <span className="item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium active flex-1">
-                      Enable Job Post
-                    </span>
-                  </NavLink>
-                </div>
-              </div> */}
                  <div className="items">
                    <div className="heading mb-5">
                      <h1 className="title text-xl font-bold text-purple">
@@ -1,26 +1,48 @@
-import React, { useState } from 'react'
-import Detail from './popoutcomponent/Detail'
-import ModalCom from '../Helpers/ModalCom'
-import InputCom from '../Helpers/Inputs/InputCom/index'
+import React, { useState } from "react";
+import Detail from "./popoutcomponent/Detail";
+import ModalCom from "../Helpers/ModalCom";
+import InputCom from "../Helpers/Inputs/InputCom/index";
+import { Form, Formik, Field } from "formik";
+import * as Yup from "yup";

+const validationSchema = Yup.object().shape({
+  family: Yup.string().required("Please assign a family"),
+  public: Yup.string(),
+  individual: Yup.string()
+    .email("Invalid email format")
+    .matches(
+      /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/,
+      "Invalid email format"
+    )
+    .required("Email is required"),
+  group: Yup.string(),
+});

-function JobListPopout({details, onClose, situation}) {
-    let [inputs, setInputs] = useState({
-        public: '',
-        individual: '',
-        group: '',
-    })
+function JobListPopout({ details, onClose, situation }) {
+  let initialValues = {
+    family: [],
+    public: "",
+    individual: "",
+    group: "",
+  };

-    const handleInputChange = ({target:{name, value}}) => {
-        setInputs(prev => ({...prev, [name]:value}))
-    }
+  let [inputs, setInputs] = useState({
+    family: "",
+    public: "",
+    individual: "",
+    group: "",
+  });
+
+  const handleInputChange = ({ target: { name, value } }) => {
+    setInputs((prev) => ({ ...prev, [name]: value }));
+  };

  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">
+    <ModalCom action={onClose} situation={situation} className="edit-popup">
+      <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">
        <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
          <h1 className="text-base md:text-lg font-bold text-dark-gray dark:text-white tracking-wide">
-          {details.title}
+            {details.title}
          </h1>
          <button
            type="button"
@@ -48,130 +70,172 @@ function JobListPopout({details, onClose, situation}) {
            </svg>
          </button>
        </div>
-        <div className='md:flex bg-white rounded-lg shadow-lg'>
-          <div className='p-4 w-full md:w-2/4 md:border-r-2'>
+        <div className="md:flex bg-white rounded-lg shadow-lg">
+          <div className="p-4 w-full md:w-2/4 md:border-r-2">
            {/* <p className='text-lg font-semibold text-slate-900 tracking-wide'>{details.title}</p> */}
-  
+
            {/* INPUT SECTION */}
-            <div className='my-3 md:flex'>
-              <Detail 
-                  label='Description' 
-                  value={details.description} 
-              />
+            <div className="my-3 md:flex">
+              <Detail label="Description" value={details.description} />
            </div>
-  
-            <div className='my-3 md:flex'>
-              <Detail 
-                  label='Price' 
-                  value={`${details.price*0.01} Naira`} 
-              />
+
+            <div className="my-3 md:flex">
+              <Detail label="Price" value={`${details.price * 0.01} Naira`} />
            </div>
-  
-            <div className='my-3 md:flex'>
-              <Detail 
-                  label='Timeline' 
-                  value={`${details.timeline_days} day(s)`}  
+
+            <div className="my-3 md:flex">
+              <Detail
+                label="Timeline"
+                value={`${details.timeline_days} day(s)`}
              />
            </div>

-            <div className='my-3 md:flex'>
-              <Detail 
-                  label='Created' 
-                  value={`Dummy, no value found for created!`}
+            <div className="my-3 md:flex">
+              <Detail
+                label="Created"
+                value={`Dummy, no value found for created!`}
              />
            </div>

-            <div className='my-3'>
-                <label className='w-full text-slate-900 tracking-wide font-semibold'>Delivery Detail</label>
-                <textarea 
-                    className={`p-1 w-full text-sm text-slate-900 outline-none border border-slate-300 rounded-md`} 
-                    rows='5'
-                    name='details'
-                    style={{resize: 'none'}} 
-                    value={details.job_detail}
-                    onChange={handleInputChange}
-                />
+            <div className="my-3">
+              <label className="w-full text-slate-900 tracking-wide font-semibold">
+                Delivery Detail
+              </label>
+              <textarea
+                className={`p-1 w-full text-sm text-slate-900 outline-none border border-slate-300 rounded-md`}
+                rows="5"
+                name="details"
+                style={{ resize: "none" }}
+                value={details.job_detail}
+                onChange={handleInputChange}
+              />
            </div>
-  
          </div>
-  
+
          {/* ACTION SECTION */}
-          <div className='p-4 w-full md:w-2/4 h-full'>
+          <div className="p-4 w-full md:w-2/4 h-full">
+            <Formik
+              initialValues={initialValues}
+              validationSchema={validationSchema}
+            >
+              {(props) => {
+                return (
+                  <>
+                    {/* Assign to Family */}
+                    <JobFieldInput
+                      label="Assign to family"
+                      select
+                      inputName="family"
+                      value={props?.family}
+                      btnText="Assign to family"
+                      optionText="family"
+                    />

-             {/* Offer this job to public input */}
-             <div className="field w-full p-3 mb-6 bg-red-50 rounded-md">
-                <InputCom
-                fieldClass="px-6"
-                label="Offer this job to public"
-                labelClass='tracking-wide'
-                type="text"
-                name="public"
-                placeholder=""
-                value={inputs.public}
-                inputHandler={handleInputChange}
-                />
+                    {/* Offer this job to public input */}
+                    <JobFieldInput
+                      label="Offer this job to public"
+                      select
+                      inputName="public"
+                      value={props?.public}
+                      btnText="Show Task to Public"
+                      optionText="Public"
+                    />

-                {/* btn */}
-                <div className='my-1 flex justify-end items-center'>
-                    <button className='px-2 py-1 text-sm text-white btn-gradient tracking-wide rounded-md'>Show Task to Public</button>
-                </div>
-            </div>
+                    {/* Offer this job to individual input */}
+                    <JobFieldInput
+                      label="Offer this job to individual"
+                      input
+                      inputName="individual"
+                      value={props?.individual}
+                      btnText="Send Offer to Individual"
+                    />

-            {/* Offer this job to individual input */}
-            <div className="field w-full p-3 mb-6 bg-red-50 rounded-md">
-                <InputCom
-                fieldClass="px-6"
-                label="Offer this job to individual"
-                labelClass='tracking-wide'
-                type="text"
-                name="individual"
-                placeholder=""
-                value={inputs.individual}
-                inputHandler={handleInputChange}
-                />
-
-                {/* btn */}
-                <div className='my-1 flex justify-end items-center'>
-                    <button className='px-2 py-1 text-sm text-white btn-gradient tracking-wide rounded-md'>Send Offer to Individual</button>
-                </div>
-            </div>
-
-            {/* Offer this job to your group input */}
-            <div className="field w-full p-3 mb-6 bg-red-50 rounded-md">
-                <InputCom
-                fieldClass="px-6"
-                label="Offer this job to your Group"
-                labelClass='tracking-wide'
-                type="text"
-                name="group"
-                placeholder=""
-                value={inputs.group}
-                inputHandler={handleInputChange}
-                />
-
-                {/* btn */}
-                <div className='my-1 flex justify-end items-center'>
-                    <button className='px-2 py-1 text-sm text-white btn-gradient tracking-wide rounded-md'>Send Order to Group</button>
-                </div>
-            </div>
+                    {/* Offer this job to your group input */}
+                    <JobFieldInput
+                      label="Offer this job to your Group"
+                      select
+                      inputName="group"
+                      value={props?.group}
+                      btnText="Send Order to Group"
+                      optionText="Group"
+                    />
+                  </>
+                );
+              }}
+            </Formik>
          </div>
          {/* END OF ACTION SECTION */}
-        </div> 
-
-        {/* close button */}
-        {/* <div className="p-6 flex justify-center">
-          <button
-            onClick={onClose}
-            type="button"
-            className=" border-gradient text-18 tracking-wide px-2 py-2 rounded-full"
-          >
-            <span className="text-gradient">Close</span>
-          </button>
-        </div> */}
-        {/* end of close button */}
-    </div>
-  </ModalCom>
-    )
+        </div>
+      </div>
+    </ModalCom>
+  );
 }

-export default JobListPopout
+export default JobListPopout;
+
+const JobFieldInput = ({
+  value,
+  inputHandler,
+  inputName,
+  inputClass,
+  input,
+  select,
+  label,
+  labelClass,
+  btnText,
+  parentClass,
+  optionText
+}) => (
+  <div className="field w-full p-3 mb-6 bg-red-50 rounded-md">
+    {select && (
+      <>
+        <div className={`input-com ${parentClass}`}>
+          <div
+            className={`flex items-center justify-start mb-2.5 ${labelClass}`}
+          >
+            {label && (
+              <label
+                className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block tracking-wide"
+                htmlFor={inputName}
+              >
+                {label}
+              </label>
+            )}
+          </div>
+          <div
+            className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-[1rem] h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ${inputClass}`}
+          >
+            <Field
+              component="select"
+              name={inputName}
+              className={`input-field placeholder:text-base text-dark-gray w-full h-full bg-white outline-none px-2`}
+            >
+              <option value="">{optionText}</option>
+              {value && <option value={value}></option>}
+            </Field>
+          </div>
+        </div>
+      </>
+    )}
+
+    {input && (
+      <InputCom
+        fieldClass="px-6"
+        label={label}
+        labelClass="tracking-wide"
+        type="text"
+        name={inputName}
+        placeholder=""
+        value={value}
+        inputHandler={inputHandler}
+        inputBg="bg-white"
+      />
+    )}
+    {/* btn */}
+    <div className="my-1 flex justify-end items-center">
+      <button className="px-2 py-1 text-sm text-white btn-gradient tracking-wide rounded-md">
+        {btnText}
+      </button>
+    </div>
+  </div>
+);
@@ -6,11 +6,15 @@ import App from "./App";
 import "./index.css";
 import store from "./store/store";

+import { GoogleOAuthProvider } from '@react-oauth/google';
+
 const root = document.getElementById("root");
 ReactDOM.createRoot(root).render(
  <BrowserRouter>
    <Provider store={store}>
-      <App />
+      <GoogleOAuthProvider clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}>
+        <App />
+      </GoogleOAuthProvider>
    </Provider>
  </BrowserRouter>
 );
@@ -78,7 +78,7 @@ class usersService {
      page: 0,
      limit: 100,
    };
-    return this.postAuxEnd("/offerslist", null);
+    return this.postAuxEnd("/offerslist", postData);
  }

  getPendingJob() {
@@ -97,7 +97,7 @@ class usersService {
     */
  getActiveJobList() {
    var postData = {
-      uuid: localStorage.getItem("uid"),
+      uid: localStorage.getItem("uid"),
      member_id: localStorage.getItem("member_id"),
      sessionid: localStorage.getItem("session_token"),
      page: 0,
@@ -8,8 +8,8 @@ export const userSlice = createSlice({
  name: "userDetails",
  initialState,
  reducers: {
-    updateUserDetails: (state,payload) => {
-      state.userDetails = {...payload.payload}
+    updateUserDetails: (state,action) => {
+      state.userDetails = {...action.payload}
    },
  },
 });
@@ -8,8 +8,8 @@ export const jobSlice = createSlice({
  name: "jobLists",
  initialState,
  reducers: {
-    updateJobs: (state, payload) => {
-      state.jobLists = { ...payload.payload };
+    updateJobs: (state, action) => {
+      state.jobLists = { ...action.payload };
    },
  },
 });
@@ -0,0 +1,13 @@
+import React from 'react'
+
+import Redirect from '../components/AuthPages/AuthRedirect/Redirect'
+
+function AuthRedirect() {
+  return (
+    <>
+      <Redirect />
+    </>
+  )
+}
+
+export default AuthRedirect
@@ -1,5 +1,5 @@
 //import React from "react";
-import React, { useContext,useState, useEffect } from "react";
+import React, { useContext, useState, useEffect } from "react";
 // import MyTasks from "../components/MyTasks";
 // import UsersService from "../services/UsersService";
 import usersService from "../services/UsersService";
@@ -7,40 +7,37 @@ import MyJobs from "../components/MyJobs";
 import { useSelector } from "react-redux";

 export default function MyJobsPage() {
+  const commonHeadData = () => {
+    console.log("COMMON HEAD DATA ----------------=====---------------------");
+    return 0;
+  };

-    const commonHeadData =()=>{
-        console.log("COMMON HEAD DATA ----------------=====---------------------");
-        return 0;
+  const { jobListTable } = useSelector((state) => state.tableReload);
+
+  // const userApi = new usersService();
+  // const activeJobList  = userApi.getMyJobList();
+  const [MyJobList, setMyJobList] = useState({ loading: true, data: [] });
+  const api = new usersService();
+
+  const getMyJobList = async () => {
+    setMyJobList({ loading: true, data: [] });
+    try {
+      const res = await api.getMyJobList();
+      setMyJobList({ loading: false, data: res.data });
+      // setMyJobList(res.data);
+    } catch (error) {
+      setMyJobList({ loading: false, data: [] });
+      console.log("Error getting mode");
    }
+  };
+  useEffect(() => {
+    getMyJobList();
+  }, [jobListTable]);

-    const {jobListTable} = useSelector((state) => state.tableReload)
-
-    // const userApi = new usersService();
-    // const activeJobList  = userApi.getMyJobList();
-    const [MyJobList, setMyJobList] = useState({loading: true, data:[]});
-    const api = new usersService();
-
-    const getMyJobList = async () => {
-        setMyJobList({loading: true, data:[]})
-        try {
-            const res = await api.getMyJobList();
-            setMyJobList({loading: false, data:res.data})
-            // setMyJobList(res.data);
-        } catch (error) {
-            setMyJobList({loading: false, data:[]})
-            console.log("Error getting mode");
-        }
-    };
-    useEffect(() => {
-        getMyJobList();
-    }, [jobListTable]);
-
-   // debugger;
-    return (
-        <>
-            <MyJobs
-                MyJobList={MyJobList}
-                commonHeadData={commonHeadData} />
-        </>
-    );
+  // debugger;
+  return (
+    <>
+      <MyJobs MyJobList={MyJobList} commonHeadData={commonHeadData} />
+    </>
+  );
 }
@@ -6,6 +6,7 @@ import usersService from "../services/UsersService";
 export default function MyTaskPage() {

    const [MyActiveJobList, setMyActiveJobList] = useState([]);
+    const [MyActiveOffersList, setMyActiveOffersList] = useState([]);
    const api = new usersService();
    const commonHeadData =()=>{
        console.log("COMMON HEAD DATA ----------------=====---------------------");
@@ -16,17 +17,27 @@ export default function MyTaskPage() {
            const res = await api.getMyActiveTaskList();
            setMyActiveJobList(res.data);
        } catch (error) {
-            console.log("Error getting mode");
+            console.log("Error getting tasks");
+        }
+    };
+    const getMyActiveOffersList = async () => {
+        try {
+            const res = await api.getOffersList();
+            setMyActiveOffersList(res.data);
+        } catch (error) {
+            console.log("Error getting offers");
        }
    };
    useEffect(() => {
        getMyActiveJobList();
+        getMyActiveOffersList();
    }, []);

    //debugger;
    return (
        <>
            <MyTasks ActiveJobList={MyActiveJobList}
+                     MyActiveOffersList={MyActiveOffersList}
                     commonHeadData={commonHeadData}/>
        </>
    );
@@ -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:
-  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:
+react-redux@^8.0.5:
  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:
-  version "5.0.0"
-  resolved "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz"
-  integrity sha512-3i0L2CyIlROz7mxETEdfif6Sfhh9Lfpzi10CtcGs1emDQStmZfWjJbAIMtRD0opVUjQuFWqHZyRZ9PPzKCFxWg==
+react-scripts@5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz"
+  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"
Author	SHA1	Message	Date
victorAnumudu	27aa607bc3	google login routes to login/auth with coderesponse consoled	2023-05-27 10:05:00 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	0cabedf96d	my offers	2023-05-26 22:15:56 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	dcbfec7a40	Correct production google redirect	2023-05-26 19:37:21 -04:00
ameye	fd7fcf7a7a	Merge branch 'enable-and-active-jobs' of WrenchBoard/Users-Wrench into master	2023-05-26 21:42:32 +00:00
Ebube	f5ee36573b	.	2023-05-26 22:27:26 +01:00
Ebube	dbc2c0bc64	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into enable-and-active-jobs	2023-05-26 22:25:40 +01:00
Ebube	041baef730	.	2023-05-26 22:25:17 +01:00
ameye	917d74d85f	Merge branch 'enable-and-active-jobs' of WrenchBoard/Users-Wrench into master	2023-05-26 14:42:46 +00:00
Ebube	b013f7c07d	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into enable-and-active-jobs	2023-05-26 03:40:39 +01:00
Ebube	68627a1792	.	2023-05-26 03:40:06 +01:00
ameye	050e759e15	Merge branch 'google-login-popout' of WrenchBoard/Users-Wrench into master	2023-05-25 23:54:27 +00:00
ameye	7da6ee59b3	Merge branch 'enable-and-active-jobs' of WrenchBoard/Users-Wrench into master	2023-05-25 23:54:16 +00:00
victorAnumudu	00e528eec0	made google login load on same page	2023-05-26 00:50:42 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	0b1191d09e	redirect UR	2023-05-25 19:24:06 -04:00
Ebube	ad68c2e98e	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into enable-and-active-jobs	2023-05-25 22:43:38 +01:00
Ebube	b4fa523cef	.	2023-05-25 22:43:13 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	f44ade7818	fscebook setings	2023-05-25 16:33:46 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	499753bc54	ADD GOOGLE IDS	2023-05-25 16:20:42 -04:00
ameye	ec8a10504c	Merge branch 'google_login_interface' of WrenchBoard/Users-Wrench into master	2023-05-25 19:56:27 +00:00
victorAnumudu	795e834e47	added google login interface	2023-05-25 20:00:13 +01:00
ameye	47bfc65f09	Merge branch 'enable-and-active-jobs' of WrenchBoard/Users-Wrench into master	2023-05-25 11:19:05 +00:00
Ebube	87c0922974	.	2023-05-25 12:17:52 +01:00
Ebube	c46e94cd88	updated endpoint	2023-05-25 10:06:56 +01:00
Ebube	4f0d079bfe	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into enable-and-active-jobs	2023-05-25 08:49:01 +01:00
Ebube	88d2f7313c	.	2023-05-25 08:48:41 +01:00
ameye	6f9c244966	Merge branch 'login-bug' of WrenchBoard/Users-Wrench into master	2023-05-24 21:41:38 +00:00
victorAnumudu	65b58a6e6f	set login error to false once continue btn is clicked	2023-05-24 22:39:12 +01:00
victorAnumudu	fec4644300	login type bug fixed	2023-05-24 22:34:47 +01:00
victorAnumudu	8b99ec1ab8	login type bug fixed	2023-05-24 22:29:04 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	69fb6ba913	fix wallets	2023-05-24 17:23:16 -04:00
ameye	73a14ba0ec	Merge branch 'manage-family-page' of WrenchBoard/Users-Wrench into master	2023-05-24 19:34:03 +00:00
Ebube	4fb5bcc3f3	fixed some bugs and clean up	2023-05-24 15:01:39 +01:00
ameye	d673d890db	Merge branch 'pagination-familylist' of WrenchBoard/Users-Wrench into master	2023-05-24 10:51:14 +00:00
victorAnumudu	aa5467de35	added pagnation to family list table	2023-05-24 03:53:46 +01:00
ameye	74eec728b8	Merge branch 'login-issue-fixed' of WrenchBoard/Users-Wrench into master	2023-05-23 14:36:52 +00:00