QR value updated

Merge branch 'QR-value' of WrenchBoard/Users-Wrench into master
family QR scan value changed
2023-09-10 05:19:19 +01:00 · 2023-09-09 21:15:23 +00:00 · 2023-09-09 21:29:24 +01:00 · 2023-09-09 06:07:32 +00:00 · 2023-09-09 07:00:18 +01:00 · 2023-09-08 19:54:33 +00:00
129 changed files with 3091 additions and 1934 deletions
@@ -24,7 +24,6 @@ REACT_APP_SESSION_EXPIRE_CHECKER=60000
 REACT_APP_LOGIN_ERROR_TIMEOUT=7000
 REACT_APP_SIGNUP_ERROR_TIMEOUT=7000

-REACT_APP_FLUTTERWAVE_APIKEY=FLWPUBK_TEST-54c90141b028789d671067bd72f781a9-X

 # Had to change the error time to 3sec cause it took too long
 REACT_APP_RESET_START_ERROR_TIMEOUT=3000
@@ -46,7 +45,7 @@ REACT_APP_GOOGLE_REDIRECT_URL=http://localhost:9082/login/auth/
 REACT_APP_FACEBOOK_CLIENT_ID2=390204307987009
 REACT_APP_FACEBOOK_CLIENT_SECRET2=19f778e312f2ab96d147bacb612910c2

-#developenet Account
+#development Account Social
 REACT_APP_FACEBOOK_CLIENT_ID=677857427521030
 REACT_APP_FACEBOOK_CLIENT_SECRET=4801375f22072d8a75f64483fdd89829

@@ -24,7 +24,6 @@ REACT_APP_SESSION_EXPIRE_CHECKER=60000
 REACT_APP_LOGIN_ERROR_TIMEOUT=7000
 REACT_APP_SIGNUP_ERROR_TIMEOUT=7000

-REACT_APP_FLUTTERWAVE_APIKEY=FLWPUBK_TEST-54c90141b028789d671067bd72f781a9-X

 # Had to change the error time to 3sec cause it took too long
 REACT_APP_RESET_START_ERROR_TIMEOUT=3000
@@ -24,7 +24,6 @@ REACT_APP_SESSION_EXPIRE_CHECKER=60000
 REACT_APP_LOGIN_ERROR_TIMEOUT=7000
 REACT_APP_SIGNUP_ERROR_TIMEOUT=7000

-REACT_APP_FLUTTERWAVE_APIKEY=FLWPUBK_TEST-54c90141b028789d671067bd72f781a9-X

 # Had to change the error time to 3sec cause it took too long
 REACT_APP_RESET_START_ERROR_TIMEOUT=3000
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
@@ -56,6 +56,9 @@ export default function Routers() {
      <Routes>
        {/* guest routes */}
        <Route exact path="/login" element={<LoginPage />} />
+        <Route exact path="/eoffer" element={<LoginPage />} />
+        <Route exact path="/invite" element={<LoginPage />} />
+
        <Route exact path="/signup" element={<SignupPage />} />
        <Route exact path="/login/auth" element={<AuthRedirect />} />
        <Route exact path="/login/auth/flogin" element={<FacebookRedirect />} />
@@ -119,7 +122,8 @@ export default function Routers() {
          <Route exact path="/sell" element={<SellPage />} />
          <Route exact path="/saved" element={<SavedPage />} />
          <Route exact path="/history" element={<HistoryPage />} />
-          <Route exact path="/upload-product" element={<UploadProductPage />} />
+          {/*<Route exact path="/upload-product" element={<UploadProductPage />} />*/}
+          <Route exact path="/my-uploads" element={<UploadProductPage />} />
          <Route exact path="/profile" element={<AuthProfilePage />} />
          <Route exact path="/user-profile" element={<UserProfilePage />} />
          <Route exact path="/settings" element={<SettingsPage />} />
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="error"><path fill="#ff1d25" d="M29.75,25.73,18.68,3.59a3,3,0,0,0-4-1.33,3.05,3.05,0,0,0-1.33,1.33L2.25,25.73a3,3,0,0,0,2.68,4.34H27.07a3,3,0,0,0,3-3A2.88,2.88,0,0,0,29.75,25.73ZM16,25.38a.94.94,0,1,1,.94-.94A.94.94,0,0,1,16,25.38Zm.94-4.69a.94.94,0,1,1-1.88,0V11.31a.94.94,0,1,1,1.88,0Z"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" id="success"><path fill="#80af52" d="M256 26c127.03 0 230 102.97 230 230S383.03 486 256 486 26 383.03 26 256 128.97 26 256 26z"></path><path fill="#fff" d="M215.999 386a9.998 9.998 0 0 1-7.525-3.415l-70-80c-3.637-4.156-3.215-10.474.941-14.11s10.475-3.217 14.111.94l60.961 69.67 142.938-238.23c2.842-4.736 8.983-6.273 13.72-3.43 4.736 2.841 6.271 8.984 3.431 13.72l-150 250a9.998 9.998 0 0 1-8.577 4.855z"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" id="files"><circle cx="64" cy="64" r="64" fill="#EF4C45"></circle><path fill="#CD2E30" d="M128 64v-2L92.4 26.5l-63.1 74 27.2 27c2.4.3 4.9.4 7.4.4C99.3 128 128 99.3 128 64z"></path><path fill="#E5E8EC" d="M93.5 78.4V29c0-1.9-1.5-3.4-3.4-3.4H41.8c-1.9 0-3.4 1.5-3.4 3.4v49.4h55.1z"></path><path fill="#FFF" d="M89.5 78.4V44.6H78.1c-1.9 0-3.4-1.5-3.4-3.4V29.9H37.8c-1.9 0-3.4 1.5-3.4 3.4v45.1h55.1z"></path><path fill="#FFCC04" d="m79.3 65.9-1.5 4c-.5 1.2-1.6 2-2.9 2H53.1c-1.3 0-2.4-.8-2.9-2l-1.5-4c-.5-1.3-1.7-2.2-3.1-2.2H30.9c-1.9 0-3.4 1.5-3.4 3.4v28.8c0 3.5 2.9 6.4 6.4 6.4H94c3.5 0 6.4-2.9 6.4-6.4V67.1c0-1.9-1.5-3.4-3.4-3.4H82.5c-1.4 0-2.7.9-3.2 2.2z"></path><path fill="#CED4DF" d="m74.9 45.8-.1-.1.1.1z"></path><path fill="#22D2FC" d="M74.7 29.9v11.4c0 1.9 1.5 3.4 3.4 3.4h11.4L74.7 29.9z"></path><path fill="#FFF" d="M74.1 81.6H53.9c-2 0-3.7 1.6-3.7 3.7 0 2 1.6 3.7 3.7 3.7h20.2c2 0 3.7-1.6 3.7-3.7 0-2-1.7-3.7-3.7-3.7z"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51 51" id="jpg"><circle cx="25.5" cy="25.5" r="24" fill="#FED000"></circle><path fill="#F39F03" d="M37.462 16.607v4.741a.924.924 0 0 1-.877.924v16.361c0 1.027-.84 1.867-1.867 1.867H18.282a1.866 1.866 0 0 1-1.867-1.867V22.272a.924.924 0 0 1-.877-.924v-4.741c0-.495.392-.906.877-.924v-1.316a1.86 1.86 0 0 1 1.867-1.867h16.436c1.027 0 1.867.83 1.867 1.867v1.316c.485.018.877.43.877.924z"></path><path fill="#FFF" d="M35.585 13.367v24.266c0 1.031-.836 1.867-1.867 1.867H17.282a1.867 1.867 0 0 1-1.867-1.867V13.367c0-1.031.836-1.867 1.867-1.867h16.436c1.03 0 1.867.836 1.867 1.867z" opacity=".96"></path><path fill="#33ACFE" d="M18.143 25.5h14.715v9.894H18.143z"></path><path fill="#273E56" d="M32.859 35.394h-7.622l3.959-4.357z"></path><path fill="#334861" d="M29.048 35.394H18.143l5.664-7.357z"></path><circle cx="27.697" cy="28.037" r="1.094" fill="#FED000"></circle><path fill="#EB4B33" d="M35.462 21.28H15.538a1 1 0 0 1-1-1v-4.604a1 1 0 0 1 1-1h19.924a1 1 0 0 1 1 1v4.605a1 1 0 0 1-1 1z"></path><path fill="#FFF" d="M22.511 18.797c0 .57-.155 1.499-1.475 1.499-.737 0-1.456-.403-1.456-1.37v-.384h.88v.199c0 .427.105.737.564.737.514 0 .514-.409.514-.725v-2.987h.973v3.03zm.857-3.031h1.996c1.109 0 1.53.7 1.53 1.42 0 .718-.421 1.418-1.53 1.418H24.34v1.587h-.973v-4.425zm.973 2.082h.756c.446 0 .855-.099.855-.663 0-.564-.409-.663-.855-.663h-.756v1.326zm6.36 1.84a1.49 1.49 0 0 1-1.214.608c-1.364 0-2.176-1.023-2.176-2.299 0-1.314.812-2.336 2.176-2.336.905 0 1.766.552 1.865 1.561h-.93c-.117-.496-.47-.743-.935-.743-.874 0-1.202.743-1.202 1.518 0 .738.328 1.48 1.202 1.48.638 0 .997-.334 1.053-.953h-.98V17.8h1.86v2.392h-.62l-.099-.502z"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="0 0 512 512" id="mp4-file"><circle cx="256" cy="256" r="256" fill="#8ABE4F"></circle><path fill="#7BA840" d="M511.9 262.5 346.6 96.8c-1.1-1.1-3.1-1.1-4.3 0l-37.4 43.4c-.6.6-.8 1.2-.7 1.9l-3.4-6.1H159.2c-13.1 0-23.7 10.6-23.7 23.7v145.6l7.9 5.9h-16.2v66.6l8.3 7.9v6.6c0 7.6 3.5 14.3 9 18.6.7.9 58.1 58.3 100.6 100.9 3.6.1 7.2.2 10.8.2 139.3 0 252.5-111.1 256-249.5z"></path><g fill="#FFF"><path d="M169.1 193.7h145.4V206H169.1zM169.1 213.5h145.4v12.3H169.1zM169.1 233.4h145.4v12.3H169.1zM169.1 253.3h145.4v12.3H169.1zM169.1 273.1H282v12.3H169.1zM384.1 140.2l-37.4-43.4c-1.1-1.1-3.1-1.1-4.3 0L305 140.2c-1.7 1.6-.4 4.3 2.1 4.3h17.6v34h39.8v-34h17.6c2.3 0 3.6-2.6 2-4.3zM324.6 184.7h39.8v15.5h-39.8zM324.6 212c0 1.4 1.3 2.6 2.9 2.6h34c1.6 0 2.9-1.1 2.9-2.6v-5.7h-39.8v5.7z"></path><path d="M339.7 389.3c0 10.1-8.2 18.3-18.3 18.3H162.2c-10.1 0-18.3-8.2-18.3-18.3v-5.6h-8.4v8.6c0 13.1 10.6 23.7 23.7 23.7h165.2c13.1 0 23.7-10.6 23.7-23.7V220.4h-8.4v168.9zM143.9 162.7c0-10.1 8.2-18.3 18.3-18.3h136.4c-.9-2.8-.2-6 1.9-8.2l.2-.3H159.2c-13.1 0-23.7 10.6-23.7 23.7v145.6h8.4V162.7z"></path><path d="M313.2 344.5c0-18.4-14.9-33.3-33.3-33.3H127.2v66.6h152.7c18.4 0 33.3-14.9 33.3-33.3zm-109 19.2h-6.4v-27.6h-.2L187 363.7h-4.4l-10.8-28.1-.2.1v28.1h-6.4v-38.4h8.4l11 29.5h.2l11.1-29.5h8.2v38.3zm34.4-17.8c-2.4 2.2-5.7 3.3-10 3.3h-8.3v14.6h-6.4v-38.4h14.7c4.2 0 7.6 1.1 10 3.3 2.4 2.2 3.6 5.1 3.6 8.6s-1.2 6.4-3.6 8.6zm36.5 9.3h-4.9v8.5h-6.4v-8.5h-16.1l-.2-3.9 16-26h6.6V350h4.9v5.2z"></path><path d="m263.1 335.8-9.2 14.2h9.9v-15.7h-.1zM228.6 330.4h-8.3V344h8.3c2.4 0 4.2-.6 5.4-1.9 1.2-1.3 1.8-2.9 1.8-4.8s-.6-3.6-1.8-4.9c-1.2-1.3-3-2-5.4-2z"></path></g></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 90 90" viewBox="0 0 90 90" id="pdf"><circle cx="45" cy="45" r="44.5" fill="#84D2ED"></circle><polygon fill="#EFC41C" stroke="#010101" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.978" points="35.6 18.8 35.6 31.9 22.5 31.9 22.5 71.2 62.8 71.2 62.8 18.8"></polygon><polygon fill="#8CC749" stroke="#010101" stroke-miterlimit="10" stroke-width="1.978" points="22.5 31.9 22.5 31.9 22.5 31.9"></polygon><polygon fill="#EB665F" stroke="#010101" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.978" points="35.6 18.8 22.5 31.9 22.5 31.9 35.6 31.9"></polygon><rect width="35.9" height="15.7" x="31.6" y="40.2" fill="#F2DFD5" stroke="#010101" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.978"></rect><path fill="#010101" d="M43 44c.7.6 1 1.5 1 2.7 0 1.2-.4 2.1-1.1 2.7-.7.6-1.8.9-3.3.9h-1.3v2.8h-2.2v-9.9h3.5C41.2 43.1 42.3 43.4 43 44zM41.4 47.9c.3-.3.4-.7.4-1.3 0-.6-.2-1-.5-1.2C41 45.2 40.4 45 39.7 45h-1.3v3.3h1.5C40.6 48.4 41.2 48.2 41.4 47.9zM53.4 44.4c.9.9 1.4 2.1 1.4 3.6 0 1.5-.5 2.8-1.4 3.7-.9.9-2.3 1.3-4.2 1.3h-3.4v-9.9h3.5C51.1 43.1 52.5 43.6 53.4 44.4zM51.8 50.3c.5-.5.8-1.3.8-2.2s-.3-1.7-.8-2.3c-.5-.5-1.4-.8-2.5-.8H48v6h1.4C50.5 51.1 51.2 50.9 51.8 50.3zM63.6 43.1v1.9H59v2.1h4.4v1.9H59v3.9h-2.2v-9.9H63.6z"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="655.359" height="655.359" fill-rule="evenodd" clip-rule="evenodd" image-rendering="optimizeQuality" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" viewBox="0 0 6.827 6.827" id="png-file"><circle cx="3.413" cy="3.413" r="3.413" fill="#42a5f5"></circle><path fill="#fffffe" d="M1.744 4.074h.27V1.75a.164.164 0 0 1 .164-.164H4.3l.023.022.544.545.023.023v1.898h.191a.198.198 0 0 1 .198.199v.77a.198.198 0 0 1-.198.198H1.744a.198.198 0 0 1-.198-.199v-.769a.198.198 0 0 1 .198-.199zm.425 0h2.567V2.24l-.004-.004h-.498v-.495H2.178a.009.009 0 0 0-.007.003.009.009 0 0 0-.002.006v2.324zm.389-.7h1.789v.156h-1.79v-.156zm0-.544h1.789v.156h-1.79V2.83zm.07 2.094V4.37h.179c.068 0 .112.003.132.009a.145.145 0 0 1 .08.054.172.172 0 0 1 .032.107.18.18 0 0 1-.018.086.152.152 0 0 1-.047.055.162.162 0 0 1-.058.026.637.637 0 0 1-.116.008h-.073v.209h-.111zm.111-.46v.157H2.8a.29.29 0 0 0 .089-.009.074.074 0 0 0 .034-.027.075.075 0 0 0 .013-.043.072.072 0 0 0-.018-.05.077.077 0 0 0-.044-.024.532.532 0 0 0-.08-.004h-.055zm.405.46V4.37h.109l.226.37v-.37h.104v.554h-.112l-.223-.361v.36h-.104zm.814-.204v-.093H4.2v.22a.372.372 0 0 1-.237.086.304.304 0 0 1-.15-.036.232.232 0 0 1-.098-.105.337.337 0 0 1-.032-.147.32.32 0 0 1 .036-.154.244.244 0 0 1 .106-.102.285.285 0 0 1 .132-.028.26.26 0 0 1 .161.043.195.195 0 0 1 .075.12l-.111.02a.118.118 0 0 0-.044-.064.133.133 0 0 0-.08-.024.152.152 0 0 0-.117.047c-.029.03-.043.077-.043.138 0 .065.014.114.044.147.029.033.067.05.114.05a.194.194 0 0 0 .07-.014.244.244 0 0 0 .061-.034v-.07h-.128z"></path><path fill="none" d="M1.547 1.547H5.28V5.28H1.547z"></path></svg>
@@ -0,0 +1,3 @@
+<svg width="1200" height="1227" viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="white"/>
+</svg>
@@ -1,6 +1,6 @@
 import { Field, Form, Formik } from "formik";
 import React, { useEffect, useState } from "react";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import * as Yup from "yup";
 import usersService from "../../services/UsersService";
 import { tableReload } from "../../store/TableReloads";
@@ -11,7 +11,7 @@ const validationSchema = Yup.object().shape({
  country: Yup.string()
    .min(1, "Minimum 3 characters")
    .max(25, "Maximum 25 characters")
-    .required("Country is required"),
+    .required("Currency is required"),
  price: Yup.string()
    .typeError("Invalid number")
    .min(1, "Price must be greater than 0")
@@ -43,15 +43,9 @@ const validationSchema = Yup.object().shape({

 function AddJob({ popUpHandler, categories }) {
  const ApiCall = new usersService();
-
+  const { walletDetails } = useSelector((state) => state.walletDetails);
  let dispatch = useDispatch();

-  let [currency, setCurrency] = useState({
-    loading: true,
-    status: false,
-    data: null,
-  }); // To Hold the array of currency getUserCurrency returns
-
  let initialValues = {
    // initial values for formik
    country: "",
@@ -69,30 +63,15 @@ function AddJob({ popUpHandler, categories }) {
    message: "",
  }); // Holds state when submit button is pressed

-  // FUNCTION TO GET Currency
-  const getUserCurrency = () => {
-    setCurrency((prev) => ({ ...prev, loading: true }));
-    ApiCall.getUserWallets()
-      .then((res) => {
-        if (res.data.internal_return < 0) {
-          setCurrency({ loading: false, status: true, data: [] });
-          return;
-        }
-
-        setCurrency({
-          loading: false,
-          status: true,
-          data: res.data.result_list,
-        });
-      })
-      .catch((err) => {
-        setCurrency({ loading: false, status: false, data: [] });
-      });
+  const getWalletDetail = (country) => { // A FUNCTION TO GET USER BALANCE BASED ON COUNTRY SELECTED
+    const walletChecker = walletDetails?.data.find(
+      (item) => item.country === country
+    );
+    return walletChecker ? walletChecker.amount : 0;
  };

-  // FUNCTION TO HANDLE ADD JOB FORM
-  const handleAddJob = (values, helpers) => {
-    let reqData = {
+  const handleAddJob = async (values, helpers) => {
+    const reqData = {
      country: values?.country,
      price: Number(values.price) * 100,
      title: values?.title,
@@ -102,20 +81,35 @@ function AddJob({ popUpHandler, categories }) {
      category: values.category?.join("@"),
    };

+    const walletAmount = getWalletDetail(reqData.country); // GETTING USER BALANCE BASED ON COUNTRY SELECTED
+
+    if (reqData.price > walletAmount) {
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: "Insufficient Balance",
+      });
+
+      setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 1500);
+      return;
+    }
+
    setRequestStatus({ loading: true, status: false, message: "" });
-    ApiCall.jobManagerCreateJob(reqData)
-      .then((res) => {
-        if (res.data.internal_return < 1) {
-          setRequestStatus({
-            loading: false,
-            status: false,
-            message: "Could not complete your request at the moment",
-          });
-          setTimeout(() => {
-            popUpHandler();
-          }, 1500);
-          return;
-        }
+
+    try {
+      const res = await ApiCall.jobManagerCreateJob(reqData);
+      if (res.data.internal_return < 1) {
+        setRequestStatus({
+          loading: false,
+          status: false,
+          message: "Could not complete your request at the moment",
+        });
+        setTimeout(() => {
+          popUpHandler();
+        }, 1500);
+      } else {
        setRequestStatus({
          loading: false,
          status: true,
@@ -125,25 +119,20 @@ function AddJob({ popUpHandler, categories }) {
          dispatch(tableReload({ type: "JOBTABLE" }));
          popUpHandler();
        }, 1000);
-      })
-      .catch((err) => {
-        setRequestStatus({
-          loading: false,
-          status: false,
-          message: "Opps! something went wrong. Try Again",
-        });
-      })
-      .finally(() => {
-        setTimeout(() => {
-          setRequestStatus({ loading: false, status: false, message: "" });
-        }, 5000);
+      }
+    } catch (err) {
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: "Oops! Something went wrong. Try Again",
      });
+    } finally {
+      setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 5000);
+    }
  };

-  useEffect(() => {
-    getUserCurrency();
-  }, []);
-
  return (
    <div className="add-job p-5 w-full bg-white rounded-md flex flex-col justify-between">
      <Formik
@@ -164,7 +153,11 @@ function AddJob({ popUpHandler, categories }) {
                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex item-center gap-1"
                      >
                        Currency
-                        {props.errors.country && props.touched.country && <span className="text-[12px] text-red-500">{props.errors.country}</span>}
+                        {props.errors.country && props.touched.country && (
+                          <span className="text-[12px] text-red-500">
+                            {props.errors.country}
+                          </span>
+                        )}
                      </label>
                      <select
                        id="country"
@@ -174,16 +167,16 @@ function AddJob({ popUpHandler, categories }) {
                        onChange={props.handleChange}
                        onBlur={props.handleBlur}
                      >
-                        {currency.loading ? (
+                        {walletDetails.loading ? (
                          <option className="text-slate-500 text-lg" value="">
                            Loading...
                          </option>
-                        ) : currency.data.length ? (
+                        ) : walletDetails.data.length ? (
                          <>
                            <option className="text-slate-500 text-lg" value="">
                              Select a currency
                            </option>
-                            {currency.data?.map((item, index) => (
+                            {walletDetails.data?.map((item, index) => (
                              <option
                                key={index}
                                className="text-slate-500 text-lg"
@@ -214,7 +207,11 @@ function AddJob({ popUpHandler, categories }) {
                        value={props.values.price}
                        inputHandler={props.handleChange}
                        blurHandler={props.handleBlur}
-                        error={props.errors.price && props.touched.price && props.errors.price}
+                        error={
+                          props.errors.price &&
+                          props.touched.price &&
+                          props.errors.price
+                        }
                      />
                    </div>
                  </div>
@@ -231,7 +228,11 @@ function AddJob({ popUpHandler, categories }) {
                      value={props.values.title}
                      inputHandler={props.handleChange}
                      blurHandler={props.handleBlur}
-                      error={props.errors.title && props.touched.title && props.errors.title}
+                      error={
+                        props.errors.title &&
+                        props.touched.title &&
+                        props.errors.title
+                      }
                    />
                  </div>

@@ -247,7 +248,11 @@ function AddJob({ popUpHandler, categories }) {
                      value={props.values.description}
                      inputHandler={props.handleChange}
                      blurHandler={props.handleBlur}
-                      error={props.errors.description && props.touched.description && props.errors.description}
+                      error={
+                        props.errors.description &&
+                        props.touched.description &&
+                        props.errors.description
+                      }
                    />
                  </div>

@@ -259,7 +264,12 @@ function AddJob({ popUpHandler, categories }) {
                        className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1'
                      >
                        Job Delivery Details
-                        {props.errors.job_detail && props.touched.job_detail && <span className="text-[12px] text-red-500">{props.errors.job_detail}</span>}
+                        {props.errors.job_detail &&
+                          props.touched.job_detail && (
+                            <span className="text-[12px] text-red-500">
+                              {props.errors.job_detail}
+                            </span>
+                          )}
                      </label>
                      <textarea
                        id="Job Delivery Details"
@@ -286,19 +296,28 @@ function AddJob({ popUpHandler, categories }) {
                        role="group"
                        aria-labelledby="checked-group"
                      >
-                        {Object?.entries(categories).map(([key, value]) => (
-                          <label
-                            key={key}
-                            className="flex gap-1 w-full items-center"
-                          >
-                            <Field
-                              type="checkbox"
-                              name="category"
-                              value={key}
-                            />
-                            <span className="text-[13.975px]">{value}</span>
+                        {categories ? (
+                          <>
+                            {Object?.entries(categories).map(([key, value]) => (
+                              <label
+                                key={key}
+                                className="flex gap-1 w-full items-center"
+                              >
+                                <Field
+                                  type="checkbox"
+                                  name="category"
+                                  value={key}
+                                />
+                                <span className="text-[13.975px]">{value}</span>
+                              </label>
+                            ))}
+                          </>
+                        ) : (
+                          <label className="flex gap-1 w-full items-center">
+                            <Field type="checkbox" name="category" />
+                            <span className="text-[13.975px]">null</span>
                          </label>
-                        ))}
+                        )}
                        <span className="h-5 text-sm italic text-[#cf3917]">
                          {props.errors.category &&
                            props.touched.category &&
@@ -335,6 +354,7 @@ function AddJob({ popUpHandler, categories }) {
                      <option value="">Select Duration</option>
                      {publicArray.map(({ name, duration }, idx) => (
                        <option
+                          key={idx}
                          className="text-slate-500 text-lg"
                          value={duration}
                        >
@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
+import { useDispatch } from "react-redux";
 import { useLocation, useNavigate } from 'react-router-dom';
 import usersService from '../../../services/UsersService';
-import {updateUserDetails} from "../../../store/UserDetails";
-import { useDispatch } from "react-redux";
+import { updateUserDetails } from "../../../store/UserDetails";
 import AuthLayout from "../AuthLayout";

 function FbookRedirect() {
@@ -22,38 +22,50 @@ function FbookRedirect() {
      console.log(codeResponse);
      
      /*
-      POST /token HTTP/1.1
-      Host: oauth2.googleapis.com
-      Content-Type: application/x-www-form-urlencoded
+      https://developers.facebook.com/docs/facebook-login/guides/advanced/manual-flow/#exchangecode
+      Step 1. Get access token by code

-      code=4/P7q7W91a-oMsCeLvIaQm6bTrgtp7&
-      client_id=your_client_id&
-      client_secret=your_client_secret&
-      redirect_uri=https%3A//oauth2.example.com/code&
-      grant_type=authorization_code
+      GET https://graph.facebook.com/v17.0/oauth/access_token?
+        client_id={app-id}
+        &redirect_uri={redirect-uri}
+        &client_secret={app-secret}
+        &code={code-parameter}
+
+      https://developers.facebook.com/docs/facebook-login/guides/access-tokens/get-long-lived
+      Step 2. Get long-lived token by access token
+      
+      curl -i -X GET "https://graph.facebook.com/{graph-api-version}/oauth/access_token?  
+      grant_type=fb_exchange_token&          
+      client_id={app-id}&
+      client_secret={app-secret}&
+      fb_exchange_token={your-access-token}" 
      */
+
+      // process.env.REACT_APP_FACEBOOK_CLIENT_ID
+      // process.env.REACT_APP_FACEBOOK_CLIENT_SCOPE
+      
      var reqData = {
        auth_type: "FACEBOOK",
        code: codeResponse,
-        redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
+        redirect_uri: process.env.REACT_APP_FACEBOOK_REDIRECT_URL,
      };
-    //   userApi
-    //     .authStart(reqData)
-    //     .then((res) => {
-    //       if (res.status == 200  && res.data.internal_return >= 0 && res.data.member_id && res.data.uid && res.data.session) {
-    //         localStorage.setItem("member_id", `${res.data.member_id}`);
-    //         localStorage.setItem("uid", `${res.data.uid}`);
-    //         localStorage.setItem("session_token", `${res.data.session}`);
-    //         dispatch(updateUserDetails({...res.data}));
-    //         navigate('/', {replace: true})
-    //         return
-    //       }
-    //       navigate('/login', {state: {error: true}})
-    //     })
-    //     .catch((error) => {
-    //       navigate('/login', {state: {error: true}})
-    //       console.log(error);
-    //     });
+      userApi
+        .authStart(reqData)
+        .then((res) => {
+          if (res.status == 200  && res.data.internal_return >= 0 && res.data.member_id && res.data.uid && res.data.session) {
+            localStorage.setItem("member_id", `${res.data.member_id}`);
+            localStorage.setItem("uid", `${res.data.uid}`);
+            localStorage.setItem("session_token", `${res.data.session}`);
+            dispatch(updateUserDetails({...res.data}));
+            navigate('/', {replace: true})
+            return
+          }
+          navigate('/login', {state: {error: true}})
+        })
+        .catch((error) => {
+          navigate('/login', {state: {error: true}})
+          console.log(error);
+        });
    },[])
  return (
    <AuthLayout>
@@ -1,26 +1,26 @@
-import React, { useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import usersService from '../../../services/UsersService';
-import {updateUserDetails} from "../../../store/UserDetails";
+import React, { useEffect } from "react";
 import { useDispatch } from "react-redux";
+import { useLocation, useNavigate } from "react-router-dom";
+import usersService from "../../../services/UsersService";
+import { updateUserDetails } from "../../../store/UserDetails";
 import AuthLayout from "../AuthLayout";

 function Redirect() {
-    const location = useLocation();
-    const navigate = useNavigate();
-    const userApi = new usersService();
-    const dispatch = useDispatch()
+  const location = useLocation();
+  const navigate = useNavigate();
+  const userApi = new usersService();
+  const dispatch = useDispatch();

-    const queryParams = new URLSearchParams(location?.search);
-    const codeResponse = queryParams.get("code");
+  const queryParams = new URLSearchParams(location?.search);
+  const codeResponse = queryParams.get("code");

-    useEffect(()=>{
-      if(!codeResponse){
-        navigate('/login', {state: {error: true}})
-        return
-      }
-      console.log(codeResponse);
-      /*
+  useEffect(() => {
+    if (!codeResponse) {
+      navigate("/login", { state: { error: true } });
+      return;
+    }
+    console.log(codeResponse);
+    /*
      POST /token HTTP/1.1
      Host: oauth2.googleapis.com
      Content-Type: application/x-www-form-urlencoded
@@ -31,34 +31,40 @@ function Redirect() {
      redirect_uri=https%3A//oauth2.example.com/code&
      grant_type=authorization_code
      */
-      var reqData = {
-        auth_type: "GOOGLE",
-        code: codeResponse,
-        redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
-      };
-      userApi
-        .authStart(reqData)
-        .then((res) => {
-          if (res.status == 200  && res.data.internal_return >= 0 && res.data.member_id && res.data.uid && res.data.session) {
-            localStorage.setItem("member_id", `${res.data.member_id}`);
-            localStorage.setItem("uid", `${res.data.uid}`);
-            localStorage.setItem("session_token", `${res.data.session}`);
-            dispatch(updateUserDetails({...res.data}));
-            navigate('/', {replace: true})
-            return
-          }
-          navigate('/login', {state: {error: true}})
-        })
-        .catch((error) => {
-          navigate('/login', {state: {error: true}})
-          console.log(error);
-        });
-    },[])
+    var reqData = {
+      auth_type: "GOOGLE",
+      code: codeResponse,
+      redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
+    };
+    userApi
+      .authStart(reqData)
+      .then((res) => {
+        if (
+          res.status == 200 &&
+          res.data.internal_return >= 0 &&
+          res.data.member_id &&
+          res.data.uid &&
+          res.data.session
+        ) {
+          localStorage.setItem("member_id", `${res.data.member_id}`);
+          localStorage.setItem("uid", `${res.data.uid}`);
+          localStorage.setItem("session_token", `${res.data.session}`);
+          dispatch(updateUserDetails({ ...res.data }));
+          navigate("/", { replace: true });
+          return;
+        }
+        navigate("/login", { state: { error: true } });
+      })
+      .catch((error) => {
+        navigate("/login", { state: { error: true } });
+        console.log(error);
+      });
+  }, []);
  return (
    <AuthLayout>
-    <div className='min-h-[70vh]'>Redirecting ... </div>
-  </AuthLayout>
-  )
+      <div className="min-h-[70vh]">Redirecting ... </div>
+    </AuthLayout>
+  );
 }

-export default Redirect
+export default Redirect;
@@ -0,0 +1,37 @@
+import React from 'react'
+import { useNavigate } from 'react-router-dom'
+import localImgLoad from '../../lib/localImgLoad'
+
+const ForgetPwdResponse = ({title, message, type}) => {
+  const navigate = useNavigate()
+  return (
+    <>
+        <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+            <h1 className={`${type ? 'text-black' : 'text-red-500'}text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]`}>
+            {title}
+            </h1>
+        </div>
+        <div className="title-area w-[100px] h-[100px] mx-auto flex flex-col justify-center items-center relative text-center mb-7">
+            <img className='w-full h-full' src={`${type ? localImgLoad('images/icons/success.svg') : localImgLoad('images/icons/error.svg')}`} alt='alert-banner' />
+        </div>
+        <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+            <p className={`${type ? 'text-sky-blue' : 'text-red-500'} font-semibold dark:text-white mb-3 leading-[27.3px] text-[18px]`}>
+            {message}
+            </p>
+        </div>
+        <div className="signin-area mb-3.5">
+            <div className="flex justify-center items-center gap-2">
+                <button
+                type="button"
+                onClick={() => navigate("/login")}
+                className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+                >
+                    <span>Home</span>
+                </button>
+            </div>
+        </div>
+    </>
+  )
+}
+
+export default ForgetPwdResponse
@@ -1,9 +1,11 @@
 import React, { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import WrenchBoard from "../../../assets/images/wrenchboard.png";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
+import EmailValidator from "../../../lib/EmailValidator";
+import ForgetPwdResponse from "../ForgetPwdResponse";

 export default function ForgotPassword() {
  const [checked, setValue] = useState(false);
@@ -11,7 +13,7 @@ export default function ForgotPassword() {
  // email
  const [email, setMail] = useState("");
  const [msgError, setMsgError] = useState("");
-  const [msgSuccess, setMsgSuccess] = useState(false);
+  const [msgSuccess, setMsgSuccess] = useState(null);

  const navigate = useNavigate();
  const userApi = new usersService();
@@ -27,12 +29,26 @@ export default function ForgotPassword() {
  const resetHandler = async () => {
    if (email == "") {
      setMsgError("An email is required");
-    } else if (!checked) {
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    } 
+    if (!checked) {
      setMsgError("Check if you are human");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
+
+    if(!EmailValidator(email)){ // CHECKS IF EMAIL IS VALID
+      setMsgError("Invalid Email");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
    }

    if (email !== "" && checked) {
-      const reqData = { email };
+      const reqData = { email, action:11013 };
      setResetLoading(true);
      try {
        const res = await userApi.StartResetPassword(reqData);
@@ -41,8 +57,11 @@ export default function ForgotPassword() {
          setMail("");
          setValue(false);
          setResetLoading(false);
+        }else{
+          setMsgSuccess(false);
        }
      } catch (error) {
+        setMsgSuccess(false);
        setResetLoading(false);
        setMail("");
        setMsgError("An error occurred");
@@ -53,9 +72,6 @@ export default function ForgotPassword() {
        }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
      }
    }
-    setTimeout(() => {
-      setMsgError(null);
-    }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
  };

  return (
@@ -73,106 +89,102 @@ export default function ForgotPassword() {
          </div>
          <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5">
            <div className="flex flex-col justify-center w-full h-full px-5">
-              <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
-                  Forget Password
-                </h1>
-                <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                  Enter your email to reset your password.
-                </span>
-              </div>
-              <div className="input-area">
-                <div className="input-item mb-10">
-                  <InputCom
-                    fieldClass="px-6"
-                    placeholder="Your Username/Email"
-                    label="Email"
-                    name="email"
-                    type="email"
-                    value={email}
-                    inputHandler={handleEmail}
-                    iconName="message"
-                  />
+            {msgSuccess == null ?
+              <>
+                <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                  <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
+                    Forget Password
+                  </h1>
+                  <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                    Enter your email to reset your password.
+                  </span>
                </div>
-                {/* hCaptha clone for the time being */}
-                <div className="mb-10">
-                  <div className="w-[303px] h-[78px] mx-auto overflow-hidden">
-                    <div className="w-[300px] h-[74px] bg-white bottom-[1px] rounded border-gray-100 overflow-hidden cursor-pointer">
-                      {/* Checkbox */}
-                      <div className="h-full relative inline-block">
-                        <div className="relative table top-0 h-full">
-                          <div className="table-cell align-middle">
-                            <div className="relative w-[30px] h-[30px] mx-[15px]">
-                              <input
-                                type="checkbox"
-                                name="human-checkbox"
-                                id="human-checkbox"
-                                className="w-[28px] h-[28px] border-[1px] rounded border-gray-400 checked:bg-white"
-                                checked={checked}
-                                onChange={humanChecker}
-                              />
+                <div className="input-area">
+                  <div className="input-item mb-10">
+                    <InputCom
+                      fieldClass="px-6"
+                      placeholder="Your Username/Email"
+                      label="Email"
+                      name="email"
+                      type="email"
+                      value={email}
+                      inputHandler={handleEmail}
+                      iconName="message"
+                    />
+                  </div>
+                  {/* hCaptha clone for the time being */}
+                  <div className="mb-10">
+                    <div className="w-[303px] h-[78px] mx-auto overflow-hidden">
+                      <div className="w-[300px] h-[74px] bg-white bottom-[1px] rounded border-gray-100 overflow-hidden cursor-pointer">
+                        {/* Checkbox */}
+                        <div className="h-full relative inline-block">
+                          <div className="relative table top-0 h-full">
+                            <div className="table-cell align-middle">
+                              <div className="relative w-[30px] h-[30px] mx-[15px]">
+                                <input
+                                  type="checkbox"
+                                  name="human-checkbox"
+                                  id="human-checkbox"
+                                  className="w-[28px] h-[28px] border-[1px] rounded border-gray-400 checked:bg-white"
+                                  checked={checked}
+                                  onChange={humanChecker}
+                                />
+                              </div>
                            </div>
                          </div>
                        </div>
-                      </div>
-                      <div className="h-full relative inline-block w-[170px]">
-                        <label className="relative table top-0 h-full">
-                          <label className="table-cell align-middle">
-                            <label
-                              className="text-800 text-sm"
-                              htmlFor="human-checkbox"
-                            >
-                              I am human
+                        <div className="h-full relative inline-block w-[170px]">
+                          <label className="relative table top-0 h-full">
+                            <label className="table-cell align-middle">
+                              <label
+                                className="text-800 text-sm"
+                                htmlFor="human-checkbox"
+                              >
+                                I am human
+                              </label>
                            </label>
                          </label>
-                        </label>
+                        </div>
+                        <div className="h-full relative inline-block w-16"></div>
                      </div>
-                      <div className="h-full relative inline-block w-16"></div>
+                    </div>
+                  </div>
+                  {msgError && (
+                    <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
+                      {msgError}
+                    </div>
+                  )}
+                  <div className="signin-area mb-3.5">
+                    <div className="flex justify-center items-center gap-2">
+                      <button
+                        type="button"
+                        onClick={resetHandler}
+                        className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+                      >
+                        {resetLoading ? (
+                          <div className="signup btn-loader"></div>
+                        ) : (
+                          <span>Send Code</span>
+                        )}
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => navigate("/login")}
+                        className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem] `}
+                      >
+                        Cancel
+                      </button>
                    </div>
                  </div>
                </div>
-                {msgError && (
-                  <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
-                    {msgError}
-                  </div>
-                )}
-                {msgSuccess && (
-                  <div className="relative p-4 text-[#44228c] bg-[#e3d7fb] border-[#d5c4f9] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
-                    If we find your email, you will receive a link to reset your
-                    password. Please use or{" "}
-                    <Link
-                      to="/contact"
-                      className="text-[#4687ba] hover:text-[#009ef7]"
-                    >
-                      contact form
-                    </Link>{" "}
-                    if you did not get our message after few minutes.
-                  </div>
-                )}
-
-                <div className="signin-area mb-3.5">
-                  <div className="flex justify-center items-center gap-2">
-                    <button
-                      type="button"
-                      onClick={resetHandler}
-                      className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
-                    >
-                      {resetLoading ? (
-                        <div className="signup btn-loader"></div>
-                      ) : (
-                        <span>Send Code</span>
-                      )}
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => navigate("/login")}
-                      className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem] `}
-                    >
-                      Cancel
-                    </button>
-                  </div>
-                </div>
-              </div>
+              </>
+            :
+            <ForgetPwdResponse 
+              title={'Forget Password'}
+              message={msgSuccess? `Check your email for the link to continue password reset. Note the reset link will expire short time` : 'We are unable to continue with your request. Please try another username or contact us for help'}
+              type={msgSuccess}
+            />
+            }
            </div>
          </div>
        </div>
@@ -4,7 +4,7 @@ import linkedInLogo from "../../../assets/images/Linkedin.png";
 import appleLogo from "../../../assets/images/apple-black.svg";
 import facebookLogo from "../../../assets/images/facebook-4.svg";
 import googleLogo from "../../../assets/images/google-logo.svg";
-import WrenchBoard from "../../../assets/images/wrenchboard.png";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
@@ -285,7 +285,7 @@ export default function Login() {
                      <InputCom
                        labelClass="tracking-wider"
                        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
-                        value={password.replace(/./g, "●")}
+                        value={password}
                        inputHandler={handlePassword}
                        placeholder="● ● ● ● ● ●"
                        label="Password"
@@ -342,6 +342,7 @@ export default function Login() {
                          imgSrc={appleLogo}
                          brand="Apple"
                          isAnchor={true}
+                          style={{visibility: 'hidden'}}
                        />
                      </div>
                      <div className="sm:flex sm:justify-between sm:items-center sm:space-x-2">
@@ -432,10 +433,12 @@ export default function Login() {
              }
              {/* END of login component */}

+              {loginType == "full" &&
              <div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
                This site is protected by hCaptcha and the our Privacy Policy
                and Terms of Service apply.
              </div>
+              }
            </div>
          </div>
        </div>
@@ -444,7 +447,7 @@ export default function Login() {
  );
 }

-const BrandBtn = ({ link, imgSrc, brand, onClick, isAnchor = false }) => {
+const BrandBtn = ({ link, imgSrc, brand, onClick, isAnchor = false, style = {visibility: 'visible' } }) => {
  // const doGoogle = async () => {
  //   alert("start google");
  // };
@@ -464,7 +467,7 @@ const BrandBtn = ({ link, imgSrc, brand, onClick, isAnchor = false }) => {
  //   alert("start facebook");
  // };
  return (
-    <div className="w-full sm:w-1/2 flex justify-center bottomMargin">
+    <div className="w-full sm:w-1/2 flex justify-center bottomMargin" style={style}>
      {isAnchor ? (
        <a
          href={link}
@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import facebookLogo from "../../../assets/images/facebook-4.svg";
-import WrenchBoard from "../../../assets/images/wrenchboard.png";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
@@ -69,13 +68,17 @@ export default function SignUp() {
        let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
        if (regEx.test(email) == false) {
          setMsgError("Invalid Email");
-          return setTimeout(()=>{setMsgError("");},3000)
+          return setTimeout(() => {
+            setMsgError("");
+          }, 3000);
        }

        //checks if terms and condition is checked
        if (!checked) {
          setMsgError("Terms and condition required");
-          return setTimeout(()=>{setMsgError("");},3000)
+          return setTimeout(() => {
+            setMsgError("");
+          }, 3000);
        }

        setSignUpLoading(true);
@@ -95,7 +98,9 @@ export default function SignUp() {
        if (res.status === 200) {
          const { data } = res;
          if (data && data.acc === "DULPICATE") {
-            setMsgError("Unable to use this username. Please try another username.");
+            setMsgError(
+              "Unable to use this username. Please try another username."
+            );
            setSignUpLoading(false);
          }
          if (data && data.status === "1") {
@@ -211,10 +216,8 @@ export default function SignUp() {
                    name="password"
                    type={showPassword ? "text" : "password"}
                    onClick={togglePasswordVisibility}
-                    passIcon={
-                      showPassword ? "show-password" : "hide-password"
-                    }
-                    value={formData.password.replace(/./g, "●")}
+                    passIcon={showPassword ? "show-password" : "hide-password"}
+                    value={formData.password}
                    inputHandler={handleInputChange}
                  />
                </div>
@@ -223,7 +226,48 @@ export default function SignUp() {
                    {msgError}
                  </div>
                )}
+
                <div className="forgot-password-area flex justify-between items-center mb-6">
+                  <div className="remember-checkbox flex items-center space-x-2.5 group cursor-pointer">
+                    <button
+                      onClick={rememberMe}
+                      type="button"
+                      className={`w-6 h-6 border-[#4687ba] text-white flex justify-center items-center border rounded-[.45em] group-checked:text-white transition-all duration-200 group-checked:cursor-default ${
+                        checked && "text-white bg-[#4687ba]"
+                      }`}
+                    >
+                      {checked && (
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          className="h-5 w-5"
+                          viewBox="0 0 20 20"
+                          fill="currentColor"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                            clipRule="evenodd"
+                          />
+                        </svg>
+                      )}
+                    </button>
+                    <span
+                      onClick={rememberMe}
+                      className="cursor-default text-dark-gray dark:text-white text-[15px] group-checked:text-white transition-all duration-200 group-checked:cursor-default"
+                    >
+                      I agree with all
+                      <Link
+                        href="#"
+                        className="text-base text-[#4687ba] hover:text-[#009ef7] mx-1 inline-block"
+                      >
+                        terms and condition
+                      </Link>
+                    </span>
+                  </div>
+                </div>
+
+                {/* Forgot Password */}
+                {/* <div className="forgot-password-area flex justify-between items-center mb-6">
                  <div className="remember-checkbox flex items-center space-x-2.5">
                    <button
                      onClick={rememberMe}
@@ -258,7 +302,7 @@ export default function SignUp() {
                      </Link>
                    </span>
                  </div>
-                </div>
+                </div> */}
                <div className="signin-area mb-1">
                  <div className="flex justify-center">
                    <button
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
-import WrenchBoard from "../../../assets/images/wrenchboard.png";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import debounce from "../../../hooks/debounce";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
@@ -1,16 +1,20 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
-import WrenchBoard from "../../../assets/images/wrenchboard.png";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
+import ForgetPwdResponse from "../ForgetPwdResponse";
+import PasswordValidator from "../../../lib/PasswordValidator";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";

 const VerifyPassword = () => {
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
+  const [requestStatus, setRequestStatus] = useState({loading: true, status:false, data: []})
  const [msgError, setMsgError] = useState("");
  const [linkLoader, setLinkLoader] = useState(false);
-  const [linkSuccess, setLinkSuccess] = useState(true);
+  const [linkSuccess, setLinkSuccess] = useState(null);
  const [showPassword, setShowPassword] = useState(false);
  const navigate = useNavigate();
  const location = useLocation();
@@ -23,11 +27,6 @@ const VerifyPassword = () => {
    setShowPassword(!showPassword);
  };

-  // little checker for the validity of the token
-  if (token?.length != 64) {
-    setLinkSuccess(false);
-  }
-
  // Password
  const handlePassword = (e) => {
    let { name, value } = e?.target;
@@ -36,46 +35,60 @@ const VerifyPassword = () => {
  };

  const completeReset = async () => {
+    if(!password || !confirmPassword){ // CHECKS IF PASSWORD IS EMPTY
+      setMsgError("Please fill in fields");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
+    if(password != confirmPassword){ // CHECKS IF PASSWORD EQUALS CONFIRM PASSWORD
+      setMsgError("Passwords does not match");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
+    if(password.length < 6){ // CHECKS IF PASSWORD LENGTH IS UPTO 6 CHARACTERS
+      setMsgError("Password must be upto six characters");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
+    if(!PasswordValidator(password)){ // CHECKS IF PASSWORD IS VALID
+      setMsgError("Password must contain alphanumeric, uppercase and special character: eg: Password1@");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
    try {
-      if (password !== "" && confirmPassword !== "") {
-        if (password === confirmPassword) {
          setLinkLoader(true);
          var reqData = {
            sessionid: "DUMMY-CANNOT_BE_EMPTY",
            reset_link: token,
            newpass: password,
+            m_uid: requestStatus.data?.m_uid || '',
+            reset_uid: requestStatus.data?.reset_uid || '',
            step: 300,
            action: 730,
          };
-
          const res = await userApi?.CompleteResetPassword(reqData);

-          if (res.status === 200) {
+          if (res.status == 200) {
            const { data } = res;
-
-            if (data?.status > 0 && data?.email) {
-              setTimeout(() => {
-                navigate("/login", { replace: true });
-                setLinkLoader(false);
-              }, 2000);
-            } else if (data && data?.status == "Invalid Request") {
-              setLinkLoader(false);
-              setLinkSuccess(false);
+            if (data?.internal_return >= 0) {
+              // setTimeout(() => {
+              //   navigate("/login", { replace: true });
+              //   setLinkLoader(false);
+              // }, 2000);
+              setLinkSuccess(true);
            } else {
              setLinkLoader(false);
              setMsgError("An error occurred");
+              setLinkSuccess(false);
            }
          } else {
            setLinkLoader(false);
            setLinkSuccess(false);
          }
-        } else {
-          setLinkLoader(false);
-          setMsgError("Passwords does not match");
-        }
-      } else {
-        setMsgError("Please fill in fields");
-      }
    } catch (error) {
      setLinkLoader(false);
      setLinkSuccess(false);
@@ -87,6 +100,31 @@ const VerifyPassword = () => {
    }
  };

+  const verifyResetPwd = () => { // FUNCTION TO VERIFY RESET PASSWORD LINK
+    setRequestStatus({loading: true, status:false, data: []})
+    var reqData = {
+      sessionid: "DUMMY-CANNOT_BE_EMPTY",
+      reset_link: token,
+      step: 200,
+      action: 730,
+    };
+    userApi.CompleteResetPassword(reqData).then(res => {
+      if(res.status != 200 || res.data.internal_return < 0){
+        return setRequestStatus({loading: false, status:false, data: []})
+      }
+      setRequestStatus({loading: false, status:true, data: res.data})
+    }).catch(error => {
+      setRequestStatus({loading: false, status:false, data: []})
+    })
+  }
+
+  useEffect(()=>{
+    // little checker for the validity of the token
+  if (token==null || token?.length != 64) {
+    return setRequestStatus({loading: false, status:false, data: []});
+  }
+  verifyResetPwd()
+  },[])
  return (
    <>
      <AuthLayout slogan="Welcome to WrenchBoard">
@@ -101,39 +139,59 @@ const VerifyPassword = () => {
            </Link>
          </div>
          <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5">
+            {requestStatus.loading ?
+            <LoadingSpinner color='sky-blue' size='16' height='h-300px' />
+            :
+            !requestStatus.loading && requestStatus.status ?
            <div className="w-full">
-              <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
-                  {linkSuccess ? "Password Reset" : "Invalid verification link"}
-                </h1>
-                {linkSuccess && (
-                  <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                    Enter a new password to reset
-                  </span>
-                )}
-                {linkSuccess && (
-                  <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                    We'll send an email to confirm reset
-                  </span>
-                )}
-              </div>
-              {/* If the verification was a success */}
-              {linkSuccess ? (
-                <SuccessfulComponent
-                  password={password}
-                  confirmPassword={confirmPassword}
-                  handlePassword={handlePassword}
-                  onSubmit={completeReset}
-                  msgErr={msgError}
-                  loader={linkLoader}
-                  showPassword={showPassword}
-                  onClick={togglePasswordVisibility}
-                  navigateHandler={() => navigate("/login")}
-                />
-              ) : (
-                <ErrorComponent onClick={() => navigate("/login")} />
-              )}
+              {linkSuccess == null ?
+              <>
+                <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                  <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
+                    Password Reset
+                  </h1>
+                    <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                      Enter a new password to reset
+                    </span>
+                    <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                      We'll send an email to confirm reset
+                    </span>
+                </div>
+                <div>
+                  <p className="text-red-500 font-semibold mb-3 leading-[27.3px] text-[13px]">
+                    Must include a special, numeric, uppercase and lowercase character
+                  </p>
+                </div>
+                  <SuccessfulComponent
+                    password={password}
+                    confirmPassword={confirmPassword}
+                    handlePassword={handlePassword}
+                    onSubmit={completeReset}
+                    msgErr={msgError}
+                    loader={linkLoader}
+                    showPassword={showPassword}
+                    onClick={togglePasswordVisibility}
+                    navigateHandler={() => navigate("/login")}
+                  />
+                </>
+                :
+                <ForgetPwdResponse 
+                title={linkSuccess? 'Password Reset Complete' : 'Password Reset Error'}
+                message={linkSuccess? 'Password Reset Complete. You can login now with your new credentials' : 'Password Reset Error. Please get in touch with support for further support'
+                }
+                type={linkSuccess}
+              />
+              }
            </div>
+            :
+            <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+              <ForgetPwdResponse 
+                title={'Forget Password'}
+                message={'We are unable to continue to reset process. This error is usually due to expired links. Please start all over or contact us'}
+                type={requestStatus.status}
+              />
+            </div>
+            }
          </div>
        </div>
      </AuthLayout>
@@ -159,7 +217,7 @@ const SuccessfulComponent = ({
    <div className="mb-5">
      <InputCom
        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
-        value={password?.replace(/./g, "●")}
+        value={password}
        inputHandler={handlePassword}
        placeholder="● ● ● ● ● ●"
        label="Password"
@@ -172,7 +230,7 @@ const SuccessfulComponent = ({
    <div className="mb-5">
      <InputCom
        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
-        value={confirmPassword?.replace(/./g, "●")}
+        value={confirmPassword}
        inputHandler={handlePassword}
        placeholder="● ● ● ● ● ●"
        label="Confirm Password"
@@ -209,25 +267,3 @@ const SuccessfulComponent = ({
    </div>
  </div>
 );
-
-const ErrorComponent = ({ onClick }) => (
-  <div className="input-area">
-    <div className="my-5">
-      <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
-        This error occurs because you have already used this link or the link
-        has broken/expired. Start with the reset process again. If it doesn't
-        work, try to create the account from the start.
-      </p>
-    </div>
-
-    <div className="signin-area flex justify-center mb-3.5">
-      <button
-        onClick={onClick}
-        type="button"
-        className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
-      >
-        <span>Return Home</span>
-      </button>
-    </div>
-  </div>
-);
@@ -1,6 +1,6 @@
 import { useNavigate, Link } from "react-router-dom";
 import AuthLayout from "../AuthLayout";
-import WrenchBoard from "../../../assets/images/wrenchboard.png";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";

 export default function VerifyYou() {
  const navigate = useNavigate();
@@ -1,38 +1,77 @@
-import React, { useState } from "react";
-import { Link } from "react-router-dom";
+import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import usersService from "../../services/UsersService";
 import Layout from "../Partials/Layout";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 import CommonHead from "../UserHeader/CommonHead";

 export default function BlogItem(props) {
+
+    const apiCall = new usersService()
+    const navigate = useNavigate()
+
+    const [blogdata, setBlogdata] = useState({loading: true, data:{}})
+
    const [selectTab, setValue] = useState("today");
    const filterHandler = (value) => {
        setValue(value);
    };
+    // eslint-disable-next-line no-restricted-globals
+    const queryParams = new URLSearchParams(location?.search);
+    const blog_id = queryParams.get("blog_id");
+    
+    useEffect(()=>{
+        if(!blog_id){
+            navigate('/',{replace:true})
+        }
+        apiCall.getSingleBlogData({blog_id}).then(res => {
+            setBlogdata({loading: false, data:res.data})
+        }).catch(error => {
+            setBlogdata({loading: false, data:{}})
+            console.log('ERROR', error)
+        })
+    },[blog_id])
    return (
        <Layout>
            <CommonHead
                commonHeadData={props.commonHeadData}
            />
            <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"}`}
-                >
-                  Title of this Blog Items
-                </span>
-                            </h1>
-                        </div>
-                        <div className="slider-btns flex space-x-4">
-
-                        </div>
+                <div className="mb-5">
+                    <h1 className="text-26 font-bold text-dark-gray dark:text-white">
+                        <span
+                            className={`${selectTab === "today" ? "block" : "hidden"}`}
+                        >
+                        {blogdata.data?.blogdata?.[0]?.post_title}
+                        </span>
+                    </h1>
+                </div>
+                <div className="notification-wrapper w-full bg-white p-8 rounded-2xl">
+                    {blogdata.loading ? 
+                        <LoadingSpinner size='8' color='sky-blue' height='h-[100px]' />
+                    :
+                        blogdata?.data?.blogdata && blogdata.data?.blogdata.length ?
+                        <div className="w-full">
+                            {/* heading */}
+                            <div className="sm:flex justify-between items-center mb-6">
+                                {/* <div className="mb-5">
+                                    <h1 className="text-26 font-bold text-dark-gray dark:text-white">
+                                        <span
+                                            className={`${selectTab === "today" ? "block" : "hidden"}`}
+                                        >
+                                        {blogdata.data?.blogdata?.[0]?.post_title}
+                                        </span>
+                                    </h1>
+                                </div> */}
+                                {/* <div className="slider-btns flex space-x-4">
+                                </div> */}
+                            </div>
+                            <div dangerouslySetInnerHTML={{__html: blogdata.data?.blogdata?.[0]?.post_content}}>
+                            </div>
                    </div>
-                   <div>
-                       Blog Items Details need implenet
-                   </div>
+                    :
+                    <h1 className="text-26 font-bold text-dark-gray dark:text-white">No Blog Found!</h1>
+                    }  
                </div>
            </div>
        </Layout>
@@ -1,9 +1,7 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
-import usersService from "../../services/UsersService";
-import { PriceFormatter } from "../Helpers/PriceFormatter";
+import { useEffect, useState } from "react";
 import dataImage2 from "../../assets/images/data-table-user-2.png";
+import { PriceFormatter } from "../Helpers/PriceFormatter";
+import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";

 export default function AvailableJobsCard({
  className,
@@ -156,27 +154,6 @@ export default function AvailableJobsCard({
                </p>
              </div>

-              {/* <div className="card-two-info flex gap-2 items-center">
-              <div className="owned-by flex space-x-2 items-center">
-                <div>
-                  <p className="text-thin-light-gray text-sm leading-3">Added</p>
-                  <p className="text-base   text-dark-gray dark:text-white">
-                    {datas.offer_added}
-                  </p>
-                </div>
-              </div>
-              <div className="w-[1px] bg-light-purple dark:bg-dark-light-purple  h-7"></div>
-              <div className="created-by flex space-x-2 items-center flex-row-reverse">
-                <div>
-                  <p className="text-thin-light-gray text-sm leading-3 text-right">
-                    Expires
-                  </p>
-                  <p className="text-base text-dark-gray dark:text-white text-right">
-                    {datas.expire}
-                  </p>
-                </div>
-              </div>
-            </div> */}
              <div className="block sm:flex flex-wrap gap-4">
                <p className="text-sm text-thin-light-gray flex flext-start gap-1">
                  Price: <span className="text-purple">{thePrice}</span>
@@ -16,7 +16,8 @@ export default function HomeBannerOffersCard(props) {

  return (
    <Link
-      to={link_result}
+      // to={link_result}
+      to={link_result == '/blog-page' ? `${link_result}?blog_id=${props.itemData.blog_id}` : `${link_result}`}
      className="item p-2 w-full flex items-center min-h-[340px] bg-alice-blue bg-cover bg-center"
      style={{
        backgroundImage: `url('${imageUrl}')`,
@@ -19,7 +19,7 @@ export default function OfferCard({ datas, hidden = false, setOfferPopout }) {
            className="thumbnail w-full h-full rounded-xl overflow-hidden px-4 pt-4"
            style={{
              background: `url(${localImgLoad(
-                `images/taskbanners/${datas.banner}`
+                `images/taskbanners/${datas?.banner || "default.jpg"}`
              )}) center / contain no-repeat`,
            }}
          >
@@ -50,22 +50,23 @@ export default function ProductCardStyleTwo({
        </div>
        <div className="details-area">
          {/* title */}
-          <a href={datas.guid} target="_blank" className="mb-2.5" rel="noreferrer">
+          <Link to={`/blog-page?blog_id=${datas.ID}`} className="mb-2.5" rel="noreferrer">
            <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
              {datas.post_title || "dummy title..."}
            </h1>
-          </a>
+          </Link>
          <div className="flex justify-between">
            <div className="flex items-center space-x-2"></div>
            <div className="my-1">
-              <a
-                href={datas.guid}
-                target="_blank"
+              <Link
+                // href={datas.guid}
+                // target="_blank"
+                to={`/blog-page?blog_id=${datas.ID}`}
                className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
                rel="noreferrer"
              >
                View
-              </a>
+              </Link>
            </div>
          </div>
        </div>
@@ -10,10 +10,10 @@ import React, {
 } from "react";
 import { useReactToPrint } from "react-to-print";
 import profile from "../../assets/images/profile-info-profile.png";
+import localImgLoad from "../../lib/localImgLoad";
 import usersService from "../../services/UsersService";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import AssignTaskPopout from "./FamilyPopout/AssignTaskPopout";
-import localImgLoad from "../../lib/localImgLoad";

 // Lazy Imports for components
 const FamilyWaitlist = lazy(() => import("./Tabs/FamilyWaitlist"));
@@ -193,19 +193,19 @@ export default function FamilyManageTabs({

  return (
    <div
-      className={`w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
+      className={`w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow h-full ${
        className || ""
      }`}
    >
-      <div className="relative w-full overflow-x-auto sm:rounded-lg">
+      <div className="relative w-full sm:rounded-lg overflow-x-auto">
        <Suspense
          fallback={
-            <div className="h-full min-h-[500px] w-full overflow-hidden flex justify-center items-center">
+            <div className="h-full min-h-[609px] w-full overflow-hidden flex justify-center items-center">
              <LoadingSpinner size="16" color="sky-blue" />
            </div>
          }
        >
-          <div className="w-full h-full text-sm text-left text-gray-500 dark:text-gray-400 relative grid grid-cols-4 min-h-[520px]">
+          <div className="w-full h-full text-sm text-left text-gray-500 dark:text-gray-400 relative grid grid-cols-4 min-h-[575px]">
            <div className="border-r border-[#E3E4FE] dark:border-[#a7a9b533] p-6 h-full flex flex-col justify-between">
              <ProfileInfo
                profileImg={profileImg}
@@ -239,10 +239,10 @@ export default function FamilyManageTabs({
                </button>
              </div>
            </div>
-            <div className="col-span-3 justify-self-end h-full w-full">
+            <div className="col-span-3 h-full w-full">
              <div className="flex flex-col w-full">
-                <div className="w-full pr-8 flex items-center gap-1">
-                  <ul className="flex gap-2 items-center border-b border-b-[#FAFAF] w-full">
+                <div className="w-full pr-8 flex items-center gap-1 border-b border-b-[#FAFAF]">
+                  <ul className="flex gap-2 items-center w-full">
                    {tabs.map(({ name, id }) => (
                      <li
                        onClick={() => tabHandler(name)}
@@ -265,8 +265,9 @@ export default function FamilyManageTabs({
                    Add task
                  </button>
                </div>
-                <div className="flex-[0.9] lg:min-h-[450px] h-full">
-                  <div className="h-full p-4 border border-[#dbd9d9] relative overflow-y-auto">
+                
+                <div className="flex-[0.9] h-full">
+                  <div className="h-full relative overflow-y-auto">
                    <Suspense
                      fallback={<LoadingSpinner size="16" color="sky-blue" />}
                    >
@@ -197,7 +197,7 @@ const  AssignTaskPopout = React.memo(({ action, details, situation, familyDetail
        <div className="w-full h-full lg:w-[700px] lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
          <div className="w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
            <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
-              Assign task to {familyDetails?.firstname || details.firstName}
+              Assign task to {familyDetails?.firstname || details?.firstName}
            </h1>
            <button
              type="button"
@@ -263,7 +263,7 @@ const  AssignTaskPopout = React.memo(({ action, details, situation, familyDetail
                  </div>
                  {/* Task Type === select */}
                  {taskType == "select" && (
-                    <div className="p-4 w-full h-[400px] overflow-y-auto bg-slate-100">
+                    <div className="p-4 w-full h-[400px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
                      {familyTask?.data?.length ? (
                        familyTask?.data?.map((item, index) => (
                          <div
@@ -283,7 +283,7 @@ const  AssignTaskPopout = React.memo(({ action, details, situation, familyDetail
                              }
                              className="w-[15px] h-[15px] cursor-pointer"
                            />
-                            <p className="w-full text-dark-gray tracking-wide">
+                            <p className="w-full text-dark-gray dark:text-white tracking-wide">
                              {item?.title}
                            </p>
                          </div>
@@ -354,7 +354,7 @@ const  AssignTaskPopout = React.memo(({ action, details, situation, familyDetail
                              Delivery Detail
                            </label>
                            <textarea
-                              className={`p-1 w-full text-sm text-slate-900 outline-none border border-slate-300 rounded-md`}
+                              className={`p-1 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
                              rows="5"
                              style={{ resize: "none" }}
                              value={activeTask?.data?.job_detail}
@@ -23,7 +23,7 @@ export default function FamilyTable({ className, familyList, loader, popUpHandle

  return (
    <div
-      className={`update-table w-full h-full p-8 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] ${
+      className={`update-table w-full h-full p-4 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] ${
        className || ""
      }`}
    >
@@ -1,10 +1,13 @@
 import { forwardRef } from "react";
 import QRCode from "react-qr-code";
+import { useSelector } from "react-redux";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";

-const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint }, ref) => {
+const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint, loader }, ref) => {
+  const { userDetails } = useSelector((state) => state.userDetails);
  return (
    <div
-      className="w-full lg:min-h-[500px] h-full flex flex-col items-center justify-center"
+      className="w-full lg:min-h-[538px] p-3 h-full flex flex-col items-center justify-center"
      ref={myRef}
    >
      <div className="update-table w-full lg:min-h-[450px] h-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow ">
@@ -32,12 +35,19 @@ const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint }, ref) => {
            <p className="text-xl tracking-wide mb-[15px] text-center font-bold text-dark-gray dark:text-white">
              Scan the code from mobile app
            </p>
+            {loader ?
+            <div className="w-full">
+              <LoadingSpinner size='8' color='sky-blue' />
+            </div>
+            :
            <QRCode
              size={256}
              style={{ height: "auto", maxWidth: "100%", width: "100%" }}
-              value={`https://www.google.com`}
+              // value={`https://www.google.com`}
+              value={`${userDetails?.uid}@${familyData?.username}@${familyData?.uid}`}
              viewBox={`0 0 256 256`}
            />
+            }
          </div>
        </div>
        <div className="h-[50px] w-full flex justify-center items-center">
@@ -53,4 +63,4 @@ const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint }, ref) => {
  );
 });

-export default FamilyAccount;
+export default FamilyAccount;
@@ -1,9 +1,8 @@
 import { useMemo, useState } from "react";
-import { PaginatedList, handlePagingFunc } from "../../Pagination";
-import { PriceFormatter } from "../../Helpers/PriceFormatter";
-import dataImage2 from "../../../assets/images/data-table-user-2.png";
-import PendingJobsPopout from "../../jobPopout/PendingJobsPopout";
 import localImgLoad from "../../../lib/localImgLoad";
+import { PriceFormatter } from "../../Helpers/PriceFormatter";
+import { PaginatedList, handlePagingFunc } from "../../Pagination";
+import PendingJobsPopout from "../../jobPopout/PendingJobsPopout";

 export default function FamilyPending({
  familyData,
@@ -37,7 +36,7 @@ export default function FamilyPending({

  return (
    <div
-      className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
+      className={`update-table w-full p-3 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow lg:min-h-[538px] ${
        className || ""
      }`}
    >
@@ -125,8 +124,10 @@ export default function FamilyPending({
                      );
                    })
                  ) : (
-                    <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                      <td className="p-2">No Pending Task!</td>
+                    <tr>
+                      <td className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap text-center py-4 px-2">
+                        No Pending Task!
+                      </td>
                    </tr>
                  )}
                </>
@@ -1,3 +1,11 @@
-export default function FamilyProfile() {
-    return <>Profile</>;
-}
+export default function FamilyProfile({ className }) {
+  return (
+    <div
+      className={`update-table w-full bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow lg:min-h-[538px] p-3 ${
+        className || ""
+      }`}
+    >
+      <h1>Profile</h1>
+    </div>
+  );
+}
@@ -1,20 +1,30 @@
-import React, { useState } from "react";
-import dataImage2 from "../../../assets/images/data-table-user-2.png";
-import { useNavigate, useLocation } from "react-router-dom";
+import React, { useMemo, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import localImgLoad from "../../../lib/localImgLoad";
+import Icons from "../../Helpers/Icons";
+import { PriceFormatter } from "../../Helpers/PriceFormatter";
 import { handlePagingFunc } from "../../Pagination/HandlePagination";
 import PaginatedList from "../../Pagination/PaginatedList";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
-import Icons from "../../Helpers/Icons";
-import { PriceFormatter } from "../../Helpers/PriceFormatter";
-import ModalCom from "../../Helpers/ModalCom";
-import Detail from "../../jobPopout/popoutcomponent/Detail";
-import localImgLoad from "../../../lib/localImgLoad";

-
-export default function FamilyTasks({ familyData, className, loader, accountDetails }) {
+export default function FamilyTasks({
+  familyData,
+  className,
+  loader,
+  accountDetails,
+}) {
  let navigate = useNavigate();
  let { pathname } = useLocation();

+  // ...
+  const filteredFamilyData = useMemo(
+    () =>
+      familyData?.result_list?.filter(
+        (data) => data?.family_uid === accountDetails?.family_uid
+      ),
+    [familyData, accountDetails]
+  );
+
  const [currentPage, setCurrentPage] = useState(0);
  const indexOfFirstItem = Number(currentPage);
  const indexOfLastItem =
@@ -26,9 +36,10 @@ export default function FamilyTasks({ familyData, className, loader, accountDeta

  const handlePagination = (e) => handlePagingFunc(e, setCurrentPage);

+
  return (
    <div
-      className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[450px] overflow-hidden rounded-2xl section-shadow ${
+      className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[538px] overflow-hidden rounded-2xl section-shadow p-3 ${
        className || ""
      }`}
    >
@@ -45,8 +56,8 @@ export default function FamilyTasks({ familyData, className, loader, accountDeta
                  {
                    <>
                      {familyData &&
-                        familyData?.result_list &&
-                        familyData.result_list.length > 0 &&
+                      familyData?.result_list &&
+                      familyData.result_list.length > 0 ? (
                        currentTask.map((value, index) => {
                          // find due date
                          const dueDate = value?.delivery_date.split(" ")[0];
@@ -56,7 +67,9 @@ export default function FamilyTasks({ familyData, className, loader, accountDeta
                            value?.currency_code,
                            value?.currency
                          );
-                          let image = value.banner ? value.banner : 'default.jpg'
+                          let image = value.banner
+                            ? value.banner
+                            : "default.jpg";
                          return (
                            <tr
                              key={index}
@@ -66,7 +79,9 @@ export default function FamilyTasks({ familyData, className, loader, accountDeta
                                <div className="flex space-x-2 items-center w-full">
                                  <div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
                                    <img
-                                      src={localImgLoad(`images/taskbanners/${image}`)}
+                                      src={localImgLoad(
+                                        `images/taskbanners/${image}`
+                                      )}
                                      alt="data"
                                      className="w-full h-full rounded-full"
                                    />
@@ -109,8 +124,8 @@ export default function FamilyTasks({ familyData, className, loader, accountDeta
                                      state: {
                                        ...value,
                                        pathname,
-                                        accountDetails
-                                      }
+                                        accountDetails,
+                                      },
                                    });
                                  }}
                                  className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
@@ -120,7 +135,14 @@ export default function FamilyTasks({ familyData, className, loader, accountDeta
                              </td>
                            </tr>
                          );
-                        })}
+                        })
+                      ) : (
+                        <tr>
+                          <td colSpan="2" className="text-center py-4 font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                            No Family Task
+                          </td>
+                        </tr>
+                      )}
                    </>
                  }
                </tbody>
@@ -48,7 +48,7 @@ const FamilyWaitlist = memo(

    return (
      <div
-        className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[450px] overflow-hidden rounded-2xl section-shadow ${
+        className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[538px] p-3 overflow-hidden rounded-2xl section-shadow ${
          className || ""
        }`}
      >
@@ -22,7 +22,7 @@ export default function InputCom({
  spanTag,
  inputBg,
  onInput,
-  maxLength = 30,
+  maxLength = 45,
  minLength = 0,
  direction,
  error,
@@ -91,9 +91,9 @@ export default function InputCom({
          placeholder={placeholder}
          value={value}
          onChange={inputHandler}
-          className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide ${
-            inputBg ? inputBg : "bg-[#FAFAFA]"
-          } dark:bg-[#11131F] focus:ring-0 focus:outline-none ${fieldClass}`}
+          className={`input-field placeholder:text-base text-dark-gray w-full h-full ${
+            inputBg ? inputBg : "bg-[#FAFAFA] dark:bg-[#11131F] tracking-wide"
+          } focus:ring-0 focus:outline-none ${fieldClass}`}
          type={type}
          id={name}
          name={name}
@@ -124,7 +124,7 @@ export default function InputCom({
 }

 const inputConfigs = {
-  email: { minLength: 7, maxLength: 35 },
+  email: { minLength: 7, maxLength: 45 },
  first_name: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
  last_name: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
  address: { minLength: 5, maxLength: 49, pattern: "[a-zA-Z0-9]+" },
@@ -7,6 +7,7 @@ export default function SearchCom({
  placeholder,
  handleSearch,
  value,
+  name,
 }) {
  return (
    <div
@@ -22,6 +23,7 @@ export default function SearchCom({
          className={`w-full h-full focus:outline-0 focus:ring-0 dark:bg-dark-white dark:text-white ${
            inputClasses || ""
          }`}
+          name={name}
          type="text"
          onInput={handleSearch}
          value={value}
@@ -1,267 +1,129 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import dataImage1 from "../../assets/images/data-table-user-1.png";
-import dataImage2 from "../../assets/images/data-table-user-2.png";
-import dataImage3 from "../../assets/images/data-table-user-3.png";
-import dataImage4 from "../../assets/images/data-table-user-4.png";
-import SelectBox from "../Helpers/SelectBox";
+import usersService from "../../services/UsersService";
+import LoadingSpinner from "../Spinners/LoadingSpinner";

 export default function HomeActivities({ className }) {
-    const filterCategories = ["All Categories", "Explore", "Featured"];
-    const [selectedCategory, setCategory] = useState(filterCategories[0]);
-    return (
-        <div
-            className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow relative min-h-[520px] ${
-                className || ""
-            }`}
-        >
-            <div className="header w-full sm:flex justify-between items-center mb-5">
-                <div className="flex space-x-2 items-center mb-2 sm:mb-0">
-                    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
-                       Recent Activities
-                    </h1>
+  const [recentActivitiesData, setRecentActivitiesData] = useState({
+    loading: false,
+    status: false,
+    msg: "",
+    data: null,
+  });

-                </div>
-            </div>
-            <div className="relative w-full overflow-x-auto sm:rounded-lg">
-                <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
-                    <tbody>
-                    {/* table heading */}
-                    {/*<tr className="text-base text-thin-light-gray whitespace-nowrap px-2 border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">*/}
-                    {/*    <td className="py-4 w-[300px] block whitespace-nowrap">*/}
-                    {/*        All Product*/}
-                    {/*    </td>*/}
-                    {/*    <td className="py-4 whitespace-nowrap text-center">.</td>*/}
-                    {/*    <td className="py-4 whitespace-nowrap text-center"></td>*/}
+  const _apiCall = new usersService();

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

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

-                        <td className="text-right py-4">
-                            <button
-                                type="button"
-                                className="text-sm text-white bg-light-green px-2.5 py-1.5 rounded-full"
-                            >
-                                Complated
-                            </button>
-                        </td>
-                    </tr>
-                    </tbody>
-                </table>
-            </div>
+  console.log(recentActivitiesData);
+
+  return (
+    <div
+      className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow relative min-h-[520px] ${
+        className || ""
+      }`}
+    >
+      <div className="header w-full sm:flex justify-between items-center mb-5">
+        <div className="flex space-x-2 items-center mb-2 sm:mb-0">
+          <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
+            Recent Activities
+          </h1>
        </div>
-    );
+      </div>
+      <div className="relative w-full overflow-x-auto sm:rounded-lg">
+        <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+          <tbody>
+            {/* table heading */}
+            {/*<tr className="text-base text-thin-light-gray whitespace-nowrap px-2 border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">*/}
+            {/*    <td className="py-4 w-[300px] block whitespace-nowrap">*/}
+            {/*        All Product*/}
+            {/*    </td>*/}
+            {/*    <td className="py-4 whitespace-nowrap text-center">.</td>*/}
+            {/*    <td className="py-4 whitespace-nowrap text-center"></td>*/}
+
+            {/*    <td className="py-4 whitespace-nowrap text-right"></td>*/}
+            {/*</tr>*/}
+
+            {recentActivitiesData.loading ? (
+              <div className="h-[100px] w-full flex justify-center items-center">
+                <LoadingSpinner color="sky-blue" size="16" />
+              </div>
+            ) : recentActivitiesData.data ? (
+              recentActivitiesData.data?.map((item) => {
+                let addedDate = item?.added?.split(" ")[0];
+                return (
+                  <tr
+                    className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50"
+                    key={item.uid}
+                  >
+                    <td className=" py-8">
+                      <div className="flex space-x-2 items-center">
+                        <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+                          <img
+                            src={dataImage1}
+                            alt="data"
+                            className="w-full h-full"
+                          />
+                        </div>
+                        <div className="flex flex-col">
+                          <h1 className="font-bold text-xl   text-dark-gray dark:text-white">
+                            {item.title ? item.title : "Title"}
+                          </h1>
+                          <span className="text-sm text-thin-light-gray">
+                            {item.description ? item.description : ""}
+                          </span>
+                        </div>
+                      </div>
+                    </td>
+
+                    <td className="text-right py-4">
+                      <div className="flex space-x-1 items-center justify-center">
+                        <span className="text-base text-dark-gray dark:text-white font-medium">
+                          {item.added ? addedDate : ""}
+                        </span>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })
+            ) : null}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
 }
@@ -7,7 +7,7 @@ import FamilyDash from "./FamilyDash";
 import FullAccountDash from "./FullAccountDash";

 export default function Home(props) {
-  console.log("PROPS IN HOME->", props);
+ // console.log("PROPS IN HOME->", props);
  const userApi = new usersService();
  const { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);

@@ -1,8 +1,8 @@
 import React, { useEffect, useMemo, useState } from "react";
-import DataIteration from "../Helpers/DataIteration";
-import AvailableJobsCard from "../Cards/AvailableJobsCard";
-import ListView from "../../assets/images/list-view.png";
 import GridView from "../../assets/images/grid-view.svg";
+import ListView from "../../assets/images/list-view.png";
+import AvailableJobsCard from "../Cards/AvailableJobsCard";
+import DataIteration from "../Helpers/DataIteration";
 import SelectBox from "../Helpers/SelectBox";

 export default function MainSection({
@@ -125,10 +125,10 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
          <CloseIcon onClose={onClose} />
        </div>

-        <div className="md:flex bg-white rounded-lg">
+        <div className="md:flex bg-white dark:bg-dark-white text-slate-900 dark:text-white rounded-lg">
          <div className="p-4 w-full md:w-[75%] md:border-r-1">
            <div className="min-h-[263px]">
-              <h2 className="font-semibold text-slate-900 dark:text-black tracking-wide">
+              <h2 className="font-semibold text-slate-900 dark:text-white tracking-wide">
                {details?.title}
              </h2>

@@ -152,11 +152,11 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                },
              ].map(({ name, content, danger }, idx) => (
                <div className={`my-3 md:flex items-center`} key={idx}>
-                  <label className="w-full md:w-[19%] text-slate-900 tracking-wide font-semibold whitespace-pre-wrap">
+                  <label className="w-full md:w-[19%] tracking-wide font-semibold whitespace-pre-wrap">
                    {name}
                  </label>
                  <div
-                    className={`w-full md:w-3/4 text-slate-900 market-pop ${
+                    className={`w-full md:w-3/4 text-slate-900 dark:text-white market-pop ${
                      name !== "Delivery Detail"
                        ? " h-full max-h-28 flex items-center"
                        : " overflow-y-auto max-h-[100px]"
@@ -164,20 +164,20 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                  >
                    {danger ? (
                      <p
-                        className={``}
+                        className={`dark:text-white`}
                        dangerouslySetInnerHTML={{
                          __html: danger && content,
                        }}
                      />
                    ) : (
-                      <p className={`w-full text-slate-900`}>
+                      <p className={`w-full text-slate-900 dark:text-white`}>
                        {name !== "Delivery Detail" ? (
                          <>
                            {typeof content !== "object" ? content : null}
                            {typeof content === "object" && (
                              <>
                                <hr className="mb-1" />
-                                <span className="flex items-center gap-2">
+                                <span className="flex items-center gap-2 dark:text-white">
                                  {content?.text}
                                  <strong>{thePrice}</strong>
                                </span>
@@ -197,11 +197,11 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
            <hr />
            <div className="my-3 w-full flex flex-col gap-3">
              <div className="w-full">
-                <label className="w-full text-slate-900 tracking-wide">
+                <label className="w-full text-slate-900 dark:text-white tracking-wide">
                  If you have any questions about this task:
                </label>
                <textarea
-                  className={`p-1 w-full text-sm text-slate-900 outline-none border border-slate-300 rounded-md`}
+                  className={`p-1 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
                  rows="5"
                  style={{ resize: "none" }}
                  placeholder="Enter message here ..."
@@ -226,7 +226,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
          </div>

          <div className="w-full md:w-[23%] h-full ">
-            <div className="mx-auto bg-[#f1f8ff] p-4 rounded-md md:min-h-[498px] flex flex-col justify-between">
+            <div className="mx-auto bg-[#f1f8ff] dark:bg-[#C2C8D3] p-4 rounded-md md:min-h-[498px] flex flex-col justify-between">
              <div className="w-full flex flex-col justify-center py-4 gap-2">
                <p className="w-full text-slate-900 tracking-wide my-1">
                  Interested in the task?
@@ -261,7 +261,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                </>
              </div>

-              <div className="">
+              <div className="text-slate-900">
                <p className="flex items-center tracking-wide">
                  Interest: <b className="ml-1">{details.interest_count}</b>
                </p>
@@ -1,7 +1,7 @@
-import Layout from "../Partials/Layout";
-import MainSection from "./MainSection";
-import CommonHead from "../UserHeader/CommonHead";
 import { useSelector } from "react-redux";
+import Layout from "../Partials/Layout";
+import CommonHead from "../UserHeader/CommonHead";
+import MainSection from "./MainSection";

 export default function MarketPlace({ commonHeadData }) {
  let { jobLists } = useSelector((state) => state.jobLists);
@@ -20,4 +20,4 @@ export default function MarketPlace({ commonHeadData }) {
      </Layout>
    </>
  );
-}
+}
@@ -35,7 +35,11 @@ export default function ActiveJobMessage({ activeJobMesList }) {
                    <td>
                        <div className={`msg_box ${item.who}`}>
                            <div className="msg_header">{item.msg_date} {item.msg_firstname}</div>
+                            {item.msg_type == 'FILE' ?
+                            <a href='' className="p-2" dangerouslySetInnerHTML={{__html: item.message}}></a>
+                            :
                            <span className="p-2" dangerouslySetInnerHTML={{__html: item.message}}></span>
+                            }
                        </div>

                    </td>
@@ -1,13 +1,13 @@
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useSelector } from "react-redux";
-import Layout from "../Partials/Layout";
 import { useNavigate } from "react-router-dom";
-import ActiveJobMessage from "./ActiveJobMessage";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
-import CountDown from "../Helpers/CountDown";
-import IndexJobActions from "./JobActions/IndexJobActions";
-import ModalCom from "../Helpers/ModalCom";
 import { useReactToPrint } from "react-to-print";
+import CountDown from "../Helpers/CountDown";
+import ModalCom from "../Helpers/ModalCom";
+import Layout from "../Partials/Layout";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+import ActiveJobMessage from "./ActiveJobMessage";
+import IndexJobActions from "./JobActions/IndexJobActions";

 import usersService from "../../services/UsersService";

@@ -259,14 +259,17 @@ function ActiveJobs(props) {
            <button
              type="button"
              className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
-              onClick={() =>{
-                  if(props.details.pathname == '/manage-family'){
-                    navigate(props.details.pathname, {state: { ...props.details.accountDetails }}, { replace: true })
-                  }else{
-                    navigate(props.details.pathname, { replace: true })
-                  }
+              onClick={() => {
+                if (props.details.pathname == "/manage-family") {
+                  navigate(
+                    props.details.pathname,
+                    { state: { ...props.details.accountDetails } },
+                    { replace: true }
+                  );
+                } else {
+                  navigate(props.details.pathname, { replace: true });
                }
-              }
+              }}
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
@@ -367,15 +370,17 @@ function ActiveJobs(props) {
          {/* TEXTAREA SECTION */}
          <div className="mt-5">
            <div className="">
-              <div 
+              <div
                className="pl-7 my-2 flex items-center border-b border-slate-300 gap-3"
                // className='ml-7 flex justify-start items-center gap-3'
-                >
+              >
                <button
                  name="message"
                  onClick={(e) => setTab(e.target.name)}
                  className={`px-4 py-1 rounded-t-2xl ${
-                    tab == "message" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
+                    tab == "message"
+                      ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
+                      : "bg-white text-[#000] border-t-[2px]"
                  }`}
                >
                  Send Message
@@ -384,7 +389,9 @@ function ActiveJobs(props) {
                  name="files"
                  onClick={(e) => setTab(e.target.name)}
                  className={`px-4 py-1 rounded-t-2xl ${
-                    tab == "files" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
+                    tab == "files"
+                      ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
+                      : "bg-white text-[#000] border-t-[2px]"
                  }`}
                >
                  Send Files
@@ -471,7 +478,7 @@ function ActiveJobs(props) {
                  <button
                    onClick={sendFile}
                    type="button"
-                    className='btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer flex justify-center items-center'
+                    className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer flex justify-center items-center"
                  >
                    {requestStatus.loading ? (
                      <LoadingSpinner size="6" color="sky-blue" />
@@ -495,7 +502,7 @@ function ActiveJobs(props) {
                  <button
                    onClick={sendTaskMessage}
                    type="button"
-                    className='btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer'
+                    className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer"
                  >
                    {requestStatus.loading ? (
                      <LoadingSpinner size="6" color="sky-blue" />
@@ -26,7 +26,8 @@ const CouponPopup = ({ popUpHandler, data }) => {
        setStatusMsg({ error: "An error occurred" });
      else setStatusMsg({ success: res.data?.status_text });

-      dispatch(tableReload({ type: "COUPONTABLE" }));
+      // dispatch(tableReload({ type: "COUPONTABLE" }));
+      dispatch(tableReload({ type: "WALLETTABLE" }));
      setTimeout(() => {
        popUpHandler();
        setLoader(false);
@@ -7,7 +7,7 @@ import { useSelector } from "react-redux";

 export default function MyCoupons() {
  const apiCall = useMemo(() => new usersService(), []);
-  const {couponTable} = useSelector(state => state.tableReload)
+  const {couponTable, walletTable} = useSelector(state => state.tableReload)
  let [couponHistory, setCouponHistory] = useState({
    // FOR COUPON HISTORY
    loading: true,
@@ -38,7 +38,7 @@ export default function MyCoupons() {

  useEffect(() => {
    getCouponHistory();
-  }, [couponTable]);
+  }, [couponTable, walletTable]);

  return (
    <>
@@ -110,13 +110,13 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
    return (
      <tr
        key={index}
-        className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50"
+        className="bg-white dark:bg-dark-white  border-b dark:border-[#5356fb29] hover:bg-gray-50"
      >
        <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-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
-                <img src={localImgLoad(`images/taskbanners/${value.banner}`)} alt="data" className="w-full h-full rounded-full" />
+                <img src={localImgLoad(`images/taskbanners/${value.banner ? value.banner : 'default.jpg'}`)} alt="data" className="w-full h-full rounded-full" />
              </div>
              <div className="flex flex-col flex-[0.9]">
                <h1 className="font-bold text-xl text-dark-gray dark:text-white">
@@ -175,7 +175,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
            }}
            className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
          >
-            Manage
+            Assign
          </button>
        </td>
      </tr>
@@ -204,7 +204,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
      {MyJobList.loading ? (
        <LoadingSpinner size="16" color="sky-blue" />
      ) : (
-        <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
+        <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between min-h-[520px]">
          <table className="table-auto min-w-full text-sm text-left text-gray-500 dark:text-gray-400">
            <tbody>
              <>
@@ -6,6 +6,7 @@ import PendingJobsPopout from "../jobPopout/PendingJobsPopout";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import localImgLoad from "../../lib/localImgLoad";

+
 export default function MyPendingJobTable({ MyJobList, className }) {
  let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW

@@ -32,11 +33,6 @@ export default function MyPendingJobTable({ MyJobList, className }) {
        <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
          <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
            <tbody>
-              {/*<tr className="text-base text-thin-light-gray border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">*/}
-              {/*    <td className="py-4">All Product</td>*/}
-              {/*    <td className="py-4 text-right">.</td>*/}
-              {/*</tr>*/}
-
              {
                <>
                  {MyJobList &&
@@ -58,7 +54,7 @@ export default function MyPendingJobTable({ MyJobList, className }) {
                            <div className="flex space-x-2 items-center w-full">
                              <div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
                                <img
-                                  src={localImgLoad(`images/taskbanners/${value.banner}`)}
+                                  src={localImgLoad(`images/taskbanners/${value.banner || "default.jpg"}`)}
                                  alt="data"
                                  className="w-full h-full rounded-full"
                                />
@@ -3,13 +3,14 @@ import { Link } from "react-router-dom";
 import Layout from "../Partials/Layout";
 import CommonHead from "../UserHeader/CommonHead";
 import MyPendingJobTable from "./MyPendingJobTable";
+import LoadingSpinner from "../Spinners/LoadingSpinner";

 export default function MyPendingJobs(props) {
  const [selectTab, setValue] = useState("today");
  const filterHandler = (value) => {
    setValue(value);
  };
-  console.log("AMEYE LOC1", props.MyJobList);
+  // console.log("AMEYE LOC1", props.MyJobList);
  return (
    <Layout>
      <CommonHead
@@ -35,7 +36,13 @@ export default function MyPendingJobs(props) {
              ></div>
            </div>
          </div>
-          <MyPendingJobTable MyJobList={props.MyJobList} />
+          {props.MyJobList.loading ?
+          <div className="bg-white">
+            <LoadingSpinner size='16' color='sky-blue' height='min-h-[300px]' />
+          </div>
+          :
+          <MyPendingJobTable MyJobList={props.MyJobList.data} />
+          }
        </div>
      </div>
    </Layout>
@@ -136,6 +136,12 @@ function AddFundDollars(props) {
      return;
    }

+    if (Number(props.input) * 100 > Number(props.walletItem?.transfer_limit)) {
+      props.setInputError("Credit limit has been exceeded");
+      setTimeout(() => props.setInputError(""), 5000);
+      return;
+    }
+
    if (tab === "previous") {
      // To check if card is empty
      if (Object.keys(prevCardDetails).length === 0) {
@@ -255,7 +261,7 @@ function AddFundDollars(props) {

        {/* previous tab */}
        {tab === "previous" && (
-          <div className="p-4 previous-details w-full min-h-[16rem] flex flex-col">
+          <div className="p-4 previous-details w-full min-h-[16.5rem] flex flex-col">
            {payListCards.loading ? (
              <LoadingSpinner size="10" color="sky-blue" />
            ) : payListCards?.data?.length ? (
@@ -307,7 +313,7 @@ function AddFundDollars(props) {
        )}

        {tab === "new" && (
-          <div className="new-details w-full max-h-[23rem]">
+          <div className="new-details w-full max-h-[22rem]">
            <div className="w-full flex flex-col justify-between">
              <Formik
                initialValues={initialValues}
@@ -487,7 +493,7 @@ function AddFundDollars(props) {

                            {/* Postal Code and State */}
                            <div className="sm:grid gap-5 grid-cols-3 my-2">
-                              <div className="field w-full mb-6 xl:mb-0 col-span-1">
+                              <div className="field w-full xl:mb-0 col-span-1">
                                <InputCom
                                  fieldClass="px-6"
                                  spanTag="*"
@@ -521,9 +527,9 @@ function AddFundDollars(props) {
                        </div>
                      </div>

-                      <div className="md:px-8 md:pt-4 px-4 pt-2 add-fund-btn flex justify-end items-center gap-3">
+                      <div className="add-fund-btn flex justify-end items-center gap-2 mt-4">
                        <button
-                          className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center border-gradient text-base rounded-full"
+                          className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center text-base rounded-full"
                          onClick={handleClose}
                        >
                          Cancel
@@ -552,9 +558,9 @@ function AddFundDollars(props) {
      </div>

      {tab == "previous" && (
-        <div className="md:py-8 px-[38px] add-fund-btn flex justify-end items-center gap-4 py-4">
+        <div className="md:py-8 add-fund-btn flex justify-end items-center gap-2 py-4">
          <button
-            className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center border-gradient text-base rounded-full"
+            className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center text-base rounded-full"
            onClick={props.onClose}
          >
            Cancel
@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { useNavigate } from "react-router-dom";
 import usersService from "../../../services/UsersService";
 import Icons from "../../Helpers/Icons";
 import InputCom from "../../Helpers/Inputs/InputCom";
@@ -15,10 +14,9 @@ function AddFundPop({
  setConfirmCredit,
  walletItem,
 }) {
-  const navigate = useNavigate();
  const apiCall = new usersService();
  let countryWallet = walletItem?.country;
-  const { payment, currency } = _payment;
+  const { currency } = _payment;

  const [inputError, setInputError] = useState("");
  let __awaitComponent = confirmCredit.show.awaitConfirm;
@@ -44,6 +42,12 @@ function AddFundPop({
      return;
    }

+    if (Number(input) * 100 > Number(walletItem?.transfer_limit)) {
+      setInputError("Credit limit has been exceeded");
+      setTimeout(() => setInputError(""), 5000);
+      return;
+    }
+
    if (isNaN(input)) {
      setConfirmCredit((prev) => ({
        ...prev,
@@ -106,14 +110,14 @@ function AddFundPop({
              </h1>
              <div className="field w-full max-w-[250px]">
                <InputCom
-                  fieldClass="px-6"
+                  fieldClass="px-6 text-right"
                  type="text"
                  name="amount"
                  placeholder="0"
                  value={input}
                  inputHandler={handleChange}
                />
-                <p className="text-base text-red-500 h-5">
+                <p className="text-base text-red-500 italic h-5">
                  {inputError && inputError}
                </p>
              </div>
@@ -134,12 +138,12 @@ function AddFundPop({
              </div>
            )}

-            {countryWallet == "NG" && <div className="h-[18rem]"></div>}
+            {countryWallet == "NG" && <div className="h-[19rem]"></div>}

            {countryWallet == "NG" && (
              <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
                <button
-                  className="px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                  className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center bg-[#f5a430] text-black text-base rounded-full"
                  onClick={onClose}
                >
                  Cancel
@@ -17,7 +17,8 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
                >
                  {/* Success Icon for now */}
                  <div className="flex items-center w-full justify-center">
-                    {data?.result == "Charge success" ? (
+                    {data?.result == "Charge success" ||
+                    data?.status == "successful" ? (
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="100"
@@ -55,13 +56,15 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {

                  <div className={`flex items-center`}>
                    <h1 className="text-xl font-semibold text-dark-gray dark:text-white tracking-tighter my-1">
-                      {data?.result == "Charge success"
+                      {data?.result == "Charge success" ||
+                      data?.status == "successful"
                        ? "Credit was Successful!"
                        : "Credit was Unsuccessful"}
                    </h1>
                  </div>

-                  {data?.internal_return >= 0 ? (
+                  {data?.internal_return >= 0 &&
+                  data?.result !== "Charge failed" ? (
                    <>
                      <div className="flex items-center gap-8">
                        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
@@ -1,8 +1,8 @@
 import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";
 import React, { useState } from "react";
-import { useDispatch } from "react-redux";
-import { useNavigate } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
 import { toast } from "react-toastify";
+import debounce from "../../../hooks/debounce";
 import usersService from "../../../services/UsersService";
 import { tableReload } from "../../../store/TableReloads";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
@@ -99,7 +99,9 @@ function ConfirmAddFund({
      : __confirmData.card;

  const apiURL = new usersService();
-  const navigate = useNavigate();
+
+  const { userDetails } = useSelector((state) => state?.userDetails);
+
  const dispatch = useDispatch();

  const [requestStatus, setRequestStatus] = useState({
@@ -109,33 +111,49 @@ function ConfirmAddFund({
  });

  const config = {
-    public_key: process.env.REACT_APP_FLUTTERWAVE_APIKEY,
-    tx_ref: Date.now(),
+    public_key: __confirmData?.flutterwave_key,
+    tx_ref: __confirmData?.credit_reference,
    currency: "NGN",
+    amount: Number(__confirmData.amount),
    payment_options: "card,mobilemoney,ussd",
+    customer: {
+      email: userDetails.email,
+      phone_number: userDetails.phone,
+      name: `${userDetails.lastname} ${userDetails.firstname}`,
+    },
    customizations: {
      title: "WrenchBoard",
-      description: "Topup Payment",
-      logo: "https://st2.depositphotos.com/4403291/7418/v/450/depositphotos_74189661-stock-illustration-online-shop-log.jpg",
+      description: "Add Credit Payment",
+      logo: "https://www.wrenchboard.com/assets/images/wrench-500-500-icon.png",
    },
  };
-
+  //debugger;
  const fwConfig = {
    ...config,
    text: "Proceed",
    callback: (response) => {
-      onSuccessPayment();
-      closePaymentModal();
+      debouncedSuccessPayment(); //delays the call for 5 secs
+
+      setTimeout(() => {
+        closePaymentModal();
+        setConfirmCredit((prev) => ({
+          ...prev,
+          show: {
+            awaitConfirm: { loader: false, state: false },
+            acceptConfirm: { loader: false, state: true },
+          },
+          data: response,
+        }));
+      }, 1500);
    },
-    onClose: () => {},
  };

  const onSuccessPayment = () => {
    setRequestStatus({ message: "", loading: true, status: false });
-    const reqData = { amount: __confirmData?.account, currency: "NGN" };
-
+    const reqData = { tx_ref: __confirmData?.credit_reference };
+    console.log("**** onSuccessPayment **** THIS WAS REACHED");
    apiURL
-      .startTopUp(reqData)
+      .resultTopUp(reqData)
      .then((res) => {
        if (res.data.internal_return < 0) {
          setRequestStatus({
@@ -143,18 +161,9 @@ function ConfirmAddFund({
            loading: false,
            status: false,
          });
-          toast.success("Opps! something went wrong");
-        } else {
-          setRequestStatus({
-            message: "Topup successful",
-            loading: false,
-            status: true,
-          });
-          toast.success("Account Topup was successful");
-          setTimeout(() => {
-            navigate("/my-wallet", { replace: true });
-          }, 1000);
        }
+
+        return dispatch(tableReload({ type: "WALLETTABLE" }));
      })
      .catch((err) => {
        setRequestStatus({
@@ -162,10 +171,23 @@ function ConfirmAddFund({
          loading: false,
          status: false,
        });
+
+        setTimeout(() => {
+          setConfirmCredit((prev) => ({
+            ...prev,
+            show: {
+              awaitConfirm: { loader: false, state: false },
+              acceptConfirm: { loader: false, state: true },
+            },
+            data: err,
+          }));
+        }, 1500);
        toast.success("Opps! something went wrong");
      });
  };

+  const debouncedSuccessPayment = debounce(onSuccessPayment, 5000);
+
  const handlePrevCard = async () => {
    const { amount, credit_reference, currency } = __confirmData;
    const { card_uid } = __confirmCardDetails;
@@ -205,6 +227,7 @@ function ConfirmAddFund({
          },
          data: _response,
        }));
+        dispatch(tableReload({ type: "WALLETTABLE" }));
      }, 1500);
    } catch (error) {
      setConfirmCredit((prev) => ({
@@ -254,9 +277,8 @@ function ConfirmAddFund({
        }));
        return;
      }
-      
+
      setTimeout(() => {
-        dispatch(tableReload({ type: "WALLETTABLE" }));
        setConfirmCredit((prev) => ({
          ...prev,
          show: {
@@ -265,6 +287,7 @@ function ConfirmAddFund({
          },
          data: _response,
        }));
+        dispatch(tableReload({ type: "WALLETTABLE" }));
      }, 1500);
    } catch (error) {
      setConfirmCredit((prev) => ({
@@ -278,7 +301,16 @@ function ConfirmAddFund({
    }
  };

-  // console.log(confirmCredit?.data);
+  const getBack = () => {
+    setConfirmCredit((prev) => ({
+      ...prev,
+      show: {
+        awaitConfirm: { loader: false, state: false },
+        acceptConfirm: { loader: false, state: false },
+      },
+      data: {},
+    }));
+  };

  return (
    <div className="content-wrapper w-full h-[32rem]">
@@ -347,10 +379,10 @@ function ConfirmAddFund({
          <hr />
          <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
            <button
-              className="px-4 h-11 flex justify-center items-center border-gradient text-base rounded-full"
-              onClick={onClose}
+              className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center text-base rounded-full"
+              onClick={getBack}
            >
-              Cancel
+              Back
            </button>
            {__confirmCountry === "US" && (
              <button
@@ -1,54 +1,98 @@
-import React, { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { toast } from "react-toastify";
+import { useState } from "react";
+import { useDispatch } from "react-redux";
+import usersService from "../../../services/UsersService";
+import { tableReload } from "../../../store/TableReloads";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import ModalCom from "../../Helpers/ModalCom";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";

-import usersService from "../../../services/UsersService";
-
-function ConfirmNairaWithdraw({ payment, wallet, action, situation, state }) {
+function ConfirmNairaWithdraw({
+  payment,
+  wallet,
+  action,
+  situation,
+  state,
+  setShowNairaWithdraw,
+}) {
  const apiURL = new usersService();
-
-  const navigate = useNavigate();
+  const dispatch = useDispatch();

  let [requestStatus, setRequestStatus] = useState({
    message: "",
    loading: false,
    status: false,
  });
-  let [pageLoading, setPageLoading] = useState(true);
+
+  const [completeNairaWithdraw, setShowCompleteNairaWithdraw] = useState({
+    show: false,
+    load: false,
+    state: {},
+  }); // DETERMINES WHEN CONFIRM NAIRA WITHDRAWAL POPS UP

  //FUNCTION TO HANDLE SUBMIT
  const handleSubmit = () => {
    setRequestStatus({ message: "", loading: true, status: false });
+    setShowCompleteNairaWithdraw({ load: true });
    let reqData = {
      amount: Number(state.amount * 100),
      Fee: Number(state.fee),
-      recipient_uid: Number(state.details?.recipient_uid),
      wallet_uid: wallet.wallet_uid,
    };
+
+    if (state?.choice === "prev") {
+      reqData.recipient_uid = state.details?.recipient_uid;
+      reqData.mode = 100;
+    }
+
+    if (state?.choice === "new") {
+      reqData.account_no = state?.details?.accountNumber;
+      reqData.account_type = Number(state?.details?.accountType);
+      reqData.bank_uid = state?.details?.bank_uid;
+      reqData.country = state?.details?.country;
+      reqData.state = state?.details?.state;
+      reqData.city = state?.details?.city;
+      reqData.mode = 500;
+    }
+
    apiURL
      .sendMoney(reqData)
      .then((res) => {
        if (res.data.internal_return < 0) {
+          // if (res.data?.status_message?.toLowerCase().includes("limit")) {
+          //   setRequestStatus({
+          //     message: ,
+          //     loading: false,
+          //     status: false,
+          //   });
+          // }
+          return setTimeout(() => {
+            setRequestStatus({
+              message: "",
+              loading: false,
+              status: false,
+            });
+            setShowCompleteNairaWithdraw({
+              show: true,
+              load: false,
+              state: res.data,
+            });
+          }, 5000);
+        }
+
+        setTimeout(() => {
          setRequestStatus({
-            message: "Could not perform transaction",
+            message: "",
            loading: false,
            status: false,
          });
-          return;
-        }
-        setRequestStatus({
-          message: "transfer successful",
-          loading: false,
-          status: true,
-        });
-        toast.success("Transfer sucessful");
-        setTimeout(() => {
-          navigate("/my-wallet", { replace: true });
-          window.location.reload(true);
-        }, 1000);
+          setShowCompleteNairaWithdraw({
+            show: true,
+            load: false,
+            state: res.data,
+          });
+        }, 5000);
+        dispatch(tableReload({ type: "WALLETTABLE" }));
+        return;
      })
      .catch((error) => {
        setRequestStatus({
@@ -59,17 +103,26 @@ function ConfirmNairaWithdraw({ payment, wallet, action, situation, state }) {
      });
  };

-  console.log(state)
-
  return (
    <ModalCom action={action} 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">
        <div className="w-full">
          <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">
            <h2 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
-              {`Withdraw from ${wallet.description} Wallet : ${wallet.symbol}${(
-                wallet.amount * 0.01
-              ).toFixed(2)}`}
+              {completeNairaWithdraw.load ? (
+                "Confirming..."
+              ) : (
+                <>
+                  {" "}
+                  {completeNairaWithdraw.show
+                    ? completeNairaWithdraw?.state?.internal_return >= 0
+                      ? "Transfer Success"
+                      : "Transfer Error"
+                    : `Withdraw from ${wallet.description} Wallet : ${
+                        wallet.symbol
+                      }${(wallet.amount * 0.01).toFixed(2)}`}
+                </>
+              )}
            </h2>
            <button
              type="button"
@@ -99,100 +152,276 @@ function ConfirmNairaWithdraw({ payment, wallet, action, situation, state }) {
          </div>
          <hr />
          <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
-            <div className="px-4 md:px-8 py-4 add-fund-info">
-              <h2 className="my-2 text-slate-900 dark:text-white text-sm xl:text-xl font-medium">
-                {/* Confirm Withdraw to Account */}
-              </h2>
-              {/* AMOUNT */}
-              <div className="field w-full mb-3">
-                <InputCom
-                  fieldClass="px-6"
-                  label="Amount:"
-                  type="text"
-                  name="amount"
-                  value={state?.amount || ""}
-                  disable={true}
-                />
+            {completeNairaWithdraw.load ? (
+              <div className="h-[35rem] flex items-center justify-center">
+                <LoadingSpinner size="12" color="sky-blue" />
              </div>
+            ) : completeNairaWithdraw.show ? (
+              <div className="px-4 md:p-8 py-4 add-fund-info">
+                <div className="field w-full mb-3 min-h-[23rem]">
+                  <div className="flex items-center w-full justify-center mb-3">
+                    {completeNairaWithdraw.state?.sendmoney_message
+                      ?.toLowerCase()
+                      ?.includes("completed") ? (
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="100"
+                        height="100"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="green"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        className="feather feather-check-circle"
+                      >
+                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                      </svg>
+                    ) : (
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        width="100"
+                        height="100"
+                        stroke="red"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        className="feather feather-x-circle"
+                      >
+                        <circle cx="12" cy="12" r="10"></circle>
+                        <line x1="15" y1="9" x2="9" y2="15"></line>
+                        <line x1="9" y1="9" x2="15" y2="15"></line>
+                      </svg>
+                    )}
+                  </div>

-              {/* RECIPIENT ACC: */}
-              <div className="field w-full mb-3">
-                <InputCom
-                  fieldClass="px-6"
-                  label="Recipient Acc:"
-                  type="text"
-                  name="recipient"
-                  value={state?.details.recipient || ""}
-                  disable={true}
-                />
+                  {completeNairaWithdraw.state?.internal_return >= 0 ? (
+                    <>
+                      <div className={`flex items-center`}>
+                        <h1 className="text-xl font-semibold text-dark-gray dark:text-white tracking-tighter my-1">
+                          {completeNairaWithdraw.state?.sendmoney_message || ""}
+                        </h1>
+                      </div>
+                      <div className="flex items-center gap-8">
+                        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          Amount(
+                          {completeNairaWithdraw.state
+                            ?.terminatingcountrycode || ""}
+                          )
+                        </h1>
+                        <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          {Number(
+                            completeNairaWithdraw.state?.TerminatingAmount *
+                              0.01
+                          ).toLocaleString() || ""}
+                        </span>
+                      </div>
+                      <div className="flex items-center gap-8">
+                        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          Recipient
+                        </h1>
+                        <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          {completeNairaWithdraw.state?.recitient}
+                        </span>
+                      </div>
+                      <div className="flex items-center gap-8">
+                        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          Confirmation Number
+                        </h1>
+                        <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          {completeNairaWithdraw.state?.confirmation}
+                        </span>
+                      </div>{" "}
+                    </>
+                  ) : (
+                    <>
+                      <div className={`flex items-center`}>
+                        <h1 className="text-xl font-semibold text-dark-gray dark:text-white tracking-tighter my-1">
+                          {completeNairaWithdraw.state?.status_message
+                            ?.toLowerCase()
+                            .includes("not_found")
+                            ? "Wallet Error Occurred"
+                            : completeNairaWithdraw.state?.status_message
+                                ?.toLowerCase()
+                                .includes("recipient_add_error")
+                            ? "Recipient Error Occurred"
+                            : completeNairaWithdraw.state?.status_message
+                                ?.toLowerCase()
+                                .includes("limit")
+                            ? "Transfer limit Error"
+                            : completeNairaWithdraw.state?.bad_param
+                                ?.toLowerCase()
+                                .includes("balance")
+                            ? "Insufficient Balance"
+                            : "An Error Occurred"}{" "}
+                        </h1>
+                      </div>
+                      <div className="flex items-center gap-8">
+                        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          Message:
+                        </h1>
+                        <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          {completeNairaWithdraw.state?.status_message
+                            ?.toLowerCase()
+                            .includes("not_found")
+                            ? "This Wallet is not Found"
+                            : completeNairaWithdraw.state?.status_message
+                                ?.toLowerCase()
+                                .includes("recipient_add_error")
+                            ? "No Recipient Found"
+                            : completeNairaWithdraw.state?.status_message
+                                ?.toLowerCase()
+                                .includes("limit")
+                            ? "The transfer limit has been exceeded"
+                            : completeNairaWithdraw.state?.bad_param
+                                ?.toLowerCase()
+                                .includes("balance")
+                            ? "Insufficient Balance for Transaction"
+                            : "Could not perform transaction"}
+                        </span>
+                      </div>
+                    </>
+                  )}
+                </div>
              </div>
+            ) : (
+              <div className="px-4 md:px-8 py-4 add-fund-info">
+                <h2 className="my-2 text-slate-900 dark:text-white text-sm xl:text-xl font-medium">
+                  {/* Confirm Withdraw to Account */}
+                </h2>
+                {/* AMOUNT */}
+                <div className="field w-full mb-3">
+                  <InputCom
+                    fieldClass="px-6"
+                    label="Amount:"
+                    type="text"
+                    name="amount"
+                    value={state?.amount || ""}
+                    disable={true}
+                  />
+                </div>

-              {/* PROCESSING FEE: */}
-              <div className="field w-full mb-3">
-                <InputCom
-                  fieldClass="px-6"
-                  label="Processing Fee:"
-                  type="text"
-                  name="processingFee"
-                  value={(state?.fee * 0.01).toFixed(2) || ""}
-                  disable={true}
-                />
+                {state?.choice === "prev" && (
+                  <>
+                    {/* RECIPIENT ACC: */}
+                    <div className="field w-full mb-3">
+                      <InputCom
+                        fieldClass="px-6"
+                        label="Recipient Acc:"
+                        type="text"
+                        name="recipient"
+                        value={state?.details?.recipient || ""}
+                        disable={true}
+                      />
+                    </div>
+                  </>
+                )}
+
+                {state?.choice === "new" && (
+                  <>
+                    {/* RECIPIENT ACC: */}
+                    <div className="field w-full mb-3">
+                      <InputCom
+                        fieldClass="px-6"
+                        label="Bank Acc:"
+                        type="text"
+                        name="bank"
+                        value={
+                          `${state?.details?.name} ${state?.details?.country}` ||
+                          ""
+                        }
+                        disable={true}
+                      />
+                    </div>
+                  </>
+                )}
+
+                {/* PROCESSING FEE: */}
+                <div className="field w-full mb-3">
+                  <InputCom
+                    fieldClass="px-6"
+                    label="Processing Fee:"
+                    type="text"
+                    name="processingFee"
+                    value={(state?.fee * 0.01).toFixed(2) || ""}
+                    disable={true}
+                  />
+                </div>
+
+                {/* TOTAL */}
+                <div className="field w-full mb-3">
+                  <InputCom
+                    fieldClass="px-6"
+                    label="Total"
+                    type="text"
+                    name="total"
+                    value={(state?.total * 0.01).toFixed(2) || ""}
+                    disable={true}
+                  />
+                </div>
+
+                {/* COMMENT/NOTE */}
+                <div className="field w-full mb-3">
+                  <InputCom
+                    fieldClass="px-6"
+                    label="Comment/Note:"
+                    type="text"
+                    name="comment"
+                    value={state?.comment || ""}
+                    disable={true}
+                  />
+                </div>
              </div>
-
-              {/* TOTAL */}
-              <div className="field w-full mb-3">
-                <InputCom
-                  fieldClass="px-6"
-                  label="Total"
-                  type="text"
-                  name="total"
-                  value={(state?.total * 0.01).toFixed(2) || ""}
-                  disable={true}
-                />
-              </div>
-
-              {/* COMMENT/NOTE */}
-              <div className="field w-full mb-3">
-                <InputCom
-                  fieldClass="px-6"
-                  label="Comment/Note:"
-                  type="text"
-                  name="comment"
-                  value={state?.comment || ""}
-                  disable={true}
-                />
-              </div>
-            </div>
-
-            <hr />
-            {requestStatus.message && (
-              <p
-                className={`text-base ${
-                  requestStatus.status ? "text-green-500" : "text-red-500"
-                } px-4 md:px-8 py-4`}
-              >
-                {requestStatus.message}
-              </p>
            )}
-            <div className="px-4 md:px-8 py-4 add-fund-btn flex justify-end items-center gap-2">
-              <button
-                type="button"
-                onClick={action}
-                className="border-gradient text-base tracking-wide px-4 py-2 rounded-full"
-              >
-                <span className="text-gradient">Cancel</span>
-              </button>
-              {requestStatus.loading ? (
-                <LoadingSpinner size="8" color="sky-blue" />
-              ) : (
-                <button
-                  onClick={handleSubmit}
-                  className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer"
+
+            {!completeNairaWithdraw.load && (
+              <>
+                {" "}
+                <hr />
+                <p
+                  className={`text-base ${
+                    requestStatus.status ? "text-green-500" : "text-red-500"
+                  } px-4 md:px-8 py-4 h-5`}
                >
-                  Transfer
-                </button>
-              )}
-            </div>
+                  {requestStatus.message && requestStatus.message}
+                </p>
+                <div className="px-4 md:px-8 py-4 add-fund-btn flex justify-end items-center gap-2">
+                  {!completeNairaWithdraw.show && (
+                    <button
+                      type="button"
+                      onClick={action}
+                      className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center bg-[#f5a430] text-black text-base rounded-full"
+                    >
+                      Cancel
+                    </button>
+                  )}
+
+                  <button
+                    onClick={
+                      completeNairaWithdraw.show
+                        ? action
+                        : completeNairaWithdraw?.state?.internal_return < 0
+                        ? action
+                        : handleSubmit
+                    }
+                    className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer min-w-[100px]"
+                  >
+                    {requestStatus.loading ? (
+                      <LoadingSpinner size="6" color="sky-blue" />
+                    ) : completeNairaWithdraw.show ? (
+                      "Okay"
+                    ) : completeNairaWithdraw?.state?.internal_return < 0 ? (
+                      "Cancel"
+                    ) : (
+                      "Transfer"
+                    )}
+                  </button>
+                </div>
+              </>
+            )}
          </div>
        </div>
      </div>
@@ -60,14 +60,6 @@ function ConfirmTransfer({ payment, wallet }) {
      });
  };

-  useEffect(() => {
-    // what happens if not state redirect user
-    if (!state) {
-      navigate("/my-wallet/transfer-fund", { replace: true });
-    } else {
-      setPageLoading(false);
-    }
-  }, []);
  return (
    <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
      {pageLoading ? (
@@ -25,7 +25,10 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
        <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-26 font-bold text-dark-gray dark:text-white tracking-wide">
            {confirmCredit?.show?.acceptConfirm?.state &&
-            confirmCredit?.data?.internal_return < 0 ? (
+            (confirmCredit?.data?.internal_return < 0 
+              // ||
+              // confirmCredit?.data?.status !== "successful"
+              ) ? (
              "Credit Unsuccessful"
            ) : (
              <>
@@ -1,37 +1,37 @@
 import { Form, Formik } from "formik";
 import React, { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import ModalCom from "../../Helpers/ModalCom";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";

-const initialValues = {
-  amount: "",
-  comment: "",
-  previousAccount: {
-    recipientID: "",
-  },
-  newAccount: {
-    country: "",
-    bank: "",
-    accountNumber: "",
-    accountType: "",
-    state: "",
-    city: "",
-  },
-};
-
 function NairaWithdraw({
  wallet,
  action,
  situation,
+  state,
  setShowConfirmNairaWithdraw,
 }) {
-  const apiCall = new usersService(); // API CLASS CALL
-  const navigate = useNavigate();
+  const apiCall = new usersService();
  const [tab, setTab] = useState("previous");
  let [requestStatus, setRequestStatus] = useState(false);
+
+  const initialValues = {
+    amount: state?.amount || "",
+    comment: state?.comment || "",
+    previousAccount: {
+      recipientID: state?.previousAccount?.recipientID || "",
+    },
+    newAccount: {
+      country: state?.newAccount?.amount || "",
+      bank: state?.newAccount?.amount || "",
+      accountNumber: state?.newAccount?.amount || "",
+      accountType: state?.newAccount?.amount || "",
+      state: state?.newAccount?.amount || "",
+      city: state?.newAccount?.amount || "",
+    },
+  };
+
  const [errorMsgs, setErrorMsgs] = useState(initialValues);

  let [sendMoneyFee, setSendMoneyFee] = useState({
@@ -65,7 +65,7 @@ function NairaWithdraw({

  // Handling card change
  const handleBankOptions = (event) => {
-    const { name, value } = event.target;
+    const { value } = event.target;
    setBankName((prev) => ({ loading: true, data: [] }));
    apiCall
      .getCountryBank({ country: value })
@@ -167,15 +167,16 @@ function NairaWithdraw({
  //FUNCTION TO HANDLE SUBMIT
  const handleSubmit = async (values, helpers) => {
    try {
-      // Validate the form using Yup validation schema
-      // await validationSchema.validate(values, { abortEarly: false });
-      // If validation passes, proceed with form submission
-      console.log("Form data is valid!", values);
      if (!values?.amount) {
-        setErrorMsgs({ amount: "Please enter an amount" });
-        setTimeout(() => setErrorMsgs({ amount: "" }), 1000);
+        setErrorMsgs({ amount: "amount required" });
+        setTimeout(() => setErrorMsgs({ amount: "" }), 3000);
+        return;
+      } else if (Number(values.amount * 100) > Number(wallet?.transfer_limit)) {
+        setErrorMsgs({ amount: "Withdraw limit has been exceeded" });
+        setTimeout(() => setErrorMsgs({ amount: "" }), 3000);
        return;
      }
+
      if (values?.comment?.length >= 50) {
        setErrorMsgs({ comment: "50 chars max" });
        setTimeout(() => setErrorMsgs({ comment: "" }), 1000);
@@ -210,12 +211,13 @@ function NairaWithdraw({
        const stateData = {
          amount: values.amount,
          comment: values.comment,
-          wallet_uid: wallet.wallet_uid,  
+          choice: "prev",
+          wallet_uid: wallet.wallet_uid,
          ...sendMoneyFee,
          details: { ...recipientDetails[0] },
        };

-        setTimeout(() => {
+        return setTimeout(() => {
          setRequestStatus(false);
          // navigate("confirm-withdraw-naira", { state: stateData });
          action();
@@ -226,11 +228,50 @@ function NairaWithdraw({
      if (tab === "new") {
        const { accountNumber, accountType, bank, city, country, state } =
          values?.newAccount;
+
+        if (
+          !accountNumber ||
+          !accountType ||
+          !bank ||
+          !city ||
+          !country ||
+          !state
+        ) {
+          return;
+        }
+
+        setRequestStatus(true);
+
+        // Ensure bankDetails is an array and not undefined
+        const bankDetails = bankName.data?.filter(
+          (item) => item.bank_uid === bank
+        );
+
+        // Ensure bankDetails is not empty
+        if (!bankDetails || bankDetails.length === 0) {
+          // Handle the case when bankDetails is empty or undefined
+          setRequestStatus(false);
+          return;
+        }
+
+        const stateData = {
+          amount: values.amount,
+          comment: values.comment,
+          choice: "new",
+          wallet_uid: wallet.wallet_uid,
+          ...sendMoneyFee,
+          details: { ...bankDetails[0], ...values?.newAccount },
+        };
+
+        return setTimeout(() => {
+          setRequestStatus(false);
+          action();
+          setShowConfirmNairaWithdraw({ show: true, state: stateData });
+        }, 1000);
      }
    } catch (errors) {
      // If validation fails, handle the validation errors
      throw new Error("Validation errors:", errors);
-      //
    }
  };

@@ -275,11 +316,7 @@ function NairaWithdraw({
            </button>
          </div>
          <div className="add-fund w-full md:p-8 p-4 bg-white dark:bg-dark-white h-full rounded-2xl">
-            <Formik
-              initialValues={initialValues}
-              // validationSchema={validationSchema}
-              onSubmit={handleSubmit}
-            >
+            <Formik initialValues={initialValues} onSubmit={handleSubmit}>
              {(props) => {
                return (
                  <Form className="transfer-fund-info">
@@ -287,26 +324,21 @@ function NairaWithdraw({
                    <div className="flex flex-col">
                      <div className="field w-full">
                        <InputCom
-                          fieldClass="px-4"
+                          fieldClass="px-4 text-end"
                          parentClass="flex items-center gap-1 justify-between"
-                          labelClass="flex-[0.2] mb-0"
-                          inputClass="flex-[0.8] max-w-[12rem]"
+                          labelClass="flex-[0.4] mb-0"
+                          inputClass="flex-[0.6] max-w-[12rem]"
                          label="Amount:"
                          type="number"
                          name="amount"
                          placeholder="0"
-                          direction="rtl"
                          value={props.values.amount}
                          inputHandler={props.handleChange}
                          blurHandler={(e) => {
                            getSendMoneyFee(e);
                          }}
+                          error={errorMsgs.amount && errorMsgs.amount}
                        />
-                        {errorMsgs?.amount && (
-                          <p className="sm:text-sm text-[12px] text-red-500 sm:text-left text-right sm:translate-y-0 translate-y-1">
-                            {errorMsgs.amount}
-                          </p>
-                        )}
                      </div>

                      <div className="field w-full">
@@ -416,7 +448,7 @@ function NairaWithdraw({
                                {/* <label className="text-[#181c32] dark:text-white text-base font-semibold block flex-[0.2] mb-0 mt-3"></label> */}
                                <div className="flex flex-col gap-3 flex-[0.8] items-center">
                                  <select
-                                    className="sm:w-full w-48 text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0 flex-[0.8]"
+                                    className="sm:w-full w-48 text-dark-gray border-slate-300 outline-0 flex-[0.8] my-3 rounded-full p-2 outline-none text-base dark:text-gray-100 bg-[#FAFAFA] dark:bg-[#11131F] border appearance-none"
                                    value={
                                      props.values.previousAccount?.recipientID
                                    }
@@ -441,7 +473,7 @@ function NairaWithdraw({
                                            ?.recipientID
                                            ? errorMsgs.previousAccount
                                                .recipientID
-                                            : "Select..."}
+                                            : "Select an account"}
                                        </option>
                                        {recipients.data.map((item, index) => (
                                          <option
@@ -485,7 +517,7 @@ function NairaWithdraw({
                              </div>
                            </div>
                          </div>
-                          <div className="h-[7.6rem]"></div>
+                          <div className="h-[6.1rem]"></div>
                        </>
                      )}

@@ -503,12 +535,13 @@ function NairaWithdraw({
                                  <span className="text-red-500">*</span>
                                </label>
                                <select
-                                  className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding"
+                                  className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding tracking-[1.5px]"
                                  name="newAccount.country"
                                  value={props.values.newAccount?.country}
-                                  onChange={
-                                    props.handleChange || handleBankOptions
-                                  }
+                                  onChange={(e) => {
+                                    props.handleChange(e);
+                                    handleBankOptions(e);
+                                  }}
                                >
                                  {allCountries.loading ? (
                                    <option
@@ -558,7 +591,7 @@ function NairaWithdraw({
                              <div className="add-recipient w-full flex items-center flex-1">
                                <label
                                  htmlFor="newAccount.bank"
-                                  className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.4]"
+                                  className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.4] tracking-[1.5px]"
                                >
                                  Bank Name{" "}
                                  <span className="text-red-500">*</span>
@@ -589,7 +622,7 @@ function NairaWithdraw({
                                        <option
                                          key={index}
                                          className="text-slate-500 text-lg"
-                                          value={item.code}
+                                          value={item.bank_uid}
                                        >
                                          {item.name}
                                        </option>
@@ -600,7 +633,9 @@ function NairaWithdraw({
                                      className="text-slate-500 text-lg"
                                      value=""
                                    >
-                                      No Options Found!
+                                      {allCountries.data?.length
+                                        ? "Select..."
+                                        : "No Options Found!"}
                                    </option>
                                  )}
                                </select>
@@ -623,11 +658,12 @@ function NairaWithdraw({
                                  <span className="text-red-500">*</span>
                                </label>
                                <InputCom
-                                  fieldClass="px-6"
+                                  fieldClass="px-6 tracking-[1.5px]"
                                  inputClass="flex items-center max-w-[15rem]"
                                  type="text"
                                  name="newAccount.accountNumber"
                                  placeholder="Account No"
+                                  maxLength={10}
                                  value={props.values.newAccount?.accountNumber}
                                  inputHandler={props.handleChange}
                                  blurHandler={props.handleBlur}
@@ -649,7 +685,7 @@ function NairaWithdraw({
                                  Type <span className="text-red-500">*</span>
                                </label>
                                <select
-                                  className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding flex-grow"
+                                  className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding flex-grow tracking-[1.5px]"
                                  name="newAccount.accountType"
                                  value={props.values.newAccount?.accountType}
                                  onChange={props.handleChange}
@@ -708,7 +744,7 @@ function NairaWithdraw({
                                  State <span className="text-red-500">*</span>
                                </label>
                                <InputCom
-                                  fieldClass="px-6"
+                                  fieldClass="px-6 tracking-[1.5px]"
                                  inputClass="max-w-[10rem]"
                                  type="text"
                                  name="newAccount.state"
@@ -733,7 +769,7 @@ function NairaWithdraw({
                                  City <span className="text-red-500">*</span>
                                </label>
                                <InputCom
-                                  fieldClass="px-6"
+                                  fieldClass="px-6 tracking-[1.5px]"
                                  type="text"
                                  inputClass="max-w-[10rem]"
                                  name="newAccount.city"
@@ -760,9 +796,9 @@ function NairaWithdraw({
                      <button
                        type="button"
                        onClick={action}
-                        className="border-gradient text-base tracking-wide px-4 py-2 rounded-full"
+                        className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center text-base rounded-full"
                      >
-                        <span className="text-gradient">Cancel</span>
+                        Cancel
                      </button>

                      <button
@@ -1,53 +1,23 @@
-import React, {
-  Suspense,
-  lazy,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
+import React, { Suspense, lazy, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import usersService from "../../services/UsersService";
 import Layout from "../Partials/Layout";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 const WalletBox = lazy(() => import("./WalletBox"));

+
 const WalletRoutes = () => {
-  const apiCall = useMemo(() => new usersService(), []);
+  const apiCall = new usersService();
+  const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
  const { walletTable } = useSelector((state) => state.tableReload);
-  const [walletList, setWalletList] = useState({
-    loading: true,
-    data: [],
-    reload: false,
-  });
+
  const [paymentHistory, setPaymentHistory] = useState({
    loading: true,
    data: [],
  });

-  const getWalletList = useCallback(() => {
-    return apiCall
-      .getUserWallets()
-      .then((res) => {
-        if (res.data.internal_return < 0) {
-          setWalletList({ loading: false, data: [] });
-        } else {
-          setWalletList({ loading: true, data: [] });
-
-          setTimeout(
-            () =>
-              setWalletList({ loading: false, data: res.data?.result_list }),
-            500
-          );
-        }
-      })
-      .catch(() => {
-        setWalletList({ loading: false, data: [] });
-      });
-  }, [apiCall]);
-
-  const getPaymentHistory = useCallback(() => {
-    return apiCall
+  const getPaymentHistory = () => {
+    apiCall
      .getPaymentHx()
      .then((res) => {
        if (res.data.internal_return < 0) {
@@ -59,23 +29,16 @@ const WalletRoutes = () => {
      .catch(() => {
        setPaymentHistory({ loading: false, data: [] });
      });
-  }, [apiCall]);
+  };

  useEffect(() => {
-    const fetchData = async () => {
-      await Promise.all([getWalletList(), getPaymentHistory()]);
-    };
+    getPaymentHistory();
+  }, [walletTable]);

-    if (walletList.loading) {
-      fetchData();
-    }
-  }, [walletTable, walletList.loading]);
-
-  console.log(walletTable);
  return (
    <Layout>
      <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
-        <WalletBox wallet={walletList} payment={paymentHistory} />
+        <WalletBox wallet={walletDetails} payment={paymentHistory} />
      </Suspense>
    </Layout>
  );
@@ -1,40 +1,25 @@
 import React, { useCallback, useState } from "react";
+import usersService from "../../services/UsersService";
 import ConfirmNairaWithdraw from "./Popup/ConfirmNairaWithdraw";
 import NairaWithdraw from "./Popup/NairaWithdraw";
-import usersService from "../../services/UsersService";

 function WalletAction({ walletItem, payment, openPopUp }) {
-  const [showNairaWithdraw, setShowNairaWithdraw] = useState(false); // DETERMINES WHEN NAIRA WITHDRAWAL POPS UP
-  const [countries, setCountries] = useState([]);
+  const [showNairaWithdraw, setShowNairaWithdraw] = useState({
+    show: false,
+    state: {},
+  }); // DETERMINES WHEN NAIRA WITHDRAWAL POPS UP
+  
  const [showConfirmNairaWithdraw, setShowConfirmNairaWithdraw] = useState({
    show: false,
    state: {},
  }); // DETERMINES WHEN CONFIRM NAIRA WITHDRAWAL POPS UP

-  const userApi = new usersService();
-
-  // Get Country Api
-  const getCountryList = useCallback(async () => {
-    const res = await userApi.getSignupCountryData();
-
-    try {
-      if (res.status === 200) {
-        const { signup_country } = await res.data;
-        setCountries(signup_country);
-      } else if (res.data.result !== 100) {
-        setCountries("Nothing see here!");
-      }
-    } catch (error) {
-      throw new Error(error);
-    }
-  }, []);
-
  return (
    <div className="counters w-full flex justify-between gap-2">
      <div className="w-1/2 flex justify-center items-center">
        <button
          onClick={() => {
-            setShowNairaWithdraw(true);
+            setShowNairaWithdraw((prev) => ({ ...prev, show: true }));
          }}
          className={`${
            walletItem.code != "NAIRA" && "invisible"
@@ -57,13 +42,17 @@ function WalletAction({ walletItem, payment, openPopUp }) {
        </button>
      </div>

-      {showNairaWithdraw && (
+      {showNairaWithdraw.show && (
        <NairaWithdraw
          wallet={walletItem}
          action={() => {
-            setShowNairaWithdraw((prev) => !prev);
+            setShowNairaWithdraw((prev) => ({
+              ...prev,
+              show: !prev.show,
+            }));
          }}
-          situation={showNairaWithdraw}
+          situation={showNairaWithdraw.show}
+          state={showNairaWithdraw.state}
          setShowConfirmNairaWithdraw={setShowConfirmNairaWithdraw}
        />
      )}
@@ -78,6 +67,7 @@ function WalletAction({ walletItem, payment, openPopUp }) {
              show: !prev.show,
            }));
          }}
+          setShowNairaWithdraw={setShowNairaWithdraw}
          situation={showConfirmNairaWithdraw.show}
        />
      )}
@@ -13,7 +13,7 @@ export default function WalletBox({ wallet, payment }) {
              </div>
            ) : wallet.data.length ? (
              wallet.data.map((item, index) => (
-                <div className="lg:w-full h-full mb-10 lg:mb-0">
+                <div key={item.wallet_uid} className="lg:w-full h-full mb-10 lg:mb-0">
                  <WalletItemCard walletItem={item} payment={payment} />
                </div>
              ))
@@ -41,8 +41,8 @@ export default function WalletHeader(props) {
          <div className="content px-7 pb-7">
            <ul>
              {props.myWalletList &&
-                props.myWalletList?.result_list?.length > 0 &&
-                props.myWalletList.result_list.map((value, index) => 
+                props.myWalletList?.length > 0 &&
+                props.myWalletList.map((value, index) => 
                {
                  let image = value.code ? `${value.code.toLocaleLowerCase()}.svg` : 'default.png'
                  return(
@@ -35,7 +35,6 @@ export default function Notification() {
  const indexOfLastItem = Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
  const currentNotifications = notificationData?.slice(indexOfFirstItem, indexOfLastItem);
  
-  console.log('TESTING', currentNotifications)
  const filterHandler = (value) => {
    setValue(value);
    switch(value){
@@ -1,10 +1,10 @@
 import React, { useContext, useEffect, useMemo, useState } from "react";
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import bank1 from "../../assets/images/bank-1.png";
 import bank2 from "../../assets/images/bank-2.png";
 import bank3 from "../../assets/images/bank-3.png";
 import bank4 from "../../assets/images/bank-4.png";
-import profileImg from "../../assets/images/profile-pic.jpg";
+import profileImg from "../../assets/images/profile.jpg";
 import useToggle from "../../hooks/useToggle";
 import usersService from "../../services/UsersService";
 import DarkModeContext from "../Contexts/DarkModeContext";
@@ -14,11 +14,12 @@ import WalletHeader from "../MyWallet/WalletHeader";

 import { useDispatch, useSelector } from "react-redux";
 import Flag from "../../assets/images/united-states.svg";
-import siteLogo from "../../assets/images/wrenchboard.png";
-import formattedDate from "../../lib/fomattedDate";
-import { updateNotifications } from "../../store/notifications";
+import siteLogo from "../../assets/images/wrenchboard-logo-text.png";
+// import { updateWalletDetails } from "../../store/walletDetails";
 import TimeDifference from "../Helpers/TimeDifference";

+const DEFAULT_PROFILE_IMAGE = require("../../assets/images/profile.jpg");
+
 export default function Header({ logoutModalHandler, sidebarHandler }) {
  const [balanceDropdown, setbalanceValue] = useToggle(false);
  const [notificationDropdown, setNotificationValue] = useToggle(false);
@@ -26,24 +27,14 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
  const [moneyPopup, setPopup] = useToggle(false);
  const darkMode = useContext(DarkModeContext);
  const { userDetails } = useSelector((state) => state?.userDetails);
+  const { walletTable } = useSelector((state) => state.tableReload); // DETERMINES WHEN WALLET RELOADS
  const [myWalletList, setMyWalletList] = useState([]);
  const api = useMemo(() => new usersService(), []);
  const dispatch = useDispatch();
+  const navigate = useNavigate();

  const { notifications } = useSelector((state) => state?.notifications); // NOTIFICATION STORE
-
-  const getMyWalletList = async () => {
-    try {
-      const res = await api.getUserWallets(null);
-      console.log("wallet - > ", res.data);
-      setMyWalletList(res.data);
-    } catch (error) {
-      console.log("Error getting mode");
-    }
-  };
-  useEffect(() => {
-    getMyWalletList();
-  }, []);
+  const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE

  const handlerBalance = () => {
    setbalanceValue.toggle();
@@ -98,10 +89,9 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
  };

  // User Profile
-  let { firstname, lastname, email, profile_pic } = userDetails;
+  let { firstname, lastname, email, profile_pic_url } = userDetails;
  let userEmail = email?.split("@")[0];
-
-  // console.log("Notify: ", notifications?.data?.raw);
+  const userProfileImage = profile_pic_url || DEFAULT_PROFILE_IMAGE;

  return (
    <>
@@ -239,7 +229,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {

            {/*<div className="lg:hidden block"></div>*/}
            <WalletHeader
-              myWalletList={myWalletList}
+              myWalletList={walletDetails.data}
              handlerBalance={handlerBalance}
              balanceDropdown={balanceDropdown}
              addMoneyHandler={addMoneyHandler}
@@ -253,9 +243,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
              >
                <Icons name="notification" />
                <span className="absolute right-2 top-2 z-10 text-xs lg:w-5 lg:h-5 w-4 h-4 flex justify-center items-center rounded-full primary-gradient text-white cursor-default">
-                  {notifications?.loading
-                    ? "●"
-                    : notifications?.data?.length}
+                  {notifications?.loading ? "●" : notifications?.data?.length}
                </span>
              </div>
              <div
@@ -271,55 +259,59 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {

                <div className="content px-7 pb-7">
                  <ul>
-                    {notifications?.data?.length && notifications?.data?.map((item, idx) => 
-                    {
-                      if(idx < 5){
-                      return (
-                        <li
-                          className={`content-item ${
-                            idx == 4
-                              ? "py-5 "
-                              : "py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple"
-                          }`}
-                          key={idx}
-                        >
-                          <div className="notifications flex space-x-4 items-center">
-                            <div className="icon max-w-[52px] max-h-[52px] w-full h-full rounded-full object-cover">
-                              <img
-                                src={require(`../../assets/images/notifications/${item?.icon}`)}
-                                alt="icon"
-                                className="w-full h-full"
-                              />
-                            </div>
-                            <div className="name">
-                              <p className="text-base text-dark-gray dark:text-white font-medium mb-2">
-                                {item?.title}
-                                {/* <span className="ml-1 font-bold">
+                    {notifications?.data?.length &&
+                      notifications?.data?.map((item, idx) => {
+                        if (idx < 5) {
+                          return (
+                            <li
+                              className={`content-item ${
+                                idx == 4
+                                  ? "py-5 "
+                                  : "py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple"
+                              }`}
+                              key={idx}
+                            >
+                              <div className="notifications flex space-x-4 items-center">
+                                <div className="icon max-w-[52px] max-h-[52px] w-full h-full rounded-full object-cover">
+                                  <img
+                                    src={require(`../../assets/images/notifications/${item?.icon}`)}
+                                    alt="icon"
+                                    className="w-full h-full"
+                                  />
+                                </div>
+                                <div className="name">
+                                  <p className="text-base text-dark-gray dark:text-white font-medium mb-2">
+                                    {item?.title}
+                                    {/* <span className="ml-1 font-bold">
                                successfully done
                              </span> */}
-                              </p>
-                              <p className="text-sm text-thin-light-gray font-medium">
-                                <TimeDifference
-                                  time={item?.date}
-                                  key={item?.uid}
-                                />
-                              </p>
-                            </div>
-                          </div>
-                        </li>
-                      )
-                      }
-                    })
-                    }
+                                  </p>
+                                  <p className="text-sm text-thin-light-gray font-medium">
+                                    <TimeDifference
+                                      time={item?.date}
+                                      key={item?.uid}
+                                    />
+                                  </p>
+                                </div>
+                              </div>
+                            </li>
+                          );
+                        }
+                      })}
                  </ul>

                  <div className="add-money-btn flex justify-center items-center">
                    <Link
                      to="/notification"
                      className="text-purple text-sm font-medium"
+                      onClick={handlerNotification}
                    >
                      See all Notification
                    </Link>
+                    {/* <button className="text-purple text-sm font-medium" onClick={()=>{
+                      handlerNotification()
+                      navigate('/notification', {replace: true})
+                    }}>See all Notification</button> */}
                  </div>
                </div>
              </div>
@@ -344,9 +336,9 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                {/* profile-image */}
                <div className="lg:w-[62px] lg:h-[62px] w-[50px] h-[50px] rounded-full overflow-hidden">
                  <img
-                    src={profile_pic != "" ? profile_pic : profileImg}
+                    src={userProfileImage}
                    alt="profile"
-                    className="w-full h-full"
+                    className="w-full h-full object-cover"
                  />
                </div>
                <div className="lg:block hidden">
@@ -368,7 +360,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                  <img
                    src={profileImg}
                    alt="profile"
-                    className="w-full h-full"
+                    className="w-full h-full object-cover object-center"
                  />
                </div>
              </div>
@@ -62,7 +62,7 @@ export default function Layout({ children }) {
              drawer
                ? "2xl:w-[335px] w-[280px] 2xl:pl-20 pl-10 pr-6 "
                : "w-[70px]"
-            } bg-white dark:bg-dark-white   h-full overflow-y-scroll overflow-style-none fixed left-0 top-0 pt-8`}
+            } bg-white dark:bg-dark-white   h-full overflow-y-scroll overflow-style-none fixed left-0 top-0 pt-[30px]`}
          >
            <Sidebar
              logoutModalHandler={logoutModalHandler}
@@ -4,7 +4,7 @@ import { NavLink } from "react-router-dom";
 import {
  default as logo,
  default as logo3,
-} from "../../assets/images/wrenchboard.png"; //logo-2.svg";
+} from "../../assets/images/wrenchboard-logo-text.png"; //logo-2.svg";
 import DarkModeContext from "../Contexts/DarkModeContext";
 import Icons from "../Helpers/Icons";

--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
victorAnumudu	7e99e7ccab	QR value updated	2023-09-10 05:19:19 +01:00
ameye	fd9adb1c08	Merge branch 'QR-value' of WrenchBoard/Users-Wrench into master	2023-09-09 21:15:23 +00:00
victorAnumudu	7f2448efff	family QR scan value changed	2023-09-09 21:29:24 +01:00
ameye	82ec224d66	Merge branch 'Recent-Activities' of WrenchBoard/Users-Wrench into master	2023-09-09 06:07:32 +00:00
Ebube	35ea200de5	change btn type to submit	2023-09-09 07:00:18 +01:00
ameye	7cdd387045	Merge branch 'resource_upload' of WrenchBoard/Users-Wrench into master	2023-09-08 19:54:33 +00:00
ameye	6b568ff56c	Merge branch 'Recent-Activities' of WrenchBoard/Users-Wrench into master	2023-09-08 19:54:23 +00:00
ameye	8808a2f81c	Merge branch 'twitter-logos-added' of WrenchBoard/Users-Wrench into master	2023-09-08 19:54:17 +00:00
Ebube	1991bab675	added active animations for job list popup	2023-09-07 16:53:16 +01:00
victorAnumudu	f650097db2	implemented resource video and pdf upload	2023-09-07 12:21:05 +01:00
Ebube	c427521ac3	dark mode styles added	2023-09-05 09:51:54 +01:00
victorAnumudu	2412059fd0	added new twitter logo in image folder	2023-09-05 06:36:43 +01:00
ameye	34dc467e8b	Merge branch 'Recent-Activities' of WrenchBoard/Users-Wrench into master	2023-09-04 14:37:01 +00:00
Ebube	9fa16278ab	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into Recent-Activities	2023-09-04 14:31:54 +01:00
Ebube	cae02d1dc6	.	2023-09-04 14:31:28 +01:00
ameye	abbd7b3993	Merge branch 'add-job-bug' of WrenchBoard/Users-Wrench into master	2023-09-04 12:44:22 +00:00
victorAnumudu	5523511524	Add Job Bug fixed	2023-09-04 10:49:04 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	35db8ca7ec	activities	2023-09-03 17:57:14 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	51e0482a16	Hoe activities	2023-09-03 16:34:19 -04:00
ameye	a615e25fcb	Merge branch 'resources-tab-visibility' of WrenchBoard/Users-Wrench into master	2023-09-03 13:01:03 +00:00
victorAnumudu	addede388e	made resources tab visible if enabled	2023-09-03 06:26:19 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	76474bb3b5	invite	2023-09-02 16:37:29 -04:00
tokslaw	6337c82374	Merge branch 'coupon-wallet-reload' of WrenchBoard/Users-Wrench into master	2023-08-29 16:57:03 +00:00
victorAnumudu	a970411719	made wallet to reload on coupon redeem	2023-08-29 09:47:35 +01:00
ameye	10967acf9e	Merge branch 'my-uploads-page' of WrenchBoard/Users-Wrench into master	2023-08-22 10:58:13 +00:00
Ebube	fb6831d44f	An Optimized version	2023-08-21 23:28:32 +01:00
Ebube	7dcae39320	BUG - Assign Job with less than amount	2023-08-21 22:41:21 +01:00
ameye	a0ba60a2bc	Merge branch 'flutter_key_removal' of WrenchBoard/Users-Wrench into master	2023-08-21 13:12:38 +00:00
victorAnumudu	f377326b48	removed flutter api key from env variables	2023-08-21 11:38:51 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	feb8bd718d	all status	2023-08-20 17:07:25 -04:00
ameye	a2a2dbfc24	Merge branch 'my-uploads-page' of WrenchBoard/Users-Wrench into master	2023-08-18 10:46:24 +00:00
Ebube	1c0cb6c97f	added the session parameter	2023-08-15 21:02:51 +01:00
ameye	41c9c60fd1	Merge branch 'terms-of-use-update' of WrenchBoard/Users-Wrench into master	2023-08-15 11:45:12 +00:00
victorAnumudu	ba5646fe2c	Merge master into terms-of-use-update	2023-08-13 07:59:40 +01:00
victorAnumudu	1f9ab45206	updated terms of use	2023-08-13 07:58:37 +01:00
tolik	0ffa1123d2	Hide Apple button	2023-08-13 10:56:42 +08:00
ameye	9420a201e4	Merge branch 'image-anchor-added' of WrenchBoard/Users-Wrench into master	2023-08-11 18:59:57 +00:00
ameye	1b7ea7321e	Merge branch 'my-uploads-page' of WrenchBoard/Users-Wrench into master	2023-08-11 18:59:50 +00:00
victorAnumudu	b3e273d712	file messages wrapped with anthor	2023-08-11 19:37:01 +01:00
Ebube	7fa74d6fd3	added img	2023-08-11 18:13:34 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	02c195500a	myfiles	2023-08-11 12:11:31 -04:00
ameye	ca8e56c6dd	Merge branch 'cancel-popout-removed' of WrenchBoard/Users-Wrench into master	2023-08-10 22:42:31 +00:00
victorAnumudu	c265e9db33	popout removed	2023-08-10 22:06:30 +01:00
ameye	2861473ea3	Merge branch 'cancel-upload' of WrenchBoard/Users-Wrench into master	2023-08-10 19:41:46 +00:00
victorAnumudu	a598aa3898	on cancel, takes user back to my item	2023-08-10 12:51:54 +01:00
ameye	9d190916a8	Merge branch 'wallet-styles' of WrenchBoard/Users-Wrench into master	2023-08-09 21:14:17 +00:00
Ebube	eca9455f0f	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into wallet-styles	2023-08-09 22:00:11 +01:00
Ebube	a1bf0bad0f	added uploaded files	2023-08-09 21:59:46 +01:00
ameye	e236ad20f7	Merge branch 'upload-payload-fix' of WrenchBoard/Users-Wrench into master	2023-08-09 20:36:46 +00:00
victorAnumudu	330f47baa7	updated upload payloads	2023-08-09 21:23:51 +01:00
ameye	5088aa3ead	Merge branch 'bug-fix' of WrenchBoard/Users-Wrench into master	2023-08-09 19:52:37 +00:00
victorAnumudu	07a443d082	file upload size validation initiated	2023-08-09 20:28:19 +01:00
victorAnumudu	59a370d763	enforces user upload supported file before proceeding to upload	2023-08-09 19:34:35 +01:00
victorAnumudu	68e709f34b	list of supported uploads add	2023-08-09 18:19:34 +01:00
victorAnumudu	b1bb730c7d	made file name in upload not to have spaces	2023-08-09 17:01:38 +01:00
ameye	20a86f4802	Merge branch 'upload-action' of WrenchBoard/Users-Wrench into master	2023-08-09 14:28:05 +00:00
victorAnumudu	2d918517f8	upload action implemented	2023-08-09 12:52:46 +01:00
tolik	a0c0cbdc98	Merge branch 'master' of ssh://gitlab.chiefsoft.net:10222/WrenchBoard/Users-Wrench	2023-08-09 10:39:47 +08:00
tolik	ed309007e5	Implemented Facebook login	2023-08-09 10:39:37 +08:00
ameye	594c072806	Merge branch 'add-item-btn-moved' of WrenchBoard/Users-Wrench into master	2023-08-09 01:13:02 +00:00
victorAnumudu	4b9289cb8e	bug fix	2023-08-08 22:15:09 +01:00
victorAnumudu	5b39e75119	Add item button moved down	2023-08-08 22:06:44 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	e61b2c8f43	my files page	2023-08-08 08:55:12 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	4c6952c4b3	Page format	2023-08-08 08:23:48 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	6a5cebed5b	Upload new item	2023-08-08 08:16:32 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	663e3e8bb7	fix text	2023-08-08 08:15:26 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	aaa5b9e8ff	Resource Upload My Files	2023-08-08 06:38:03 -04:00
ameye	90ec033b34	Merge branch 'wallet-styles' of WrenchBoard/Users-Wrench into master	2023-08-07 16:22:27 +00:00
Ebube	c3c359cfc8	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into wallet-styles	2023-08-07 16:27:26 +01:00
Ebube	68b4031752	added online_name	2023-08-07 16:26:25 +01:00
ameye	8a2559571f	Merge branch 'wallet-styles' of WrenchBoard/Users-Wrench into master	2023-08-07 08:50:16 +00:00
ameye	ccae5000ee	Merge branch 'reset-pwd-validation' of WrenchBoard/Users-Wrench into master	2023-08-07 08:50:12 +00:00
Ebube	5f01cb14f9	updated payload	2023-08-07 08:10:51 +01:00
Ebube	9f62345a2e	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into wallet-styles	2023-08-06 23:46:26 +01:00
Ebube	b9096117bc	updateprofile payload updated	2023-08-06 23:46:03 +01:00
victorAnumudu	f70659901c	valid pwd text added	2023-08-06 21:15:18 +01:00
tolik	451e4624b1	Merge branch 'master' of ssh://gitlab.chiefsoft.net:10222/WrenchBoard/Users-Wrench	2023-08-06 10:14:17 +08:00
tolik	1557ba1040	Fix crash	2023-08-06 10:13:15 +08:00
ameye	7133ad8de3	Merge branch 'reset-pwd-icon' of WrenchBoard/Users-Wrench into master	2023-08-05 16:33:25 +00:00
victorAnumudu	9fd8944987	pwd validation msg changed	2023-08-05 16:52:20 +01:00
victorAnumudu	874276dcba	reset pwd icons added	2023-08-05 16:35:23 +01:00
ameye	be1454f1b8	Merge branch 'reset-pwd-second-phase' of WrenchBoard/Users-Wrench into master	2023-08-05 14:16:16 +00:00
victorAnumudu	6a34ca6c18	reser pwd second phase implemented	2023-08-05 15:12:46 +01:00
ameye	fc09771b8d	Merge branch 'password-reset-first-stage' of WrenchBoard/Users-Wrench into master	2023-08-05 07:16:30 +00:00
victorAnumudu	cab5ed0ece	password reset first phase done	2023-08-05 05:41:46 +01:00
ameye	8d3dca96b4	Merge branch 'logo-sizing-and-alignment' of WrenchBoard/Users-Wrench into master	2023-08-04 14:26:23 +00:00
ameye	e71a25630d	Merge branch 'wallet-styles' of WrenchBoard/Users-Wrench into master	2023-08-04 14:26:14 +00:00
Ebube	cf79a15837	size in dollar acc	2023-08-04 13:53:49 +01:00
victorAnumudu	042e8c2c17	site logo size reduced and aligned	2023-08-04 13:50:59 +01:00
Ebube	46d286e8f3	size again	2023-08-04 13:49:11 +01:00
Ebube	c2bfcc81ea	adjusted size	2023-08-04 13:46:43 +01:00
Ebube	654ed3741c	added cancel btn style in withdraw	2023-08-04 13:41:53 +01:00
Ebube	6cccd1c372	changed font-color of naira withdraw cancel btn	2023-08-04 13:39:09 +01:00
Ebube	1e6be76449	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into wallet-styles	2023-08-04 13:29:39 +01:00
Ebube	476ca04f5f	Added profile img	2023-08-04 13:29:14 +01:00
ameye	ce41db474d	Merge branch 'wallet-styles' of WrenchBoard/Users-Wrench into master	2023-08-04 02:32:07 +00:00
Ebube	7ace7e5b5d	Added btn styles the of the credit and withdraw popup	2023-08-04 03:18:51 +01:00
ameye	51e829f7b4	Merge branch 'wallet-styles' of WrenchBoard/Users-Wrench into master	2023-08-01 19:53:51 +00:00
Ebube	173b2adc66	css fixes for uniform btn	2023-08-01 19:50:52 +01:00
ameye	31cb7a521d	Merge branch 'pending-job-refresh' of WrenchBoard/Users-Wrench into master	2023-08-01 18:40:10 +00:00
ameye	ad4f68b252	Merge branch 'tx_ref-change' of WrenchBoard/Users-Wrench into master	2023-08-01 18:39:53 +00:00
victorAnumudu	10abf35d4f	refreshes pending Job when expiry date is extended	2023-08-01 18:42:18 +01:00
Ebube	ce767086fd	BUG - Flutter wave key	2023-08-01 18:36:47 +01:00
ameye	0f44616767	Merge branch 'request-message-changed' of WrenchBoard/Users-Wrench into master	2023-08-01 15:18:07 +00:00
victorAnumudu	bce00b5c0e	request message changed	2023-08-01 16:10:56 +01:00
ameye	312cd54f87	Merge branch 'pending-wrong-assign' of WrenchBoard/Users-Wrench into master	2023-08-01 14:47:44 +00:00
victorAnumudu	a0c3437eae	pending assign value changed	2023-08-01 15:42:28 +01:00
ameye	711226f913	Merge branch 'tx_ref-change' of WrenchBoard/Users-Wrench into master	2023-08-01 11:07:16 +00:00
Ebube	f46c6232b0	updated error scenario for the modal header	2023-08-01 12:05:27 +01:00
Ebube	172f0ccbce	cleanup 2	2023-08-01 11:46:33 +01:00
Ebube	a2047cc2de	clean up	2023-08-01 11:41:57 +01:00
Ebube	6ea52e6481	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into tx_ref-change	2023-08-01 11:38:26 +01:00
Ebube	a7bbcfdc1b	complete popup fixed	2023-08-01 11:37:56 +01:00
ameye	ff28be3e70	Merge branch 'tx_ref-change' of WrenchBoard/Users-Wrench into master	2023-08-01 09:24:46 +00:00
Ebube	e91b4a4424	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into tx_ref-change	2023-07-31 23:58:36 +01:00
Ebube	9960033b72	debounced success payment and and fixed credit refresh	2023-07-31 23:55:23 +01:00
ameye	ef135f1a9b	Merge branch 'tx_ref-change' of WrenchBoard/Users-Wrench into master	2023-07-31 17:56:15 +00:00
Ebube	1df6380c4a	Correct Drop Down Style for naira withdrawal	2023-07-31 15:09:12 +01:00
Ebube	fc8cf551e5	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into tx_ref-change	2023-07-31 14:47:15 +01:00
Ebube	b1feb0438a	still testing	2023-07-31 14:46:29 +01:00
ameye	a89649f774	Merge branch 'amount-alignment' of WrenchBoard/Users-Wrench into master	2023-07-31 13:36:56 +00:00
victorAnumudu	b96e8a3ed5	Merged master into amount-alignment	2023-07-31 14:23:57 +01:00
victorAnumudu	f3226a6cfc	amount alignment changed	2023-07-31 14:22:55 +01:00
ameye	ff4c503100	Merge branch 'tx_ref-change' of WrenchBoard/Users-Wrench into master	2023-07-31 12:04:22 +00:00
Ebube	f543a2d893	testing topupResult	2023-07-31 13:02:31 +01:00
ameye	41badd52be	Merge branch 'list-alignment-fix' of WrenchBoard/Users-Wrench into master	2023-07-30 16:29:28 +00:00
victorAnumudu	eeddd4e0a5	list alignment fixed	2023-07-30 06:10:44 +01:00
tokslaw	ee4d136834	wrenchboard-logo-text + image added	2023-07-29 19:04:08 -04:00
tokslaw	283efa42b3	social comment added	2023-07-29 12:16:57 -04:00
tokslaw	5cbab4933c	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench	2023-07-29 12:13:14 -04:00
ameye	4de2181c18	Merge branch 'family-login-no-captcha' of WrenchBoard/Users-Wrench into master	2023-07-29 15:45:31 +00:00
ameye	c8f0161a29	Merge branch 'tx_ref-change' of WrenchBoard/Users-Wrench into master	2023-07-29 15:45:26 +00:00
tokslaw	60222b6d88	text error correction	2023-07-29 11:11:23 -04:00
victorAnumudu	9ea3963239	family login captcha removed	2023-07-29 12:25:25 +01:00
Ebube	a87592623b	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into tx_ref-change	2023-07-29 07:01:22 +01:00
Ebube	bfcf53f763	Not selected should appear not selected	2023-07-29 07:00:50 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	df4489c6f2	removed start top up	2023-07-29 00:09:59 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	37185812b4	Result added	2023-07-28 16:55:45 -04:00
ameye	eb3e78244d	Merge branch 'tx_ref-change' of WrenchBoard/Users-Wrench into master	2023-07-28 13:25:00 +00:00
Ebube	b302d7ba57	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into tx_ref-change	2023-07-28 14:22:18 +01:00
ameye	d6c16169d9	Merge branch 'Family-Tabs-Size-Fix' of WrenchBoard/Users-Wrench into master	2023-07-28 13:18:31 +00:00
Ebube	57129da0bd	changed tx_ref number	2023-07-28 13:58:10 +01:00
Ebube	9eaf7123d4	reverse	2023-07-28 13:56:23 +01:00
Ebube	096da29149	Changed tx_ref no	2023-07-28 13:51:48 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	c8331c51cf	removed debugger	2023-07-28 08:20:04 -04:00
tokslaw	3b7618702b	env text-spell error	2023-07-27 17:04:57 -04:00
Ebube	84968b4435	balance refresh bug for withdraw	2023-07-27 16:28:21 +01:00
Ebube	98f11a3d80	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into Family-Tabs-Size-Fix	2023-07-27 16:18:29 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	98d734e869	Post data	2023-07-27 11:17:15 -04:00
Ebube	47004fec8c	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into Family-Tabs-Size-Fix	2023-07-27 16:05:17 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	48ce89489e	console log	2023-07-27 11:04:01 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	1ce05a3be3	add fund page	2023-07-27 11:01:22 -04:00
Ebube	28ab1116e9	Added Credit Limit & Pending Jobs Bug & removed reload for credit	2023-07-27 11:34:27 +01:00
ameye	994060d929	Merge branch 'Family-Tabs-Size-Fix' of WrenchBoard/Users-Wrench into master	2023-07-26 15:57:24 +00:00
Ebube	a5c62564b7	Fixed tasks banner breaking	2023-07-26 16:54:31 +01:00
Ebube	22e61d2b41	Enforced send limit	2023-07-26 15:49:04 +01:00
ameye	6ab5eae0c0	Merge branch 'email-input-size' of WrenchBoard/Users-Wrench into master	2023-07-26 14:26:05 +00:00
victorAnumudu	3fbb47ee82	email input character size increased	2023-07-26 14:39:16 +01:00
ameye	3327b2b0df	Merge branch 'Family-Tabs-Size-Fix' of WrenchBoard/Users-Wrench into master	2023-07-25 20:13:46 +00:00
Ebube	ec204d0389	.	2023-07-25 20:50:56 +01:00
Ebube	cb1259d2c8	Added loading height	2023-07-25 20:46:46 +01:00
Ebube	706cf141e7	Add Result Page	2023-07-25 20:26:33 +01:00
ameye	2229ebb9a0	Merge branch 'Family-Tabs-Size-Fix' of WrenchBoard/Users-Wrench into master	2023-07-25 11:17:32 +00:00
Ebube	05022c29b2	Remove the cause for the login error	2023-07-25 12:12:49 +01:00
ameye	9718cfc574	Merge branch 'job-listing-bug' of WrenchBoard/Users-Wrench into master	2023-07-25 10:39:59 +00:00
ameye	aef082ac60	Merge branch 'Family-Tabs-Size-Fix' of WrenchBoard/Users-Wrench into master	2023-07-25 10:39:45 +00:00
victorAnumudu	754340fcba	Merged master into job-listing-bug	2023-07-25 10:14:29 +01:00
Ebube	16afd4f90c	Family Tab Sizes Fixed	2023-07-25 08:53:04 +01:00
ameye	b69e2ff53b	Merge branch 'blog-page' of WrenchBoard/Users-Wrench into master	2023-07-24 19:29:08 +00:00
victorAnumudu	4ac799f8c9	links to blog page added	2023-07-24 20:06:25 +01:00
ameye	c93d3b61a6	Merge branch 'resource-ask-question' of WrenchBoard/Users-Wrench into master	2023-07-24 16:31:16 +00:00
ameye	4fb6dbf30f	Merge branch 'my_wallet_layout' of WrenchBoard/Users-Wrench into master	2023-07-24 16:31:10 +00:00
victorAnumudu	11dc8fc659	resource ask question implemented	2023-07-24 15:34:29 +01:00
Ebube	4876ba80c1	Changed name to back	2023-07-24 15:07:22 +01:00
Ebube	71f799d157	Checked Errors in Wallet Page and made some tiny fixes	2023-07-24 15:01:03 +01:00
ameye	77c538ca79	Merge branch 'balance-refresh' of WrenchBoard/Users-Wrench into master	2023-07-24 11:07:41 +00:00
victorAnumudu	6b473b5dc6	wallet refresh	2023-07-24 11:58:09 +01:00
ameye	6aa11793a5	Merge branch 'my_wallet_layout' of WrenchBoard/Users-Wrench into master	2023-07-24 10:14:18 +00:00
victorAnumudu	e098eb4626	job listing pagination bug fixed	2023-07-24 07:46:41 +01:00
Ebube	4f8edc3998	Improved solution for the credit refresh bug	2023-07-24 06:28:48 +01:00
Ebube	7dd805b804	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into my_wallet_layout	2023-07-24 06:15:43 +01:00
Ebube	2aa1219ea9	updated payload for new account	2023-07-24 06:15:22 +01:00
ameye	c1a17949f7	Merge branch 'my_wallet_layout' of WrenchBoard/Users-Wrench into master	2023-07-23 23:40:59 +00:00
Ebube	24302c7435	Added New Login	2023-07-23 23:59:20 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	27f4fda129	Added images	2023-07-23 07:47:54 -04:00
ameye	7ddef6d52d	Merge branch 'notification-menu-close' of WrenchBoard/Users-Wrench into master	2023-07-23 10:20:40 +00:00
victorAnumudu	187ac61396	logged information removed	2023-07-23 07:18:56 +01:00
victorAnumudu	31297efb5b	closes notification menu when see all notifications is clicked	2023-07-23 07:15:25 +01:00
ameye	f8d6475ff8	Merge branch 'my_wallet_layout' of WrenchBoard/Users-Wrench into master	2023-07-22 23:21:04 +00:00
Ebube	22a45ac15e	Added some fixes	2023-07-23 00:12:26 +01:00
ameye	0489be5e69	Merge branch 'notifications' of WrenchBoard/Users-Wrench into master	2023-07-22 22:44:03 +00:00
				`@@ -0,0 +1 @@`
				`{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}`
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="error"><path fill="#ff1d25" d="M29.75,25.73,18.68,3.59a3,3,0,0,0-4-1.33,3.05,3.05,0,0,0-1.33,1.33L2.25,25.73a3,3,0,0,0,2.68,4.34H27.07a3,3,0,0,0,3-3A2.88,2.88,0,0,0,29.75,25.73ZM16,25.38a.94.94,0,1,1,.94-.94A.94.94,0,0,1,16,25.38Zm.94-4.69a.94.94,0,1,1-1.88,0V11.31a.94.94,0,1,1,1.88,0Z"></path></svg>`
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" id="files"><circle cx="64" cy="64" r="64" fill="#EF4C45"></circle><path fill="#CD2E30" d="M128 64v-2L92.4 26.5l-63.1 74 27.2 27c2.4.3 4.9.4 7.4.4C99.3 128 128 99.3 128 64z"></path><path fill="#E5E8EC" d="M93.5 78.4V29c0-1.9-1.5-3.4-3.4-3.4H41.8c-1.9 0-3.4 1.5-3.4 3.4v49.4h55.1z"></path><path fill="#FFF" d="M89.5 78.4V44.6H78.1c-1.9 0-3.4-1.5-3.4-3.4V29.9H37.8c-1.9 0-3.4 1.5-3.4 3.4v45.1h55.1z"></path><path fill="#FFCC04" d="m79.3 65.9-1.5 4c-.5 1.2-1.6 2-2.9 2H53.1c-1.3 0-2.4-.8-2.9-2l-1.5-4c-.5-1.3-1.7-2.2-3.1-2.2H30.9c-1.9 0-3.4 1.5-3.4 3.4v28.8c0 3.5 2.9 6.4 6.4 6.4H94c3.5 0 6.4-2.9 6.4-6.4V67.1c0-1.9-1.5-3.4-3.4-3.4H82.5c-1.4 0-2.7.9-3.2 2.2z"></path><path fill="#CED4DF" d="m74.9 45.8-.1-.1.1.1z"></path><path fill="#22D2FC" d="M74.7 29.9v11.4c0 1.9 1.5 3.4 3.4 3.4h11.4L74.7 29.9z"></path><path fill="#FFF" d="M74.1 81.6H53.9c-2 0-3.7 1.6-3.7 3.7 0 2 1.6 3.7 3.7 3.7h20.2c2 0 3.7-1.6 3.7-3.7 0-2-1.7-3.7-3.7-3.7z"></path></svg>