Merge master into notifications

# Conflicts:
#	src/middleware/AuthRoute.jsx

.env

@@ -68,6 +68,8 @@ REACT_APP_APPLE_REDIRECT_URL='http://localhost:9082/login/auth/apple'
 REACT_APP_MAX_FILE_SIZE=1000000
 REACT_APP_TOTAL_NUM_FILE=4
 
+REACT_APP_LOGOUT_TEXT="Sign Out"
+
 
 #apigate.lotus.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227

.env.development

@@ -41,4 +41,6 @@ REACT_APP_GOOGLE_CLIENT_SCOPE="https://www.googleapis.com/auth/plus.login https:
 REACT_APP_GOOGLE_REDIRECT_URL=http://localhost:9082/login/auth/
 
 REACT_APP_MAX_FILE_SIZE=1000000
-REACT_APP_TOTAL_NUM_FILE=4
+REACT_APP_TOTAL_NUM_FILE=4
+
+REACT_APP_LOGOUT_TEXT="Sign Out"

.env.production

@@ -48,4 +48,6 @@ REACT_APP_FACEBOOK_REDIRECT_URL="https://users.wrenchboard.com/login/auth/flogin
 DISABLE_ESLINT_PLUGIN=true
 
 REACT_APP_MAX_FILE_SIZE=1000000
-REACT_APP_TOTAL_NUM_FILE=4
+REACT_APP_TOTAL_NUM_FILE=4
+
+REACT_APP_LOGOUT_TEXT="Sign Out"

src/assets/images/icons/bank.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1792 1792" id="Bank"><path d="m896 78.526 896 358.4v119.466h-119.467q0 24.267-19.133 42-19.133 17.734-45.267 17.734H183.867q-26.134 0-45.267-17.734-19.133-17.733-19.133-42H0V436.926ZM238.933 675.859h238.934v716.8h119.466v-716.8h238.934v716.8h119.466v-716.8h238.934v716.8h119.466v-716.8h238.934v716.8h55.066q26.134 0 45.267 17.733 19.133 17.734 19.133 42v59.734H119.467v-59.734q0-24.266 19.133-42 19.133-17.733 45.267-17.733h55.066v-716.8zm1488.667 896q26.133 0 45.267 17.733 19.133 17.734 19.133 42v119.467H0v-119.467q0-24.266 19.133-42 19.134-17.733 45.267-17.733h1663.2z" fill="#4687ba" class="color000000 svgShape"></path></svg>

src/assets/images/notifications/alert.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 128 128" viewBox="0 0 128 128" id="Alert"><path fill="#f34093" d="M122.9,100.2L74.3,15.9c-4.6-7.9-16-7.9-20.6,0L5.1,100.2C0.5,108.1,6.2,118,15.4,118h97.3
+		C121.8,118,127.5,108.1,122.9,100.2z M63.9,101c-3.5-0.1-6.7-3.3-6.6-6.8c0.1-3.5,3.3-6.7,6.8-6.6c3.5,0.1,6.7,3.3,6.6,6.8
+		C70.6,98,67.4,101.1,63.9,101z M71.3,51.8c-0.7,7.8-1.5,15.6-2.3,23.4c-0.5,4.4-3.2,6.1-7.3,4.5c-1-0.4-2-2-2.2-3.2
+		C58.6,70,58,63.4,57.3,56.8c-0.3-2.8-0.5-5.6-0.8-8.5c-0.4-3.3,0.6-4.5,4-4.5c1.1,0,2.3,0,3.4,0C72,43.8,72,43.8,71.3,51.8z" class="color343433 svgShape"></path></svg>

src/assets/images/notifications/message.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="Messages"><path fill="#4687ba" d="m447.372 413.112-17.544-52.629c-1-3.002-.674-6.23.775-9.043 13.184-25.615 18.629-55.858 12.925-87.736-8.746-48.868-44.53-89.475-90.943-105.048 11.976 28.924 15.628 61.084 9.645 92.984-12.155 64.837-64.074 116.246-129.191 127.924-8.429 1.512-16.945 2.248-25.396 2.463 19.776 21.336 46.173 36.503 75.619 41.784 31.682 5.682 61.784.393 87.322-12.594 2.802-1.425 6.007-1.742 8.99-.748l52.83 17.61c9.251 3.084 18.052-5.716 14.968-14.967z" class="color173042 svgShape"></path><path fill="#4687ba" d="M177.161 85.744C122.283 95.941 78.306 140.526 68.472 195.47c-5.704 31.878-.259 62.121 12.925 87.736 1.449 2.813 1.775 6.041.776 9.043l-17.545 52.629c-3.083 9.251 5.717 18.051 14.968 14.968l52.83-17.61c2.984-.994 6.19-.677 8.991.748 25.537 12.987 55.638 18.276 87.321 12.594 54.809-9.829 99.281-53.698 109.541-108.428 18.078-96.414-64.733-179.316-161.118-161.406zm34.938 177.536h-68.234c-6.73 0-12.185-5.454-12.185-12.185 0-6.73 5.455-12.185 12.185-12.185h68.234c6.731 0 12.185 5.455 12.185 12.185 0 6.731-5.454 12.185-12.185 12.185zm48.739-48.739H143.864c-6.73 0-12.185-5.454-12.185-12.185 0-6.73 5.455-12.185 12.185-12.185h116.973c6.731 0 12.185 5.455 12.185 12.185.001 6.731-5.453 12.185-12.184 12.185z" class="color173042 svgShape"></path></svg>

src/assets/images/notifications/phone.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="phone" x="0" y="0" version="1.1" viewBox="0 0 29 29" xml:space="preserve"><path d="M5.661 23.339c4.882 4.882 12.796 4.882 17.678 0 4.882-4.882 4.882-12.796 0-17.678s-12.796-4.882-17.678 0C.78 10.543.78 18.457 5.661 23.339zm5.545-16.613l1.86 1.86c.372.372.451.947.193 1.406l-.699 1.241a.781.781 0 0 0 .129.937l4.141 4.141a.781.781 0 0 0 .937.128l1.241-.699a1.173 1.173 0 0 1 1.406.193l1.861 1.861a1.175 1.175 0 0 1 0 1.66l-.881.881a3.135 3.135 0 0 1-3.786.493l-.084-.048a24.54 24.54 0 0 1-8.868-8.681l-.423-.706a3.128 3.128 0 0 1 .469-3.823l.844-.844a1.173 1.173 0 0 1 1.66 0z" fill="#4687ba" class="color000000 svgShape"></path></svg>

src/assets/images/notifications/sms.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="0 0 512 512" id="Sms"><circle cx="256" cy="256" r="256" fill="#4687ba" class="color00aebb svgShape"></circle><path fill="#ffffff" d="M256 129.3c-88.4 0-160 52-160 116.2 0 26.6 12.3 51.1 33 70.7-11.6 26.2-22.6 66.2-22.6 66.2 6.1 3.1 60.9-23.9 78.4-32.8 21.4 7.7 45.6 12.1 71.2 12.1 88.4 0 160-52 160-116.2s-71.6-116.2-160-116.2zm-59.2 148.9c-5.2 3.8-12 5.7-20.4 5.7-8.3 0-15.4-2.1-21.4-6.2-6-4.1-8.8-10.3-8.7-18.5l.1-.3h15c0 4.6 1.3 7.9 4 10.1 2.7 2.2 6.3 3.2 10.9 3.2 4.1 0 7.3-.9 9.5-2.6 2.2-1.7 3.3-4 3.3-6.9 0-3-1-5.3-3.1-7.1-2.1-1.8-5.7-3.5-10.9-5.1-8.9-2.7-15.6-5.8-20.3-9.5-4.6-3.6-6.9-8.6-6.9-14.9 0-6.3 2.6-11.5 7.8-15.5 5.2-4 11.8-6 19.9-6 8.5 0 15.4 2.2 20.6 6.5 5.2 4.3 7.7 10 7.5 16.9l-.1.3h-15c0-3.8-1.2-6.8-3.5-8.9-2.3-2.1-5.6-3.1-9.8-3.1-3.8 0-6.8.9-8.8 2.8-2.1 1.8-3.1 4.2-3.1 7 0 2.6 1.1 4.8 3.4 6.4 2.3 1.7 6.2 3.5 11.7 5.3 8.5 2.4 14.9 5.5 19.4 9.4 4.4 3.9 6.7 9 6.7 15.3-.1 6.7-2.7 11.9-7.8 15.7zm99.3 4.7h-15.5v-52.6l-.3-.1-19.1 52.7h-10.5l-19.1-52.8-.3.1v52.7h-15.5v-77.1h20.3l19.6 56.8h.3l19.8-56.8H296v77.1zm62.1-4.7c-5.2 3.8-12 5.7-20.4 5.7-8.3 0-15.4-2.1-21.4-6.2-5.9-4.1-8.8-10.3-8.7-18.5l.1-.3h15c0 4.6 1.3 7.9 4 10.1 2.7 2.2 6.3 3.2 10.9 3.2 4.1 0 7.3-.9 9.5-2.6 2.2-1.7 3.3-4 3.3-6.9 0-3-1-5.3-3.1-7.1-2.1-1.8-5.7-3.5-10.9-5.1-8.9-2.7-15.7-5.8-20.3-9.5-4.6-3.6-6.9-8.6-6.9-14.9 0-6.3 2.6-11.5 7.8-15.5 5.2-4 11.8-6 19.9-6 8.5 0 15.4 2.2 20.6 6.5 5.2 4.3 7.7 10 7.5 16.9l-.1.3h-15c0-3.8-1.2-6.8-3.5-8.9-2.3-2.1-5.6-3.1-9.8-3.1-3.8 0-6.8.9-8.8 2.8-2.1 1.8-3.1 4.2-3.1 7 0 2.6 1.1 4.8 3.4 6.4 2.3 1.7 6.2 3.5 11.7 5.3 8.5 2.4 14.9 5.5 19.4 9.4 4.4 3.9 6.7 9 6.7 15.3-.1 6.7-2.6 11.9-7.8 15.7z" class="colorffffff svgShape"></path></svg>

src/assets/images/payment-cards/visa-card.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" id="Visacard"><g fill="#767fad" class="color303c42 svgShape"><path d="M28 4H2C.897 4 0 4.897 0 6v18c0 1.103.897 2 2 2h26c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm1 20c0 .551-.449 1-1 1H2c-.551 0-1-.449-1-1V6c0-.551.449-1 1-1h26c.551 0 1 .449 1 1v18z" fill="#5218ed" class="color000000 svgShape"></path><path d="M7.677 14.266a.2.2 0 0 0 .228.053.17.17 0 0 0 .106-.194l-.314-1.368a.121.121 0 0 0-.002-.009c-.113-.39-.47-.449-.729-.459H6.96l-1.768-.002c-.091 0-.17.06-.185.143a.172.172 0 0 0 .121.193c1.078.358 1.96.926 2.55 1.643zM23.535 12.303h-1.15c-.46 0-.724.141-.883.473l-2.383 4.981a.162.162 0 0 0 .014.165c.035.05.094.079.158.079h1.35a.189.189 0 0 0 .176-.112c.165-.404.272-.661.307-.744h.974l1.183.002c.039.151.134.552.173.717.019.08.095.137.184.137h1.177c.057 0 .11-.024.146-.065s.05-.095.038-.146l-1.28-5.351a.185.185 0 0 0-.184-.136zm-1.926 3.675.895-2.138.114.492.39 1.646h-1.4z" fill="#5218ed" class="color000000 svgShape"></path><path d="M11.816 12.38a.193.193 0 0 0-.157-.078h-1.37a.188.188 0 0 0-.175.11L8.511 16.19l-.172-.575a.142.142 0 0 0-.009-.023c-.253-.542-.933-1.39-1.881-2.062-.065-.046-.154-.048-.221-.006s-.097.12-.074.192L7.47 17.87a.187.187 0 0 0 .18.124l1.518-.002a.19.19 0 0 0 .173-.104l2.49-5.344a.162.162 0 0 0-.016-.164zM14.088 12.297h-1.303a.184.184 0 0 0-.186.144l-.989 5.355a.165.165 0 0 0 .042.141c.036.04.088.062.144.062h1.302c.092 0 .17-.061.186-.145l.99-5.354a.164.164 0 0 0-.042-.141.195.195 0 0 0-.144-.062zM17.696 13.452h.05c.51 0 .87.107 1.097.187a.202.202 0 0 0 .16-.011.175.175 0 0 0 .093-.122l.152-.826c.016-.085-.039-.168-.128-.194a4.634 4.634 0 0 0-1.3-.182c-1.607 0-2.735.746-2.744 1.814-.01.79.807 1.231 1.422 1.494.632.269.844.441.841.682-.004.369-.506.536-.97.536a3.676 3.676 0 0 1-1.522-.285.202.202 0 0 0-.163.008.175.175 0 0 0-.095.123l-.161.87a.173.173 0 0 0 .123.193c.444.144 1.064.233 1.66.24h.001c1.705-.001 2.815-.739 2.827-1.88.006-.627-.427-1.1-1.36-1.49-.57-.256-.92-.426-.917-.686 0-.234.32-.47.934-.47z" fill="#5218ed" class="color000000 svgShape"></path></g></svg>

src/components/AuthPages/Login/index.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useLayoutEffect, useState } from "react";
-import { Link, useNavigate, useLocation } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import linkedInLogo from "../../../assets/images/Linkedin.png";
 import appleLogo from "../../../assets/images/apple-black.svg";
 import facebookLogo from "../../../assets/images/facebook-4.svg";
@@ -9,18 +9,17 @@ import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
 // import { GoogleOAuthProvider } from '@react-oauth/google';
-import { googleLogout, useGoogleLogin } from "@react-oauth/google";
+import { useGoogleLogin } from "@react-oauth/google";
 
 import { useDispatch } from "react-redux";
 import { updateUserDetails } from "../../../store/UserDetails";
 
 export default function Login() {
   const dispatch = useDispatch();
-  const {state} = useLocation()
+  const { state } = useLocation();
 
-  let [loginType, setLoginType] = useState('');
+  let [loginType, setLoginType] = useState("");
 
-  const [checked, setValue] = useState(false);
   const [loginLoading, setLoginLoading] = useState(false);
 
   const [showPassword, setShowPassword] = useState(false);
@@ -30,12 +29,8 @@ export default function Login() {
   // for the catch error
   const [msgError, setMsgError] = useState("");
 
-  const rememberMe = () => {
-    setValue(!checked);
-  };
-
-   // To Show and Hide Password
-   const togglePasswordVisibility = () => {
+  // To Show and Hide Password
+  const togglePasswordVisibility = () => {
     setShowPassword(!showPassword);
   };
 
@@ -43,7 +38,7 @@ export default function Login() {
   const handleLoginType = ({ target: { name } }) => {
     setLoginType(name);
     let currentDate = new Date();
-    let expirationDate = new Date(currentDate.getTime() + (24 * 60 * 60 * 1000));
+    let expirationDate = new Date(currentDate.getTime() + 24 * 60 * 60 * 1000);
     // Convert the expiration date to the appropriate format
     let expirationDateString = expirationDate.toUTCString();
     document.cookie = `loginType=${name}; expires=${expirationDateString}; path=/;`;
@@ -83,7 +78,9 @@ export default function Login() {
       if (regEx.test(email) == false) {
         setLoginLoading(false);
         setMsgError("Invalid Email");
-        return setTimeout(()=>{setMsgError("");},3000)
+        return setTimeout(() => {
+          setMsgError("");
+        }, 3000);
       }
       // Post Data Info for normal Login
       postData = {
@@ -113,7 +110,13 @@ export default function Login() {
     userApi
       .logInUser(postData)
       .then((res) => {
-        if (res.status != 200 || res.data.internal_return < 0 || !res.data.member_id || !res.data.uid || !res.data.session) {
+        if (
+          res.status != 200 ||
+          res.data.internal_return < 0 ||
+          !res.data.member_id ||
+          !res.data.uid ||
+          !res.data.session
+        ) {
           // setMsgError("Wrong, email/password");
           setLoginError(true);
           setLoginLoading(false);
@@ -123,7 +126,7 @@ export default function Login() {
         localStorage.setItem("uid", `${res.data.uid}`);
         localStorage.setItem("session_token", `${res.data.session}`);
         // localStorage.setItem("session", `${res.data.session}`);
-        dispatch(updateUserDetails({...res.data}));
+        dispatch(updateUserDetails({ ...res.data }));
         setTimeout(() => {
           navigate("/", { replace: true });
           setLoginLoading(false);
@@ -154,11 +157,12 @@ export default function Login() {
 
   // In order to update the selected login type whenever the component renders
   // useEffect(() => {
-      // Clear the loginType cookie if the user switches to loginfull
-      // document.cookie ="loginType=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
+  // Clear the loginType cookie if the user switches to loginfull
+  // document.cookie ="loginType=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
   // }, []);
 
-  useLayoutEffect(()=>{ // checks the cookie in order to set the login type before components mounts
+  useLayoutEffect(() => {
+    // checks the cookie in order to set the login type before components mounts
     // if(document.cookie.includes("loginType=family")){
     //   setLoginType('family')
     // }else if(document.cookie.includes("loginType=full")){
@@ -166,33 +170,34 @@ export default function Login() {
     // }else{
     //   setLoginType('full')
     // }
-    function readCookie(cname) { // checks the cookie in order to set the login type before components mounts
+    function readCookie(cname) {
+      // checks the cookie in order to set the login type before components mounts
       let name = cname + "=";
       let decoded_cookie = decodeURIComponent(document.cookie);
-      let carr = decoded_cookie.split(';');
-      for(let i=0; i<carr.length;i++){
+      let carr = decoded_cookie.split(";");
+      for (let i = 0; i < carr.length; i++) {
         let c = carr[i];
-        while(c.charAt(0)==' '){
-            c=c.substring(1);
+        while (c.charAt(0) == " ") {
+          c = c.substring(1);
         }
-        if(c.indexOf(name) == 0) {
-            return c.substring(name.length, c.length);
+        if (c.indexOf(name) == 0) {
+          return c.substring(name.length, c.length);
         }
       }
-      return 'full'
+      return "full";
     }
-    let loginValue = readCookie('loginType')
-    setLoginType(loginValue)
+    let loginValue = readCookie("loginType");
+    setLoginType(loginValue);
 
-    if(state?.error){ //check if the login path has an error state indicating any social handle login with error
+    if (state?.error) {
+      //check if the login path has an error state indicating any social handle login with error
       setMsgError("Unexpected Error, Please try again soon.");
-      setTimeout(()=>{
+      setTimeout(() => {
         setMsgError("");
-        navigate('/login', {replace: true})
-      },4000)
+        navigate("/login", { replace: true });
+      }, 4000);
     }
-  },[])
-  
+  }, []);
 
   useEffect(() => {
     setMail("");
@@ -234,7 +239,9 @@ export default function Login() {
                 <button
                   name="full"
                   className={`login-type-btn px-4 py-1 rounded-t-2xl ${
-                    loginType=='full' ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
+                    loginType == "full"
+                      ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
+                      : "bg-white text-[#000] border-t-[2px]"
                   }`}
                   onClick={handleLoginType}
                 >
@@ -243,7 +250,9 @@ export default function Login() {
                 <button
                   name="family"
                   className={`login-type-btn px-4 py-1 rounded-t-2xl ${
-                    loginType=='family' ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
+                    loginType == "family"
+                      ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
+                      : "bg-white text-[#000] border-t-[2px]"
                   }`}
                   onClick={handleLoginType}
                 >
@@ -255,7 +264,7 @@ export default function Login() {
 
               {/* for login component */}
               {
-                loginType == 'full' ? (
+                loginType == "full" ? (
                   //user login component
                   <div className="p-6 input-area login-area border-2 border-[#4687ba] rounded-2xl">
                     <div className="input-item mb-5">
@@ -275,8 +284,8 @@ export default function Login() {
                     <div className="input-item mb-5">
                       <InputCom
                         labelClass="tracking-wider"
-                        fieldClass="sm:px-6 px-2"
-                        value={password}
+                        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
+                        value={password.replace(/./g, "●")}
                         inputHandler={handlePassword}
                         placeholder="● ● ● ● ● ●"
                         label="Password"
@@ -321,33 +330,33 @@ export default function Login() {
                         </button>
                       </div>
                       <div className="sm:flex sm:justify-between sm:items-center sm:space-x-2">
-                      <BrandBtn
-                        link="#"
-                        imgSrc={googleLogo}
-                        brand="Google"
-                        onClick={googleLogin}
-                      />
-                      <BrandBtn 
-                        // link={`https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&client_id=${process.env.REACT_APP_APPLE_CLIENT_ID}&redirect_uri=https%3A%2F%2Fwork.wrenchboard.com%2Flogin%2Fauth%2Fapple&state=4b2c4456b7&scope=name+email`} 
-                        link={`https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&client_id=${process.env.REACT_APP_APPLE_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_APPLE_REDIRECT_URL}&state=4b2c4456b7&scope=name+email`} 
-                        imgSrc={appleLogo} 
-                        brand="Apple" 
-                        isAnchor={true}
-                      />
+                        <BrandBtn
+                          link="#"
+                          imgSrc={googleLogo}
+                          brand="Google"
+                          onClick={googleLogin}
+                        />
+                        <BrandBtn
+                          // link={`https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&client_id=${process.env.REACT_APP_APPLE_CLIENT_ID}&redirect_uri=https%3A%2F%2Fwork.wrenchboard.com%2Flogin%2Fauth%2Fapple&state=4b2c4456b7&scope=name+email`}
+                          link={`https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&client_id=${process.env.REACT_APP_APPLE_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_APPLE_REDIRECT_URL}&state=4b2c4456b7&scope=name+email`}
+                          imgSrc={appleLogo}
+                          brand="Apple"
+                          isAnchor={true}
+                        />
                       </div>
                       <div className="sm:flex sm:justify-between sm:items-center sm:space-x-2">
-                      <BrandBtn
-                        link={`https://www.facebook.com/v14.0/dialog/oauth?client_id=${process.env.REACT_APP_FACEBOOK_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_FACEBOOK_REDIRECT_URL}&scope=${process.env.REACT_APP_FACEBOOK_CLIENT_SCOPE}`}
-                        imgSrc={facebookLogo}
-                        brand="Facebook"
-                        isAnchor={true}
-                      />
-                      <BrandBtn
-                        // link="https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URI&scope=comma-separated-list-of-scopes&state=YOUR_STATE_VALUE"
-                        imgSrc={linkedInLogo}
-                        brand="LinkedIn"
-                        isAnchor={true}
-                      />
+                        <BrandBtn
+                          link={`https://www.facebook.com/v14.0/dialog/oauth?client_id=${process.env.REACT_APP_FACEBOOK_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_FACEBOOK_REDIRECT_URL}&scope=${process.env.REACT_APP_FACEBOOK_CLIENT_SCOPE}`}
+                          imgSrc={facebookLogo}
+                          brand="Facebook"
+                          isAnchor={true}
+                        />
+                        <BrandBtn
+                          // link="https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URI&scope=comma-separated-list-of-scopes&state=YOUR_STATE_VALUE"
+                          imgSrc={linkedInLogo}
+                          brand="LinkedIn"
+                          isAnchor={true}
+                        />
                       </div>
                     </div>
                   </div>
@@ -435,7 +444,7 @@ export default function Login() {
   );
 }
 
-const BrandBtn = ({ link, imgSrc, brand, onClick, isAnchor=false }) => {
+const BrandBtn = ({ link, imgSrc, brand, onClick, isAnchor = false }) => {
   // const doGoogle = async () => {
   //   alert("start google");
   // };
@@ -456,33 +465,28 @@ const BrandBtn = ({ link, imgSrc, brand, onClick, isAnchor=false }) => {
   // };
   return (
     <div className="w-full sm:w-1/2 flex justify-center bottomMargin">
-      {isAnchor ?
-      (
+      {isAnchor ? (
         <a
-        href={link}
-        className="w-full border border-light-purple dark:border-[#5356fb29]  rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F]  items-center font-medium cursor-pointer"
-      >
-        <img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />
-        <span className="text-lg text-thin-light-gray font-normal text-[15px]">
-          Continue with {brand}
-        </span>
-      </a>
-      )
-      :
-      (
+          href={link}
+          className="w-full border border-light-purple dark:border-[#5356fb29]  rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F]  items-center font-medium cursor-pointer"
+        >
+          <img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />
+          <span className="text-lg text-thin-light-gray font-normal text-[15px]">
+            Continue with {brand}
+          </span>
+        </a>
+      ) : (
         <button
-        onClick={onClick}
-        // href="#dd"
-        className="w-full border border-light-purple dark:border-[#5356fb29]  rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F]  items-center font-medium cursor-pointer"
-      >
-        <img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />
-        <span className="text-lg text-thin-light-gray font-normal text-[15px]">
-          Continue with {brand}
-        </span>
-      </button>
-      )
-    }
+          onClick={onClick}
+          // href="#dd"
+          className="w-full border border-light-purple dark:border-[#5356fb29]  rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F]  items-center font-medium cursor-pointer"
+        >
+          <img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />
+          <span className="text-lg text-thin-light-gray font-normal text-[15px]">
+            Continue with {brand}
+          </span>
+        </button>
+      )}
     </div>
-  )
+  );
 };
-

src/components/AuthPages/SignUp/index.jsx

@@ -205,7 +205,7 @@ export default function SignUp() {
                 </div>
                 <div className="input-item mb-5">
                   <InputCom
-                    fieldClass="px-6"
+                    fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
                     placeholder="● ● ● ● ● ●"
                     label="Password"
                     name="password"
@@ -214,7 +214,7 @@ export default function SignUp() {
                     passIcon={
                       showPassword ? "show-password" : "hide-password"
                     }
-                    value={formData.password}
+                    value={formData.password.replace(/./g, "●")}
                     inputHandler={handleInputChange}
                   />
                 </div>

src/components/AuthPages/VerifyPassword/index.jsx

@@ -158,8 +158,8 @@ const SuccessfulComponent = ({
     {/* INPUT */}
     <div className="mb-5">
       <InputCom
-        fieldClass="px-6"
-        value={password}
+        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
+        value={password?.replace(/./g, "●")}
         inputHandler={handlePassword}
         placeholder="● ● ● ● ● ●"
         label="Password"
@@ -171,8 +171,8 @@ const SuccessfulComponent = ({
     </div>
     <div className="mb-5">
       <InputCom
-        fieldClass="px-6"
-        value={confirmPassword}
+        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
+        value={confirmPassword?.replace(/./g, "●")}
         inputHandler={handlePassword}
         placeholder="● ● ● ● ● ●"
         label="Confirm Password"

src/components/Blogs/index.jsx

@@ -31,7 +31,7 @@ export default function BlogItem(props) {
                         </div>
                     </div>
                    <div>
-                       Blog Items Details
+                       Blog Items Details need implenet
                    </div>
                 </div>
             </div>

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -63,7 +63,7 @@ const  AssignTaskPopout = React.memo(({ action, details, situation, familyDetail
         // API PAYLOADS
         job_id: activeTask.data?.job_id,
         job_uid: activeTask.data?.job_uid,
-        family_uid: familyDetails.uid,
+        family_uid: familyDetails?.uid || details?.family_uid,
         job_description: activeTask.data?.description,
         assign_mode: 110011,
       };

src/components/FamilyAcc/FamilyTable.jsx

@@ -6,6 +6,7 @@ import { handlePagingFunc } from "../Pagination/HandlePagination";
 import PaginatedList from "../Pagination/PaginatedList";
 
 import familyImage from '../../assets/images/no-family-side.png'
+import localImgLoad from "../../lib/localImgLoad";
 
 export default function FamilyTable({ className, familyList, loader, popUpHandler }) {
   const navigate = useNavigate();
@@ -54,6 +55,7 @@ export default function FamilyTable({ className, familyList, loader, popUpHandle
                         last_login,
                         task_count,
                         family_uid,
+                        banner
                       } = props;
                       let addedDate = added?.split(" ")[0];
                       let LoginDate = last_login?.split(" ")[0];
@@ -64,9 +66,10 @@ export default function FamilyTable({ className, familyList, loader, popUpHandle
                         >
                           <td className=" py-4">
                             <div className="flex space-x-2 items-center w-full">
-                              <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px]">
+                              <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1]">
                                 <img
-                                  src={dataImage1}
+                                  // src={dataImage1}
+                                  src={localImgLoad(`images/icons/${banner}`)}
                                   alt="data"
                                   className="w-full h-full"
                                 />

src/components/FamilyAcc/Tabs/ProfileInfo.jsx

@@ -1,4 +1,6 @@
 import React from "react";
+import localImgLoad from "../../../lib/localImgLoad";
+
 
 export default function ProfileInfo({
   profileImg,
@@ -12,7 +14,7 @@ export default function ProfileInfo({
       <div className="flex justify-center">
         <div className="w-full relative">
           <img
-            src={profileImg}
+            src={localImgLoad(`images/icons/${accountDetails.banner}`)}
             alt=""
             className="sm:w-[180px] sm:h-[180px] w-[120px] h-[120px] rounded-full overflow-hidden object-cover"
           />

src/components/Helpers/Icons.jsx

@@ -504,11 +504,11 @@ export default function Icons({ name }) {
           ></path>
         </svg>
       ) : name === "atm-card" ? (
-        <img className="w-[20px]" src={ATMCard} alt="card" />
+        <img className="w-[30px]" src={ATMCard} alt="card" />
       ) : name === "visa-card" ? (
-        <img className="w-[20px]" src={VisaCard} alt="card" />
+        <img className="w-[30px]" src={VisaCard} alt="card" />
       ) : name === "master-card" ? (
-        <img className="w-[20px]" src={MasterCard} alt="card" />
+        <img className="w-[30px]" src={MasterCard} alt="card" />
       ) : name === "new-dashboard" ? (
         <img className="w-[17px] h-[17px]" src={localImgLoad('images/icons/dashboard.svg')} alt="dashboard" />
       ) : name === "new-family" ? (

src/components/Helpers/Inputs/InputCom/index.jsx

@@ -21,6 +21,9 @@ export default function InputCom({
   blurHandler,
   spanTag,
   inputBg,
+  onInput,
+  maxLength = 30,
+  minLength = 0,
   direction,
   error,
 }) {
@@ -29,13 +32,13 @@ export default function InputCom({
   // for Min Length:
   const minLengthValidation = () => {
     const inputConfig = inputConfigs[inputRef?.current?.name]?.minLength;
-    return inputConfig || 0;
+    return inputConfig || minLength;
   };
 
   // for MaxLength
   const maxLengthValidation = () => {
     const inputConfig = inputConfigs[inputRef?.current?.name]?.maxLength;
-    return inputConfig || 30;
+    return inputConfig || maxLength;
   };
 
   // for Patterns
@@ -63,7 +66,9 @@ export default function InputCom({
               </span>
             )}
             {/* displays error is any */}
-            {error && <span className="text-[12px] text-red-500 italic">{error}</span>} 
+            {error && (
+              <span className="text-[12px] text-red-500 italic">{error}</span>
+            )}
           </label>
         )}
         {forgotPassword && (
@@ -76,7 +81,11 @@ export default function InputCom({
         )}
       </div>
       <div
-        className={`input-wrapper w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-base ${inputClass ? inputClass : "text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] border"}`}
+        className={`input-wrapper w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-base ${
+          inputClass
+            ? inputClass
+            : "text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] border"
+        }`}
       >
         <input
           placeholder={placeholder}
@@ -88,6 +97,7 @@ export default function InputCom({
           type={type}
           id={name}
           name={name}
+          onInput={onInput}
           minLength={minLengthValidation()}
           maxLength={maxLengthValidation()}
           // pattern={inputPatterns()}
@@ -104,10 +114,7 @@ export default function InputCom({
           </div>
         )}
         {passIcon && (
-          <div
-            className="absolute right-6 bottom-3 z-10"
-            onClick={onClick}
-          >
+          <div className="absolute right-6 bottom-3 z-10" onClick={onClick}>
             <Icons name={passIcon} />
           </div>
         )}
@@ -128,7 +135,8 @@ const inputConfigs = {
   amount: { minLength: 1, maxLength: 9, pattern: "[0-9]+" },
   description: { minLength: 5, maxLength: 299 },
   title: { minLength: 5, maxLength: 149 },
-  job_detail: { minLength: 4, maxLength: 1440 }
+  job_detail: { minLength: 4, maxLength: 1440 },
+  cardNum: { minLength: 4, maxLength: 19 },
 };
 
 /* Numbers Only: <input type="text" pattern="[0-9]*" /> strictly numbers

src/components/Helpers/TimeDifference.jsx

@@ -0,0 +1,36 @@
+const TimeDifference = ({ time }) => {
+  const currentTime = new Date();
+  const providedTime = new Date(time);
+
+  const timeDifference = currentTime - providedTime; // Difference in milliseconds
+
+  const minutes = Math.floor(timeDifference / (1000 * 60));
+  const hours = Math.floor(timeDifference / (1000 * 60 * 60));
+  const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
+  const months = Math.floor(timeDifference / (1000 * 60 * 60 * 24 * 30));
+
+  if (minutes < 1) {
+    return "Just now";
+  } else if (minutes < 60) {
+    return `${minutes} ${minutes === 1 ? "minute" : "minutes"} ago`;
+  } else if (hours < 12) {
+    return `${hours} ${hours === 1 ? "hour" : "hours"} ago`;
+  } else if (hours < 24) {
+    return "Today";
+  } else if (days < 2) {
+    return "Tomorrow";
+  } else if (days < 7) {
+    return `${days} ${days === 1 ? "day" : "days"} ago`;
+  } else if (months < 1) {
+    const weeks = Math.floor(days / 7);
+    return `${weeks} ${weeks === 1 ? "week" : "weeks"} ago`;
+  } else if (months < 6) {
+    return `${months} ${months === 1 ? "month" : "months"} ago`;
+  }else if (months < 8) {
+    return `"More than 6 months ago"`;
+  } else {
+    return time?.split(" ")[0];
+  }
+};
+
+export default TimeDifference;

src/components/History/index.jsx

@@ -217,22 +217,22 @@ export default function History() {
             {/* <TopHxBox className="mb-11" /> */}
             <div className='w-full p-4 md:p-8 bg-white dark:bg-dark-white rounded-2xl shadow bottomMargin'>
                 {/* switch button */}
-                <div className="my-1 flex items-center border-b border-slate-300">
+                <div className="pl-7 my-2 flex items-center border-b border-slate-300 gap-3">
                     <button
                     name="purchases"
                     onClick={(e) => setTab(e.target.name)}
-                    className={`p-2 text-lg font-bold text-slate-600 dark:text-white border ${
-                        tab == "purchases" ? "border-sky-blue" : "border-slate-300"
-                    } tracking-wide transition duration-200`}
+                    className={`px-4 py-1 rounded-t-2xl ${
+                        tab == "purchases" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
+                      }`}
                     >
                     Purchases
                     </button>
                     <button
                     name="recent"
                     onClick={(e) => setTab(e.target.name)}
-                    className={`p-2 text-lg font-bold text-slate-600 dark:text-white border ${
-                        tab == "recent" ? "border-sky-blue" : "border-slate-300"
-                    }  tracking-wide transition duration-200`}
+                    className={`px-4 py-1 rounded-t-2xl ${
+                        tab == "recent" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
+                      }`}
                     >
                     Recent Activity
                     </button>

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -1,11 +1,18 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-import ModalCom from "../../Helpers/ModalCom";
+import { useMemo, useState } from "react";
 import { toast } from "react-toastify";
 import usersService from "../../../services/UsersService";
-import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import ModalCom from "../../Helpers/ModalCom";
 import { PriceFormatter } from "../../Helpers/PriceFormatter";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
 const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
+  const [textValue, setTextValue] = useState("");
+  const apiCall = useMemo(() => new usersService(), []);
+
+  const handleInputChange = ({ target: { value } }) => {
+    setTextValue(value);
+  };
+
   const MarketCalls = (details) => {
     const [marketMsg, setMarketMsg] = useState({
       loading: false,
@@ -24,8 +31,8 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
 
     const MarketDetail = async () => {
       try {
-        setMarketMsg({ loading: true });
         if (!textValue) return;
+        setMarketMsg({ loading: true });
 
         reqData.yourmessage = textValue;
 
@@ -87,22 +94,11 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
       }
     };
 
-    // useEffect(() => {
-    //   ManageInterest();
-    // }, []);
-
     return { MarketDetail, ManageInterest, manageInt, marketMsg };
   };
 
-  const [textValue, setTextValue] = useState("");
-
-  const handleInputChange = ({ target: { value } }) => {
-    setTextValue(value);
-  };
-
-  const apiCall = useMemo(() => new usersService(), []);
-
-  let { manageInt, ManageInterest, MarketDetail, marketMsg } = MarketCalls(details);
+  let { manageInt, ManageInterest, MarketDetail, marketMsg } =
+    MarketCalls(details);
 
   let thePrice = PriceFormatter(
     details?.price * 0.01,
@@ -270,9 +266,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                   Interest: <b className="ml-1">{details.interest_count}</b>
                 </p>
                 <hr />
-                <p className="my-1">
-                  Expire: {details.expire}
-                </p>
+                <p className="my-1">Expire: {details.expire}</p>
               </div>
             </div>
             <button

src/components/MyActiveJobs/ActiveJobMessage.jsx

@@ -9,59 +9,61 @@ import PaginatedList from "../Pagination/PaginatedList";
 import { handlePagingFunc } from "../Pagination/HandlePagination";
 
 export default function ActiveJobMessage({ activeJobMesList }) {
-    const [currentPage, setCurrentPage] = useState(0);
-    const indexOfFirstItem = Number(currentPage);
-    const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
-    const currentActiveJobMesList = activeJobMesList?.data?.slice(indexOfFirstItem, indexOfLastItem);
+    // const [currentPage, setCurrentPage] = useState(0);
+    // const indexOfFirstItem = Number(currentPage);
+    // const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
+    // const currentActiveJobMesList = activeJobMesList?.data?.slice(indexOfFirstItem, indexOfLastItem);
   
-    const handlePagination = (e) => {
-      handlePagingFunc(e,setCurrentPage)
-    }
+    // const handlePagination = (e) => {
+    //   handlePagingFunc(e,setCurrentPage)
+    // }
 
   return (
-    <div className='flex flex-col justify-between h-full'>
-    <table className="wallet-activity w-full table-auto border-collapse text-left">
-        <thead className='border-b-2'>
-            <tr className='text-slate-600'>
-            <th className="p-2"></th>
-            </tr>
-        </thead>
-        {activeJobMesList.data.length ?
-        (
-        <tbody>
-            {currentActiveJobMesList.map((item, index) => (
-            <tr key={index} className='text-slate-500'>
-                <td>
-                    <div className="msg_box">
-                        <div className="msg_header">{item.msg_date} {item.msg_firstname}</div>
-                        <span className="p-2" dangerouslySetInnerHTML={{__html: item.message}}></span>
-                    </div>
+    <div className='flex flex-col justify-between'>
+    <div className="w-full min-h-[450px] max-h-[450px] overflow-y-scroll">
+        <table className="wallet-activity w-full table-auto border-collapse text-left">
+            <thead className='border-b-2'>
+                <tr className='text-slate-600'>
+                <th className="p-2"></th>
+                </tr>
+            </thead>
+            {activeJobMesList?.data?.length ?
+            (
+            <tbody>
+                {activeJobMesList.data.map((item, index) => (
+                <tr key={index} className='text-slate-500'>
+                    <td>
+                        <div className={`msg_box ${item.who}`}>
+                            <div className="msg_header">{item.msg_date} {item.msg_firstname}</div>
+                            <span className="p-2" dangerouslySetInnerHTML={{__html: item.message}}></span>
+                        </div>
 
-                </td>
-            </tr>
-            ))}
-        </tbody>
-        )
-        :
-        activeJobMesList.error ? 
-        (
-        <tbody>
-            <tr className='text-slate-500'>
-                <td className="p-2" colSpan={4}>Opps! an error occurred. Please try again!</td>
-            </tr>
-        </tbody>
-        )
-        :
-        <tbody>
-            <tr className='text-slate-500'>
-                <td className="p-2" colSpan={4}>No Message Found!</td>
-            </tr>
-        </tbody>
-        }
-    </table>
+                    </td>
+                </tr>
+                ))}
+            </tbody>
+            )
+            :
+            activeJobMesList.error ? 
+            (
+            <tbody>
+                <tr className='text-slate-500'>
+                    <td className="p-2" colSpan={4}>Opps! an error occurred. Please try again!</td>
+                </tr>
+            </tbody>
+            )
+            :
+            <tbody>
+                <tr className='text-slate-500'>
+                    <td className="p-2" colSpan={4}>No Message Found!</td>
+                </tr>
+            </tbody>
+            }
+        </table>
+    </div>
 
     {/* PAGINATION BUTTON */}
-    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= activeJobMesList?.data?.length ? true : false} data={activeJobMesList?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+    {/* <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= activeJobMesList?.data?.length ? true : false} data={activeJobMesList?.data} start={indexOfFirstItem} stop={indexOfLastItem} /> */}
     {/* END OF PAGINATION BUTTON */}
     </div>
   )

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -353,7 +353,7 @@ function ActiveJobs(props) {
       </div>
 
       <div className="my-4 py-[20px] bg-white dark:bg-black px-4 rounded-2xl shadow-md lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
-        <div className="w-full lg:w-1/2">
+        <div className="w-full lg:w-1/2 mb-4 border-b pb-4 lg:pb-0 lg:mb-0 lg:border-b-0">
           <div className="">
             <h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
               Actions
@@ -367,23 +367,25 @@ function ActiveJobs(props) {
           {/* TEXTAREA SECTION */}
           <div className="mt-5">
             <div className="">
-              {/* <p className="relative py-2 my-2 text-lg font-bold text-slate-600 dark:text-black border-b-2 border-slate-300 tracking-wide after:absolute after:-bottom-0.5 after:content-[''] after:w-[100px] after:h-[2px] after:bg-sky-blue after:left-0">Message(s)</p> */}
-              <div className="my-2 flex items-center border-b border-slate-300">
+              <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={`p-2 text-lg font-bold text-slate-600 dark:text-white border ${
-                    tab == "message" ? "border-sky-blue" : "border-slate-300"
-                  } tracking-wide transition duration-200`}
+                  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]"
+                  }`}
                 >
                   Send Message
                 </button>
                 <button
                   name="files"
                   onClick={(e) => setTab(e.target.name)}
-                  className={`p-2 text-lg font-bold text-slate-600 dark:text-white border ${
-                    tab == "files" ? "border-sky-blue" : "border-slate-300"
-                  }  tracking-wide transition duration-200`}
+                  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]"
+                  }`}
                 >
                   Send Files
                 </button>
@@ -402,7 +404,7 @@ function ActiveJobs(props) {
                   <div className="files">
                     <label
                       htmlFor="file"
-                      className="h-20 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"
                     >
                       Select Files to Upload
                     </label>
@@ -457,11 +459,11 @@ function ActiveJobs(props) {
 
             {/* Buttons Sections */}
             <div className="py-2 sm:flex sm:justify-end sm:items-center">
-              <div className="w-full sm:w-2/4 flex justify-between items-center space-x-2">
+              <div className="w-full sm:w-3/4 flex justify-between items-center space-x-2">
                 <button
                   type="button"
                   onClick={handleClearAll}
-                  className="border-gradient text-base tracking-wide px-4 py-3 rounded-full"
+                  className="border-gradient text-base tracking-wide px-4 py-2 rounded-full"
                 >
                   <span className="text-gradient">Clear</span>
                 </button>
@@ -469,7 +471,7 @@ function ActiveJobs(props) {
                   <button
                     onClick={sendFile}
                     type="button"
-                    className="btn-gradient text-base tracking-wide px-4 py-3 rounded-full 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" />
@@ -493,7 +495,7 @@ function ActiveJobs(props) {
                   <button
                     onClick={sendTaskMessage}
                     type="button"
-                    className="btn-gradient text-base text-white tracking-wide px-4 py-3 rounded-full"
+                    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" />
@@ -518,9 +520,9 @@ function ActiveJobs(props) {
             <button
               type="button"
               onClick={popUpHandler}
-              className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+              className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer flex justify-center items-center"
             >
-              view all
+              View all
             </button>
           </div>
           {props.activeJobMesList.loading ? (

src/components/MyActiveJobs/JobActions/CurrentJobAction.jsx

@@ -4,15 +4,15 @@ function CurrentJobAction() {
   return (
     <div className='job-action  dark:bg-black'>
       <p className="my-3 py-1 text-base active-owner">
-          <table className="w-full text-sm text-left text-gray-500">
+          <table className="w-full text-sm text-left text-gray-500 ">
               <tbody>
               <tr>
                   <td>
-                      <div className="flex space-x-2 items-center w-full">
+                      <div className="flex space-x-2 items-center w-full task_action_panel">
 
-                              <h1 className="text-xl text-dark-gray dark:text-white">
+                              <div>
                                   Waiting for the completion message from the client before you can approve.
-                              </h1>
+                              </div>
                               {/*<div className="flex flex-col flex-[0.9]">  </div>*/}
                       </div>
                   </td>

src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx

@@ -62,14 +62,14 @@ function CurrentTaskAction({jobDetails}) {
   return (
     <div className='job-action  dark:bg-black'>
 
-          <table className="w-full text-sm text-left text-gray-500 active-worker">
+          <table className="w-full text-sm text-left text-gray-500 active-worker ">
               <tbody>
               <tr>
                   <td>
-                      <div className="flex space-x-2 items-center w-full">
-                          <h1 className="text-xl text-dark-gray dark:text-white">
+                      <div className="flex space-x-2 items-center w-full task_action_panel">
+                          <div>
                               I completed this task and ready for review and acceptance.
-                          </h1>
+                          </div>
                           {/*<div className="flex flex-col flex-[0.9]">*/}
 
                           {/*</div>*/}

src/components/MyActiveJobs/JobActions/PastDueJobAction.jsx

@@ -107,19 +107,18 @@ function PastDueJobAction({jobDetails}) {
             <tbody>
             <tr>
                 <td>
-                    <div className="flex space-x-2 items-center w-full">
+                    <div className="flex space-x-2 items-center w-full task_action_panel">
 
-                            <h1 className="text-xl text-dark-gray dark:text-white">
+                            <div className="dark:text-red-700">
                                 Time allocated has passed
-                            </h1>
-                            {/*<div className="flex flex-col flex-[0.9]">  </div>*/}
+                            </div>
                     </div>
                 </td>
             </tr>
             <tr>
                 <td>
                     <div className="flex justify-center items-center">
-                        <button type="button" onClick={popUpHandler} className="w-[150px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
+                        <button type="button" onClick={popUpHandler} className="w-[180px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
                             Cancel or Extend Timeline
                         </button>
                     </div>

src/components/MyActiveJobs/JobActions/PastDueTaskAction.jsx

@@ -8,11 +8,11 @@ function PastDueTaskAction() {
             <tbody>
             <tr>
                 <td>
-                    <div className="flex space-x-2 items-center w-full">
+                    <div className="flex space-x-2 items-center w-full task_action_panel">
 
-                            <h1 className="text-xl text-dark-gray dark:text-white">
+                            <div>
                                 You have missed the allocated time
-                            </h1>
+                            </div>
                             {/*<div className="flex flex-col flex-[0.9]"> </div>*/}
                     </div>
                 </td>

src/components/MyActiveJobs/JobActions/ReviewJobAction.jsx

@@ -96,11 +96,11 @@ function ReviewJobAction({jobDetails}) {
               <tbody>
               <tr>
                   <td>
-                      <div className="flex space-x-2 items-center w-full">
+                      <div className="flex space-x-2 items-center w-full task_action_panel">
 
-                              <h1 className="text-xl text-dark-gray dark:text-white">
+                              <div>
                                   This Job is Ready for your review
-                              </h1>
+                              </div>
                               {/*<div className="flex flex-col flex-[0.9]"> </div>*/}
                       </div>
                   </td>

src/components/MyActiveJobs/JobActions/ReviewTaskAction.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 function ReviewTaskAction() {
   return (
-    <div className='job-action  dark:bg-black'>
+    <div className='job-action  dark:bg-black task_action_panel'>
       <p className="my-3 py-1 text-base text-dark-gray dark:text-white">
         Waiting for the completion message from the client before you can approve. Worker True & Review Job
       </p>

src/components/MyTasks/MyOffersFamilyTable.jsx

@@ -2,7 +2,7 @@ import { useRef, useState } from "react";
 import OfferCard from "../Cards/OfferCard";
 import Icons from "../Helpers/Icons";
 import SliderCom from "../Helpers/SliderCom";
-import OfferJobPopout from "../jobPopout/OfferJobPopout";
+import FamilyOfferJobPopout from "../jobPopout/FamilyOfferJobPopout";
 
 export default function MyOffersFamilyTable({ className, familyOffers }) {
   let [offerPopout, setOfferPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
@@ -127,7 +127,7 @@ export default function MyOffersFamilyTable({ className, familyOffers }) {
 
         {/* Offer Job Popout */}
         {offerPopout.show && (
-          <OfferJobPopout
+          <FamilyOfferJobPopout
             details={offerPopout.data}
             onClose={() => {
               setOfferPopout({ show: false, data: {} });

src/components/MyWallet/AddFund.jsx

@@ -1,140 +0,0 @@
-import React, {useState} from 'react'
-import RecentActivityTable from './WalletComponent/RecentActivityTable'
-import LoadingSpinner from '../Spinners/LoadingSpinner'
-import { useNavigate, useLocation } from 'react-router-dom'
-import InputCom from '../Helpers/Inputs/InputCom'
-
-import AddFundDollars from './AddFundDollars'
-
-function AddFund({payment}) {
-   
-    const navigate = useNavigate()
-    const {currency} = useLocation()?.state //GETS THE USER CURRENCY FOR ADD FUND
-
-    //STATE FOR CONTROLLED INPUT
-    let [input, setInput] = useState('')
-
-    let [inputError, setInputError] = useState('')
-
-    // FUNCTION TO HANDLE INPUT CHANGE
-    const handleChange = ({target:{name, value}}) => {
-        setInput(value)
-    }
-
-    //FUNCTION TO HANDLE SUBMIT
-    const handleSubmit = () => {
-        setInputError('')
-        if(!input || input == '0'){
-            setInputError('Please Enter Amount')
-            return setTimeout(()=>{setInputError('')}, 5000)
-        }
-
-        if(isNaN(input)){
-            setInputError('Amount must be a Number')
-            return setTimeout(()=>{setInputError('')}, 5000)
-        }
-
-        const stateData = {amount: Number(input), currency: 'naira'}
-        navigate('confirm-add-fund', {state: stateData})
-     
-        setInput('')
-    }
-    return (
-        <div>
-            {/* heading */}
-            {/* <div className="sm:flex justify-between items-center mb-6">
-                <div className="w-full flex justify-start space-x-3 items-center">
-                    <button
-                    type="button"
-                    className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
-                    onClick={() =>
-                        navigate('/my-wallet', { replace: true })
-                    }
-                    >
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="35"
-                            height="35"
-                            viewBox="0 0 24 24"
-                            fill="skyblue"
-                        >
-                            <path d="M19 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H19v-2z" />
-                        </svg>
-                    </button>
-                    <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
-                    Add Credit
-                    </h1>
-                </div>
-                <div className="slider-btns flex space-x-4">
-                    <div
-                        onClick={() => filterHandler("today")}
-                        className="relative"
-                    ></div>
-                </div>
-            </div> */}
-
-            <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
-                <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
-                    <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
-                        {/*<h2 className='md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Add Credit with Account Deposit</h2>*/}
-                        {/*<hr />*/}
-                        <form className='md:p-8 p-4 add-fund-info'>
-                            <div className="field w-full mb-6">
-                                <InputCom
-                                    fieldClass="px-6"
-                                    label={currency == 'US Dollars' ? "Amount (USD)" : "Amount (Naira)"}
-                                    type="text"
-                                    name="amount"
-                                    placeholder="0"
-                                    value={input}
-                                    inputHandler={handleChange}
-                                />
-                                {inputError && <p className='text-base text-red-500'>{inputError}</p>}
-                            </div>
-                        </form>
-                        <hr />
-
-                        {/* SHOWS THIS IF USER CURRENCY IS DOLLARS */}
-                        {currency == 'US Dollars' &&
-                        <div className='w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow'>
-                            <AddFundDollars setInputError={setInputError} input={input} setInput={setInput} />
-                        </div>
-                        }
-
-                        {/* HIDES THIS BUTTON IF CURENCY IS NAIRA */}
-                        {currency != 'US Dollars' &&
-                        <div className='md:p-8 p-4 add-fund-btn flex justify-end items-center py-4'>
-                            <button
-                                onClick={handleSubmit}
-                                type="button"
-                                className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                            >
-                                <span className="text-white">Continue</span>
-                            </button>
-                        </div>
-                        }
-                    </div>
-                </div>
-            </div>
-
-            {/* HIDES THIS SECTION IF CURENCY IS NAIRA */}
-            {currency != 'US Dollars' &&
-            <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
-                <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
-                    <div className="wallet w-full md:p-8 p-4 h-full min-h-[590px] bg-white dark:bg-dark-white rounded-2xl shadow">
-                        <h2 className='text-gray-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
-                        {/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
-                        {payment.loading ?
-                            <LoadingSpinner size='16' color='sky-blue' />
-                            :
-                            <RecentActivityTable  payment={payment}/>
-                        }
-                    </div>
-                </div>
-            </div>
-            }          
-        </div>
-      )
-}
-
-export default AddFund

src/components/MyWallet/AddFundPop.jsx

@@ -1,137 +0,0 @@
-import React, { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import InputCom from "../Helpers/Inputs/InputCom";
-
-import AddFundDollars from "./AddFundDollars";
-
-function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
-  const navigate = useNavigate();
-  //   const { currency } = useLocation()?.state; //GETS THE USER CURRENCY FOR ADD FUND
-
-  let { payment, currency } = _payment;
-
-  //STATE FOR CONTROLLED INPUT
-  let [inputError, setInputError] = useState("");
-
-  // FUNCTION TO HANDLE INPUT CHANGE
-  const handleChange = ({ target: { name, value } }) => {
-    setInput(value);
-  };
-
-  //FUNCTION TO HANDLE SUBMIT
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    setInputError("");
-    if (!input || input == "0") {
-      setInputError("Please Enter Amount");
-      return setTimeout(() => {
-        setInputError("");
-      }, 5000);
-    }
-
-    if (isNaN(input)) {
-      setInputError("Amount must be a Number");
-      return setTimeout(() => {
-        setInputError("");
-      }, 5000);
-    }
-
-    const stateData = {
-      amount: Number(input),
-      currency: currency,
-    };
-    return setTimeout(
-      () =>
-        setConfirmCredit({
-          show: true,
-          data: stateData,
-        }),
-      1500
-    );
-  };
-
-  return (
-    <div className="h-[33rem] w-full">
-      <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
-        <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
-          <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
-            {/*<h2 className='md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Add Credit with Account Deposit</h2>*/}
-            {/*<hr />*/}
-            <form className="md:px-8 md:pt-4 px-4 pt-2 add-fund-info flex items-center gap-[2.1rem]">
-              <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                {currency == "US Dollars" ? "Amount (USD)" : "Amount (Naira)"}
-              </h1>
-              <div className="field w-full max-w-[250px]">
-                <InputCom
-                  fieldClass="px-6"
-                  type="text"
-                  name="amount"
-                  placeholder="0"
-                  value={input}
-                  inputHandler={handleChange}
-                />
-                <p className="text-base text-red-500 h-5">
-                  {inputError && inputError}
-                </p>
-              </div>
-            </form>
-
-            {/* SHOWS THIS IF USER CURRENCY IS DOLLARS */}
-            {currency == "US Dollars" && (
-              <div className="w-full md:px-8 md:pt-4 px-4 pt-2 bg-white dark:bg-dark-white rounded-2xl">
-                <AddFundDollars
-                  setInputError={setInputError}
-                  input={input}
-                  setInput={setInput}
-                  currency={currency}
-                  onClose={onClose}
-                  setConfirmCredit={setConfirmCredit}
-                />
-              </div>
-            )}
-
-            {/* HIDES THIS BUTTON IF CURENCY IS NAIRA */}
-            {currency != "US Dollars" && (
-              <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
-                <button
-                  className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                  onClick={onClose}
-                >
-                  Cancel
-                </button>
-                <button
-                  onClick={handleSubmit}
-                  type="button"
-                  className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                >
-                  <span className="text-white">Continue</span>
-                </button>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* HIDES THIS SECTION IF CURENCY IS NAIRA */}
-      {currency != "US Dollars" &&
-        // <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
-        //   <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
-        //     <div className="wallet w-full md:p-8 p-4 h-full min-h-[590px] bg-white dark:bg-dark-white rounded-2xl shadow">
-        //       <h2 className="text-gray-900 dark:text-white text-xl lg:text-2xl font-medium">
-        //         Recent Activity
-        //       </h2>
-        //       {/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
-        //       {payment?.loading ? (
-        //         <LoadingSpinner size="16" color="sky-blue" />
-        //       ) : (
-        //         <RecentActivityTable payment={payment} />
-        //       )}
-        //     </div>
-        //   </div>
-        // </div>
-        null}
-    </div>
-  );
-}
-
-export default AddFundPop;

src/components/MyWallet/Balance.jsx

@@ -1,115 +1,129 @@
-import React, {useState} from 'react'
-import { Link } from 'react-router-dom'
-import RecentActivityTable from './WalletComponent/RecentActivityTable'
-import PurchasesTable from './WalletComponent/PurchasesTable'
-import CouponTable from './WalletComponent/CouponTable'
-import LoadingSpinner from '../Spinners/LoadingSpinner'
-import { PriceFormatter } from '../Helpers/PriceFormatter'
+import React from "react";
+import { Link } from "react-router-dom";
+import { PriceFormatter } from "../Helpers/PriceFormatter";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 
-function Balance({wallet, coupon}) {
-    return (
-        <div className="content-wrapper">
-            {/* 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">
-                        Wallet
-                    </h1>
-                </div>
-                <div className="slider-btns flex space-x-4">
-
-                </div>
-            </div>
-            <div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
-                {/* WALLET SECTION */}
-                <div className="lg:w-4/4 w-full mb-10 lg:mb-0">
-                    <div className="wallet w-full  md:p-8 p-4 h-full bg-white dark:bg-dark-white rounded-2xl shadow min-h-[520px]">
-                        <div className='flex items-baseline justify-between'>
-                            {/*<h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Wallet</h2>*/}
-                            {/*<p className='text-base text-slate-500 dark:text-white'>Add New Wallet</p>*/}
-                        </div>
-                        {/* wallet balance */}
-                        {wallet.loading ?
-                        <LoadingSpinner size='16' color='sky-blue' />
-                        :
-                        wallet.data.length ?
-                        wallet.data.map((item, index)=> (
-                        <div key={index} className="p-3 md:flex items-center flex-wrap my-3 border-t-2 border-slate-400 wallet-box">
-                                <div className='text-slate-900 w-full md:w-1/2 flex space-x-3 items-start justify-start'>
-                                    <div className='balance-info bal-col1'>
-                                        <p className='py-2'></p>
-                                        <span className='text-xl text-dark-gray dark:text-white'><b>{item.description}</b></span>
-                                        <p className='text-base text-slate-500'>{item.symbol}</p>
-                                    </div>
-                                    <div className='balance-info'>
-                                        <p className='py-2'>Balance</p>
-                                        <span className='py-1 px-2 bg-green-100 text-green-500 rounded-lg flex flex-start gap-1'>{PriceFormatter(item.amount * 0.01, item.code)}</span>
-                                    </div>
-                                    <div className='balance-info'>
-                                        <p className='py-2'>Escrow</p>
-                                        <span className='py-1 px-2 bg-red-100 text-red-500 rounded-lg flex flex-start gap-1'>{PriceFormatter(item.escrow * 0.01, item.code)}</span>
-                                    </div>
-                                </div>
-
-                                <div className='w-full my-2 md:my-0 md:w-1/2 flex space-x-2 items-center justify-start md:justify-end'>
-                                    {
-                                        item.action_type != 'AC_AD_FD_ONLY' ?
-                                            <Link to='transfer-fund' className='px-2 py-1 flex items-center gap-2 user-balance cursor-pointer h-[48px] rounded-full relative  bg-purple lg:text-xl text-lg font-bold text-white'>Transfer</Link>:''
-                                    }
-                                    <Link to='add-fund' state={{currency:item.description}} className='px-2 py-1 flex items-center gap-2 user-balance cursor-pointer h-[48px] rounded-full relative  bg-green lg:text-xl text-lg font-bold text-white'>
-                                        <span className="">
-                                            <svg xmlns="http://www.w3.org/2000/svg" width="38"
-                                                height="38" viewBox="0 0 42 42" fill="none"><path
-                                                d="M21 0C16.8466 0 12.7865 1.23163 9.33303 3.53914C5.8796 5.84665 3.18798 9.1264 1.59854 12.9636C0.00909901 16.8009 -0.406771 21.0233 0.403518 25.0969C1.21381 29.1705 3.21386 32.9123 6.15077 35.8492C9.08767 38.7861 12.8295 40.7862 16.9031 41.5965C20.9767 42.4068 25.1991 41.9909 29.0364 40.4015C32.8736 38.812 36.1534 36.1204 38.4609 32.667C40.7684 29.2135 42 25.1534 42 21C41.994 15.4323 39.7796 10.0944 35.8426 6.15741C31.9056 2.22045 26.5677 0.00602189 21 0ZM28 22.75H22.75V28C22.75 28.4641 22.5656 28.9092 22.2374 29.2374C21.9093 29.5656 21.4641 29.75 21 29.75C20.5359 29.75 20.0908 29.5656 19.7626 29.2374C19.4344 28.9092 19.25 28.4641 19.25 28V22.75H14C13.5359 22.75 13.0908 22.5656 12.7626 22.2374C12.4344 21.9092 12.25 21.4641 12.25 21C12.25 20.5359 12.4344 20.0907 12.7626 19.7626C13.0908 19.4344 13.5359 19.25 14 19.25H19.25V14C19.25 13.5359 19.4344 13.0908 19.7626 12.7626C20.0908 12.4344 20.5359 12.25 21 12.25C21.4641 12.25 21.9093 12.4344 22.2374 12.7626C22.5656 13.0908 22.75 13.5359 22.75 14V19.25H28C28.4641 19.25 28.9093 19.4344 29.2374 19.7626C29.5656 20.0907 29.75 20.5359 29.75 21C29.75 21.4641 29.5656 21.9092 29.2374 22.2374C28.9093 22.5656 28.4641 22.75 28 22.75Z"
-                                                fill="white"></path>
-                                            </svg>
-                                        </span>
-                                        <span className='text-white'>Add Credit</span>
-                                    </Link>
-                                </div>
-                        </div>
-                        ))
-                        :
-                        wallet.error ? 
-                        (
-                        <div className="md:flex items-center flex-wrap mt-3">
-                            <p className='text-base'>Opps! An Error occurred, please try again</p>
-                        </div>
-                        )
-                        :
-                        (
-                        <div className="md:flex items-center flex-wrap mt-3">
-                            <p className='text-base'>No Wallets Found!</p>
-                        </div>
-                        )
-                        }
-                        {/* end of wallet balance */}
-                    </div>
-                </div>
-                {/* END OF WALLET SECTION */}
-
-
-
-            </div>
-
-            {/*<div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>*/}
-
-            {/*    /!* COUPON SECTION *!/*/}
-            {/*    <div className="lg:w-3/4 w-full mb-10 lg:mb-0">*/}
-            {/*        <div className="wallet w-full  md:p-8 p-4 h-full max-h-[500px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">*/}
-            {/*            <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Coupons</h2>*/}
-            {/*            {coupon.loading ?*/}
-            {/*                <LoadingSpinner size='16' color='sky-blue' />*/}
-            {/*                :*/}
-            {/*                <CouponTable coupon={coupon} />*/}
-            {/*            }*/}
-            {/*        </div>*/}
-            {/*    </div>*/}
-            {/*    /!* END OF COUPON SECTION *!/*/}
-
-            {/*</div>*/}
+function Balance({ wallet, coupon }) {
+  return (
+    <div className="content-wrapper">
+      {/* 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">
+            Wallet
+          </h1>
         </div>
-      )
+        <div className="slider-btns flex space-x-4"></div>
+      </div>
+      <div className="w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
+        {/* WALLET SECTION */}
+        <div className="lg:w-4/4 w-full mb-10 lg:mb-0">
+          <div className="wallet w-full  md:p-8 p-4 h-full bg-white dark:bg-dark-white rounded-2xl shadow min-h-[520px]">
+            <div className="flex items-baseline justify-between">
+              {/*<h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Wallet</h2>*/}
+              {/*<p className='text-base text-slate-500 dark:text-white'>Add New Wallet</p>*/}
+            </div>
+            {/* wallet balance */}
+            {wallet.loading ? (
+              <LoadingSpinner size="16" color="sky-blue" />
+            ) : wallet.data.length ? (
+              wallet.data.map((item, index) => (
+                <div
+                  key={index}
+                  className="p-3 md:flex items-center flex-wrap my-3 border-t-2 border-slate-400 wallet-box"
+                >
+                  <div className="text-slate-900 w-full md:w-1/2 flex space-x-3 items-start justify-start">
+                    <div className="balance-info bal-col1">
+                      <p className="py-2"></p>
+                      <span className="text-xl text-dark-gray dark:text-white">
+                        <b>{item.description}</b>
+                      </span>
+                      <p className="text-base text-slate-500">{item.symbol}</p>
+                    </div>
+                    <div className="balance-info">
+                      <p className="py-2">Balance</p>
+                      <span className="py-1 px-2 bg-green-100 text-green-500 rounded-lg flex flex-start gap-1">
+                        {PriceFormatter(item.amount * 0.01, item.code)}
+                      </span>
+                    </div>
+                    <div className="balance-info">
+                      <p className="py-2">Escrow</p>
+                      <span className="py-1 px-2 bg-red-100 text-red-500 rounded-lg flex flex-start gap-1">
+                        {PriceFormatter(item.escrow * 0.01, item.code)}
+                      </span>
+                    </div>
+                  </div>
+
+                  <div className="w-full my-2 md:my-0 md:w-1/2 flex space-x-2 items-center justify-start md:justify-end">
+                    {item.action_type != "AC_AD_FD_ONLY" ? (
+                      <Link
+                        to="transfer-fund"
+                        className="px-2 py-1 flex items-center gap-2 user-balance cursor-pointer h-[48px] rounded-full relative  bg-purple lg:text-xl text-lg font-bold text-white"
+                      >
+                        Transfer
+                      </Link>
+                    ) : (
+                      ""
+                    )}
+                    <Link
+                      to="add-fund"
+                      state={{ currency: item.description }}
+                      className="px-2 py-1 flex items-center gap-2 user-balance cursor-pointer h-[48px] rounded-full relative  bg-green lg:text-xl text-lg font-bold text-white"
+                    >
+                      <span className="">
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="38"
+                          height="38"
+                          viewBox="0 0 42 42"
+                          fill="none"
+                        >
+                          <path
+                            d="M21 0C16.8466 0 12.7865 1.23163 9.33303 3.53914C5.8796 5.84665 3.18798 9.1264 1.59854 12.9636C0.00909901 16.8009 -0.406771 21.0233 0.403518 25.0969C1.21381 29.1705 3.21386 32.9123 6.15077 35.8492C9.08767 38.7861 12.8295 40.7862 16.9031 41.5965C20.9767 42.4068 25.1991 41.9909 29.0364 40.4015C32.8736 38.812 36.1534 36.1204 38.4609 32.667C40.7684 29.2135 42 25.1534 42 21C41.994 15.4323 39.7796 10.0944 35.8426 6.15741C31.9056 2.22045 26.5677 0.00602189 21 0ZM28 22.75H22.75V28C22.75 28.4641 22.5656 28.9092 22.2374 29.2374C21.9093 29.5656 21.4641 29.75 21 29.75C20.5359 29.75 20.0908 29.5656 19.7626 29.2374C19.4344 28.9092 19.25 28.4641 19.25 28V22.75H14C13.5359 22.75 13.0908 22.5656 12.7626 22.2374C12.4344 21.9092 12.25 21.4641 12.25 21C12.25 20.5359 12.4344 20.0907 12.7626 19.7626C13.0908 19.4344 13.5359 19.25 14 19.25H19.25V14C19.25 13.5359 19.4344 13.0908 19.7626 12.7626C20.0908 12.4344 20.5359 12.25 21 12.25C21.4641 12.25 21.9093 12.4344 22.2374 12.7626C22.5656 13.0908 22.75 13.5359 22.75 14V19.25H28C28.4641 19.25 28.9093 19.4344 29.2374 19.7626C29.5656 20.0907 29.75 20.5359 29.75 21C29.75 21.4641 29.5656 21.9092 29.2374 22.2374C28.9093 22.5656 28.4641 22.75 28 22.75Z"
+                            fill="white"
+                          ></path>
+                        </svg>
+                      </span>
+                      <span className="text-white">Add Credit</span>
+                    </Link>
+                  </div>
+                </div>
+              ))
+            ) : wallet.error ? (
+              <div className="md:flex items-center flex-wrap mt-3">
+                <p className="text-base">
+                  Opps! An Error occurred, please try again
+                </p>
+              </div>
+            ) : (
+              <div className="md:flex items-center flex-wrap mt-3">
+                <p className="text-base">No Wallets Found!</p>
+              </div>
+            )}
+            {/* end of wallet balance */}
+          </div>
+        </div>
+        {/* END OF WALLET SECTION */}
+      </div>
+
+      {/*<div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>*/}
+
+      {/*    /!* COUPON SECTION *!/*/}
+      {/*    <div className="lg:w-3/4 w-full mb-10 lg:mb-0">*/}
+      {/*        <div className="wallet w-full  md:p-8 p-4 h-full max-h-[500px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">*/}
+      {/*            <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Coupons</h2>*/}
+      {/*            {coupon.loading ?*/}
+      {/*                <LoadingSpinner size='16' color='sky-blue' />*/}
+      {/*                :*/}
+      {/*                <CouponTable coupon={coupon} />*/}
+      {/*            }*/}
+      {/*        </div>*/}
+      {/*    </div>*/}
+      {/*    /!* END OF COUPON SECTION *!/*/}
+
+      {/*</div>*/}
+    </div>
+  );
 }
 
-export default Balance
+export default Balance;

src/components/MyWallet/ConfirmAddFund.jsx

@@ -1,215 +0,0 @@
-import React, { useState } from "react";
-import { useSelector } from "react-redux";
-import { useNavigate } from "react-router-dom";
-import { toast } from "react-toastify";
-import InputCom from "../Helpers/Inputs/InputCom";
-
-import usersService from "../../services/UsersService";
-
-import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";
-
-function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
-  let { userDetails } = useSelector((state) => state.userDetails); // TO GET LOGGEDIN USER DETAILS
-
-  let [pageLoading, setPageLoading] = useState(true);
-
-  let [requestStatus, setRequestStatus] = useState({
-    message: "",
-    loading: false,
-    status: false,
-  }); // STATE FOR API REQUEST
-
-  const apiURL = new usersService();
-  const navigate = useNavigate();
-
-  //FUNCTION TO HANDLE SUBMIT
-  const onSuccessPayment = () => {
-    setRequestStatus({ message: "", loading: true, status: false });
-    let reqData = { amount: confirmCredit?.data?.account, currency: "NGN" };
-    apiURL
-      .startTopUp(reqData)
-      .then((res) => {
-        if (res.data.internal_return < 0) {
-          setRequestStatus({
-            message: "Could not finish transaction",
-            loading: false,
-            status: false,
-          });
-          toast.success("Opps! something went wrong");
-        }
-        // do something
-        setRequestStatus({
-          message: "Topup successful",
-          loading: false,
-          status: true,
-        });
-        toast.success("Account Topup was sucessful");
-        setTimeout(() => {
-          navigate("/my-wallet", { replace: true });
-        }, 1000);
-      })
-      .catch((err) => {
-        // do something
-        setRequestStatus({
-          message: "Opps! An Error Occured",
-          loading: false,
-          status: false,
-        });
-        toast.success("Opps! something went wrong");
-      });
-  };
-
-  const config = {
-    public_key: process.env.REACT_APP_FLUTTERWAVE_APIKEY,
-    tx_ref: Date.now(),
-    amount: confirmCredit?.data?.amount,
-    currency: "NGN",
-    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",
-    },
-  };
-
-  const fwConfig = {
-    ...config,
-    text: "Proceed",
-    callback: (response) => {
-      onSuccessPayment();
-      closePaymentModal(); // this will close the modal programmatically
-    },
-    onClose: () => {},
-  };
-
-  // useEffect(() => {
-  //   // what happens if not data redirect user
-  //   if (!data) {
-  //     navigate("/my-wallet/add-fund", { replace: true });
-  //   } else {
-  //     setPageLoading(false);
-  //   }
-  // }, []);
-
-  let __confirmCard = JSON.parse(confirmCredit?.data.card) || "";
-  const ThePaymentText = ({ value }) => (
-    <div className="my-2 flex items-center gap-5">
-      <div className="card-details flex items-center gap-3">
-        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-          {value.description} Card
-        </h1>
-        <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
-          Bank **************{value.digits}
-        </p>
-      </div>
-    </div>
-  );
-
-  return (
-    <div className="content-wrapper w-full h-[32rem]">
-      <div className="w-full mb-10">
-        <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
-          {/* <h2 className="md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
-              Confirm Add Fund To Account
-            </h2>
-            <hr /> */}
-          <div className="px-4 md:p-8 py-4 add-fund-info">
-            <div className="field w-full mb-3 min-h-[45px]">
-              {confirmCredit?.show ? (
-                <div className="flex flex-col gap-4">
-                  <div className="flex items-center gap-4">
-                    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                      {confirmCredit?.data?.currency == "naira"
-                        ? "Amount (Naira):"
-                        : "Amount (Dollars):"}
-                    </h1>
-                    <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                      {`${walletItem?.symbol} ${
-                        Number(confirmCredit?.data?.amount).toLocaleString() ||
-                        ""
-                      }`}
-                    </span>
-                  </div>
-                  <div className="flex items-center gap-4">
-                    {/* <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"> */}
-                    <label
-                      htmlFor="payment"
-                      className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
-                    >
-                      {confirmCredit?.data?.currency && "Payment Method:"}
-                    </label>
-                    <span className="text-[#181c32] dark:text-white ">
-                      {__confirmCard && (
-                        <ThePaymentText value={__confirmCard} />
-                      )}
-                    </span>
-                  </div>
-                </div>
-              ) : (
-                <InputCom
-                  fieldClass="px-6"
-                  label={
-                    confirmCredit?.data?.currency == "naira"
-                      ? "Amount (Naira):"
-                      : "Amount (Dollars):"
-                  }
-                  type="text"
-                  name="amount"
-                  value={confirmCredit?.data?.amount || ""}
-                  disable={true}
-                />
-              )}
-            </div>
-          </div>
-          {/* <h1 className="mb-2 text-xl font-bold text-dark-gray dark:text-white px-4 h-5">
-            {confirmCredit?.data?.currency && "Payment Method"}
-          </h1> */}
-          {/* <hr /> */}
-          <div className="min-h-[220px]"></div>
-          <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}
-            >
-              Cancel
-            </button>
-            {confirmCredit?.data?.currency == "naira" ? (
-              <FlutterWaveButton
-                {...fwConfig}
-                className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-              />
-            ) : (
-              <button
-                className="px-4 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                onClick={() => console.log("WORKING")}
-              >
-                Continue
-              </button>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* <div className="w-full mb-10">
-        <div className="wallet w-full  md:p-8 p-4 h-full bg-white dark:bg-dark-white rounded-2xl shadow">
-          <h2 className="text-gray-900 dark:text-white text-xl lg:text-2xl font-medium">
-            Recent Activity
-          </h2>
-          <p className='text-base text-gray-600 dark:text-white'>Activity Report</p>
-          {payment.loading ? (
-            <LoadingSpinner size="16" color="sky-blue" />
-          ) : (
-            <RecentActivityTable payment={payment} />
-          )}
-        </div>
-      </div> */}
-    </div>
-  );
-}
-
-export default ConfirmAddFund;

src/components/MyWallet/Popup/AddFund.jsx

@@ -0,0 +1,154 @@
+import React, { useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import InputCom from "../Helpers/Inputs/InputCom";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+import RecentActivityTable from "./WalletComponent/RecentActivityTable";
+
+import AddFundDollars from "./AddFundDollars";
+
+function AddFund({ payment }) {
+  const navigate = useNavigate();
+  const { currency } = useLocation()?.state; //GETS THE USER CURRENCY FOR ADD FUND
+
+  //STATE FOR CONTROLLED INPUT
+  let [input, setInput] = useState("");
+
+  let [inputError, setInputError] = useState("");
+
+  // FUNCTION TO HANDLE INPUT CHANGE
+  const handleChange = ({ target: { name, value } }) => {
+    setInput(value);
+  };
+
+  //FUNCTION TO HANDLE SUBMIT
+  const handleSubmit = () => {
+    setInputError("");
+    if (!input || input == "0") {
+      setInputError("Please Enter Amount");
+      return setTimeout(() => {
+        setInputError("");
+      }, 5000);
+    }
+
+    if (isNaN(input)) {
+      setInputError("Amount must be a Number");
+      return setTimeout(() => {
+        setInputError("");
+      }, 5000);
+    }
+
+    const stateData = { amount: Number(input), currency: "naira" };
+    navigate("confirm-add-fund", { state: stateData });
+
+    setInput("");
+  };
+  
+  return (
+    <div>
+      {/* heading */}
+      {/* <div className="sm:flex justify-between items-center mb-6">
+                <div className="w-full flex justify-start space-x-3 items-center">
+                    <button
+                    type="button"
+                    className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
+                    onClick={() =>
+                        navigate('/my-wallet', { replace: true })
+                    }
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="35"
+                            height="35"
+                            viewBox="0 0 24 24"
+                            fill="skyblue"
+                        >
+                            <path d="M19 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H19v-2z" />
+                        </svg>
+                    </button>
+                    <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
+                    Add Credit
+                    </h1>
+                </div>
+                <div className="slider-btns flex space-x-4">
+                    <div
+                        onClick={() => filterHandler("today")}
+                        className="relative"
+                    ></div>
+                </div>
+            </div> */}
+
+      <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
+        <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
+          <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
+            {/*<h2 className='md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Add Credit with Account Deposit</h2>*/}
+            {/*<hr />*/}
+            <form className="md:p-8 p-4 add-fund-info">
+              <div className="field w-full mb-6">
+                <InputCom
+                  fieldClass="px-6"
+                  label={
+                    currency == "US Dollars" ? "Amount (USD)" : "Amount (Naira)"
+                  }
+                  type="text"
+                  name="amount"
+                  placeholder="0"
+                  value={input}
+                  inputHandler={handleChange}
+                />
+                {inputError && (
+                  <p className="text-base text-red-500">{inputError}</p>
+                )}
+              </div>
+            </form>
+            <hr />
+
+            {/* SHOWS THIS IF USER CURRENCY IS DOLLARS */}
+            {currency == "US Dollars" && (
+              <div className="w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
+                <AddFundDollars
+                  setInputError={setInputError}
+                  input={input}
+                  setInput={setInput}
+                />
+              </div>
+            )}
+
+            {/* HIDES THIS BUTTON IF CURENCY IS NAIRA */}
+            {currency != "US Dollars" && (
+              <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4">
+                <button
+                  onClick={handleSubmit}
+                  type="button"
+                  className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                >
+                  <span className="text-white">Continue</span>
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* HIDES THIS SECTION IF CURENCY IS NAIRA */}
+      {currency != "US Dollars" && (
+        <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
+          <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
+            <div className="wallet w-full md:p-8 p-4 h-full min-h-[590px] bg-white dark:bg-dark-white rounded-2xl shadow">
+              <h2 className="text-gray-900 dark:text-white text-xl lg:text-2xl font-medium">
+                Recent Activity
+              </h2>
+              {/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
+              {payment.loading ? (
+                <LoadingSpinner size="16" color="sky-blue" />
+              ) : (
+                <RecentActivityTable payment={payment} />
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default AddFund;

src/components/MyWallet/Popup/AddFundDollars.jsx

@@ -1,29 +1,38 @@
-import React, { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import usersService from "../../services/UsersService";
-import InputCom from "../Helpers/Inputs/InputCom";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
-
 import { Form, Formik } from "formik";
+import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import * as Yup from "yup";
-import Icons from "../Helpers/Icons";
+import usersService from "../../../services/UsersService";
+import Icons from "../../Helpers/Icons";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
 const validationSchema = Yup.object().shape({
-  name: Yup.string()
-    .min(3, "3 chars min.")
-    .max(50, "50 chars max.")
-    .required("required"),
   cardNum: Yup.string()
-    .min(3, "3 chars min.")
-    .max(25, "25 chars max.")
+    .min(6, "not a card number")
+    .max(19, "16 chars max.") //16 chars + 3 spaces
+    .test("luhn-validation", "Invalid Card Number", (value) => {
+      const sanitizedNumber = value?.replace(/\D/g, "");
+      const digits = Array?.from(sanitizedNumber, Number);
+
+      for (let i = digits.length - 2; i >= 0; i -= 2) {
+        digits[i] *= 2;
+        if (digits[i] > 9) {
+          digits[i] -= 9;
+        }
+      }
+
+      const sum = digits.reduce((acc, digit) => acc + digit, 0);
+
+      return sum % 10 === 0;
+    })
     .required("required"),
   code: Yup.string()
     .min(3, "3 chars min.")
     .max(25, "25 chars max.")
     .required("required"),
   state: Yup.string()
-    .min(3, "3 chars min.")
+    .min(2, "2 chars min.")
     .max(25, "25 chars max.")
     .required("required"),
   address: Yup.string()
@@ -45,7 +54,6 @@ const validationSchema = Yup.object().shape({
 });
 
 const initialValues = {
-  name: "",
   cardNum: "",
   code: "",
   state: "",
@@ -56,24 +64,54 @@ const initialValues = {
 };
 
 function AddFundDollars(props) {
-  const navigate = useNavigate();
   const apiCall = new usersService();
-
+  let countryWallet = props.walletItem.country;
   const [tab, setTab] = useState("previous");
-  const [loader, setLoader] = useState(false);
   const { userDetails } = useSelector((state) => state?.userDetails);
-  const { firstname, lastname } = userDetails;
   const [prevCardDetails, setPrevCardDetails] = useState({});
   const [payListCards, setPayListCards] = useState({ loading: true, data: [] });
+  const [cardIcons, setCardIcons] = useState("atm-card");
+  const [prevCardError, setPrevCardError] = useState("");
 
+  const { firstname, lastname } = userDetails;
+
+  // Handling Card Icons
+  const handleCards = (event) => {
+    const { name, value } = event.target;
+
+    if (name == "cardNum") {
+      // Check if the first character is 4 or 5 and set the card icon accordingly
+      const cardIcon =
+        value.length > 0
+          ? value[0] === "4"
+            ? "visa-card"
+            : value[0] === "5"
+            ? "master-card"
+            : "atm-card"
+          : "atm-card";
+      setCardIcons(cardIcon);
+    }
+  };
+
+  // Handling card change
   const handleInputChange = (event) => {
     const { name, value } = event.target;
+
     setPrevCardDetails((prevState) => ({
       ...prevState,
       [name]: value,
     }));
   };
 
+  // Handling card number grouping
+  const handleCardNumberChange = (value) => {
+    return value
+      ?.replace(/\s/g, "") // Remove existing spaces
+      .match(/.{1,4}/g) // Group every four characters
+      ?.join(" ");
+  };
+
+  // card slicer
   const indexOfFirstItem = 0;
   const indexOfLastItem =
     indexOfFirstItem + Number(process.env.REACT_APP_ITEM_PER_PAGE);
@@ -82,41 +120,74 @@ function AddFundDollars(props) {
     indexOfLastItem
   );
 
-  const handleSubmit = (values, helpers) => {
+  // Submission for both prev and new cards
+  const handleSubmit = async (values, helpers) => {
     props.setInputError("");
+
     if (!props.input || props.input === "0") {
       props.setInputError("Please Enter Amount");
+      setTimeout(() => props.setInputError(""), 5000);
       return;
     }
 
     if (isNaN(props.input)) {
       props.setInputError("Amount must be a Number");
+      setTimeout(() => props.setInputError(""), 5000);
       return;
     }
 
     if (tab === "previous") {
-      if (!prevCardDetails) {
+      // To check if card is empty
+      if (Object.keys(prevCardDetails).length === 0) {
+        setPrevCardError("No card selected!");
+        setTimeout(() => setPrevCardError(""), 5000);
         return;
       }
-      setLoader(true);
-      const stateData = {
-        amount: Number(props.input),
-        currency: props.currency,
-        card: prevCardDetails["payment-card"],
-      };
-
-      return setTimeout(() => {
-        props.setConfirmCredit({ show: true, data: stateData });
-        setLoader(false);
-      }, 1500);
     }
 
-    if (tab === "new") {
-      const stateData = {
-        amount: Number(props.input),
-        currency: props.currency,
-        ...values,
-      };
+    props.setConfirmCredit((prev) => ({
+      ...prev,
+      show: { awaitConfirm: { loader: true } },
+    }));
+
+    let stateData = {
+      amount: Number(props.input) * 100,
+      currency: props.walletItem?.code,
+    };
+
+    try {
+      const res = await apiCall.getStartCredit(stateData);
+      if (res.data.internal_return < 0) {
+        props.setInputError("An Error Occurred");
+        throw new Error("An Error Occurred");
+      }
+
+      const _response = res.data;
+      stateData.amount = Number(props.input);
+      stateData.card =
+        tab === "previous"
+          ? prevCardDetails["payment-card"]
+          : { ...values, cvv: values.cvv };
+      stateData.cardType = tab === "previous" ? "prev" : "new";
+      stateData = { ...stateData, ..._response };
+
+      setTimeout(() => {
+        props.setConfirmCredit({
+          show: {
+            awaitConfirm: { loader: false, state: true },
+            acceptConfirm: { loader: false, state: false },
+          },
+          data: stateData,
+        });
+      }, 1500);
+    } catch (error) {
+      props.setInputError(error.message);
+      setTimeout(() => props.setInputError(""), 5000);
+      props.setConfirmCredit((prev) => ({
+        ...prev,
+        show: { awaitConfirm: { loader: false } },
+      }));
+      console.log(error);
     }
   };
 
@@ -132,9 +203,7 @@ function AddFundDollars(props) {
       });
   }, []);
 
-  console.log(props)
-
-  const handleClose = props.onClose
+  const handleClose = props.onClose;
 
   return (
     <>
@@ -143,7 +212,7 @@ function AddFundDollars(props) {
         <div className="flex">
           <form className="add-fund-info flex items-center gap-3">
             <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-              {props.currency == "US Dollars" && "Payment Method"}
+              {countryWallet == "US" && "Payment Method"}
             </h1>
             <div className="my-1 flex items-center gap-2">
               <label
@@ -185,13 +254,13 @@ function AddFundDollars(props) {
         {/* END OF switch button */}
 
         {/* previous tab */}
-        {tab === "previous" ? (
-          <div className="p-4 previous-details w-full min-h-[16rem] flex flex-col justify-between items-center">
+        {tab === "previous" && (
+          <div className="p-4 previous-details w-full min-h-[16rem] flex flex-col">
             {payListCards.loading ? (
               <LoadingSpinner size="10" color="sky-blue" />
             ) : payListCards?.data?.length ? (
               <select
-                className="my-3 w-full rounded-full p-4 outline-none text-base text-black dark:text-gray-100 bg-[#FAFAFA] dark:bg-[#11131F] border"
+                className="my-3 w-full rounded-full p-2 outline-none text-base text-black dark:text-gray-100 bg-[#FAFAFA] dark:bg-[#11131F] border"
                 value={prevCardDetails["payment-card"]?.card_uid}
                 id="payment-card"
                 name="payment-card"
@@ -231,9 +300,14 @@ function AddFundDollars(props) {
                 </button>
               </div>
             )}
+            <p className="text-base italic text-red-500 h-5">
+              {prevCardError && prevCardError}
+            </p>
           </div>
-        ) : (
-          <div className="new-details w-full max-h-[23rem] overflow-y-scroll">
+        )}
+
+        {tab === "new" && (
+          <div className="new-details w-full max-h-[23rem]">
             <div className="w-full flex flex-col justify-between">
               <Formik
                 initialValues={initialValues}
@@ -255,23 +329,27 @@ function AddFundDollars(props) {
                               <p className="input-label text-[#181c32] dark:text-white text-[16px] leading-[20.9625px] font-semibold flex items-center gap-1">{`${firstname} ${lastname}`}</p>
                             </div>
 
-                            <div className="flex items-center flex-1 gap-3 my-[10px]">
+                            <div className="flex items-center flex-1 gap-3 my-2">
                               {/* Card Number */}
                               <div className="field w-full flex-[0.6]">
                                 <InputCom
                                   fieldClass="px-6"
                                   spanTag="*"
-                                  iconName="master-card visa-card atm-card"
+                                  iconName={cardIcons}
                                   label="Card Number"
                                   type="text"
                                   name="cardNum"
+                                  onInput={handleCards}
                                   placeholder="Enter Card Number"
-                                  value={props.values.cardNum}
+                                  value={handleCardNumberChange(
+                                    props.values.cardNum
+                                  )}
                                   inputHandler={props.handleChange}
                                   blurHandler={props.handleBlur}
                                   error={props.errors.cardNum}
                                 />
                               </div>
+
                               {/* Expire Year, Year */}
                               <div className="sm:grid gap-5 grid-cols-2 flex-[0.4]">
                                 <div className="field w-full mb-6 xl:mb-0 col-span-1">
@@ -312,7 +390,11 @@ function AddFundDollars(props) {
                                           expireMonth.map((item, index) => (
                                             <option
                                               key={index}
-                                              value={item.value}
+                                              value={
+                                                Number(item.value) < 10
+                                                  ? "0" + item.value
+                                                  : item.value
+                                              }
                                             >
                                               {item.name}
                                             </option>
@@ -321,6 +403,7 @@ function AddFundDollars(props) {
                                     </div>
                                   </div>
                                 </div>
+
                                 <div className="field w-full mb-6 xl:mb-0 col-span-1">
                                   <div className="select-option">
                                     <div
@@ -368,17 +451,18 @@ function AddFundDollars(props) {
                               </div>
                             </div>
 
-                            <div className="flex items-center flex-1 gap-3 my-[10px]">
-                              {/* Address and CVV */}
+                            {/* Address and CVV */}
+                            <div className="flex items-center flex-1 gap-3 my-2">
                               <div className="field w-full col-span-1 flex-[0.4]">
                                 <InputCom
                                   fieldClass="px-6"
                                   spanTag="*"
-                                  iconName="atm-card"
+                                  iconName={cardIcons}
                                   label="CVV"
                                   type="text"
                                   name="cvv"
                                   placeholder="CVV"
+                                  maxLength={3}
                                   value={props.values.cvv}
                                   inputHandler={props.handleChange}
                                   blurHandler={props.handleBlur}
@@ -402,16 +486,17 @@ function AddFundDollars(props) {
                             </div>
 
                             {/* Postal Code and State */}
-                            <div className="sm:grid gap-5 grid-cols-3 my-[10px]">
+                            <div className="sm:grid gap-5 grid-cols-3 my-2">
                               <div className="field w-full mb-6 xl:mb-0 col-span-1">
                                 <InputCom
                                   fieldClass="px-6"
                                   spanTag="*"
                                   label="Postal Code"
-                                  type="text"
+                                  type="number"
                                   name="code"
                                   placeholder="Postal Code"
                                   value={props.values.code}
+                                  maxLength={6}
                                   inputHandler={props.handleChange}
                                   blurHandler={props.handleBlur}
                                   error={props.errors.code}
@@ -425,7 +510,7 @@ function AddFundDollars(props) {
                                   type="text"
                                   name="state"
                                   placeholder="State"
-                                  value={props.values.state}
+                                  value={props.values.state.toUpperCase()}
                                   inputHandler={props.handleChange}
                                   blurHandler={props.handleBlur}
                                   error={props.errors.state}
@@ -445,9 +530,9 @@ function AddFundDollars(props) {
                         </button>
                         <button
                           type="submit"
-                          className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                          className="px-4 py-1 h-11 max-w-[115px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
                         >
-                          {loader ? (
+                          {props.confirmCredit?.show?.awaitConfirm?.loader ? (
                             <LoadingSpinner size="6" color="sky-blue" />
                           ) : (
                             <>
@@ -465,6 +550,7 @@ function AddFundDollars(props) {
           </div>
         )}
       </div>
+
       {tab == "previous" && (
         <div className="md:py-8 px-[38px] add-fund-btn flex justify-end items-center gap-4 py-4">
           <button
@@ -475,10 +561,11 @@ function AddFundDollars(props) {
           </button>
           <button
             onClick={handleSubmit}
+            name="previous"
             type="button"
-            className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
+            className="px-4 py-1 h-11 max-w-[115px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
           >
-            {loader ? (
+            {props.confirmCredit?.show?.awaitConfirm?.loader ? (
               <LoadingSpinner size="6" color="sky-blue" />
             ) : (
               <span className="text-white">Continue</span>

src/components/MyWallet/Popup/AddFundPop.jsx

@@ -0,0 +1,170 @@
+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";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import AddFundDollars from "./AddFundDollars";
+
+function AddFundPop({
+  _payment,
+  input,
+  setInput,
+  onClose,
+  confirmCredit,
+  setConfirmCredit,
+  walletItem,
+}) {
+  const navigate = useNavigate();
+  const apiCall = new usersService();
+  let countryWallet = walletItem?.country;
+  const { payment, currency } = _payment;
+
+  const [inputError, setInputError] = useState("");
+  let __awaitComponent = confirmCredit.show.awaitConfirm;
+
+  const handleChange = ({ target: { name, value } }) => {
+    setInput(value);
+  };
+
+  const handleSubmit = async () => {
+    setInputError("");
+    setConfirmCredit((prev) => ({
+      ...prev,
+      show: { awaitConfirm: { loader: true } },
+    }));
+
+    if (!input || input === "0") {
+      setConfirmCredit((prev) => ({
+        ...prev,
+        show: { awaitConfirm: { loader: false } },
+      }));
+      setInputError("Please Enter Amount");
+      setTimeout(() => setInputError(""), 5000);
+      return;
+    }
+
+    if (isNaN(input)) {
+      setConfirmCredit((prev) => ({
+        ...prev,
+        show: { awaitConfirm: { loader: false } },
+      }));
+      setInputError("Amount must be a Number");
+      setTimeout(() => setInputError(""), 5000);
+      return;
+    }
+
+    let stateData = {
+      amount: Number(input) * 100,
+      currency: walletItem?.code,
+    };
+
+    try {
+      const res = await apiCall.getStartCredit(stateData);
+      if (res.data.internal_return < 0) {
+        setConfirmCredit((prev) => ({
+          ...prev,
+          show: { awaitConfirm: { loader: false } },
+        }));
+        setInputError("An Error Occurred");
+        setTimeout(() => setInputError(""), 5000);
+        return;
+      }
+
+      const _response = res.data;
+      stateData.amount = Number(input);
+      stateData.currency = currency;
+      stateData = { ...stateData, ..._response };
+
+      setTimeout(() => {
+        setConfirmCredit((prev) => ({
+          ...prev,
+          show: {
+            awaitConfirm: { loader: false, state: true },
+            acceptConfirm: { loader: false, state: false },
+          },
+          data: stateData,
+        }));
+      }, 1500);
+    } catch (error) {
+      setConfirmCredit((prev) => ({
+        ...prev,
+        show: { awaitConfirm: { loader: false } },
+      }));
+      console.log(error);
+    }
+  };
+
+  return (
+    <div className="h-[33rem] w-full">
+      <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
+        <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
+          <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
+            <form className="md:px-8 md:pt-4 px-4 pt-2 add-fund-info flex items-center gap-[2.1rem]">
+              <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                Amount({currency})
+              </h1>
+              <div className="field w-full max-w-[250px]">
+                <InputCom
+                  fieldClass="px-6"
+                  type="text"
+                  name="amount"
+                  placeholder="0"
+                  value={input}
+                  inputHandler={handleChange}
+                />
+                <p className="text-base text-red-500 h-5">
+                  {inputError && inputError}
+                </p>
+              </div>
+            </form>
+
+            {countryWallet === "US" && (
+              <div className="w-full md:px-8 md:pt-4 px-4 pt-2 bg-white dark:bg-dark-white rounded-2xl">
+                <AddFundDollars
+                  setInputError={setInputError}
+                  walletItem={walletItem}
+                  input={input}
+                  setInput={setInput}
+                  currency={currency}
+                  onClose={onClose}
+                  confirmCredit={confirmCredit}
+                  setConfirmCredit={setConfirmCredit}
+                />
+              </div>
+            )}
+
+            {countryWallet == "NG" && <div className="h-[18rem]"></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"
+                  onClick={onClose}
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={handleSubmit}
+                  type="button"
+                  className="px-4 py-1 h-11 flex justify-center space-x-1 items-center btn-gradient text-base rounded-full text-white max-w-[100px] w-full"
+                >
+                  {__awaitComponent.loader ? (
+                    <LoadingSpinner size="6" color="sky-blue" />
+                  ) : (
+                    <>
+                      <span className="text-white">Continue</span>{" "}
+                      <Icons name="chevron-right" />
+                    </>
+                  )}
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AddFundPop;

src/components/MyWallet/Popup/CompleteConfirmCredit.jsx

@@ -0,0 +1,114 @@
+import React from "react";
+
+function CompleteConfirmCredit({ onClose, confirmCredit }) {
+  const { data } = confirmCredit;
+  return (
+    <div className="logout-modal-body w-full flex flex-col items-center">
+      <div className="content-wrapper w-full h-[32rem]">
+        <div className="w-full mb-10">
+          <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
+            <div className="px-4 md:p-8 py-4 add-fund-info">
+              <div className="field w-full mb-3 min-h-[45px]">
+                <div
+                  className={`flex flex-col gap-4 ${
+                    data?.result !== "Charge success" &&
+                    "h-[328px] items-center justify-center"
+                  }`}
+                >
+                  {/* Success Icon for now */}
+                  <div className="flex items-center w-full justify-center">
+                    {data?.result == "Charge success" ? (
+                      <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>
+
+                  <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"
+                        ? "Credit was Successful!"
+                        : "Credit was Unsuccessful"}
+                    </h1>
+                  </div>
+
+                  {data?.internal_return >= 0 ? (
+                    <>
+                      <div className="flex items-center gap-8">
+                        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          Amount({data?.currency || ""})
+                        </h1>
+                        <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          {`${data?.symbol || ""} ${
+                            Number(data?.amount * 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">
+                          Wallet Balance
+                        </h1>
+                        <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          {data?.curr_balance}
+                        </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">
+                          {data?.confirmation}
+                        </span>
+                      </div>
+                    </>
+                  ) : null}
+                </div>
+              </div>
+            </div>
+            <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-white text-base rounded-full w-[100px]"
+                onClick={onClose}
+              >
+                Ok
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default CompleteConfirmCredit;

src/components/MyWallet/Popup/ConfirmAddFund.jsx

@@ -0,0 +1,384 @@
+import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";
+import React, { useState } from "react";
+import { useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+import usersService from "../../../services/UsersService";
+import { tableReload } from "../../../store/TableReloads";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+
+function ThePaymentText({ value, type }) {
+  const cardDetails = value;
+  value.description =
+    type === "new"
+      ? cardDetails.cardNum[0] === "4"
+        ? "Visa"
+        : cardDetails.cardNum[0] == "5"
+        ? "Master"
+        : "ATM"
+      : value.description;
+  value.digits = type === "new" ? cardDetails.cardNum.slice(-4) : value.digits;
+  return (
+    <div className="my-2 flex items-center gap-5">
+      <div className="card-details flex items-center gap-3">
+        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1 space-x-1">
+          {value.description} Card
+        </h1>
+        <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
+          Bank **************{value.digits}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function AmountSection({ currency, amount, country }) {
+  const formattedAmount = Number(amount).toFixed(2);
+  return (
+    <div
+      className={`flex items-center ${country == "US" ? "gap-14" : "gap-4"}`}
+    >
+      <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+        Amount({currency})
+      </h1>
+      <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+        {formattedAmount}
+      </span>
+    </div>
+  );
+}
+
+function TransactionFeeSection({ currency, fee, country }) {
+  const formattedFee = Number(fee).toFixed(2);
+  return (
+    <div
+      className={`flex items-center border-b border-gray-600 ${
+        country == "US" ? "gap-[2.7rem]" : "gap-4"
+      }`}
+    >
+      <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+        Transaction Fee
+      </h1>
+      <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+        {formattedFee}
+      </span>
+    </div>
+  );
+}
+
+function TotalSection({ currency, amount, fee, country }) {
+  const total = Number(amount) + Number(fee);
+  const formattedTotal = total.toFixed(2);
+  return (
+    <div
+      className={`flex items-center ${
+        country == "US" ? "gap-[8rem]" : "gap-[6.3rem]"
+      }`}
+    >
+      <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+        Total
+      </h1>
+      <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+        {formattedTotal}
+      </span>
+    </div>
+  );
+}
+
+function ConfirmAddFund({
+  confirmCredit,
+  onClose,
+  walletItem,
+  setConfirmCredit,
+}) {
+  const __confirmData = confirmCredit?.data;
+  const __confirmCountry = walletItem?.country;
+  const __confirmCardDetails =
+    __confirmData.cardType === "prev"
+      ? JSON.parse(__confirmData.card)
+      : __confirmData.card;
+
+  const apiURL = new usersService();
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+
+  const [requestStatus, setRequestStatus] = useState({
+    message: "",
+    loading: false,
+    status: false,
+  });
+
+  const config = {
+    public_key: process.env.REACT_APP_FLUTTERWAVE_APIKEY,
+    tx_ref: Date.now(),
+    currency: "NGN",
+    payment_options: "card,mobilemoney,ussd",
+    customizations: {
+      title: "WrenchBoard",
+      description: "Topup Payment",
+      logo: "https://st2.depositphotos.com/4403291/7418/v/450/depositphotos_74189661-stock-illustration-online-shop-log.jpg",
+    },
+  };
+
+  const fwConfig = {
+    ...config,
+    text: "Proceed",
+    callback: (response) => {
+      onSuccessPayment();
+      closePaymentModal();
+    },
+    onClose: () => {},
+  };
+
+  const onSuccessPayment = () => {
+    setRequestStatus({ message: "", loading: true, status: false });
+    const reqData = { amount: __confirmData?.account, currency: "NGN" };
+
+    apiURL
+      .startTopUp(reqData)
+      .then((res) => {
+        if (res.data.internal_return < 0) {
+          setRequestStatus({
+            message: "Could not finish transaction",
+            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);
+        }
+      })
+      .catch((err) => {
+        setRequestStatus({
+          message: "Opps! An Error Occured",
+          loading: false,
+          status: false,
+        });
+        toast.success("Opps! something went wrong");
+      });
+  };
+
+  const handlePrevCard = async () => {
+    const { amount, credit_reference, currency } = __confirmData;
+    const { card_uid } = __confirmCardDetails;
+
+    const reqData = {
+      amount: amount * 100,
+      card_uid,
+      credit_reference,
+      currency,
+    };
+
+    try {
+      setConfirmCredit((prev) => ({
+        ...prev,
+        show: {
+          acceptConfirm: { loader: true },
+        },
+      }));
+      const res = await apiURL.getPaidPrevCard(reqData);
+      const _response = res.data;
+      if (res.data.internal_return < 0) {
+        setConfirmCredit((prev) => ({
+          ...prev,
+          show: {
+            acceptConfirm: { loader: false },
+          },
+        }));
+        return;
+      }
+
+      setTimeout(() => {
+        setConfirmCredit((prev) => ({
+          ...prev,
+          show: {
+            awaitConfirm: { loader: false, state: false },
+            acceptConfirm: { loader: false, state: true },
+          },
+          data: _response,
+        }));
+      }, 1500);
+    } catch (error) {
+      setConfirmCredit((prev) => ({
+        ...prev,
+        show: {
+          acceptConfirm: { loader: false },
+        },
+      }));
+      console.log(error);
+    }
+  };
+
+  const handleNewCard = async () => {
+    const { amount, credit_reference, uid } = __confirmData;
+    const { address, cardNum, cvv, expirationMonth, expirationYear } =
+      __confirmCardDetails;
+
+    const reqData = {
+      amount: amount * 100,
+      cardnumber: cardNum.replace(/\s/g, ""),
+      credit_reference,
+      cvc: cvv,
+      description: address,
+      exp_month: expirationMonth,
+      exp_year: expirationYear,
+      paymenttype: 100,
+      uid,
+    };
+
+    try {
+      setConfirmCredit((prev) => ({
+        ...prev,
+        show: {
+          acceptConfirm: { loader: true },
+        },
+      }));
+      const res = await apiURL.getPaidNewCard(reqData);
+      const _response = res.data;
+      if (res.data.internal_return < 0) {
+        setConfirmCredit((prev) => ({
+          ...prev,
+          show: {
+            awaitConfirm: { loader: false, state: false },
+            acceptConfirm: { loader: false, state: true },
+          },
+          data: _response,
+        }));
+        return;
+      }
+      
+      setTimeout(() => {
+        dispatch(tableReload({ type: "WALLETTABLE" }));
+        setConfirmCredit((prev) => ({
+          ...prev,
+          show: {
+            awaitConfirm: { loader: false, state: false },
+            acceptConfirm: { loader: false, state: true },
+          },
+          data: _response,
+        }));
+      }, 1500);
+    } catch (error) {
+      setConfirmCredit((prev) => ({
+        ...prev,
+        show: {
+          acceptConfirm: { loader: false },
+        },
+      }));
+      setTimeout(() => onClose, 10000);
+      console.log(error);
+    }
+  };
+
+  // console.log(confirmCredit?.data);
+
+  return (
+    <div className="content-wrapper w-full h-[32rem]">
+      <div className="w-full mb-10">
+        <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
+          <div className="px-4 md:p-8 py-4 add-fund-info">
+            <div className="field w-full mb-3 min-h-[45px]">
+              {confirmCredit?.show?.awaitConfirm?.state && (
+                <div className="flex flex-col gap-2">
+                  <AmountSection
+                    currency={__confirmData?.currency}
+                    amount={__confirmData?.amount}
+                    country={__confirmCountry}
+                  />
+                  <TransactionFeeSection
+                    currency={__confirmData?.currency}
+                    fee={__confirmData?.fee}
+                    country={__confirmCountry}
+                  />
+                  <TotalSection
+                    currency={__confirmData?.currency}
+                    amount={__confirmData?.amount}
+                    fee={__confirmData?.fee}
+                    country={__confirmCountry}
+                  />
+                  {__confirmCountry === "US" && (
+                    <div className="flex items-center gap-8">
+                      <label
+                        htmlFor="payment"
+                        className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
+                      >
+                        Payment Method
+                      </label>
+                      <span className="text-[#181c32] dark:text-white">
+                        <ThePaymentText
+                          value={__confirmCardDetails}
+                          type={__confirmData?.cardType}
+                        />
+                      </span>
+                    </div>
+                  )}
+                  <div
+                    className={`${
+                      __confirmCountry === "US"
+                        ? "gap-[3.7rem]"
+                        : "gap-[1.81rem]"
+                    } flex items-center`}
+                  >
+                    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      Reference No
+                    </h1>
+                    <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      {__confirmData?.credit_reference}
+                    </span>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div
+            className={
+              __confirmCountry === "US" ? "min-h-[96px]" : "min-h-[157px]"
+            }
+          ></div>
+          <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}
+            >
+              Cancel
+            </button>
+            {__confirmCountry === "US" && (
+              <button
+                className="px-4 h-11 flex justify-center items-center btn-gradient text-white text-base rounded-full"
+                onClick={
+                  __confirmData?.cardType === "prev"
+                    ? handlePrevCard
+                    : handleNewCard
+                }
+              >
+                {confirmCredit?.show?.acceptConfirm?.loader ? (
+                  <LoadingSpinner size="6" color="sky-blue" />
+                ) : (
+                  "Proceed"
+                )}
+              </button>
+            )}
+            {__confirmCountry === "NG" && (
+              <FlutterWaveButton
+                {...fwConfig}
+                className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ConfirmAddFund;

src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx

@@ -0,0 +1,203 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+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 }) {
+  const apiURL = new usersService();
+
+  const navigate = useNavigate();
+
+  let [requestStatus, setRequestStatus] = useState({
+    message: "",
+    loading: false,
+    status: false,
+  });
+  let [pageLoading, setPageLoading] = useState(true);
+
+  //FUNCTION TO HANDLE SUBMIT
+  const handleSubmit = () => {
+    setRequestStatus({ message: "", loading: true, status: false });
+    let reqData = {
+      amount: Number(state.amount * 100),
+      Fee: Number(state.fee),
+      recipient_uid: Number(state.details?.recipient_uid),
+      wallet_uid: wallet.wallet_uid,
+    };
+    apiURL
+      .sendMoney(reqData)
+      .then((res) => {
+        if (res.data.internal_return < 0) {
+          setRequestStatus({
+            message: "Could not perform transaction",
+            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);
+      })
+      .catch((error) => {
+        setRequestStatus({
+          message: "Opps! something went wrong! Try Again",
+          loading: false,
+          status: false,
+        });
+      });
+  };
+
+  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)}`}
+            </h2>
+            <button
+              type="button"
+              className="text-[#374557] dark:text-red-500"
+              onClick={action}
+            >
+              <svg
+                width="36"
+                height="36"
+                viewBox="0 0 36 36"
+                fill="none"
+                className="fill-current"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
+                  fill=""
+                  fillOpacity="0.6"
+                />
+                <path
+                  d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
+                  fill="#"
+                  fillOpacity="0.6"
+                />
+              </svg>
+            </button>
+          </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}
+                />
+              </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}
+                />
+              </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>
+
+            <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"
+                >
+                  Transfer
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </ModalCom>
+  );
+}
+
+export default ConfirmNairaWithdraw;

src/components/MyWallet/Popup/ConfirmTransfer.jsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
-import InputCom from "../Helpers/Inputs/InputCom";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import RecentActivityTable from "./WalletComponent/RecentActivityTable";
 
 import usersService from "../../services/UsersService";

src/components/MyWallet/Popup/CreditPopup.jsx

@@ -1,54 +1,20 @@
 import { useState } from "react";
-import { useLocation } from "react-router-dom";
-import usersService from "../../../services/UsersService";
 import ModalCom from "../../Helpers/ModalCom";
-import AddFundPop from "../AddFundPop";
-import ConfirmAddFund from "../ConfirmAddFund";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import AddFundPop from "./AddFundPop";
+import CompleteConfirmCredit from "./CompleteConfirmCredit";
+import ConfirmAddFund from "./ConfirmAddFund";
 
 const CreditPopup = ({ details, onClose, situation, walletItem }) => {
-  const { pathname, state } = useLocation();
-  const [submitTask, setSubmitTask] = useState({
-    loading: false,
-    msg: "",
-    state: "",
-  });
-  const [suggestedNextStep, setSuggestedNextStep] = useState("Send Task");
   let [input, setInput] = useState("");
   const [confirmCredit, setConfirmCredit] = useState({
-    show: false,
+    show: {
+      awaitConfirm: { loader: false, state: false },
+      acceptConfirm: { loader: false, state: false },
+    },
     data: {},
   });
 
-  // const openConfirmCredit = (value) => {
-  //   setConfirmCredit({ show: true, data: { ...value } });
-  // };
-
-  // const closeConfirmCredit = () => {
-  //   setConfirmCredit({ show: false, data: {} });
-  // };
-  // const handleConfirmCredit = useMemo((input) => {
-  //   if (input) {
-  //     setConfirmCredit(true);
-  //   } else setConfirmCredit(false);
-  // }, []);
-
-  const switchNextStep = ({ target: value }) => {
-    setSuggestedNextStep(value);
-  };
-
-  const apiCall = new usersService();
-
-  const handleParentSuggestion = (values) => {
-    if (suggestedNextStep == "Send Task") {
-      let firstName = state?.firstname;
-      let family_uid = state?.family_uid;
-      //   continuePopupData({ ...details, firstName, family_uid });
-    }
-    onClose();
-  };
-
-  console.log("prop drills >> ", state);
-
   return (
     <ModalCom
       action={onClose}
@@ -58,7 +24,20 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
       <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
-            {!confirmCredit.show ? "Add Credit" : "Confirm Credit Add"}
+            {confirmCredit?.show?.acceptConfirm?.state &&
+            confirmCredit?.data?.internal_return < 0 ? (
+              "Credit Unsuccessful"
+            ) : (
+              <>
+                {confirmCredit?.show?.acceptConfirm?.loader
+                  ? "Confirming Credit..."
+                  : confirmCredit?.show?.awaitConfirm?.state
+                  ? "Confirm Credit Add"
+                  : confirmCredit?.show?.acceptConfirm?.state
+                  ? "Credit Add Completed"
+                  : "Add Credit"}
+              </>
+            )}
           </h1>
           <button
             type="button"
@@ -87,21 +66,37 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
           </button>
         </div>
         <div className="logout-modal-body w-full flex flex-col items-center">
-          {confirmCredit.show ? (
-            <ConfirmAddFund
-              confirmCredit={confirmCredit}
-              walletItem={walletItem}
-              onClose={onClose}
-            />
+          {confirmCredit?.show?.acceptConfirm?.loader ? (
+            <div className="h-[32rem] flex items-center justify-center">
+              <LoadingSpinner size="12" color="sky-blue" />
+            </div>
           ) : (
-            <AddFundPop
-              _payment={details}
-              input={input}
-              setInput={setInput}
-              onClose={onClose}
-              confirmCredit={confirmCredit}
-              setConfirmCredit={setConfirmCredit}
-            />
+            <>
+              {confirmCredit?.show?.awaitConfirm?.state ? (
+                <ConfirmAddFund
+                  confirmCredit={confirmCredit}
+                  setConfirmCredit={setConfirmCredit}
+                  walletItem={walletItem}
+                  onClose={onClose}
+                />
+              ) : confirmCredit?.show?.acceptConfirm?.state ? (
+                <CompleteConfirmCredit
+                  walletItem={walletItem}
+                  confirmCredit={confirmCredit}
+                  onClose={onClose}
+                />
+              ) : (
+                <AddFundPop
+                  _payment={details}
+                  walletItem={walletItem}
+                  input={input}
+                  setInput={setInput}
+                  onClose={onClose}
+                  confirmCredit={confirmCredit}
+                  setConfirmCredit={setConfirmCredit}
+                />
+              )}
+            </>
           )}
         </div>
       </div>

src/components/MyWallet/Popup/NairaWithdraw.jsx

@@ -0,0 +1,795 @@
+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,
+  setShowConfirmNairaWithdraw,
+}) {
+  const apiCall = new usersService(); // API CLASS CALL
+  const navigate = useNavigate();
+  const [tab, setTab] = useState("previous");
+  let [requestStatus, setRequestStatus] = useState(false);
+  const [errorMsgs, setErrorMsgs] = useState(initialValues);
+
+  let [sendMoneyFee, setSendMoneyFee] = useState({
+    loading: false,
+    fee: 0,
+    total: 0,
+  }); // HOLD THE VALUE FOR walletSEND MONEY FEE
+  // Previous Account
+  let [recipients, setRecipients] = useState({
+    // FOR COUPON HISTORY
+    loading: true,
+    data: [],
+    error: false,
+  });
+  // New Account
+  let [allCountries, setAllCountries] = useState({
+    // STATE TO HOLD LIST OF COUNTRIES
+    loading: true,
+    data: [],
+  });
+  let [bankName, setBankName] = useState({
+    // STATE TO HOLD LIST OF BANK NAME
+    loading: false,
+    data: [],
+  });
+  let [accType, setAccType] = useState({
+    // STATE TO HOLD LIST ACCOUNT TYPE
+    loading: true,
+    data: [],
+  });
+
+  // Handling card change
+  const handleBankOptions = (event) => {
+    const { name, value } = event.target;
+    setBankName((prev) => ({ loading: true, data: [] }));
+    apiCall
+      .getCountryBank({ country: value })
+      .then((res) => {
+        if (res.data.internal_return < 0) {
+          setBankName((prev) => ({ loading: false, data: [] }));
+          return;
+        }
+        setBankName((prev) => ({ loading: false, data: res.data.result_list }));
+      })
+      .catch((error) => {
+        setBankName((prev) => ({ loading: false, data: [] }));
+      });
+  };
+
+  //FUNCTION TO GET RECIPIENT LIST
+  const getRecipients = () => {
+    apiCall
+      .getRecipient()
+      .then((res) => {
+        if (res.data.internal_return < 0) {
+          // success but no data
+          setRecipients((prev) => ({ ...prev, loading: false }));
+          return;
+        }
+        setRecipients((prev) => ({
+          ...prev,
+          loading: false,
+          data: res.data.result_list,
+        }));
+      })
+      .catch((error) => {
+        setRecipients((prev) => ({ ...prev, loading: false, error: true }));
+      });
+  };
+
+  // FUNCTION TO GET COUNTRIES
+  const getCountry = () => {
+    apiCall
+      .getSignupCountryData()
+      .then((res) => {
+        if (res.data.internal_return < 0) {
+          setAllCountries((prev) => ({ loading: false, data: [] }));
+          return;
+        }
+        setAllCountries((prev) => ({
+          loading: false,
+          data: res.data.signup_country,
+        }));
+      })
+      .catch((error) => {
+        setAllCountries((prev) => ({ loading: false, data: [] }));
+      });
+  };
+
+  // FUNCTION TO GET ACCOUNT TYPES
+  const getAccountTypes = () => {
+    apiCall
+      .getAccountTypes()
+      .then((res) => {
+        if (res.data.internal_return < 0) {
+          setAccType((prev) => ({ loading: false, data: [] }));
+          return;
+        }
+        setAccType((prev) => ({ loading: false, data: res.data.result_list }));
+      })
+      .catch((error) => {
+        setAccType((prev) => ({ loading: false, data: [] }));
+      });
+  };
+
+  useEffect(() => {
+    getCountry(); // TO LOAD LIST COUNTRY
+    getAccountTypes(); // TO LOAD LIST ACCOUNT TYPES
+  }, []);
+
+  //FUNCTION TO GET SEND MONEY FEE
+  const getSendMoneyFee = ({ target: { value } }) => {
+    setSendMoneyFee({ loading: true, fee: 0, total: 0 });
+    let amount = value;
+    if (Number(amount) <= 0 || amount == "" || isNaN(amount)) {
+      setSendMoneyFee({ loading: false, fee: 0, total: 0 });
+      return;
+    }
+    apiCall
+      .getSendMoneyFee(Number(amount * 100))
+      .then((res) => {
+        setSendMoneyFee({
+          loading: false,
+          fee: res.data.processing_fee,
+          total: res.data.total_amount,
+        });
+      })
+      .catch((error) => {
+        setSendMoneyFee({ loading: false, fee: 0, total: 0 });
+      });
+  };
+
+  //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);
+        return;
+      }
+      if (values?.comment?.length >= 50) {
+        setErrorMsgs({ comment: "50 chars max" });
+        setTimeout(() => setErrorMsgs({ comment: "" }), 1000);
+      }
+
+      // form submission logic here
+      if (tab === "previous") {
+        if (!values?.previousAccount?.recipientID) {
+          setErrorMsgs({
+            previousAccount: { recipientID: "Please select an option" },
+          });
+          setTimeout(
+            () => setErrorMsgs({ previousAccount: { recipientID: "" } }),
+            1000
+          );
+        }
+
+        setRequestStatus(true);
+
+        // Ensure recipientDetails is an array and not undefined
+        const recipientDetails = recipients.data?.filter(
+          (item) => item.recipient_uid === values.previousAccount?.recipientID
+        );
+
+        // Ensure recipientDetails is not empty
+        if (!recipientDetails || recipientDetails.length === 0) {
+          // Handle the case when recipientDetails is empty or undefined
+          setRequestStatus(false);
+          return;
+        }
+
+        const stateData = {
+          amount: values.amount,
+          comment: values.comment,
+          wallet_uid: wallet.wallet_uid,  
+          ...sendMoneyFee,
+          details: { ...recipientDetails[0] },
+        };
+
+        setTimeout(() => {
+          setRequestStatus(false);
+          // navigate("confirm-withdraw-naira", { state: stateData });
+          action();
+          setShowConfirmNairaWithdraw({ show: true, state: stateData });
+        }, 1000);
+      }
+
+      if (tab === "new") {
+        const { accountNumber, accountType, bank, city, country, state } =
+          values?.newAccount;
+      }
+    } catch (errors) {
+      // If validation fails, handle the validation errors
+      throw new Error("Validation errors:", errors);
+      //
+    }
+  };
+
+  useEffect(() => {
+    getRecipients();
+  }, []);
+
+  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">
+            <h1 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)}`}
+            </h1>
+            <button
+              type="button"
+              className="text-[#374557] dark:text-red-500"
+              onClick={action}
+            >
+              <svg
+                width="36"
+                height="36"
+                viewBox="0 0 36 36"
+                fill="none"
+                className="fill-current"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
+                  fill=""
+                  fillOpacity="0.6"
+                />
+                <path
+                  d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
+                  fill="#"
+                  fillOpacity="0.6"
+                />
+              </svg>
+            </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}
+            >
+              {(props) => {
+                return (
+                  <Form className="transfer-fund-info">
+                    {/* Amount Form */}
+                    <div className="flex flex-col">
+                      <div className="field w-full">
+                        <InputCom
+                          fieldClass="px-4"
+                          parentClass="flex items-center gap-1 justify-between"
+                          labelClass="flex-[0.2] mb-0"
+                          inputClass="flex-[0.8] max-w-[12rem]"
+                          label="Amount:"
+                          type="number"
+                          name="amount"
+                          placeholder="0"
+                          direction="rtl"
+                          value={props.values.amount}
+                          inputHandler={props.handleChange}
+                          blurHandler={(e) => {
+                            getSendMoneyFee(e);
+                          }}
+                        />
+                        {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">
+                        <InputCom
+                          fieldClass="px-4 transfer-field"
+                          parentClass="flex items-center gap-1 justify-between"
+                          labelClass="flex-[0.2] mb-0"
+                          inputClass="flex-[0.8] transfer-field max-w-[12rem]"
+                          label="Fee:"
+                          type="text"
+                          name="fee"
+                          direction="rtl"
+                          value={
+                            sendMoneyFee.loading
+                              ? "loading"
+                              : (sendMoneyFee.fee * 0.01).toFixed(2)
+                          }
+                          disable={true}
+                        />
+                      </div>
+
+                      <div className="field w-full">
+                        <InputCom
+                          fieldClass="px-4 transfer-field"
+                          parentClass="flex items-center gap-1 justify-between"
+                          labelClass="flex-[0.2] mb-0"
+                          inputClass="flex-[0.8] transfer-field max-w-[12rem]"
+                          label="Total:"
+                          type="text"
+                          name="total"
+                          direction="rtl"
+                          value={
+                            sendMoneyFee.loading
+                              ? "loading"
+                              : (sendMoneyFee.total * 0.01).toFixed(2)
+                          }
+                          disable={true}
+                        />
+                      </div>
+
+                      <div className="field w-full mb-3 flex gap-1 justify-between">
+                        <label className="text-[#181c32] dark:text-white text-base font-semibold flex flex-[0.2] mt-2.5">
+                          Comment:
+                        </label>
+                        <textarea
+                          style={{ resize: "none" }}
+                          className="text-base px-4 py-2 rounded-md sm:max-w-[550px] max-w-[250px] text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F]  focus:ring-0 focus:outline-none flex-[0.8]"
+                          name="comment"
+                          value={props.values.comment}
+                          onChange={props.handleChange}
+                          onBlur={props.handleBlur}
+                          cols="30"
+                          rows="2"
+                        />
+                      </div>
+                    </div>
+
+                    {/* Account Selector */}
+                    <div className=" flex items-center gap-[8rem]">
+                      <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                        To:
+                      </h1>
+                      <div className="my-1 flex items-center gap-2">
+                        <label
+                          onClick={() => setTab("previous")}
+                          htmlFor="previous"
+                          className="cursor-pointer flex items-center gap-1"
+                        >
+                          <input
+                            type="radio"
+                            id="previous"
+                            name="choice"
+                            value="previous"
+                            checked={tab === "previous"}
+                            className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
+                              tab == "previous" ? "" : ""
+                            } tracking-wide transition duration-200`}
+                          />
+                          Previous Account
+                        </label>
+                        <label
+                          onClick={() => setTab("new")}
+                          htmlFor="new"
+                          className="cursor-pointer flex items-center gap-1"
+                        >
+                          <input
+                            id="new"
+                            type="radio"
+                            name="choice"
+                            value="new"
+                            checked={tab === "new"}
+                            className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
+                              tab == "new" ? "" : ""
+                            }  tracking-wide transition duration-200`}
+                          />
+                          New Account{" "}
+                        </label>
+                      </div>
+                    </div>
+
+                    <div className="">
+                      {tab == "previous" && (
+                        <>
+                          <div className="w-full">
+                            <div className="relative my-3 md:flex items-center px-4">
+                              <div className="transfer-input w-full flex items-center justify-end">
+                                {/* <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]"
+                                    value={
+                                      props.values.previousAccount?.recipientID
+                                    }
+                                    name="previousAccount.recipientID"
+                                    onChange={props.handleChange}
+                                    onBlur={props.handleBlur}
+                                  >
+                                    {recipients.loading ? (
+                                      <option
+                                        className="text-slate-500 text-lg"
+                                        value=""
+                                      >
+                                        Loading...
+                                      </option>
+                                    ) : recipients.data.length ? (
+                                      <>
+                                        <option
+                                          className="text-slate-500 text-lg"
+                                          value=""
+                                        >
+                                          {errorMsgs.previousAccount
+                                            ?.recipientID
+                                            ? errorMsgs.previousAccount
+                                                .recipientID
+                                            : "Select..."}
+                                        </option>
+                                        {recipients.data.map((item, index) => (
+                                          <option
+                                            key={index}
+                                            value={item.recipient_uid}
+                                            className="text-slate-500 text-lg"
+                                          >
+                                            {item.recipient}
+                                          </option>
+                                        ))}
+                                      </>
+                                    ) : recipients.error ? (
+                                      <option
+                                        className="text-slate-500 text-lg"
+                                        value=""
+                                      >
+                                        Could'nt load, !
+                                      </option>
+                                    ) : (
+                                      <option
+                                        className="text-slate-500 text-lg"
+                                        value=""
+                                      >
+                                        No Recipient Found!
+                                      </option>
+                                    )}
+                                  </select>
+                                  <div className="flex justify-end relative w-full">
+                                    {errorMsgs.previousAccount?.recipientID &&
+                                      errorMsgs.previousAccount
+                                        ?.recipientID && (
+                                        <p className="sm:text-sm text-[12px] text-red-500 absolute sm:top-1 -top-20 sm:left-0 left-[160px]">
+                                          {
+                                            errorMsgs.previousAccount
+                                              ?.recipientID
+                                          }
+                                        </p>
+                                      )}
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div className="h-[7.6rem]"></div>
+                        </>
+                      )}
+
+                      {tab == "new" && (
+                        <div className="w-full mt-3 rounded-md bg-slate-100">
+                          <div className="relative fields w-full flex flex-col p-4">
+                            <div className="flex flex-[2] min-h-[52px]">
+                              {/* country */}
+                              <div className="add-recipient w-full flex items-center flex-1 xl:mb-0">
+                                <label
+                                  htmlFor="newAccount.country"
+                                  className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.3]"
+                                >
+                                  Country{" "}
+                                  <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"
+                                  name="newAccount.country"
+                                  value={props.values.newAccount?.country}
+                                  onChange={
+                                    props.handleChange || handleBankOptions
+                                  }
+                                >
+                                  {allCountries.loading ? (
+                                    <option
+                                      className="text-slate-500 text-lg"
+                                      value=""
+                                    >
+                                      Loading...
+                                    </option>
+                                  ) : allCountries.data?.length ? (
+                                    <>
+                                      <option
+                                        className="text-slate-500 text-lg"
+                                        value=""
+                                      >
+                                        {errorMsgs.newAccount?.country
+                                          ? errorMsgs.newAccount.country
+                                          : "Select..."}
+                                      </option>
+                                      {allCountries.data.map((item, index) => (
+                                        <option
+                                          key={index}
+                                          className="text-slate-500 text-lg"
+                                          value={item[0]}
+                                        >
+                                          {item[1]}
+                                        </option>
+                                      ))}
+                                    </>
+                                  ) : (
+                                    <option
+                                      className="text-slate-500 text-lg"
+                                      value=""
+                                    >
+                                      No Options Found!
+                                    </option>
+                                  )}
+                                </select>
+                                {/* {props.errors.country &&
+                                  props.touched.country && (
+                                    <p className="text-sm text-red-500">
+                                      {props.errors.country}
+                                    </p>
+                                  )} */}
+                              </div>
+
+                              {/* bank name */}
+                              <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]"
+                                >
+                                  Bank Name{" "}
+                                  <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 "
+                                  name="newAccount.bank"
+                                  value={props.values.newAccount?.bank}
+                                  onChange={props.handleChange}
+                                  onBlur={props.handleBlur}
+                                >
+                                  {bankName.loading ? (
+                                    <option
+                                      className="text-slate-500 text-lg"
+                                      value=""
+                                    >
+                                      Loading...
+                                    </option>
+                                  ) : bankName.data?.length ? (
+                                    <>
+                                      <option
+                                        className="text-slate-500 text-lg"
+                                        value=""
+                                      >
+                                        Select...
+                                      </option>
+                                      {bankName.data?.map((item, index) => (
+                                        <option
+                                          key={index}
+                                          className="text-slate-500 text-lg"
+                                          value={item.code}
+                                        >
+                                          {item.name}
+                                        </option>
+                                      ))}
+                                    </>
+                                  ) : (
+                                    <option
+                                      className="text-slate-500 text-lg"
+                                      value=""
+                                    >
+                                      No Options Found!
+                                    </option>
+                                  )}
+                                </select>
+                                {/* {props.errors.bank && props.touched.bank && (
+                                  <p className="text-sm text-red-500">
+                                    {props.errors.bank}
+                                  </p>
+                                )} */}
+                              </div>
+                            </div>
+
+                            <div className="flex flex-[2] gap-4">
+                              {/* ACCOUNT NUMBER */}
+                              <div className="field w-full flex-[1.4] flex items-center gap-2">
+                                <label
+                                  htmlFor="newAccount.accountNumber"
+                                  className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex items-center flex-1"
+                                >
+                                  Account Number{" "}
+                                  <span className="text-red-500">*</span>
+                                </label>
+                                <InputCom
+                                  fieldClass="px-6"
+                                  inputClass="flex items-center max-w-[15rem]"
+                                  type="text"
+                                  name="newAccount.accountNumber"
+                                  placeholder="Account No"
+                                  value={props.values.newAccount?.accountNumber}
+                                  inputHandler={props.handleChange}
+                                  blurHandler={props.handleBlur}
+                                />
+                                {/* {props.errors.accountNumber &&
+                                  props.touched.accountNumber && (
+                                    <p className="text-sm text-red-500">
+                                      {props.errors.accountNumber}
+                                    </p>
+                                  )} */}
+                              </div>
+
+                              {/* Account Type */}
+                              <div className="add-recipient w-full flex flex-1 items-center">
+                                <label
+                                  htmlFor="newAccount.accountType"
+                                  className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.3]"
+                                >
+                                  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"
+                                  name="newAccount.accountType"
+                                  value={props.values.newAccount?.accountType}
+                                  onChange={props.handleChange}
+                                  onBlur={props.handleBlur}
+                                >
+                                  {accType.loading ? (
+                                    <option
+                                      className="text-slate-500 text-lg"
+                                      value=""
+                                    >
+                                      Loading...
+                                    </option>
+                                  ) : accType.data?.length ? (
+                                    <>
+                                      <option
+                                        className="text-slate-500 text-lg"
+                                        value=""
+                                      >
+                                        Select...
+                                      </option>
+                                      {accType.data?.map((item, index) => (
+                                        <option
+                                          key={index}
+                                          className="text-slate-500 text-lg"
+                                          value={item.value}
+                                        >
+                                          {item.name}
+                                        </option>
+                                      ))}
+                                    </>
+                                  ) : (
+                                    <option
+                                      className="text-slate-500 text-lg"
+                                      value=""
+                                    >
+                                      No Options Found!
+                                    </option>
+                                  )}
+                                </select>
+                                {/* {props.errors.accountType &&
+                                  props.touched.accountType && (
+                                    <p className="text-sm text-red-500">
+                                      {props.errors.accountType}
+                                    </p>
+                                  )} */}
+                              </div>
+                            </div>
+
+                            <div className="flex items-center flex-1">
+                              {/* state */}
+                              <div className="field w-full flex items-center gap-4 flex-[0.4]">
+                                <label
+                                  htmlFor="newAccount.state"
+                                  className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.4]"
+                                >
+                                  State <span className="text-red-500">*</span>
+                                </label>
+                                <InputCom
+                                  fieldClass="px-6"
+                                  inputClass="max-w-[10rem]"
+                                  type="text"
+                                  name="newAccount.state"
+                                  placeholder="State/Province"
+                                  value={props.values.newAccount?.state}
+                                  inputHandler={props.handleChange}
+                                  blurHandler={props.handleBlur}
+                                />
+                                {/* {props.errors.state && props.touched.state && (
+                                  <p className="text-sm text-red-500">
+                                    {props.errors.state}
+                                  </p>
+                                )} */}
+                              </div>
+
+                              {/* city */}
+                              <div className="field w-full flex items-center flex-[0.4]">
+                                <label
+                                  htmlFor="newAccount.city"
+                                  className="input-label text-[#181c32] dark:text-white text-base font-semibold inline-flex flex-[0.4]"
+                                >
+                                  City <span className="text-red-500">*</span>
+                                </label>
+                                <InputCom
+                                  fieldClass="px-6"
+                                  type="text"
+                                  inputClass="max-w-[10rem]"
+                                  name="newAccount.city"
+                                  placeholder="City"
+                                  value={props.values.newAccount?.city}
+                                  inputHandler={props.handleChange}
+                                  blurHandler={props.handleBlur}
+                                />
+                                {/* {props.errors.city && props.touched.city && (
+                                  <p className="text-sm text-red-500">
+                                    {props.errors.city}
+                                  </p>
+                                )} */}
+                              </div>
+                            </div>
+
+                            {/* end of inputs for new accounts */}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="transfer-fund-btn flex justify-end items-center gap-2 py-4">
+                      <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>
+
+                      <button
+                        type="submit"
+                        disabled={
+                          props.isSubmitting || sendMoneyFee.loading
+                            ? true
+                            : false
+                        }
+                        className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer min-w-[100px] flex justify-center items-center"
+                      >
+                        {requestStatus ? (
+                          <LoadingSpinner size="6" color="sky-blue" />
+                        ) : (
+                          "Continue"
+                        )}
+                      </button>
+                    </div>
+                  </Form>
+                );
+              }}
+            </Formik>
+          </div>
+        </div>
+      </div>
+    </ModalCom>
+  );
+}
+
+export default NairaWithdraw;

src/components/MyWallet/Popup/TransferFund.jsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import InputCom from "../Helpers/Inputs/InputCom";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
-import RecentActivityTable from "./WalletComponent/RecentActivityTable";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+// import RecentActivityTable
 
-import usersService from "../../services/UsersService";
+import usersService from "../../../services/UsersService";
 
 import { Form, Formik } from "formik";
 import * as Yup from "yup";
@@ -326,7 +326,8 @@ function TransferFund({ payment, wallet }) {
           {payment.loading ? (
             <LoadingSpinner size="16" color="sky-blue" />
           ) : (
-            <RecentActivityTable payment={payment} />
+            // <RecentActivityTable payment={payment} />
+            null
           )}
         </div>
       </div>

src/components/MyWallet/Wallet.jsx

@@ -4,173 +4,80 @@ import React, {
   useCallback,
   useEffect,
   useMemo,
-  useReducer,
+  useState,
 } from "react";
-import { Routes, Route, Outlet, Navigate } from "react-router-dom";
+import { useSelector } from "react-redux";
 import usersService from "../../services/UsersService";
 import Layout from "../Partials/Layout";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
-
-const AddFund = lazy(() => import("./AddFund"));
-const ConfirmAddFund = lazy(() => import("./ConfirmAddFund"));
-const TransferFund = lazy(() => import("./TransferFund"));
 const WalletBox = lazy(() => import("./WalletBox"));
-const AddRecipient = lazy(() => import("./AddRecipient"));
-const ConfirmTransfer = lazy(() => import("./ConfirmTransfer"));
-
-function Wallet() {
-  return (
-    <Layout>
-      <Outlet />
-    </Layout>
-  );
-}
-
-const initialState = {
-  loading: true,
-  data: [],
-  error: false,
-};
-
-// Currently learning better about useReducer, so I converted this since it seemed like something complex
-const reducer = (state, action) => {
-  switch (action.type) {
-    case "FETCH_SUCCESS":
-      return {
-        ...state,
-        loading: false,
-        data: action.payload,
-      };
-    case "FETCH_ERROR":
-      return {
-        ...state,
-        loading: false,
-        error: true,
-      };
-    default:
-      return state;
-  }
-};
 
 const WalletRoutes = () => {
   const apiCall = useMemo(() => new usersService(), []);
-
-  const [walletList, dispatchWalletList] = useReducer(reducer, initialState);
-  const [paymentHistory, dispatchPaymentHistory] = useReducer(
-    reducer,
-    initialState
-  );
+  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(() => {
-    apiCall
-      .getUserWallets(null)
+    return apiCall
+      .getUserWallets()
       .then((res) => {
         if (res.data.internal_return < 0) {
-          dispatchWalletList({ type: "FETCH_SUCCESS", payload: [] });
+          setWalletList({ loading: false, data: [] });
         } else {
-          dispatchWalletList({
-            type: "FETCH_SUCCESS",
-            payload: res.data.result_list,
-          });
+          setWalletList({ loading: true, data: [] });
+
+          setTimeout(
+            () =>
+              setWalletList({ loading: false, data: res.data?.result_list }),
+            500
+          );
         }
       })
       .catch(() => {
-        dispatchWalletList({ type: "FETCH_ERROR" });
+        setWalletList({ loading: false, data: [] });
       });
   }, [apiCall]);
 
   const getPaymentHistory = useCallback(() => {
-    apiCall
+    return apiCall
       .getPaymentHx()
       .then((res) => {
         if (res.data.internal_return < 0) {
-          dispatchPaymentHistory({ type: "FETCH_SUCCESS", payload: [] });
+          setPaymentHistory({ loading: false, data: [] });
         } else {
-          dispatchPaymentHistory({
-            type: "FETCH_SUCCESS",
-            payload: res.data.result_list,
-          });
+          setPaymentHistory({ loading: false, data: res.data?.result_list });
         }
       })
       .catch(() => {
-        dispatchPaymentHistory({ type: "FETCH_ERROR" });
+        setPaymentHistory({ loading: false, data: [] });
       });
   }, [apiCall]);
 
   useEffect(() => {
-    let isMounted = true;
-
-    if (isMounted) {
-      getWalletList();
-      getPaymentHistory();
-    }
-
-    return () => {
-      isMounted = false;
+    const fetchData = async () => {
+      await Promise.all([getWalletList(), getPaymentHistory()]);
     };
-  }, [getWalletList, getPaymentHistory]);
 
+    if (walletList.loading) {
+      fetchData();
+    }
+  }, [walletTable, walletList.loading]);
+
+  console.log(walletTable);
   return (
-    <Routes>
-      <Route
-        element={
-          <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
-            <Wallet />
-          </Suspense>
-        }
-      >
-        {/* <Route
-          path="add-fund"
-          element={
-            <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
-              <AddFund payment={paymentHistory} />
-            </Suspense>
-          }
-        />
-        <Route
-          path="add-fund/confirm-add-fund"
-          element={
-            <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
-              <ConfirmAddFund payment={paymentHistory} />
-            </Suspense>
-          }
-        /> */}
-        <Route
-          path="transfer-fund"
-          element={
-            <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
-              <TransferFund payment={paymentHistory} wallet={walletList} />
-            </Suspense>
-          }
-        />
-        {/*<Route index element={<Balance wallet={walletList} />} />*/}
-        <Route
-          index
-          element={
-            <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
-              <WalletBox wallet={walletList} payment={paymentHistory} />
-            </Suspense>
-          }
-        />
-        <Route
-          path="transfer-fund/add-recipient"
-          element={
-            <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
-              <AddRecipient />
-            </Suspense>
-          }
-        />
-        <Route
-          path="transfer-fund/confirm-transfer"
-          element={
-            <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
-              <ConfirmTransfer payment={paymentHistory} wallet={walletList} />
-            </Suspense>
-          }
-        />
-        <Route path="*" element={<Navigate to="/" />} />
-      </Route>
-    </Routes>
+    <Layout>
+      <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
+        <WalletBox wallet={walletList} payment={paymentHistory} />
+      </Suspense>
+    </Layout>
   );
 };
 

src/components/MyWallet/WalletAction.jsx

@@ -1,49 +1,88 @@
-import React from 'react'
-import { Link } from 'react-router-dom';
+import React, { useCallback, useState } from "react";
+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 [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);
+    }
+  }, []);
 
-function WalletAction({walletItem, payment, openPopUp}) {
   return (
-    <div className="counters flex justify-between gap-2">
-        <div className='w-1/2 flex justify-center items-center'>
-        <Link
-            to="transfer-fund"
-            className={`${
-            walletItem.code != "NAIRA" && "invisible"
-            } px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white`}
-        >
-            Spend
-        </Link>
-        </div>
-        <div className='w-1/2 flex justify-center items-center'>
+    <div className="counters w-full flex justify-between gap-2">
+      <div className="w-1/2 flex justify-center items-center">
         <button
-            className='px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white'
-            onClick={() => {
-            openPopUp({
-                payment: payment,
-                currency: walletItem?.description,
-            });
-            }}
+          onClick={() => {
+            setShowNairaWithdraw(true);
+          }}
+          className={`${
+            walletItem.code != "NAIRA" && "invisible"
+          } px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white`}
         >
-            {/* <span className="">
-            <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="38"
-                height="38"
-                viewBox="0 0 42 42"
-                fill="none"
-            >
-                <path
-                d="M21 0C16.8466 0 12.7865 1.23163 9.33303 3.53914C5.8796 5.84665 3.18798 9.1264 1.59854 12.9636C0.00909901 16.8009 -0.406771 21.0233 0.403518 25.0969C1.21381 29.1705 3.21386 32.9123 6.15077 35.8492C9.08767 38.7861 12.8295 40.7862 16.9031 41.5965C20.9767 42.4068 25.1991 41.9909 29.0364 40.4015C32.8736 38.812 36.1534 36.1204 38.4609 32.667C40.7684 29.2135 42 25.1534 42 21C41.994 15.4323 39.7796 10.0944 35.8426 6.15741C31.9056 2.22045 26.5677 0.00602189 21 0ZM28 22.75H22.75V28C22.75 28.4641 22.5656 28.9092 22.2374 29.2374C21.9093 29.5656 21.4641 29.75 21 29.75C20.5359 29.75 20.0908 29.5656 19.7626 29.2374C19.4344 28.9092 19.25 28.4641 19.25 28V22.75H14C13.5359 22.75 13.0908 22.5656 12.7626 22.2374C12.4344 21.9092 12.25 21.4641 12.25 21C12.25 20.5359 12.4344 20.0907 12.7626 19.7626C13.0908 19.4344 13.5359 19.25 14 19.25H19.25V14C19.25 13.5359 19.4344 13.0908 19.7626 12.7626C20.0908 12.4344 20.5359 12.25 21 12.25C21.4641 12.25 21.9093 12.4344 22.2374 12.7626C22.5656 13.0908 22.75 13.5359 22.75 14V19.25H28C28.4641 19.25 28.9093 19.4344 29.2374 19.7626C29.5656 20.0907 29.75 20.5359 29.75 21C29.75 21.4641 29.5656 21.9092 29.2374 22.2374C28.9093 22.5656 28.4641 22.75 28 22.75Z"
-                //   fill="white"
-                className="stroke-black fill-white"
-                ></path>
-            </svg>
-            </span> */}
-            <span className="">Add Credit</span>
+          Spend
         </button>
-        </div>
+      </div>
+      <div className="w-1/2 flex justify-center items-center">
+        <button
+          className="px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+          onClick={() => {
+            openPopUp({
+              payment: payment,
+              currency: walletItem?.description,
+            });
+          }}
+        >
+          <span className="">Add Credit</span>
+        </button>
+      </div>
+
+      {showNairaWithdraw && (
+        <NairaWithdraw
+          wallet={walletItem}
+          action={() => {
+            setShowNairaWithdraw((prev) => !prev);
+          }}
+          situation={showNairaWithdraw}
+          setShowConfirmNairaWithdraw={setShowConfirmNairaWithdraw}
+        />
+      )}
+
+      {showConfirmNairaWithdraw.show && (
+        <ConfirmNairaWithdraw
+          wallet={walletItem}
+          state={showConfirmNairaWithdraw.state}
+          action={() => {
+            setShowConfirmNairaWithdraw((prev) => ({
+              ...prev,
+              show: !prev.show,
+            }));
+          }}
+          situation={showConfirmNairaWithdraw.show}
+        />
+      )}
     </div>
-  )
+  );
 }
 
-export default WalletAction
+export default WalletAction;

src/components/MyWallet/WalletBox.jsx

@@ -1,264 +1,24 @@
-import CurrencyStaticsSection from "./CurrencyStaticsSection";
-import CurrentBalanceWidget from "./CurrentBalanceWidget";
-import InvestmentSection from "./InvestmentSection";
-import RecentTransactionWidget from "./RecentTransactionWidget";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import WalletItemCard from "./WalletItemCard";
 
-export default function WalletBox({ wallet, coupon, payment }) {
+export default function WalletBox({ wallet, payment }) {
   return (
     <>
       <div className="my-wallet-wrapper w-full mb-10">
         <div className="main-wrapper w-full">
-          <div className="balance-inquery w-full grid md:grid-cols-2 gap-5">
+          <div className="balance-inquery w-full lg:grid grid-cols-[repeat(auto-fill,_minmax(325px,_1fr))] gap-5 mb-11 h-[22rem]">
             {wallet.loading ? (
               <div className="w-full h-full flex items-center justify-center">
                 <LoadingSpinner size="16" color="sky-blue" />
               </div>
             ) : wallet.data.length ? (
               wallet.data.map((item, index) => (
-                <div className="w-full h-full flex justify-center">
+                <div className="lg:w-full h-full mb-10 lg:mb-0">
                   <WalletItemCard walletItem={item} payment={payment} />
                 </div>
               ))
             ) : null}
-
-            {/*<div className="flex-1">*/}
-            {/*    <CurrentBalanceWidget />*/}
-            {/*</div>*/}
-            {/*  <div className="flex-1">*/}
-            {/*      <div className="my-wallets w-full h-full bg-white dark:bg-dark-white   rounded-lg p-6">*/}
-            {/*          <div className="mb-4">*/}
-            {/*              <h1 className="text-xl font-bold tracking-wide   text-dark-gray dark:text-white">*/}
-            {/*                  My Wallet*/}
-            {/*              </h1>*/}
-            {/*          </div>*/}
-            {/*          <div className="content-area">*/}
-            {/*              <div className="flex justify-between items-center mb-6">*/}
-            {/*                  <div className="flex space-x-5 items-center">*/}
-            {/*                      <div className="account-name flex space-x-4 items-center">*/}
-            {/*                          <div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
-            {/*                              <img src={bank1} alt="" />*/}
-            {/*                          </div>*/}
-            {/*                          <div className="name">*/}
-            {/*                              <p className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">*/}
-            {/*                                  MetaMask*/}
-            {/*                              </p>*/}
-            {/*                          </div>*/}
-            {/*                      </div>*/}
-            {/*                  </div>*/}
-            {/*                  <div className="flex space-x-5 items-center">*/}
-            {/*                      <div>*/}
-            {/*                          <p className="text-xl font-bold text-dark-gray dark:text-white text-right mb-3">*/}
-            {/*                              $734.79*/}
-            {/*                          </p>*/}
-            {/*                          <p className="text-sm text-thin-light-gray">*/}
-            {/*                              New Add*/}
-            {/*                              <span className="text-light-green ml-1">*/}
-            {/*    +324.75*/}
-            {/*  </span>*/}
-            {/*                          </p>*/}
-            {/*                      </div>*/}
-            {/*                      <div>*/}
-            {/*<span className="dark:text-thin-light-gray text-[#374557]">*/}
-            {/*  <svg*/}
-            {/*      width="6"*/}
-            {/*      height="26"*/}
-            {/*      viewBox="0 0 6 26"*/}
-            {/*      fill="none"*/}
-            {/*      className="fill-current"*/}
-            {/*      xmlns="http://www.w3.org/2000/svg"*/}
-            {/*  >*/}
-            {/*    <circle cx="3" cy="3" r="3" fillOpacity="0.6" />*/}
-            {/*    <circle*/}
-            {/*        cx="3"*/}
-            {/*        cy="12.75"*/}
-            {/*        r="3"*/}
-            {/*        fillOpacity="0.6"*/}
-            {/*    />*/}
-            {/*    <circle*/}
-            {/*        cx="3"*/}
-            {/*        cy="22.5"*/}
-            {/*        r="3"*/}
-            {/*        fillOpacity="0.6"*/}
-            {/*    />*/}
-            {/*  </svg>*/}
-            {/*</span>*/}
-            {/*                      </div>*/}
-            {/*                  </div>*/}
-            {/*              </div>*/}
-            {/*              <div className="flex justify-between items-center mb-6">*/}
-            {/*                  <div className="flex space-x-5 items-center">*/}
-            {/*                      <div className="account-name flex space-x-4 items-center">*/}
-            {/*                          <div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
-            {/*                              <img src={bank2} alt="" />*/}
-            {/*                          </div>*/}
-            {/*                          <div className="name">*/}
-            {/*                              <p className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">*/}
-            {/*                                  Coinbase Wallet*/}
-            {/*                              </p>*/}
-            {/*                          </div>*/}
-            {/*                      </div>*/}
-            {/*                  </div>*/}
-            {/*                  <div className="flex space-x-5 items-center">*/}
-            {/*                      <div>*/}
-            {/*                          <p className="text-xl font-bold text-dark-gray dark:text-white text-right mb-3">*/}
-            {/*                              $734.79*/}
-            {/*                          </p>*/}
-            {/*                          <p className="text-sm text-thin-light-gray">*/}
-            {/*                              New Add*/}
-            {/*                              <span className="text-light-green ml-1">*/}
-            {/*    +324.75*/}
-            {/*  </span>*/}
-            {/*                          </p>*/}
-            {/*                      </div>*/}
-            {/*                      <div>*/}
-            {/*<span className="dark:text-thin-light-gray text-[#374557]">*/}
-            {/*  <svg*/}
-            {/*      width="6"*/}
-            {/*      height="26"*/}
-            {/*      viewBox="0 0 6 26"*/}
-            {/*      fill="none"*/}
-            {/*      className="fill-current"*/}
-            {/*      xmlns="http://www.w3.org/2000/svg"*/}
-            {/*  >*/}
-            {/*    <circle cx="3" cy="3" r="3" fillOpacity="0.6" />*/}
-            {/*    <circle*/}
-            {/*        cx="3"*/}
-            {/*        cy="12.75"*/}
-            {/*        r="3"*/}
-            {/*        fillOpacity="0.6"*/}
-            {/*    />*/}
-            {/*    <circle*/}
-            {/*        cx="3"*/}
-            {/*        cy="22.5"*/}
-            {/*        r="3"*/}
-            {/*        fillOpacity="0.6"*/}
-            {/*    />*/}
-            {/*  </svg>*/}
-            {/*</span>*/}
-            {/*                      </div>*/}
-            {/*                  </div>*/}
-            {/*              </div>*/}
-            {/*              <div className="flex justify-between items-center mb-6">*/}
-            {/*                  <div className="flex space-x-5 items-center">*/}
-            {/*                      <div className="account-name flex space-x-4 items-center">*/}
-            {/*                          <div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
-            {/*                              <img src={bank3} alt="" />*/}
-            {/*                          </div>*/}
-            {/*                          <div className="name">*/}
-            {/*                              <p className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">*/}
-            {/*                                  Bitski*/}
-            {/*                              </p>*/}
-            {/*                          </div>*/}
-            {/*                      </div>*/}
-            {/*                  </div>*/}
-            {/*                  <div className="flex space-x-5 items-center">*/}
-            {/*                      <div>*/}
-            {/*                          <p className="text-xl font-bold text-dark-gray dark:text-white text-right mb-3">*/}
-            {/*                              $734.79*/}
-            {/*                          </p>*/}
-            {/*                          <p className="text-sm text-thin-light-gray">*/}
-            {/*                              New Add*/}
-            {/*                              <span className="text-light-green ml-1">*/}
-            {/*    +324.75*/}
-            {/*  </span>*/}
-            {/*                          </p>*/}
-            {/*                      </div>*/}
-            {/*                      <div>*/}
-            {/*<span className="dark:text-thin-light-gray text-[#374557]">*/}
-            {/*  <svg*/}
-            {/*      width="6"*/}
-            {/*      height="26"*/}
-            {/*      viewBox="0 0 6 26"*/}
-            {/*      fill="none"*/}
-            {/*      className="fill-current"*/}
-            {/*      xmlns="http://www.w3.org/2000/svg"*/}
-            {/*  >*/}
-            {/*    <circle cx="3" cy="3" r="3" fillOpacity="0.6" />*/}
-            {/*    <circle*/}
-            {/*        cx="3"*/}
-            {/*        cy="12.75"*/}
-            {/*        r="3"*/}
-            {/*        fillOpacity="0.6"*/}
-            {/*    />*/}
-            {/*    <circle*/}
-            {/*        cx="3"*/}
-            {/*        cy="22.5"*/}
-            {/*        r="3"*/}
-            {/*        fillOpacity="0.6"*/}
-            {/*    />*/}
-            {/*  </svg>*/}
-            {/*</span>*/}
-            {/*                      </div>*/}
-            {/*                  </div>*/}
-            {/*              </div>*/}
-            {/*              <div className="flex justify-between items-center mb-6">*/}
-            {/*                  <div className="flex space-x-5 items-center">*/}
-            {/*                      <div className="account-name flex space-x-4 items-center">*/}
-            {/*                          <div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
-            {/*                              <img src={bank4} alt="" />*/}
-            {/*                          </div>*/}
-            {/*                          <div className="name">*/}
-            {/*                              <p className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">*/}
-            {/*                                  WalletConnect*/}
-            {/*                              </p>*/}
-            {/*                          </div>*/}
-            {/*                      </div>*/}
-            {/*                  </div>*/}
-            {/*                  <div className="flex space-x-5 items-center">*/}
-            {/*                      <div>*/}
-            {/*                          <p className="text-xl font-bold text-dark-gray dark:text-white text-right mb-3">*/}
-            {/*                              $734.79*/}
-            {/*                          </p>*/}
-            {/*                          <p className="text-sm text-thin-light-gray">*/}
-            {/*                              New Add*/}
-            {/*                              <span className="text-light-green ml-1">*/}
-            {/*    +324.75*/}
-            {/*  </span>*/}
-            {/*                          </p>*/}
-            {/*                      </div>*/}
-            {/*                      <div>*/}
-            {/*<span className="dark:text-thin-light-gray text-[#374557]">*/}
-            {/*  <svg*/}
-            {/*      width="6"*/}
-            {/*      height="26"*/}
-            {/*      viewBox="0 0 6 26"*/}
-            {/*      fill="none"*/}
-            {/*      className="fill-current"*/}
-            {/*      xmlns="http://www.w3.org/2000/svg"*/}
-            {/*  >*/}
-            {/*    <circle cx="3" cy="3" r="3" fillOpacity="0.6" />*/}
-            {/*    <circle*/}
-            {/*        cx="3"*/}
-            {/*        cy="12.75"*/}
-            {/*        r="3"*/}
-            {/*        fillOpacity="0.6"*/}
-            {/*    />*/}
-            {/*    <circle*/}
-            {/*        cx="3"*/}
-            {/*        cy="22.5"*/}
-            {/*        r="3"*/}
-            {/*        fillOpacity="0.6"*/}
-            {/*    />*/}
-            {/*  </svg>*/}
-            {/*</span>*/}
-            {/*                      </div>*/}
-            {/*                  </div>*/}
-            {/*              </div>*/}
-            {/*          </div>*/}
-            {/*      </div>*/}
-            {/*  </div>*/}
           </div>
-          {/* flex space-x-11 */}
-          {/*<div className="recent-and-investment grid lg:grid-cols-2 grid-cols-1 2xl:gap-[40px] xl:gap-7 gap-4 lg:h-[416px] w-full  justify-between">*/}
-          {/*    <div className=" h-full">*/}
-          {/*        <RecentTransactionWidget />*/}
-          {/*    </div>*/}
-          {/*    <div className=" h-full">*/}
-          {/*        <InvestmentSection />*/}
-          {/*    </div>*/}
-          {/*</div>*/}
         </div>
       </div>
     </>

src/components/MyWallet/WalletComponent/RecentActivityTable.jsx

@@ -18,7 +18,7 @@ function RecentActivityTable({ payment }) {
   };
 
   return (
-    <div className="flex flex-col justify-between overflow-y-auto">
+    <div className="flex flex-col justify-between min-h-[500px]">
       <table className="wallet-activity w-full table-auto border-collapse text-left">
         <thead className="border-b-2">
           <tr className="text-slate-600">

src/components/MyWallet/WalletItemCard.jsx

@@ -1,10 +1,9 @@
 import React, { useState } from "react";
-import background from "../../assets/images/bg-sky-blue.jpg"; //shape/balance-bg.svg";
-import { PriceFormatter } from "../Helpers/PriceFormatter";
-import { Link } from "react-router-dom";
 import { useSelector } from "react-redux";
-import CreditPopup from "./Popup/CreditPopup";
+import background from "../../assets/images/bg-sky-blue.jpg"; //shape/balance-bg.svg";
 import localImgLoad from "../../lib/localImgLoad";
+import { PriceFormatter } from "../Helpers/PriceFormatter";
+import CreditPopup from "./Popup/CreditPopup";
 import WalletAction from "./WalletAction";
 
 export default function WalletItemCard({ walletItem, payment }) {
@@ -17,7 +16,6 @@ export default function WalletItemCard({ walletItem, payment }) {
 
   //   Credit popup
   const [creditPopup, setCreditPopup] = useState({ show: false, data: {} });
-
   const openPopUp = (value) => {
     setCreditPopup({
       show: true,
@@ -29,83 +27,66 @@ export default function WalletItemCard({ walletItem, payment }) {
     setCreditPopup({ show: false, data: {} });
   };
 
-  console.log("walletItem >>", walletItem, payment);
-
-  let image = walletItem.code ? `${walletItem.code.toLocaleLowerCase()}.svg` : 'default.png' // HOLDS THE VALUE NAME PROPERTY FOR IMAGE ICON
+  let image = walletItem.code
+    ? `${walletItem.code.toLocaleLowerCase()}.svg`
+    : "default.png"; // HOLDS THE VALUE NAME PROPERTY FOR IMAGE ICON
 
   return (
     <>
       <div
-        className={`current-balance-widget w-[350px] h-full rounded-2xl overflow-hidden flex flex-col gap-2 px-8 pt-9 pb-20`}
+        className={`current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col items-center gap-2 px-8 pt-9 pb-20`}
         style={{
           background: `url(${background}) 0% 0% / cover no-repeat`,
         }}
       >
-        <div className="wallet xxs:flex justify-between items-start gap-3">
+        {/* <div className="w-[350px]"> */}
+        <div className="wallet w-full flex justify-between items-start gap-3">
           <div className="min-w-[100px] min-h-[100px] max-w-[100px] max-h-[100px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
-            <img src={localImgLoad(`images/currency/${image}`)} className="w-full h-full" alt="curreny-icon" />
+            <img
+              src={localImgLoad(`images/currency/${image}`)}
+              className="w-full h-full"
+              alt="curreny-icon"
+            />
           </div>
-          <div className="balance mt-2">
-            <p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
-              Current Balance
-            </p>
-            <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
-              {PriceFormatter(
-                walletItem.amount * 0.01,
-                walletItem.code,
-                undefined,
-                "text-[2rem]"
-              )}
-            </p>
-            <p className="xxs:-ml-5 mt-10 mb-5 text-lg text-white tracking-wide flex justify-start items-center gap-2">
-              HOLDINGS :{" "}
-              <span className="mt-1">
+          <div className="balance w-full mt-2 flex justify-center">
+            <div className="">
+              <p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
+                Current Balance
+              </p>
+              <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
                 {PriceFormatter(
-                  walletItem.escrow * 0.01,
+                  walletItem.amount * 0.01,
                   walletItem.code,
                   undefined,
                   "text-[2rem]"
                 )}
-              </span>
-            </p>
+              </p>
+            </div>
           </div>
         </div>
-        {/* <div className="flex justify-center items-center">
-          <div className="balance">
-            <p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
-              Current Balance
-            </p>
-            <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
-              {PriceFormatter(
-                walletItem.amount * 0.01,
-                walletItem.code,
-                undefined,
-                "text-[2rem]"
-              )}
-            </p>
-            <p className="text-lg text-white tracking-wide">
-              HOLDINGS :{" "}
-              <span className="mt-1">
-                {PriceFormatter(
-                  walletItem.escrow * 0.01,
-                  walletItem.code,
-                  undefined,
-                  "text-[2rem]"
-                )}
-              </span>
-            </p>
-          </div>
-        </div> */}
 
+        <p className="my-5 text-lg text-white tracking-wide flex justify-center items-center gap-2">
+          HOLDINGS :{" "}
+          <span className="mt-1">
+            {PriceFormatter(
+              walletItem.escrow * 0.01,
+              walletItem.code,
+              undefined,
+              "text-[2rem]"
+            )}
+          </span>
+        </p>
         {/* for white underline */}
-        <div className="my-2 w-full h-[1px] bg-white"></div> 
+        <div className="my-2 w-full h-[1px] bg-white"></div>
 
         {!accountType ? (
-          <WalletAction walletItem={walletItem} payment={payment} openPopUp={openPopUp} />
-        )
-        :
-        null
-      }
+          <WalletAction
+            walletItem={walletItem}
+            payment={payment}
+            openPopUp={openPopUp}
+          />
+        ) : null}
+        {/* </div> */}
       </div>
       {creditPopup.show && (
         <CreditPopup

src/components/OffersInterest/ManageInterestOffer.jsx

@@ -166,22 +166,22 @@ export default function ManageInterestOffer(props) {
 
                                 <div className="w-full">
                                     {/* switch button */}
-                                    <div className="my-1 flex items-center border-b border-slate-300">
+                                    <div className="pl-7 my-2 flex items-center border-b border-slate-300 gap-3">
                                         <button
                                         name="info"
                                         onClick={(e) => setTab(e.target.name)}
-                                        className={`p-2 text-lg font-bold text-slate-600 dark:text-white border ${
-                                            tab == "info" ? "border-sky-blue" : "border-slate-300"
-                                        } tracking-wide transition duration-200`}
+                                        className={`px-4 py-1 rounded-t-2xl ${
+                                            tab == "info" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
+                                          }`}
                                         >
                                         Info
                                         </button>
                                         <button
                                         name="message"
                                         onClick={(e) => setTab(e.target.name)}
-                                        className={`p-2 text-lg font-bold text-slate-600 dark:text-white border ${
-                                            tab == "message" ? "border-sky-blue" : "border-slate-300"
-                                        }  tracking-wide transition duration-200`}
+                                        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]"
+                                          }`}
                                         >
                                         Messages ({messageList.data.length})
                                         </button>

src/components/Pagination/PaginatedList.jsx

@@ -1,7 +1,7 @@
 const PaginatedList = ({ onClick, prev, next, data, start, stop }) => {
   if (data?.length > process.env.REACT_APP_ITEM_PER_PAGE) {
     return (
-      <div className="p-3 flex justify-center items-center min-h-[70px] space-x-2 border-t-2">
+      <div className="p-3 flex justify-center items-center min-h-[70px] space-x-2 border-t-2 w-full">
         {/* Render pagination buttons */}
         {!prev && (
           <button

src/components/Partials/Header.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState, useEffect } from "react";
+import React, { useContext, useEffect, useMemo, useState } from "react";
 import { Link, useLocation } from "react-router-dom";
 import bank1 from "../../assets/images/bank-1.png";
 import bank2 from "../../assets/images/bank-2.png";
@@ -6,28 +6,31 @@ 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 useToggle from "../../hooks/useToggle";
+import usersService from "../../services/UsersService";
 import DarkModeContext from "../Contexts/DarkModeContext";
 import Icons from "../Helpers/Icons";
 import ModalCom from "../Helpers/ModalCom";
-import SearchCom from "../Helpers/SearchCom";
 import WalletHeader from "../MyWallet/WalletHeader";
-import usersService from "../../services/UsersService";
 
-import siteLogo from "../../assets/images/wrenchboard.png";
+import { useDispatch, useSelector } from "react-redux";
 import Flag from "../../assets/images/united-states.svg";
-import { useSelector } from "react-redux";
+import siteLogo from "../../assets/images/wrenchboard.png";
+import formattedDate from "../../lib/fomattedDate";
+import { updateNotifications } from "../../store/notifications";
+import TimeDifference from "../Helpers/TimeDifference";
 
 export default function Header({ logoutModalHandler, sidebarHandler }) {
   const [balanceDropdown, setbalanceValue] = useToggle(false);
   const [notificationDropdown, setNotificationValue] = useToggle(false);
   const [userProfileDropdown, setProfileDropdown] = useToggle(false);
   const [moneyPopup, setPopup] = useToggle(false);
-  const [toggleNotification, setToggleNotification] = useToggle(false);
   const darkMode = useContext(DarkModeContext);
   const { userDetails } = useSelector((state) => state?.userDetails);
-
   const [myWalletList, setMyWalletList] = useState([]);
-  const api = new usersService();
+  const api = useMemo(() => new usersService(), []);
+  const dispatch = useDispatch();
+
+  const { notifications } = useSelector((state) => state?.notifications); // NOTIFICATION STORE
 
   const getMyWalletList = async () => {
     try {
@@ -85,10 +88,6 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
     setbalanceValue.set(false);
   };
 
-  const setNotification = () => {
-    setToggleNotification.toggle();
-  };
-
   // getting the location of head
   let { pathname } = useLocation();
 
@@ -102,6 +101,8 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
   let { firstname, lastname, email, profile_pic } = userDetails;
   let userEmail = email?.split("@")[0];
 
+  // console.log("Notify: ", notifications?.data?.raw);
+
   return (
     <>
       <div className="header-wrapper backdrop-blur-sm bg-[#efedfe5e]/60 dark:bg-transparent w-full h-full flex items-center xl:px-0 md:px-10 px-5">
@@ -251,8 +252,10 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                 className="lg:w-[48px] lg:h-[48px] w-[38px] h-[38px] bg-white   flex justify-center items-center rounded-full overflow-hidden relative"
               >
                 <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">
-                  10
+                <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}
                 </span>
               </div>
               <div
@@ -265,190 +268,51 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                     Recent Notifications
                   </h3>
                 </div>
+
                 <div className="content px-7 pb-7">
                   <ul>
-                    <li className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple">
-                      <div className="notifications flex space-x-4 items-center">
-                        <div className="icon">
-                          <svg
-                            width="52"
-                            height="52"
-                            viewBox="0 0 52 52"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <circle cx="26" cy="26" r="26" fill="#27AE60" />
-                            <path
-                              d="M21.5404 30.2033C22.185 29.6102 22.818 29.0287 23.451 28.4456C27.4582 24.759 31.4637 21.0724 35.4709 17.3859C35.7849 17.0968 36.0973 16.8044 36.4146 16.517C36.697 16.2611 37.021 16.0834 37.4014 16.0186C38.2055 15.884 38.782 16.4987 38.5877 17.2878C38.5112 17.5985 38.3634 17.8776 38.1574 18.1202C33.9574 23.0362 29.7575 27.9505 25.5576 32.8648C24.5641 34.0261 23.5739 35.1891 22.5787 36.3487C22.3129 36.6594 21.9906 36.8903 21.5786 36.9734C21.2347 37.0431 20.9091 36.975 20.6316 36.779C20.399 36.6145 20.1631 36.4284 19.9937 36.2041C17.7708 33.2237 15.5562 30.2365 13.3465 27.2461C13.0757 26.8789 12.9462 26.4486 13.0209 25.9901C13.1422 25.2342 14.046 24.7274 14.8085 24.9982C15.0445 25.083 15.2721 25.2225 15.4698 25.3787C17.4634 26.957 19.4504 28.5453 21.4391 30.1302C21.4673 30.1535 21.4972 30.1734 21.5404 30.2033Z"
-                              fill="white"
-                            />
-                          </svg>
-                        </div>
-                        <div className="name">
-                          <p className="text-base text-dark-gray dark:text-white font-medium mb-2">
-                            Your Account has been created
-                            <span className="ml-1 font-bold">
-                              successfully done
-                            </span>
-                          </p>
-                          <p className="text-sm text-thin-light-gray font-medium">
-                            23 house ago
-                          </p>
-                        </div>
-                      </div>
-                    </li>
-                    <li className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple">
-                      <div className="notifications flex space-x-4 items-center">
-                        <div className="icon">
-                          <svg
-                            width="52"
-                            height="52"
-                            viewBox="0 0 52 52"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <circle cx="26" cy="26" r="26" fill="#5356FB" />
-                            <path
-                              d="M25.9481 24.3684C25.4776 24.213 25.0352 24.1246 24.6425 23.9303C21.1636 22.2082 17.6912 20.4687 14.2167 18.7379C13.962 18.6106 13.7656 18.4466 13.7613 18.1423C13.757 17.8251 13.9534 17.6481 14.221 17.5143C17.6718 15.7943 21.1226 14.07 24.5712 12.3456C25.564 11.8493 26.5416 11.9054 27.5214 12.3996C29.7377 13.5153 31.9627 14.6203 34.1834 15.7295C35.3164 16.295 36.4473 16.8625 37.5781 17.4301C37.6429 17.4625 37.7076 17.4927 37.7745 17.5251C38.0335 17.6459 38.2126 17.8337 38.2126 18.1337C38.2126 18.438 38.0205 18.6084 37.7659 18.7336C36.1581 19.5343 34.5525 20.3392 32.9447 21.1399C31.0887 22.0657 29.2414 23.0045 27.3746 23.9066C26.93 24.1224 26.4272 24.2173 25.9481 24.3684Z"
-                              fill="white"
-                            />
-                            <path
-                              d="M25.0538 33.4541C25.0538 35.3834 25.056 37.3128 25.0517 39.2421C25.0495 39.9284 24.6632 40.1701 24.0309 39.8787C20.8671 38.422 17.7012 36.9696 14.5439 35.5021C13.5274 35.0295 13.0095 34.2029 13.0052 33.085C12.9965 29.4076 13.0008 25.7302 13.003 22.0528C13.003 21.3428 13.4023 21.0795 14.0367 21.373C17.3084 22.8815 20.5779 24.3987 23.8518 25.9007C24.6827 26.2827 25.0668 26.9042 25.0603 27.8128C25.0474 29.6947 25.056 31.5744 25.056 33.4562C25.056 33.4541 25.056 33.4541 25.0538 33.4541Z"
-                              fill="white"
-                            />
-                            <path
-                              d="M26.9187 33.4002C26.9187 31.5076 26.923 29.6149 26.9165 27.7223C26.9144 26.8676 27.305 26.2785 28.0711 25.9246C31.3644 24.4053 34.6598 22.8903 37.953 21.3731C38.553 21.0969 38.9652 21.3451 38.9652 21.999C38.9695 25.7131 38.976 29.425 38.9609 33.1391C38.9566 34.2764 38.3739 35.0706 37.3488 35.5454C34.7893 36.728 32.2276 37.9085 29.6681 39.089C29.1199 39.3415 28.5739 39.594 28.0279 39.8465C27.2855 40.1875 26.9165 39.9565 26.9165 39.1494C26.9165 37.233 26.9165 35.3145 26.9165 33.3981C26.9187 33.4002 26.9187 33.4002 26.9187 33.4002Z"
-                              fill="white"
-                            />
-                          </svg>
-                        </div>
-                        <div className="name">
-                          <p className="text-base text-dark-gray dark:text-white font-medium mb-2">
-                            You upload your frast product
-                            <span className="ml-1 font-bold">
-                              successfully done
-                            </span>
-                          </p>
-                          <p className="text-sm text-thin-light-gray font-medium">
-                            23 house ago
-                          </p>
-                        </div>
-                      </div>
-                    </li>
-                    <li className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple">
-                      <div className="notifications flex space-x-4 items-center">
-                        <div className="icon">
-                          <svg
-                            width="52"
-                            height="52"
-                            viewBox="0 0 52 52"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <circle cx="26" cy="26" r="26" fill="#F539F8" />
-                            <path
-                              d="M36.2507 24.2795C35.8857 25.5416 35.5884 26.7445 35.1694 27.9018C35.0663 28.1874 34.5662 28.505 34.2452 28.5084C30.4894 28.5523 26.7335 28.5371 22.9777 28.5388C22.4218 28.5388 22.067 28.2651 21.9403 27.7329C21.3456 25.2459 20.7458 22.7589 20.1781 20.2668C20.0058 19.5133 20.3488 19.0487 21.0753 19.0436C24.1367 19.0233 27.1981 19.0352 30.3356 19.0352C30.2984 20.6605 30.7411 22.0814 31.9728 23.1644C33.1774 24.2305 34.6017 24.5481 36.2507 24.2795Z"
-                              fill="white"
-                            />
-                            <path
-                              d="M21.1615 29.4088C23.689 29.4088 26.1726 29.4088 28.6562 29.4088C30.2816 29.4088 31.9069 29.4054 33.5322 29.4105C34.2891 29.4122 34.7183 29.7518 34.7385 30.338C34.7588 30.9547 34.3162 31.3298 33.5288 31.3298C29.2256 31.3332 24.924 31.3332 20.6208 31.3298C19.749 31.3298 19.5074 31.1169 19.3165 30.2367C18.4987 26.4555 17.6743 22.676 16.8717 18.8914C16.7771 18.4471 16.6031 18.197 16.1452 18.0568C15.096 17.7358 14.0671 17.3472 13.0314 16.9823C12.1613 16.6748 11.8386 16.2051 12.0751 15.6019C12.3083 15.0055 12.8135 14.8535 13.6397 15.1407C14.9254 15.5867 16.1993 16.0665 17.4985 16.472C18.1541 16.6765 18.4666 17.0465 18.6052 17.7088C19.3976 21.4714 20.2204 25.2272 21.0364 28.9847C21.0601 29.0962 21.1006 29.2077 21.1615 29.4088Z"
-                              fill="white"
-                            />
-                            <path
-                              d="M30.9336 19.6116C30.9218 17.2665 32.8225 15.3607 35.1676 15.3692C37.4654 15.3759 39.3577 17.2851 39.3543 19.5947C39.3509 21.8975 37.4519 23.8016 35.149 23.8067C32.8479 23.8118 30.9455 21.9195 30.9336 19.6116ZM36.9416 17.7396C36.1797 18.5556 35.4329 19.3565 34.5459 20.3077C34.1218 19.7315 33.7788 19.2686 33.3869 18.7381C32.9932 19.1503 32.733 19.4224 32.5641 19.6015C33.2838 20.3448 33.9714 21.0528 34.6067 21.71C35.6373 20.676 36.6983 19.6133 37.8489 18.4593C37.6614 18.3106 37.4367 18.1316 37.2103 17.9525C37.1393 17.8933 37.0667 17.8393 36.9416 17.7396Z"
-                              fill="white"
-                            />
-                            <path
-                              d="M32.4861 32.1105C33.9779 32.097 35.1944 33.2695 35.2231 34.7495C35.2518 36.2549 34.0286 37.4899 32.5114 37.4899C31.0297 37.4899 29.8183 36.2853 29.8115 34.8103C29.8065 33.3286 30.9993 32.1257 32.4861 32.1105ZM33.7059 34.7918C33.7042 34.1379 33.1906 33.6074 32.5452 33.5939C31.8761 33.5787 31.3186 34.1312 31.322 34.8053C31.3254 35.4524 31.8474 35.9896 32.4861 36.0065C33.1551 36.0234 33.7093 35.4726 33.7059 34.7918Z"
-                              fill="white"
-                            />
-                            <path
-                              d="M21.557 37.4897C20.0668 37.4779 18.8707 36.28 18.874 34.8017C18.8791 33.276 20.0871 32.0917 21.6212 32.1086C23.1012 32.1255 24.289 33.3453 24.2721 34.8304C24.2535 36.3155 23.0438 37.4999 21.557 37.4897ZM22.7667 34.8034C22.7684 34.1242 22.2142 33.5785 21.5401 33.5954C20.9049 33.6123 20.3625 34.1614 20.3625 34.7932C20.3608 35.4268 20.8981 35.9827 21.53 36.0046C22.2007 36.0283 22.765 35.4792 22.7667 34.8034Z"
-                              fill="white"
-                            />
-                          </svg>
-                        </div>
-                        <div className="name">
-                          <p className="text-base text-dark-gray dark:text-white font-medium mb-2">
-                            <span className="ml-1 font-bold">Thank you !</span>
-                            you made your frast sell
-                            <span className="ml-1 font-bold">232.98 ETH</span>
-                          </p>
-                          <p className="text-sm text-thin-light-gray font-medium">
-                            23 house ago
-                          </p>
-                        </div>
-                      </div>
-                    </li>
-                    <li className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple">
-                      <div className="notifications flex space-x-4 items-center">
-                        <div className="icon">
-                          <svg
-                            width="52"
-                            height="52"
-                            viewBox="0 0 52 52"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <circle cx="26" cy="26" r="26" fill="#56CCF2" />
-                            <path
-                              d="M23.1046 14.0017C24.5421 14.0092 25.6981 14.1643 26.7653 14.7031C28.6197 15.6394 29.6086 17.1912 29.8931 19.2172C30.0752 20.5117 29.9292 21.7911 29.6191 23.0509C29.2443 24.5682 28.7386 26.0388 27.9348 27.3889C27.4215 28.2514 26.7833 29.007 25.9223 29.5474C24.3253 30.5513 22.3942 30.449 20.8228 29.287C19.8745 28.5855 19.2017 27.6598 18.6703 26.6228C17.9102 25.1356 17.4842 23.5431 17.1907 21.9085C17.0236 20.9798 16.9664 20.0526 17.117 19.1179C17.5053 16.6975 18.9021 15.1366 21.19 14.3344C21.8929 14.0875 22.6185 13.9852 23.1046 14.0017Z"
-                              fill="white"
-                            />
-                            <path
-                              d="M31.4126 39.0001C31.3434 39.0001 31.2847 39.0001 31.2245 39.0001C24.8936 39.0001 18.5628 39.0001 12.2319 39.0001C12.0061 39.0001 11.9986 39.0001 12.0001 38.7788C12.0062 37.8727 11.9926 36.9636 12.0317 36.0589C12.0739 35.1197 12.5601 34.4032 13.2901 33.8418C14.0126 33.2879 14.8465 32.9688 15.7059 32.7039C17.4248 32.174 19.192 31.9016 20.9786 31.7481C22.538 31.6141 24.1004 31.6081 25.6628 31.6924C26.0842 31.7149 26.5027 31.7691 26.9241 31.7962C27.0731 31.8068 27.1078 31.8655 27.1078 32.0085C27.1032 33.4098 27.4073 34.7374 28.1223 35.9521C28.8703 37.224 29.9134 38.1858 31.2245 38.8616C31.2802 38.8902 31.3359 38.9173 31.3915 38.9474C31.3991 38.9534 31.3991 38.967 31.4126 39.0001Z"
-                              fill="white"
-                            />
-                            <path
-                              d="M29.4634 30.8568C29.5432 30.8568 29.6109 30.8568 29.6786 30.8568C30.6886 30.8568 31.6971 30.8568 32.7071 30.8568C32.9328 30.8568 32.9344 30.8568 32.9344 30.622C32.9344 29.612 32.9344 28.6035 32.9344 27.5935C32.9344 27.5273 32.9344 27.4596 32.9344 27.3828C33.9278 27.3828 34.8986 27.3828 35.8936 27.3828C35.8936 28.5388 35.8936 29.6858 35.8936 30.8553C37.0646 30.8553 38.2116 30.8553 39.3691 30.8553C39.3691 31.8322 39.3691 32.788 39.3691 33.7648C38.2161 33.7648 37.0676 33.7648 35.8951 33.7648C35.8951 34.9404 35.8951 36.0934 35.8951 37.2584C35.8168 37.2629 35.7611 37.2689 35.7054 37.2689C34.8444 37.2689 33.9835 37.2659 33.1225 37.2734C32.972 37.2749 32.9298 37.2328 32.9298 37.0823C32.9359 36.0557 32.9328 35.0292 32.9328 34.0027C32.9328 33.9349 32.9328 33.8672 32.9328 33.7754C31.7693 33.7754 30.6224 33.7754 29.4634 33.7754C29.4634 32.794 29.4634 31.8397 29.4634 30.8568Z"
-                              fill="white"
-                            />
-                          </svg>
-                        </div>
-                        <div className="name">
-                          <p className="text-base text-dark-gray dark:text-white font-medium mb-2">
-                            Your Account has been created
-                            <span className="ml-1 font-bold">
-                              successfully done
-                            </span>
-                          </p>
-                          <p className="text-sm text-thin-light-gray font-medium">
-                            23 house ago
-                          </p>
-                        </div>
-                      </div>
-                    </li>
-                    <li className="content-item py-5">
-                      <div className="notifications flex space-x-4 items-center">
-                        <div className="icon">
-                          <svg
-                            width="52"
-                            height="52"
-                            viewBox="0 0 52 52"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <circle cx="26" cy="26" r="26" fill="#9B51E0" />
-                            <path
-                              d="M32.8582 12.0043C33.1083 12.133 33.182 12.3469 33.1777 12.6144C33.169 13.1493 33.1748 13.6856 33.1748 14.2551C33.2962 14.2551 33.3931 14.2551 33.4899 14.2551C34.7664 14.2566 36.0414 14.2566 37.3179 14.258C38.0581 14.2595 38.3833 14.5978 38.3674 15.3365C38.3269 17.1449 38.1404 18.9346 37.6142 20.6737C37.2124 22.0051 36.6457 23.2483 35.602 24.2154C34.9558 24.8139 34.1925 25.1782 33.3165 25.2866C33.1517 25.3068 33.0953 25.3661 33.0606 25.5295C32.4737 28.2963 30.8314 30.1019 28.1209 30.9288C28.0038 30.9649 27.9099 30.9924 27.9099 31.1558C27.9157 32.8688 27.9157 34.5819 27.9171 36.2949C27.9171 36.3209 27.9287 36.3469 27.9417 36.399C28.0328 36.4033 28.1296 36.412 28.2265 36.412C28.8004 36.4134 29.3743 36.4163 29.9482 36.4106C30.1968 36.4077 30.3804 36.4958 30.525 36.7055C31.1032 37.5454 31.6901 38.3809 32.2742 39.2165C32.3942 39.3885 32.5113 39.5894 32.3537 39.7629C32.2409 39.8858 32.0356 39.987 31.8708 39.9884C28.0805 40.0014 24.2886 39.9971 20.4982 40C20.2959 40 20.1166 39.9653 20.0082 39.7716C19.8925 39.5634 19.9764 39.39 20.0978 39.2165C20.6775 38.3881 21.2586 37.5613 21.8296 36.7271C21.9858 36.5002 22.1824 36.4077 22.4498 36.4106C23.1047 36.4178 23.7595 36.412 24.4433 36.412C24.4491 36.2949 24.4578 36.198 24.4578 36.1012C24.4592 34.4879 24.4549 32.876 24.4621 31.2627C24.4635 31.0589 24.4086 30.9736 24.199 30.9086C21.5651 30.0875 19.9316 28.3325 19.3374 25.6335C19.2839 25.3907 19.2015 25.3083 18.9457 25.2678C17.6865 25.0726 16.7382 24.3744 16.0111 23.3524C15.1712 22.1713 14.7332 20.8254 14.4382 19.4275C14.152 18.0701 14.0205 16.6924 14.0002 15.3047C13.9901 14.579 14.3226 14.2551 15.0526 14.2537C16.319 14.2523 17.5868 14.2508 18.8531 14.2508C18.9529 14.2508 19.0526 14.2508 19.1957 14.2508C19.1957 13.9949 19.1957 13.7535 19.1957 13.5121C19.1957 13.2114 19.203 12.9107 19.1943 12.61C19.1856 12.3426 19.2637 12.1272 19.5138 12C23.9619 12.0043 28.4101 12.0043 32.8582 12.0043ZM26.1853 16.6086C25.9092 17.1666 25.62 17.6465 25.4307 18.1641C25.2283 18.7177 24.8871 18.9404 24.3089 18.9635C23.7624 18.9866 23.2203 19.1124 22.6305 19.1991C22.7259 19.3003 22.7852 19.3654 22.8488 19.4275C23.3114 19.88 23.7812 20.3253 24.2308 20.7893C24.3146 20.876 24.3681 21.0423 24.3551 21.1623C24.3161 21.5237 24.2351 21.8793 24.173 22.2378C24.1108 22.6064 24.0515 22.9765 23.9836 23.3928C24.6703 23.0314 25.3107 22.7062 25.9395 22.3592C26.1231 22.258 26.2604 22.2682 26.4382 22.365C27.0671 22.7091 27.706 23.0358 28.3609 23.3784C28.3609 23.2974 28.3681 23.2439 28.3595 23.1948C28.2453 22.5313 28.1383 21.8663 28.0096 21.2056C27.972 21.0105 28.014 20.8847 28.1571 20.7517C28.543 20.3918 28.9146 20.0145 29.2948 19.6473C29.435 19.5114 29.5824 19.3827 29.7834 19.2006C28.9999 19.0878 28.3103 18.9808 27.6179 18.8912C27.3938 18.8623 27.2492 18.7929 27.1466 18.5645C26.856 17.9256 26.5279 17.2982 26.1853 16.6086ZM36.6442 16.013C35.4661 16.013 34.3269 16.013 33.195 16.013C33.195 18.537 33.195 21.0365 33.195 23.6053C33.4986 23.4767 33.779 23.3928 34.0219 23.2468C34.7982 22.7799 35.2406 22.0398 35.5832 21.2331C36.053 20.1287 36.3089 18.9664 36.465 17.7824C36.5402 17.197 36.5835 16.61 36.6442 16.013ZM19.1798 23.5548C19.1798 21.0264 19.1798 18.5197 19.1798 16.0072C18.0291 16.0072 16.8972 16.0072 15.7581 16.0072C15.7552 16.0607 15.7494 16.0954 15.7509 16.1301C15.839 17.5786 16.0328 19.0098 16.4794 20.3947C16.7512 21.236 17.0909 22.0528 17.7053 22.7163C18.1029 23.1471 18.5698 23.4579 19.1798 23.5548Z"
-                              fill="white"
-                            />
-                          </svg>
-                        </div>
-                        <div className="name">
-                          <p className="text-base text-dark-gray dark:text-white font-medium mb-2">
-                            Your Account has been created
-                            <span className="ml-1 font-bold">
-                              successfully done
-                            </span>
-                          </p>
-                          <p className="text-sm text-thin-light-gray font-medium">
-                            23 house ago
-                          </p>
-                        </div>
-                      </div>
-                    </li>
+                    {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>
+                      )
+                      }
+                    })
+                    }
                   </ul>
+
                   <div className="add-money-btn flex justify-center items-center">
                     <Link
                       to="/notification"
@@ -472,10 +336,10 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
               </Link>
             </div>
             {/* profile */}
-            <div className="user-profile relative lg:block hidden">
+            <div className="user-profile relative">
               <div
                 onClick={() => handlerProfile()}
-                className="flex items-center space-x-3.5"
+                className="hidden lg:flex items-center space-x-3.5"
               >
                 {/* profile-image */}
                 <div className="lg:w-[62px] lg:h-[62px] w-[50px] h-[50px] rounded-full overflow-hidden">
@@ -489,9 +353,26 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                   <h1 className="text-xl font-bold   text-dark-gray dark:text-white">
                     {firstname}
                   </h1>
-                 {userDetails && userDetails?.account_type !== "FAMILY" && <p className="text-sm text-thin-light-gray">@{userEmail}</p>}
+                  {userDetails && userDetails?.account_type !== "FAMILY" && (
+                    <p className="text-sm text-thin-light-gray">@{userEmail}</p>
+                  )}
                 </div>
               </div>
+
+              <div className="for-mobile-profile lg:hidden block">
+                <div
+                  // to="/profile"
+                  onClick={() => handlerProfile()}
+                  className="lg:w-[62px] lg:h-[62px] w-[50px] h-[50px] rounded-full overflow-hidden block"
+                >
+                  <img
+                    src={profileImg}
+                    alt="profile"
+                    className="w-full h-full"
+                  />
+                </div>
+              </div>
+
               <div
                 className={`profile-dropdown w-[293px] z-30 bg-white dark:bg-dark-white   absolute lg:right-16 -right-[16px]  rounded-lg ${
                   userProfileDropdown ? "active" : ""
@@ -502,7 +383,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                 </div>
                 <div className="heading border-b dark:border-[#5356fb29]  border-light-purple px-7 py-2">
                   <h3 className="text-xl font-bold   text-dark-gray dark:text-white">
-                  {`${firstname} ${lastname}`}
+                    {`${firstname} ${lastname}`}
                   </h3>
                 </div>
                 <div className="content">
@@ -529,84 +410,6 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                     </li>
                     {userDetails && userDetails?.account_type !== "FAMILY" && (
                       <>
-                        <li className="content-item relative my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
-                          <Link to="#" className="notifications">
-                            <div className="name">
-                              <p className="flex items-center justify-between text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
-                                <span>Reports</span> <span>&gt;</span>
-                              </p>
-                            </div>
-                          </Link>
-                          {/* report list items*/}
-                          <div
-                            className="inner-list-items absolute rounded-lg"
-                            onClick={setNotification}
-                          >
-                            <ul className="p-3">
-                              <li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
-                                <Link to="/referral" className="notifications">
-                                  <div className="name">
-                                    <p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
-                                      Referrals
-                                    </p>
-                                  </div>
-                                </Link>
-                              </li>
-                              <li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
-                                <Link to="#" className="notifications">
-                                  <div className="name">
-                                    <p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
-                                      Billing
-                                    </p>
-                                  </div>
-                                </Link>
-                              </li>
-                              <li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
-                                <Link to="#" className="notifications">
-                                  <div className="name">
-                                    <p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
-                                      Payments
-                                    </p>
-                                  </div>
-                                </Link>
-                              </li>
-                              <li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
-                                <Link to="#" className="notifications">
-                                  <div className="name">
-                                    <p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
-                                      Completed Jobs
-                                    </p>
-                                  </div>
-                                </Link>
-                              </li>
-                              <li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
-                                <Link to="#" className="notifications">
-                                  <div className="name">
-                                    <p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
-                                      Previous Task
-                                    </p>
-                                  </div>
-                                </Link>
-                              </li>
-                            </ul>
-                            <hr />
-                            <div className="px-7 py-3 cursor-pointer flex items-center">
-                              <div
-                                className={`h-6 w-8 mr-1 p-1 ${
-                                  toggleNotification
-                                    ? "bg-sky-blue flex justify-end items-center"
-                                    : "bg-slate-200"
-                                } rounded-full transition`}
-                              >
-                                <div className="w-4 h-full bg-white rounded-full"></div>
-                              </div>
-                              <p className="text-sm py-2 px-4 text-slate-400 dark:text-white">
-                                Notifications
-                              </p>
-                            </div>
-                          </div>
-                          {/* end report list items*/}
-                        </li>
                         <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
                           <Link to="#" className="notifications">
                             <div className="name">
@@ -675,7 +478,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                     <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg cursor-pointer">
                       <div className="name" onClick={logoutModalHandler}>
                         <p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
-                          Sign Out
+                          {process.env.REACT_APP_LOGOUT_TEXT}
                         </p>
                       </div>
                     </li>
@@ -684,14 +487,15 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                 </div>
               </div>
             </div>
-            <div className="for-mobile-profile lg:hidden block">
-              <Link
-                to="/profile"
+            {/* <div className="for-mobile-profile lg:hidden block">
+              <div
+                // to="/profile"
+                onClick={() => handlerProfile()}
                 className="lg:w-[62px] lg:h-[62px] w-[50px] h-[50px] rounded-full overflow-hidden block"
               >
                 <img src={profileImg} alt="profile" className="w-full h-full" />
-              </Link>
-            </div>
+              </div>
+            </div> */}
           </div>
         </div>
       </div>

src/components/Partials/Layout.jsx

@@ -8,7 +8,6 @@ import Header from "./Header";
 import MobileSidebar from "./MobileSideBar";
 import RightSideBar from "./RightSideBar";
 import Sidebar from "./Sidebar";
-import usersService from "../../services/UsersService";
 
 export default function Layout({ children }) {
   const { drawer } = useSelector((state) => state.drawer);
@@ -179,7 +178,7 @@ export default function Layout({ children }) {
                   type="button"
                   className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
                 >
-                  Yes Logout
+                  {`Yes ${process.env.REACT_APP_LOGOUT_TEXT}`}
                 </button>
                 <button
                   onClick={logoutModalHandler}

src/components/Partials/MobileSideBar.jsx

@@ -8,7 +8,12 @@ import {
 import DarkModeContext from "../Contexts/DarkModeContext";
 import Icons from "../Helpers/Icons";
 
-export default function MobileSidebar({ sidebar, action, logoutModalHandler, myJobList }) {
+export default function MobileSidebar({
+  sidebar,
+  action,
+  logoutModalHandler,
+  myJobList,
+}) {
   let { userDetails } = useSelector((state) => state.userDetails);
   const darkMode = useContext(DarkModeContext);
 
@@ -110,74 +115,72 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler, myJ
 
         {/* menu and settings item */}
         {userDetails?.account_type !== "FAMILY" && (
-              <div
-                  className={`menu-item transition-all duration-300 ease-in-out ${
-                      sidebar ? "mb-5" : "mb-2"
-                  }`}
-              >
-                <div className="heading mb-5">
-                  <h1 className="title text-xl font-bold text-sky-blue">
-                    Family
-                  </h1>
-                </div>
-                <div className="items">
-                  <ul className="flex flex-col space-y-6">
-                    <ListItem
-                        title="Family Corner"
-                        route="/acc-family"
-                        iconName="new-family"
-                        sidebar={sidebar}
-                    />
-                  </ul>
-                </div>
-              </div>
+          <div
+            className={`menu-item transition-all duration-300 ease-in-out ${
+              sidebar ? "mb-5" : "mb-2"
+            }`}
+          >
+            <div className="heading mb-5">
+              <h1 className="title text-xl font-bold text-sky-blue">Family</h1>
+            </div>
+            <div className="items">
+              <ul className="flex flex-col space-y-6">
+                <ListItem
+                  title="Family Corner"
+                  route="/acc-family"
+                  iconName="new-family"
+                  sidebar={sidebar}
+                />
+              </ul>
+            </div>
+          </div>
         )}
 
         {userDetails?.account_type !== "FAMILY" && (
           <>
             {!userDetails?.post_jobs ? (
-                <div
-                  className={`menu-item transition-all duration-300 ease-in-out bg-[#f0f8ff] dark:bg-dark-white rounded-2xl p-3 ${
-                    sidebar ? "mb-5" : "mb-2 rounded-none p-0"
-                  }`}
-                >
-                  <div className="heading mb-5">
-                    <h1 className="title text-xl font-bold text-sky-blue">
-                      Job Post
-                    </h1>
-                  </div>
-                  <div className="items">
-                    <ul className="flex flex-col space-y-6">
-                      <li className="item group">
-                        <NavLink
-                          to="/start-job"
-                          className={`nav-item flex items-center ${
-                            ((navData) => (navData.isActive ? "active" : ""),
-                            sidebar
-                              ? "justify-start space-x-3.5"
-                              : "justify-center")
+              <div
+                className={`menu-item transition-all duration-300 ease-in-out bg-[#f0f8ff] dark:bg-dark-white rounded-2xl p-3 ${
+                  sidebar ? "mb-5" : "mb-2 rounded-none p-0"
+                }`}
+              >
+                <div className="heading mb-5">
+                  <h1 className="title text-xl font-bold text-sky-blue">
+                    Job Post
+                  </h1>
+                </div>
+                <div className="items">
+                  <ul className="flex flex-col space-y-6">
+                    <li className="item group">
+                      <NavLink
+                        to="/start-job"
+                        className={`nav-item flex items-center ${
+                          ((navData) => (navData.isActive ? "active" : ""),
+                          sidebar
+                            ? "justify-start space-x-3.5"
+                            : "justify-center")
+                        }`}
+                      >
+                        <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
+                          <Icons name="people-two" />
+                        </span>
+                        <span
+                          className={`item-content group-hover:text-sky-blue text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                            sidebar ? "active flex-1" : "w-0"
                           }`}
                         >
-                          <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                            <Icons name="people-two" />
-                          </span>
-                          <span
-                            className={`item-content group-hover:text-sky-blue text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
-                              sidebar ? "active flex-1" : "w-0"
-                            }`}
-                          >
-                            Enable Job Post
-                          </span>
-                        </NavLink>
-                      </li>
-                    </ul>
-                  </div>
+                          Enable Job Post
+                        </span>
+                      </NavLink>
+                    </li>
+                  </ul>
                 </div>
+              </div>
             ) : myJobList?.data?.result_list?.length ? (
               <div
-                  className={`menu-item transition-all duration-300 ease-in-out ${
-                      sidebar ? "mb-5" : "mb-2"
-                  }`}
+                className={`menu-item transition-all duration-300 ease-in-out ${
+                  sidebar ? "mb-5" : "mb-2"
+                }`}
               >
                 <div className="heading mb-5">
                   <h1 className="title text-xl font-bold text-sky-blue">
@@ -212,9 +215,9 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler, myJ
               </div>
             ) : (
               <div
-                  className={`menu-item transition-all duration-300 ease-in-out ${
-                      sidebar ? "mb-5" : "mb-2"
-                  }`}
+                className={`menu-item transition-all duration-300 ease-in-out ${
+                  sidebar ? "mb-5" : "mb-2"
+                }`}
               >
                 <div className="heading mb-5">
                   <h1 className="title text-xl font-bold text-sky-blue">
@@ -245,14 +248,14 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler, myJ
           className="signout-btn flex items-center space-x-1  p-2.5 w-2/3 h-[52px] bg-sky-blue transition duration-300 ease-in-out hover:bg-gray-900 rounded-full"
         >
           <span className="">
-            <Icons name='new-logout' />
+            <Icons name="new-logout" />
           </span>
           <span
             className={`signout-btn-content text-white text-xl font-bold ${
               sidebar ? "active" : ""
             }`}
           >
-            Signout
+            {process.env.REACT_APP_LOGOUT_TEXT}
           </span>
         </button>
       ) : (

src/components/Resources/index.jsx

@@ -9,6 +9,7 @@ import products from "../../data/product_data.json";
 import Layout from "../Partials/Layout";
 import {
   ActivitiesTab, BlogTab,
+  QuestionsTab,
   CollectionTab,
   CreatedTab,
   HiddenProductsTab,
@@ -39,7 +40,7 @@ export default function Resources(props) {
   // Category Components
   const tabComponents = {
     blog: <BlogTab blogdata={blogItems} />,
-    onsale: <OnSaleTab products={onSaleProducts} />,
+    onsale: <QuestionsTab products={onSaleProducts} />,
     owned: <OwnTab products={ownProducts} />,
     created: (
       <CreatedTab marketProducts={CreatedSell} mainProducts={CreatedBits} />
@@ -65,6 +66,7 @@ export default function Resources(props) {
         return blogItems?.blogdata?.length
       }else if(name == 'onsale'){
         return onSaleProducts?.length
+        // return null
       }else if(name == 'owned'){
         return ownProducts?.length
       }else if(name == 'created'){
@@ -87,6 +89,7 @@ export default function Resources(props) {
         >
           {tabValue.content}
         </span>
+        {tabValue.name != 'onsale' &&
         <span
           className={`w-5 h-5 group-hover:bg-pink group-hover:text-white text-[10px] rounded-full absolute -top-2 -right-5 flex justify-center items-center ${
             isActive
@@ -94,9 +97,9 @@ export default function Resources(props) {
               : "text-thin-light-gray bg-[#F2B8FD]"
           }`}
         >
-          {/* 16 blog, onsale, owned,created */}
           {countNumber(tabValue.name)}
         </span>
+        }
       </li>
     );
   };

src/components/Resources/tabs/QuestionsTab.jsx

@@ -0,0 +1,46 @@
+import ProductCardStyleTwo from "../../Cards/ProductCardStyleTwo";
+import DataIteration from "../../Helpers/DataIteration";
+import SearchCom from "../../Helpers/SearchCom";
+import localImgLoad from "../../../lib/localImgLoad";
+
+export default function QuestionsTab({ className, products }) {
+    return (
+        <>
+            <div className={`onsale-tab-wrapper w-full ${className || ""}`}>
+                <div className="main-container w-full">
+                    <div className="filter-section w-fullmb-6">
+                        <h1 className="text-xl lg:text-2xl font-bold text-dark-gray dark:text-white tracking-wide">Ask our A.I</h1>
+                        <div className="mt-2 lg:grid grid-cols-2 gap-2 h-full lg:h-[500px]">
+                            <div className="h-full mb-5 lg:mb-0">
+                                <img className="w-full h-full rounded-2xl" src={localImgLoad(`images/resources-ask.jpg`)} alt='AI' />
+                            </div>
+                            <div className="p-8 bg-white rounded-2xl h-full">
+                                <div className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base">
+                                    <select className="input-field px-2 placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#fafafa] focus:ring-0 focus:outline-none">
+                                        <option className="rounded-full">Find answer on:</option>
+                                    </select>
+                                </div>
+                                {/* filter-search */}
+                                <div className="w-full my-5 border-2 rounded-full">
+                                    <SearchCom />
+                                </div>
+                                <div className="w-full flex justify-end items-center border-b-2 pb-4">
+                                    <button
+                                        className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer"
+                                        >
+                                        Search
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+                    {/* <div className="content-section w-full-width">
+                        <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
+                        </div>
+                    </div> */}
+                </div>
+            </div>
+        </>
+    );
+}

src/components/Resources/tabs/index.js

@@ -5,9 +5,11 @@ import HiddenProductsTab from "./HiddenProductsTab";
 import OnSaleTab from "./OnSaleTab";
 import OwnTab from "./OwnTab";
 import BlogTab from "./BlogTab";
+import QuestionsTab from "./QuestionsTab";
 
 export {
   BlogTab,
+  QuestionsTab,
   ActivitiesTab,
   CollectionTab,
   CreatedTab,

src/components/Settings/Tabs/CardList.jsx

@@ -0,0 +1,112 @@
+import React, {useEffect, useState} from 'react'
+import method1 from "../../../assets/images/payment-cards/discover-card.svg";
+import LoadingSpinner from '../../Spinners/LoadingSpinner';
+import localImgLoad from '../../../lib/localImgLoad';
+
+import usersService from "../../../services/UsersService";
+import { handlePagingFunc } from '../../Pagination';
+import PaginatedList from '../../Pagination/PaginatedList';
+
+import DeleteCardPopout from './DeleteCardPopout';
+
+function CardList() {
+    const api = new usersService();
+    
+    const [reloadCardList, setReloadCardList] = useState(false) // STATE TO DETERMINE WHEN CARD LIST RELOADS. EG: WHEN USER DELETES A CARD
+
+  const [cardList, setCardList] = useState({loading: true, data: []})
+
+  const [deleteCardModal, setDeleteCardModal] = useState({show: false, data: {}}) // STATE TO HOLD WHEN DELETE MODAL POPS UP
+  const handleDeleteCardModal = () => {
+    setDeleteCardModal(prev => ({...prev, show:!prev.show}))
+  }
+
+  const [currentPage, setCurrentPage] = useState(0);
+  const indexOfFirstItem = Number(currentPage);
+  const indexOfLastItem =
+    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+  const currentCardList = cardList?.data?.slice(indexOfFirstItem, indexOfLastItem);
+
+  const handlePagination = (e) => {
+    handlePagingFunc(e, setCurrentPage);
+  };
+
+  useEffect(()=>{
+    setCardList({loading: true, data: []})
+    api.payListCard().then(res=>{
+      setCardList({loading: false, data:res.data?.result_list})
+    }).catch(err => {
+      setCardList({loading: false, data:[]})
+      console.log('ERROR', err)
+    })
+  },[reloadCardList])
+  return (
+    <div className='w-full'>
+        <ul className="payment-items w-full min-h-[400px]">
+            {cardList.loading ?
+            <div className='w-full h-[300px] flex justify-center items-center'>
+                <LoadingSpinner size='8' color='sky-blue' />
+            </div>
+            :
+            cardList.data.length ?
+            currentCardList.map(item =>{
+            let image = item.description && localImgLoad(`images/payment-cards/${item.description.toLowerCase()}-card.svg`)
+            return(
+                <li key={item.card_uid} className="sm:flex justify-between items-center w-full py-3 border-b border-light-purple dark:border-[#5356fb29] ">
+                    <div className="flex space-x-5 mb-2 sm:mb-0">
+                        <div className="w-[70px] h-[70px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
+                            <img src={image ? image : method1} className='w-[50px] h-[50px]' alt="payment" />
+                        </div>
+                        <div>
+                        <p className="sm:text-xl text-lg tracking-wide   text-dark-gray dark:text-white">
+                            Added: {item.added}
+                        </p>
+                        <p className="text-thin-light-gray sm:text-18 text-sm tracking-wide">
+                            {item.description} **********{item.digits}
+                        </p>
+                        {/* <p className="sm:text-18 text-sm tracking-wide text-light-green">
+                            Verified
+                        </p> */}
+                        </div>
+                    </div>
+                    <div>
+                        <button
+                        type="button"
+                        onClick={()=>{setDeleteCardModal({show: true, data:item})}}
+                        className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide"
+                        >
+                        Delete
+                        </button>
+                    </div>
+                </li>
+            )}
+            )
+            :
+            <h1 className='font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap'>No Cards Found</h1>
+            }
+        </ul>
+
+        {/* PAGINATION BUTTON */}
+        <PaginatedList
+            onClick={handlePagination}
+            prev={currentPage == 0 ? true : false}
+            next={
+            currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
+            cardList?.data?.length
+                ? true
+                : false
+            }
+            data={cardList?.data}
+            start={indexOfFirstItem}
+            stop={indexOfLastItem}
+        />
+      {/* END OF PAGINATION BUTTON */}
+
+      {deleteCardModal.show && 
+        <DeleteCardPopout action={handleDeleteCardModal} situation={deleteCardModal.show} data={deleteCardModal.data} setReloadCardList={setReloadCardList} />
+      }
+    </div>
+  )
+}
+
+export default CardList

src/components/Settings/Tabs/ChangePasswordTab.jsx

@@ -3,11 +3,39 @@
 import React, { useState } from "react";
 import Icons from "../../Helpers/Icons";
 import PasswordSvg from "../PasswordSvg";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import usersService from "../../../services/UsersService";
+import { useNavigate } from "react-router-dom";
 
 export default function ChangePasswordTab() {
+  const apiUrl = new usersService()
+  const navigate = useNavigate()
+
   const [oldPass, setOldPass] = useState("hide-password");
   const [newPass, setNewPass] = useState("hide-password");
   const [confirmPass, setConfirmPass] = useState("hide-password");
+
+  const [requestStatus, setRequestStatus] = useState({loading: false, status: false, message: ''})
+  
+  const [inputEmpty, setInputEmpty] = useState(false)
+  let [inputs, setInputs] = useState({
+    old_pwd: '',
+    new_pwd: '',
+    confirm_new_pwd: ''
+  })
+
+  const handleInputChange = ({target:{name, value}}) => { // FUNCTION TO HANDLE WHEN AN INPUT CHANGES
+    setInputs(prev => ({...prev, [name]:value}))
+  }
+
+  const handleCancel = () => { // FUNCTION TO CLEAR ALL TYPED INPUTS
+    setInputs({
+      old_pwd: '',
+      new_pwd: '',
+      confirm_new_pwd: ''
+    })
+  }
+
   const showPassword = (value) => {
     const password = document.getElementById(`${value}`);
     if (value && value === "old_password") {
@@ -38,16 +66,61 @@ export default function ChangePasswordTab() {
       }
     }
   };
+
+  const handlePwdUpdate = () => {
+    setInputEmpty(false) // SETS THE STATE OF ANY INPUT IS EMPTY TO FALSE
+    if(!inputs.old_pwd || !inputs.new_pwd || !inputs.confirm_new_pwd){ // CHECKS IF ANY INPUT FIELD IS EMPTY AND SETS INPUT EMPTY TO TRUE
+      setInputEmpty(true)
+      return setTimeout(()=>{setInputEmpty(false)},3000)
+    }
+
+    if(inputs.new_pwd != inputs.confirm_new_pwd){ // CHECKS IF PASSWORD MATCHES CONFIRM PASSWORD
+      setRequestStatus({loading: false, status: false, message: 'new password must match confirm password'})
+      return setTimeout(()=>{setRequestStatus({loading: false, status: false, message: ''})},3000)
+    }
+
+    if(/^[a-zA-Z0-9]*$/.test(inputs.new_pwd) == false){ // CHECKS IF PASSWORD IS ALPHANUMERIC
+      setRequestStatus({loading: false, status: false, message: 'password must be alphanumeric'})
+      return setTimeout(()=>{setRequestStatus({loading: false, status: false, message: ''})},3000)
+    }
+
+    if(inputs.new_pwd.length < 6){ // CHECKS IF PASSWORD IS UPTO SIX CHARACTERS
+      setRequestStatus({loading: false, status: false, message: 'password must be upto six characters'})
+      return setTimeout(()=>{setRequestStatus({loading: false, status: false, message: ''})},3000)
+    }
+
+    
+    let reqData = { // REQUEST PAYLOAD
+      current_pass: inputs.old_pwd,
+      new_pass: inputs.new_pwd
+    }
+
+    
+    setRequestStatus({loading: true, status: false, message: ''})
+
+    apiUrl.profilePassChange(reqData).then(res => {
+      if(res.status != 200 || res.data.internal_return < 0){
+        setRequestStatus({loading: false, status: false, message: 'unable to complete request'})
+        return
+      }
+      setRequestStatus({loading: false, status: true, message: 'password update was successful'})
+      setTimeout(()=>{navigate('/settings', {replace: true})}, 5000)
+    }).catch(err => {
+      setRequestStatus({loading: false, status: false, message: 'unable to complete request'})
+    }).finally(()=>{
+      setTimeout(()=>{setRequestStatus({loading: false, status: false, message: ''})},4000)
+    })
+  }
   return (
     <div className="changePasswordTab w-full">
-      <div className="w-full flex xl:flex-row flex-col-reverse space-x-5 xl:items-center">
+      <div className="w-full flex xxl:flex-row flex-col-reverse space-x-5 xxl:items-start">
         <div className="flex-1 mb-10">
           <div className="input-field mb-6">
             <label
               className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5"
               htmlFor="old_password"
             >
-              Old Password
+              Old Password <span className="text-[10px] text-red-500 italic px-2">{(inputEmpty && !inputs.old_pwd) && 'required'}</span>
             </label>
             <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  w-full rounded-[50px] h-[58px] overflow-hidden relative ">
               <div className="absolute left-6 bottom-[17px] z-10">
@@ -58,6 +131,10 @@ export default function ChangePasswordTab() {
                 className="input-field placeholder:text-base text-bese px-12 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
                 type="password"
                 id="old_password"
+                value={inputs.old_pwd}
+                name='old_pwd'
+                onChange={handleInputChange}
+                autoComplete='false'
               />
               <div
                 className="absolute right-6 bottom-[17px] z-10 cursor-pointer"
@@ -72,7 +149,7 @@ export default function ChangePasswordTab() {
               className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5"
               htmlFor="new_password"
             >
-              New Password
+              New Password <span className="text-[10px] text-red-500 italic px-2">{(inputEmpty && !inputs.new_pwd) && 'required'}</span>
             </label>
             <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  w-full rounded-[50px] h-[58px] overflow-hidden relative ">
               <div className="absolute left-6 bottom-[17px] z-10">
@@ -83,6 +160,10 @@ export default function ChangePasswordTab() {
                 className="input-field placeholder:text-base text-bese px-12 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
                 type="password"
                 id="new_password"
+                value={inputs.new_pwd}
+                name='new_pwd'
+                onChange={handleInputChange}
+                autoComplete='false'
               />
               <div
                 className="absolute right-6 bottom-[17px] z-10 cursor-pointer"
@@ -97,7 +178,7 @@ export default function ChangePasswordTab() {
               className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5"
               htmlFor="confirm_password"
             >
-              Confirm Password
+              Confirm Password <span className="text-[10px] text-red-500 italic px-2">{(inputEmpty && !inputs.confirm_new_pwd) && 'required'}</span>
             </label>
             <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  w-full rounded-[50px] h-[58px] overflow-hidden relative ">
               <div className="absolute left-6 bottom-[17px] z-10">
@@ -108,6 +189,10 @@ export default function ChangePasswordTab() {
                 className="input-field placeholder:text-base text-bese px-12 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
                 type="password"
                 id="confirm_password"
+                value={inputs.confirm_new_pwd}
+                name='confirm_new_pwd'
+                onChange={handleInputChange}
+                autoComplete='false'
               />
               <div
                 className="absolute right-6 bottom-[17px] z-10 cursor-pointer"
@@ -120,19 +205,46 @@ export default function ChangePasswordTab() {
           <div className="flex justify-center space-x-4 items-center">
             <button
               type="button"
-              className="text-light-red text-18 tracking-wide border-b dark:border-[#5356fb29]  border-light-red "
+              className="text-light-red text-18 tracking-wide border-b dark:border-[#5356fb29]  border-light-red"
+              disabled={requestStatus.loading}
+              onClick={handleCancel}
             >
               Cancel
             </button>
-            <button
-              type="button"
-              className="btn-gradient tracking-wide rounded-full w-[173px] h-[46px] flex justify-center items-center"
-            >
-              <span className="font-thin text-18 tracking-wide antialiased text-white">
-                Change Password
-              </span>
-            </button>
+            {requestStatus.loading ?
+              <LoadingSpinner size='8' color='sky-blue' />
+              :
+              <button
+                type="button"
+                className="btn-gradient tracking-wide rounded-full w-[173px] h-[46px] flex justify-center items-center"
+                disabled={requestStatus.loading}
+                onClick={handlePwdUpdate}
+              >
+                <span className="font-thin text-18 tracking-wide antialiased text-white">
+                  Change Password
+                </span>
+              </button>
+            }
           </div>
+
+          {/* error or success display */}
+          {requestStatus.message != "" &&
+            (!requestStatus.status ? (
+              <div
+                className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+              >
+                {requestStatus.message}
+              </div>
+            ) : (
+              requestStatus.status && (
+                <div
+                  className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                >
+                  {requestStatus.message}
+                </div>
+              )
+            ))}
+          {/* End of error or success display */}
         </div>
         <div className="w-[440px] sm:flex hidden justify-end">
           <PasswordSvg />

src/components/Settings/Tabs/DeleteCardPopout.jsx

@@ -0,0 +1,142 @@
+import React, { useState } from 'react'
+import ModalCom from '../../Helpers/ModalCom'
+import LoadingSpinner from '../../Spinners/LoadingSpinner'
+import usersService from '../../../services/UsersService'
+
+function DeleteCardPopout({action, situation, data, setReloadCardList}) {
+    const api = new usersService()
+
+    const [requestStatus, setRequestStatus] = useState({loading: false, status:false, message: ''})
+
+    let handleDeleteCard = () => { // FUNCTION TO DELETE A CARD
+        setRequestStatus(prev => ({...prev, loading: true}))
+        api.payRemCard({card_uid:data.card_uid}).then(res=>{
+            if(res.status != 200 || res.data.internal_return < 0){
+                setRequestStatus({loading: false, status:false, message: 'unable to delete card. Try Again'})
+                return
+            }
+            setRequestStatus({loading: false, status:true, message: 'Card deleted'})
+            setReloadCardList(prev => !prev) // RELOADS PAY CARD LIST
+            setTimeout(()=>{action()},3000) // CLOSES MODAL AFTER SOME SECONDS
+        }).catch(err => {
+            setRequestStatus({loading: false, status:false, message: 'network error. Try Again'})
+        }).finally(()=>{
+            setTimeout(()=>{
+                setRequestStatus(prev => ({...prev, message: ''}))
+            },4000)
+        })
+    }
+  return (
+    <ModalCom action={action} situation={situation}>
+        <div className="logout-modal-wrapper lg:w-[460px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+            <div className="logout-modal-header 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-red-500 tracking-wide">
+                Confirm Card Delete
+                </h1>
+                <button
+                type="button"
+                disabled={requestStatus.loading}
+                className="text-[#374557] dark:text-red-500"
+                onClick={action}
+                >
+                <svg
+                    width="36"
+                    height="36"
+                    viewBox="0 0 36 36"
+                    fill="none"
+                    className="fill-current"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <path
+                    d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
+                    fill=""
+                    fillOpacity="0.6"
+                    />
+                    <path
+                    d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
+                    fill="#"
+                    fillOpacity="0.6"
+                    />
+                </svg>
+                </button>
+            </div>
+            <div className="logout-modal-body w-full flex flex-col items-center px-10 py-8">
+                <div className="what-icon mb-6 cursor-pointer">
+                <svg
+                    width="136"
+                    height="136"
+                    viewBox="0 0 136 136"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <circle cx="68" cy="68" r="68" fill="#5356FB" />
+                    <path
+                    d="M69.8844 35.7891C71.1588 36.0357 72.4569 36.1967 73.7044 36.5423C81.5447 38.7098 87.2705 45.5378 87.9574 53.6156C88.5113 60.1147 86.3075 65.6006 81.5043 70.0195C79.8359 71.5545 78.0497 72.9604 76.3408 74.4534C76.127 74.6397 75.9654 75.0037 75.9604 75.2872C75.9284 77.2752 75.9435 79.2649 75.9435 81.2965C70.8895 81.2965 65.8758 81.2965 60.7915 81.2965C60.7915 81.0616 60.7915 80.8385 60.7915 80.6137C60.7915 76.5454 60.7999 72.4772 60.7797 68.4106C60.778 67.9392 60.9312 67.649 61.2831 67.3537C64.5643 64.5957 67.8271 61.8175 71.1033 59.0545C72.2616 58.0781 72.9215 56.8702 72.9081 55.3419C72.8878 52.916 70.8608 50.9146 68.423 50.8911C65.9701 50.8693 63.9145 52.8053 63.832 55.2328C63.8084 55.8988 63.8286 56.5665 63.8286 57.2695C58.7745 57.2695 53.7744 57.2695 48.6917 57.2695C48.6917 56.3149 48.6462 55.3385 48.6984 54.3655C49.222 44.699 56.7442 36.8745 66.4331 35.8914C66.5762 35.8763 66.7142 35.8243 66.854 35.7891C67.8641 35.7891 68.8742 35.7891 69.8844 35.7891Z"
+                    fill="white"
+                    />
+                    <path
+                    d="M67.485 100.21C66.1617 99.9268 64.9041 99.5091 63.803 98.6787C61.3804 96.8484 60.2877 93.7699 61.0386 90.7888C61.7726 87.8747 64.2138 85.6703 67.2089 85.2157C71.273 84.6 75.2024 87.3681 75.8135 91.277C76.4937 95.6153 73.8202 99.3782 69.544 100.103C69.4429 100.12 69.3487 100.172 69.2527 100.209C68.6635 100.21 68.0742 100.21 67.485 100.21Z"
+                    fill="white"
+                    />
+                </svg>
+                </div>
+                <div className="mb-6">
+                <p className="text-2xl tracking-wide text-center text-dark-gray dark:text-white">
+                    Are you sure you want to delete?
+                </p>
+                <div className='my-1 text-center'>
+                    <p className="py-1 sm:text-xl text-lg tracking-wide   text-dark-gray dark:text-white">
+                        Added: {data.added}
+                    </p>
+                    <p className="py-1 text-thin-light-gray sm:text-18 text-sm tracking-wide">
+                        {data.description} **********{data.digits}
+                    </p>
+                </div>
+                </div>
+                {/* error or success display */}
+                {requestStatus.message != "" &&
+                    (!requestStatus.status ? (
+                    <div
+                        className={`relative p-2 mb-2 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                    >
+                        {requestStatus.message}
+                    </div>
+                    ) : (
+                    requestStatus.status && (
+                    <div
+                    className={`relative p-2 mb-2 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                    >
+                        {requestStatus.message}
+                    </div>
+                )
+                ))}
+                {/* End of error or success display */}
+                <div className="flex space-x-2.5">
+                <button
+                    onClick={action}
+                    disabled={requestStatus.loading}
+                    type="button"
+                    className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full"
+                >
+                    <span className="text-gradient">Cancel</span>
+                </button>
+                {requestStatus.loading ?
+                    <LoadingSpinner size='10' color='sky-blue' />
+                    :
+                    <button
+                        onClick={handleDeleteCard}
+                        disabled={requestStatus.loading}
+                        type="button"
+                        className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
+                    >
+                        Confirm Delete
+                    </button>
+                }
+                </div>
+            </div>
+        </div>
+    </ModalCom>
+  )
+}
+
+export default DeleteCardPopout

src/components/Settings/Tabs/NotificationSettingTab.jsx

@@ -1,237 +1,112 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import SwitchCom from "../../Helpers/SwitchCom";
 
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import usersService from "../../../services/UsersService";
+import localImgLoad from "../../../lib/localImgLoad";
+import { toast } from "react-toastify";
+
+import defaultImage from '../../../assets/images/banner-job-due.jpg'
+
+
 export default function NotificationSettingTab() {
-  const [updateNotification, setUpdateNotification] = useState(false);
-  const [uploadProduct, setUploadProduct] = useState(true);
-  const [saleProduct, setSaleProduct] = useState(true);
-  const [getProduct, setGetProduct] = useState(false);
-  const [authLevel, setAuthLevel] = useState(true);
+  const api = new usersService();
+
+  const [accSettings, setAccSettings] = useState({loading: true, data: []}) // STATE TO HOLD ACCOUNT SETTINGS
+
+  let [notificationChange, setNotificationChange] = useState({loading: false, uid: ''})
+
+  // const [updateNotification, setUpdateNotification] = useState(false);
+  // const [uploadProduct, setUploadProduct] = useState(true);
+  // const [saleProduct, setSaleProduct] = useState(true);
+  // const [getProduct, setGetProduct] = useState(false);
+  // const [authLevel, setAuthLevel] = useState(true);
+
+  const NotificationInterfaceChange = (item) => {
+    setAccSettings(prev => {
+      let newAccSettings = prev.data.map(data => {
+        if(data.uid == item.uid){
+          let newPrefValue = data.pref_value == null || data.pref_value == '0' ? '100' : '0'
+          return {...data, pref_value: newPrefValue}
+        }else{
+          return data
+        }
+      })
+      return {...prev, data: newAccSettings}
+    })
+  }
+
+  let handleNotificationChange = (item) => { // FUNCTION TO SET ACCOUNT SETTING
+    setNotificationChange({loading: true, uid: item.uid})
+    let reqData = { // API PAYLOADS
+      pref_id: item.pref_id,
+      status: item.pref_value == null || item.pref_value == 0 ? 100 : 0
+    }
+    api.setAccSettings(reqData).then(res => {
+      if(res.status != 200 || res.data.internal_return < 0){
+        toast.error("unable to complete");
+      }
+      toast.success("successful");
+      NotificationInterfaceChange(item) // CHANGES NOTIFICATION UI INTERFACE
+    }).catch(errer => {
+      toast.error("unable to complete");
+    }).finally(()=>{
+      setNotificationChange({loading: false, uid: {}})
+      // setTimeout(()=>{setNotificationChange({loading: false, uid: {}})},2000)
+    })
+  }
+
+  useEffect(()=>{
+    api.getAccSettings().then(res => {
+      setAccSettings({loading: false, data: res.data?.result_list || []})
+    }).catch(errer => {
+      setAccSettings({loading: false, data: []})
+    })
+  },[])
+
   return (
     <div className="notification-setting-tab w-full">
       <div className="notification-settings-wrapper w-full">
-        <ul className="notification-settings-items w-full">
-          <li className="notification-settings-item sm:flex justify-between items-center mb-4 pb-4 border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29] ">
-            <div className="sm:flex sm:space-x-4 items-center">
-              <div className="w-16 h-16">
-                <svg
-                  width="60"
-                  height="60"
-                  viewBox="0 0 60 60"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <circle
-                    cx="30"
-                    cy="30"
-                    r="30"
-                    fill="url(#paint0_linear_41_74037)"
-                  />
-                  <path
-                    d="M29.9703 43.9959C27.4494 43.9959 24.9286 44.0078 22.4077 43.9919C20.2721 43.9799 19.0338 42.7656 19.0197 40.6347C18.9955 37.2735 18.9915 33.9123 19.0197 30.5511C19.0378 28.4521 20.3265 27.2158 22.4481 27.2118C27.4212 27.2019 32.3964 27.2039 37.3695 27.2118C39.604 27.2158 40.8564 28.4641 40.8644 30.6909C40.8745 33.9862 40.8786 37.2815 40.8644 40.5767C40.8544 42.7616 39.6242 43.9819 37.43 43.9939C34.9434 44.0058 32.4569 43.9959 29.9703 43.9959ZM27.5321 33.9722C27.6108 34.1699 27.6592 34.789 27.9919 35.0466C28.8954 35.7476 28.7542 36.6544 28.7563 37.567C28.7563 37.9984 28.6272 38.5057 28.8107 38.8412C29.0467 39.2706 29.5367 39.8358 29.9219 39.8398C30.3131 39.8438 30.8496 39.3026 31.0613 38.8752C31.261 38.4698 31.1319 37.9006 31.1319 37.4053C31.1319 36.5525 31.0936 35.7716 31.868 35.0706C32.6041 34.4036 32.4871 33.1354 31.8841 32.3086C31.2811 31.4817 30.2002 31.1262 29.2019 31.4258C28.2521 31.7114 27.5483 32.6621 27.5321 33.9722Z"
-                    fill="white"
-                  />
-                  <path
-                    d="M37.5315 26.2691C36.3356 26.2691 35.2466 26.2691 34.0345 26.2691C34.0345 25.4044 34.0446 24.5856 34.0325 23.7647C33.9982 21.3202 32.2397 19.4709 29.9467 19.4589C27.6497 19.4469 25.8851 21.2803 25.8448 23.7368C25.8306 24.5596 25.8427 25.3844 25.8427 26.2672C24.6448 26.2672 23.5558 26.2672 22.4729 26.2672C21.7126 21.3322 23.5054 17.6674 27.7546 16.3473C32.5603 14.8535 37.3984 18.3624 37.5274 23.3493C37.5516 24.304 37.5315 25.2606 37.5315 26.2691Z"
-                    fill="white"
-                  />
-                  <defs>
-                    <linearGradient
-                      id="paint0_linear_41_74037"
-                      x1="0"
-                      y1="0"
-                      x2="63.3708"
-                      y2="62.0225"
-                      gradientUnits="userSpaceOnUse"
-                    >
-                      <stop stopColor="#F539F8" />
-                      <stop offset="0.416763" stopColor="#C342F9" />
-                      <stop offset="1" stopColor="#5356FB" />
-                    </linearGradient>
-                  </defs>
-                </svg>
+        <ul className="notification-settings-items w-full min-h-[300px]">
+        {accSettings.loading ?
+            <LoadingSpinner size='8' color='sky-blue' height='h-full'/>
+          :
+            accSettings.data.length ?
+            accSettings.data.map(item =>{
+            let image = item.banner && localImgLoad(`images/settings/${item.banner.toLowerCase()}`)
+            return(
+            <li key={item.uid} className="notification-settings-item sm:flex justify-between items-center mb-3 pb-3 border-b border-light-purple dark:border-[#5356fb29] ">
+              <div className="sm:flex sm:space-x-4 items-center">
+                <div className="w-10 h-10">
+                  <img className="w-full h-full" src={image ? image: defaultImage} alt='account-settings' />
+                </div>
+                <div>
+                  <p className="text-xl tracking-wide text-dark-gray dark:text-white font-bold">
+                    {item.title}
+                  </p>
+                  <p className="text-base tracking-wide text-thin-light-gray">
+                    {item.description}
+                  </p>
+                </div>
               </div>
-              <div>
-                <p className="text-xl tracking-wide text-dark-gray dark:text-white font-bold">
-                  All Notifcation update off
-                </p>
-                <p className="text-base tracking-wide text-thin-light-gray">
-                  Unlockable content, only revealed by the owner of the item.
-                </p>
+              <div className="mt-5 sm:mt-0">
+              {notificationChange.loading && notificationChange.uid == item.uid ?
+                <LoadingSpinner size='8' color='sky-blue' />
+                :
+                <SwitchCom
+                  value={item.pref_value == null || item.pref_value == '0' ? 0 : 100}
+                  handler={ notificationChange.loading ? ()=>{} : () => handleNotificationChange(item)}
+                  // value={updateNotification}
+                  // handler={() => setUpdateNotification(!updateNotification)}
+                />
+              }
               </div>
-            </div>
-            <div className="mt-5 sm:mt-0">
-              <SwitchCom
-                value={updateNotification}
-                handler={() => setUpdateNotification(!updateNotification)}
-              />
-            </div>
-          </li>
-          <li className="notification-settings-item sm:flex justify-between items-center mb-4 pb-4 border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29] ">
-            <div className="sm:flex sm:space-x-4 items-center">
-              <div className="w-16 h-16">
-                <svg
-                  width="60"
-                  height="60"
-                  viewBox="0 0 60 60"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <circle cx="30" cy="30" r="30" fill="#5356FB" />
-                  <path
-                    d="M29.9407 28.117C29.3978 27.9377 28.8874 27.8356 28.4342 27.6115C24.4201 25.6243 20.4135 23.6173 16.4044 21.6202C16.1106 21.4733 15.884 21.2841 15.879 20.933C15.874 20.5669 16.1006 20.3627 16.4094 20.2083C20.3911 18.2237 24.3728 16.2341 28.352 14.2445C29.4974 13.6718 30.6255 13.7365 31.756 14.3068C34.3133 15.5942 36.8806 16.8691 39.443 18.149C40.7503 18.8014 42.0551 19.4563 43.3599 20.1112C43.4346 20.1486 43.5093 20.1834 43.5865 20.2208C43.8853 20.3602 44.092 20.5769 44.092 20.923C44.092 21.2741 43.8704 21.4708 43.5766 21.6153C41.7214 22.5391 39.8688 23.4679 38.0136 24.3917C35.8721 25.46 33.7406 26.5432 31.5866 27.5841C31.0737 27.8331 30.4935 27.9426 29.9407 28.117Z"
-                    fill="white"
-                  />
-                  <path
-                    d="M28.9083 38.6004C28.9083 40.8266 28.9108 43.0527 28.9058 45.2789C28.9033 46.0707 28.4576 46.3496 27.728 46.0135C24.0775 44.3326 20.4245 42.6568 16.7814 40.9635C15.6086 40.4182 15.0109 39.4645 15.006 38.1746C14.996 33.9314 15.001 29.6883 15.0035 25.4451C15.0035 24.6259 15.4641 24.3221 16.1962 24.6607C19.9713 26.4013 23.7438 28.1519 27.5213 29.885C28.48 30.3257 28.9232 31.0429 28.9158 32.0912C28.9008 34.2626 28.9108 36.4315 28.9108 38.6029C28.9108 38.6004 28.9108 38.6004 28.9083 38.6004Z"
-                    fill="white"
-                  />
-                  <path
-                    d="M31.0596 38.5382C31.0596 36.3544 31.0646 34.1705 31.0571 31.9867C31.0546 31.0006 31.5054 30.3208 32.3894 29.9124C36.1893 28.1594 39.9917 26.4113 43.7916 24.6608C44.4839 24.342 44.9595 24.6284 44.9595 25.3829C44.9644 29.6684 44.9719 33.9514 44.9545 38.2369C44.9495 39.5492 44.2772 40.4655 43.0944 41.0134C40.1411 42.378 37.1853 43.74 34.232 45.1021C33.5995 45.3935 32.9695 45.6848 32.3395 45.9762C31.4829 46.3696 31.0571 46.1032 31.0571 45.1719C31.0571 42.9606 31.0571 40.7469 31.0571 38.5357C31.0596 38.5382 31.0596 38.5382 31.0596 38.5382Z"
-                    fill="white"
-                  />
-                </svg>
-              </div>
-              <div>
-                <p className="text-xl tracking-wide text-dark-gray dark:text-white font-bold">
-                  When you upload prodcuts
-                </p>
-                <p className="text-base tracking-wide text-thin-light-gray">
-                  Evey new prodcuts upload seccessfullly doen you can get
-                  notifcation
-                </p>
-              </div>
-            </div>
-            <div className="mt-5 sm:mt-0">
-              <SwitchCom
-                value={uploadProduct}
-                handler={() => setUploadProduct(!uploadProduct)}
-              />
-            </div>
-          </li>
-          <li className="notification-settings-item sm:flex justify-between items-center mb-4 pb-4 border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29] ">
-            <div className="sm:flex sm:space-x-4 items-center">
-              <div className="w-16 h-16">
-                <svg
-                  width="60"
-                  height="60"
-                  viewBox="0 0 60 60"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <circle cx="30" cy="30" r="30" fill="#F539F8" />
-                  <path
-                    d="M41.8287 28.0141C41.4077 29.4703 41.0646 30.8583 40.5811 32.1937C40.4622 32.5232 39.8851 32.8897 39.5147 32.8936C35.1811 32.9443 30.8474 32.9267 26.5138 32.9287C25.8724 32.9287 25.463 32.6129 25.3168 31.9988C24.6306 29.1292 23.9385 26.2596 23.2835 23.3841C23.0847 22.5146 23.4804 21.9785 24.3187 21.9727C27.8511 21.9493 31.3835 21.9629 35.0037 21.9629C34.9608 23.8383 35.4716 25.4778 36.8927 26.7274C38.2827 27.9575 39.9261 28.324 41.8287 28.0141Z"
-                    fill="white"
-                  />
-                  <path
-                    d="M24.4176 33.9331C27.334 33.9331 30.1997 33.9331 33.0654 33.9331C34.9408 33.9331 36.8162 33.9292 38.6915 33.9351C39.5649 33.937 40.0601 34.3289 40.0835 35.0053C40.1069 35.7169 39.5961 36.1497 38.6877 36.1497C33.7224 36.1536 28.759 36.1536 23.7938 36.1497C22.7878 36.1497 22.5091 35.904 22.2888 34.8884C21.3452 30.5255 20.3939 26.1645 19.4679 21.7977C19.3587 21.285 19.1579 20.9965 18.6296 20.8347C17.419 20.4643 16.2318 20.0159 15.0368 19.5948C14.0328 19.24 13.6605 18.6981 13.9334 18.0021C14.2024 17.314 14.7853 17.1385 15.7386 17.4699C17.2221 17.9846 18.692 18.5382 20.1912 19.0061C20.9476 19.242 21.3082 19.6689 21.4681 20.4331C22.3824 24.7746 23.3317 29.1082 24.2733 33.4438C24.3006 33.5725 24.3474 33.7012 24.4176 33.9331Z"
-                    fill="white"
-                  />
-                  <path
-                    d="M35.6934 22.6285C35.6798 19.9227 37.8729 17.7237 40.5788 17.7334C43.23 17.7412 45.4134 19.9441 45.4095 22.609C45.4056 25.2662 43.2144 27.4632 40.5573 27.469C37.9022 27.4749 35.7071 25.2915 35.6934 22.6285ZM42.6257 20.4685C41.7465 21.4101 40.8848 22.3342 39.8614 23.4317C39.3721 22.7669 38.9763 22.2328 38.524 21.6207C38.0698 22.0963 37.7696 22.4102 37.5747 22.6168C38.4051 23.4746 39.1986 24.2914 39.9316 25.0498C41.1207 23.8567 42.345 22.6305 43.6726 21.299C43.4562 21.1274 43.1969 20.9208 42.9357 20.7142C42.8538 20.6459 42.77 20.5835 42.6257 20.4685Z"
-                    fill="white"
-                  />
-                  <path
-                    d="M37.4854 37.0509C39.2068 37.0353 40.6104 38.3882 40.6436 40.096C40.6767 41.8329 39.2653 43.258 37.5147 43.258C35.805 43.258 34.4072 41.868 34.3994 40.1662C34.3936 38.4565 35.7699 37.0685 37.4854 37.0509ZM38.8929 40.1447C38.891 39.3903 38.2984 38.7781 37.5537 38.7625C36.7817 38.745 36.1384 39.3825 36.1423 40.1603C36.1462 40.907 36.7485 41.5269 37.4854 41.5464C38.2574 41.5659 38.8968 40.9303 38.8929 40.1447Z"
-                    fill="white"
-                  />
-                  <path
-                    d="M24.8751 43.2571C23.1556 43.2434 21.7754 41.8613 21.7793 40.1555C21.7852 38.3951 23.179 37.0286 24.9491 37.0481C26.6569 37.0676 28.0273 38.4751 28.0078 40.1886C27.9864 41.9022 26.5906 43.2688 24.8751 43.2571ZM26.2709 40.1574C26.2728 39.3738 25.6334 38.7441 24.8556 38.7636C24.1226 38.7831 23.4968 39.4167 23.4968 40.1458C23.4948 40.8768 24.1148 41.5182 24.8439 41.5435C25.6178 41.5708 26.2689 40.9372 26.2709 40.1574Z"
-                    fill="white"
-                  />
-                </svg>
-              </div>
-              <div>
-                <p className="text-xl tracking-wide text-dark-gray dark:text-white font-bold">
-                  You got sell your prodcuts
-                </p>
-                <p className="text-base tracking-wide text-thin-light-gray">
-                  Evey new prodcuts sell you can get notifcation
-                </p>
-              </div>
-            </div>
-            <div className="mt-5 sm:mt-0">
-              <SwitchCom
-                value={saleProduct}
-                handler={() => setSaleProduct(!saleProduct)}
-              />
-            </div>
-          </li>
-          <li className="notification-settings-item sm:flex justify-between items-center mb-4 pb-4 border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29] ">
-            <div className="sm:flex sm:space-x-4 items-center">
-              <div className="w-16 h-16">
-                <svg
-                  width="60"
-                  height="60"
-                  viewBox="0 0 60 60"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <circle cx="30" cy="30" r="30" fill="#56CCF2" />
-                  <path
-                    d="M26.6593 16.1563C28.3179 16.165 29.6518 16.3439 30.8831 16.9656C33.0228 18.0459 34.1639 19.8365 34.4921 22.1742C34.7023 23.6678 34.5338 25.144 34.176 26.5977C33.7436 28.3484 33.16 30.0452 32.2326 31.603C31.6404 32.5982 30.904 33.4701 29.9106 34.0936C28.0678 35.252 25.8396 35.1339 24.0264 33.7931C22.9322 32.9838 22.1559 31.9157 21.5428 30.719C20.6658 29.0031 20.1743 27.1656 19.8356 25.2795C19.6428 24.2079 19.5768 23.1381 19.7505 22.0595C20.1986 19.2668 21.8103 17.4658 24.4502 16.5401C25.2612 16.2553 26.0984 16.1372 26.6593 16.1563Z"
-                    fill="white"
-                  />
-                  <path
-                    d="M36.2459 45.0001C36.166 45.0001 36.0982 45.0001 36.0288 45.0001C28.7239 45.0001 21.4191 45.0001 14.1143 45.0001C13.8538 45.0001 13.8451 45.0001 13.8468 44.7448C13.8538 43.6993 13.8382 42.6503 13.8833 41.6065C13.9319 40.5227 14.4929 39.696 15.3352 39.0482C16.1689 38.4091 17.131 38.0409 18.1227 37.7352C20.1061 37.1239 22.1451 36.8095 24.2066 36.6324C26.0059 36.4778 27.8087 36.4709 29.6114 36.5681C30.0977 36.5942 30.5805 36.6567 31.0668 36.688C31.2388 36.7001 31.2787 36.7678 31.2787 36.9328C31.2735 38.5498 31.6243 40.0816 32.4493 41.4832C33.3125 42.9507 34.516 44.0605 36.0288 44.8403C36.093 44.8733 36.1573 44.9046 36.2215 44.9393C36.2302 44.9463 36.2302 44.9619 36.2459 45.0001Z"
-                    fill="white"
-                  />
-                  <path
-                    d="M33.9961 35.6042C34.0881 35.6042 34.1663 35.6042 34.2444 35.6042C35.4098 35.6042 36.5734 35.6042 37.7388 35.6042C37.9993 35.6042 38.0011 35.6042 38.0011 35.3332C38.0011 34.1678 38.0011 33.0042 38.0011 31.8389C38.0011 31.7624 38.0011 31.6843 38.0011 31.5957C39.1473 31.5957 40.2675 31.5957 41.4155 31.5957C41.4155 32.9295 41.4155 34.2529 41.4155 35.6024C42.7667 35.6024 44.0902 35.6024 45.4257 35.6024C45.4257 36.7296 45.4257 37.8324 45.4257 38.9596C44.0954 38.9596 42.7702 38.9596 41.4173 38.9596C41.4173 40.316 41.4173 41.6463 41.4173 42.9906C41.327 42.9958 41.2627 43.0028 41.1984 43.0028C40.205 43.0028 39.2116 42.9993 38.2182 43.008C38.0445 43.0097 37.9959 42.9611 37.9959 42.7874C38.0028 41.6029 37.9993 40.4185 37.9993 39.234C37.9993 39.1558 37.9993 39.0777 37.9993 38.9717C36.6568 38.9717 35.3334 38.9717 33.9961 38.9717C33.9961 37.8394 33.9961 36.7383 33.9961 35.6042Z"
-                    fill="white"
-                  />
-                </svg>
-              </div>
-              <div>
-                <p className="text-xl tracking-wide text-dark-gray dark:text-white font-bold">
-                  Got new follower
-                </p>
-                <p className="text-base tracking-wide text-thin-light-gray">
-                  Evey new follower you can get notifcation
-                </p>
-              </div>
-            </div>
-            <div className="mt-5 sm:mt-0">
-              <SwitchCom
-                value={getProduct}
-                handler={() => setGetProduct(!getProduct)}
-              />
-            </div>
-          </li>
-          <li className="notification-settings-item sm:flex justify-between items-center mb-4 pb-4 border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29] ">
-            <div className="sm:flex sm:space-x-4 items-center">
-              <div className="w-16 h-16">
-                <svg
-                  width="60"
-                  height="60"
-                  viewBox="0 0 60 60"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <circle cx="30" cy="30" r="30" fill="#9B51E0" />
-                  <path
-                    d="M37.9128 13.8507C38.2013 13.9992 38.2864 14.246 38.2814 14.5546C38.2714 15.1718 38.2781 15.7906 38.2781 16.4478C38.4182 16.4478 38.5299 16.4478 38.6417 16.4478C40.1145 16.4495 41.5857 16.4495 43.0586 16.4511C43.9126 16.4528 44.2879 16.8431 44.2696 17.6955C44.2229 19.7822 44.0077 21.8471 43.4005 23.8538C42.9368 25.39 42.283 26.8245 41.0787 27.9404C40.3331 28.6309 39.4523 29.0513 38.4415 29.1764C38.2514 29.1997 38.1863 29.2681 38.1463 29.4566C37.4691 32.6492 35.5742 34.7325 32.4467 35.6866C32.3116 35.7283 32.2032 35.76 32.2032 35.9485C32.2099 37.9251 32.2099 39.9017 32.2115 41.8783C32.2115 41.9083 32.2249 41.9383 32.2399 41.9984C32.345 42.0034 32.4567 42.0134 32.5685 42.0134C33.2307 42.0151 33.8929 42.0184 34.5551 42.0117C34.842 42.0084 35.0538 42.1101 35.2206 42.352C35.8878 43.3211 36.565 44.2852 37.2389 45.2493C37.3773 45.4478 37.5125 45.6797 37.3306 45.8798C37.2005 46.0216 36.9637 46.1384 36.7735 46.1401C32.4 46.1551 28.0248 46.1501 23.6513 46.1534C23.4178 46.1534 23.2109 46.1134 23.0858 45.8899C22.9524 45.6497 23.0491 45.4495 23.1892 45.2493C23.8581 44.2936 24.5287 43.3395 25.1875 42.377C25.3677 42.1151 25.5945 42.0084 25.9031 42.0117C26.6587 42.0201 27.4143 42.0134 28.2033 42.0134C28.21 41.8783 28.22 41.7665 28.22 41.6548C28.2216 39.7933 28.2166 37.9334 28.225 36.0719C28.2266 35.8368 28.1633 35.7383 27.9214 35.6633C24.8823 34.7158 22.9974 32.6909 22.3119 29.5767C22.2502 29.2965 22.1551 29.2014 21.8598 29.1547C20.407 28.9295 19.3128 28.1239 18.4738 26.9446C17.5047 25.5818 16.9993 24.0289 16.659 22.4159C16.3287 20.8497 16.1769 19.2601 16.1536 17.6588C16.1419 16.8214 16.5255 16.4478 17.3679 16.4461C18.8291 16.4445 20.2919 16.4428 21.7531 16.4428C21.8682 16.4428 21.9833 16.4428 22.1484 16.4428C22.1484 16.1476 22.1484 15.869 22.1484 15.5904C22.1484 15.2435 22.1567 14.8965 22.1467 14.5496C22.1367 14.241 22.2268 13.9925 22.5154 13.8457C27.6478 13.8507 32.7803 13.8507 37.9128 13.8507ZM30.2132 19.1633C29.8947 19.8072 29.561 20.361 29.3425 20.9581C29.109 21.5969 28.7154 21.8538 28.0482 21.8805C27.4177 21.9072 26.7922 22.0523 26.1116 22.1524C26.2217 22.2692 26.2901 22.3442 26.3635 22.4159C26.8972 22.938 27.4393 23.4518 27.9581 23.9872C28.0548 24.0873 28.1165 24.2791 28.1015 24.4176C28.0565 24.8346 27.9631 25.2449 27.8914 25.6586C27.8196 26.0839 27.7513 26.5109 27.6729 26.9913C28.4652 26.5743 29.2041 26.199 29.9297 25.7987C30.1415 25.6819 30.3 25.6936 30.5051 25.8053C31.2307 26.2023 31.968 26.5793 32.7236 26.9746C32.7236 26.8812 32.7319 26.8195 32.7219 26.7628C32.5902 25.9972 32.4667 25.2299 32.3183 24.4676C32.2749 24.2424 32.3233 24.0973 32.4884 23.9438C32.9338 23.5285 33.3624 23.0932 33.8011 22.6695C33.9629 22.5127 34.1331 22.3642 34.3649 22.1541C33.4609 22.024 32.6652 21.9005 31.8662 21.7971C31.6077 21.7637 31.4409 21.6837 31.3225 21.4201C30.9872 20.6829 30.6086 19.959 30.2132 19.1633ZM42.2813 18.4761C40.9219 18.4761 39.6075 18.4761 38.3014 18.4761C38.3014 21.3884 38.3014 24.2724 38.3014 27.2365C38.6517 27.088 38.9753 26.9913 39.2555 26.8228C40.1512 26.2841 40.6617 25.43 41.057 24.4993C41.5991 23.2249 41.8943 21.8838 42.0745 20.5177C42.1612 19.8422 42.2112 19.165 42.2813 18.4761ZM22.1301 27.1781C22.1301 24.2608 22.1301 21.3684 22.1301 18.4694C20.8023 18.4694 19.4963 18.4694 18.1819 18.4694C18.1785 18.5311 18.1719 18.5712 18.1735 18.6112C18.2753 20.2826 18.4988 21.9339 19.0142 23.5318C19.3278 24.5026 19.7198 25.445 20.4287 26.2107C20.8874 26.7077 21.4262 27.0664 22.1301 27.1781Z"
-                    fill="white"
-                  />
-                </svg>
-              </div>
-              <div>
-                <p className="text-xl tracking-wide text-dark-gray dark:text-white font-bold">
-                  Auther leavel up
-                </p>
-                <p className="text-base tracking-wide text-thin-light-gray">
-                  Evey new prodcuts sell you can get notifcation
-                </p>
-              </div>
-            </div>
-            <div className="mt-5 sm:mt-0">
-              <SwitchCom
-                value={authLevel}
-                handler={() => setAuthLevel(!authLevel)}
-              />
-            </div>
-          </li>
+            </li>
+            )}
+            )
+          :
+            <h1 className='font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap'>No Cards Found</h1>
+            }
         </ul>
       </div>
     </div>

src/components/Settings/Tabs/PaymentMathodsTab.jsx

@@ -1,134 +1,12 @@
-import React from "react";
-import method1 from "../../../assets/images/payment-method-1.png";
-import method2 from "../../../assets/images/payment-method-2.png";
-import method3 from "../../../assets/images/payment-method-3.png";
-import method4 from "../../../assets/images/payment-method-4.png";
+import CardList from "./CardList";
+
 
 export default function PaymentMathodsTab() {
   return (
     <>
       <div className="payment-method-tab w-full">
         <div className="payment-item-wrapper w-full">
-          <ul className="payment-items">
-            <li className="sm:flex justify-between items-center w-full py-[30px] border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29] ">
-              <div className="flex space-x-5 mb-3 sm:mb-0">
-                <div className="sm:w-[120px] sm:h-[120px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
-                  <img src={method1} alt="payment" />
-                </div>
-                <div>
-                  <p className="sm:text-xl text-lg tracking-wide   text-dark-gray dark:text-white">
-                    Datch Bangla Bank Ltd
-                  </p>
-                  <p className="text-thin-light-gray sm:text-18 text-sm tracking-wide">
-                    Bank **********5535
-                  </p>
-                  <p className="sm:text-18 text-sm tracking-wide text-light-green">
-                    Verified
-                  </p>
-                </div>
-              </div>
-              <div>
-                <button
-                  type="button"
-                  className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide"
-                >
-                  Manage
-                </button>
-              </div>
-            </li>
-            <li className="sm:flex justify-between items-center w-full py-[30px] border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29] ">
-              <div className="flex space-x-5 mb-3 sm:mb-0">
-                <div className="sm:w-[120px] sm:h-[120px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
-                  <img src={method2} alt="payment" />
-                </div>
-                <div>
-                  <p className="sm:text-xl text-lg tracking-wide   text-dark-gray dark:text-white">
-                    Master Card
-                  </p>
-                  <p className="text-thin-light-gray sm:text-18 text-sm tracking-wide">
-                    Bank **********5535
-                  </p>
-                  <p className="sm:text-18 text-sm tracking-wide text-light-green">
-                    Verified
-                  </p>
-                </div>
-              </div>
-              <div>
-                <button
-                  type="button"
-                  className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide"
-                >
-                  Manage
-                </button>
-              </div>
-            </li>
-            <li className="sm:flex justify-between items-center w-full py-[30px] border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29] ">
-              <div className="flex space-x-5 mb-3 sm:mb-0">
-                <div className="sm:w-[120px] sm:h-[120px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
-                  <img src={method3} alt="payment" />
-                </div>
-                <div>
-                  <p className="sm:text-xl text-lg tracking-wide   text-dark-gray dark:text-white">
-                    Paypal Account
-                  </p>
-                  <p className="text-thin-light-gray sm:text-18 text-sm tracking-wide">
-                    Bank **********5535
-                  </p>
-                  <p className="sm:text-18 text-sm tracking-wide text-light-green">
-                    Verified
-                  </p>
-                </div>
-              </div>
-              <div>
-                <button
-                  type="button"
-                  className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide"
-                >
-                  Manage
-                </button>
-              </div>
-            </li>
-            <li className="sm:flex justify-between items-center w-full py-[30px] border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29] ">
-              <div className="flex space-x-5 mb-3 sm:mb-0">
-                <div className="sm:w-[120px] sm:h-[120px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
-                  <img src={method4} alt="payment" />
-                </div>
-                <div>
-                  <p className="sm:text-xl text-lg tracking-wide   text-dark-gray dark:text-white">
-                    Visa Card
-                  </p>
-                  <p className="text-thin-light-gray sm:text-18 text-sm tracking-wide">
-                    Bank **********5535
-                  </p>
-                  <p className="text-18 tracking-wide text-light-red">
-                    Unverified
-                  </p>
-                </div>
-              </div>
-              <div>
-                <button
-                  type="button"
-                  className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide"
-                >
-                  Manage
-                </button>
-              </div>
-            </li>
-          </ul>
-          <div className="py-7 flex space-x-4">
-            <button
-              type="button"
-              className="btn-shine  text-white text-18 bg-pink tracking-wide px-4 py-3 rounded-full"
-            >
-              Add Bank
-            </button>
-            <button
-              type="button"
-              className="text-white text-18 bg-light-green tracking-wide px-4 py-3 rounded-full"
-            >
-              Add Card
-            </button>
-          </div>
+          <CardList />
         </div>
       </div>
     </>

src/components/Settings/Tabs/RecipientAccountTab.jsx

@@ -0,0 +1,107 @@
+import { useState } from "react";
+import method1 from "../../../assets/images/icons/bank.svg";
+import localImgLoad from "../../../lib/localImgLoad";
+import { PaginatedList, handlePagingFunc } from "../../Pagination";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+
+export default function RecipientAccountTab({
+  recipientAccount,
+  setRecipientAccount,
+}) {
+  const cardList = recipientAccount?.data?.result_list;
+  const handleDeleteCardModal = () => {
+    setRecipientAccount((prev) => ({ ...prev, state: !prev.state }));
+  };
+
+  const [currentPage, setCurrentPage] = useState(0);
+  const indexOfFirstItem = Number(currentPage);
+  const indexOfLastItem =
+    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+  const currentCardList = cardList?.slice(indexOfFirstItem, indexOfLastItem);
+
+  const handlePagination = (e) => {
+    handlePagingFunc(e, setCurrentPage);
+  };
+
+  return (
+    <>
+      <div className="payment-method-tab w-full">
+        <div className="payment-item-wrapper w-full">
+          <ul className="payment-items w-full min-h-[400px]">
+            {recipientAccount?.loading ? (
+              <div className="w-full h-[300px] flex justify-center items-center">
+                <LoadingSpinner size="8" color="sky-blue" />
+              </div>
+            ) : cardList?.length ? (
+              currentCardList.map((item) => {
+                let image =
+                  item.description &&
+                  localImgLoad(
+                    `images/settings/${item.description.toLowerCase()}.svg`
+                  );
+                let addedDate = item?.added?.split(" ")[0];
+
+                return (
+                  <li
+                    key={item.recipient_id}
+                    className="sm:flex justify-between items-center w-full py-3 border-b border-light-purple dark:border-[#5356fb29] "
+                  >
+                    <div className="flex space-x-5 mb-2 sm:mb-0">
+                      <div className="w-[70px] h-[70px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
+                        <img
+                          src={image ? image : method1}
+                          className="w-[50px] h-[50px]"
+                          alt="payment"
+                        />
+                      </div>
+                      <div className="flex flex-col justify-around">
+                        <p className="sm:text-xl text-lg tracking-wide   text-dark-gray dark:text-white">
+                          Added: {addedDate}
+                        </p>
+                        <p className="text-thin-light-gray sm:text-18 text-base tracking-wide">
+                          {item?.recipient}
+                        </p>
+                      </div>
+                    </div>
+                    <div>
+                      <button
+                        type="button"
+                        onClick={() => {
+                          // setRecipientAccount({ state: true, data: item });
+                          console.log("Testing...")
+                        }}
+                        className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide"
+                      >
+                        Delete
+                      </button>
+                    </div>
+                  </li>
+                );
+              })
+            ) : (
+              <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                No Cards Found
+              </h1>
+            )}
+          </ul>
+
+          {/* PAGINATION BUTTON */}
+          <PaginatedList
+            onClick={handlePagination}
+            prev={currentPage == 0 ? true : false}
+            next={
+              currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
+              cardList?.length
+                ? true
+                : false
+            }
+            data={cardList}
+            start={indexOfFirstItem}
+            stop={indexOfLastItem}
+          />
+          {/* END OF PAGINATION BUTTON */}
+        </div>
+      </div>
+    </>
+  );
+}

src/components/Settings/index.jsx

@@ -1,6 +1,13 @@
-import React, { useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import cover from "../../assets/images/profile-info-cover.png";
 import profile from "../../assets/images/profile-info-profile.png";
+import usersService from "../../services/UsersService";
 import Icons from "../Helpers/Icons";
 import Layout from "../Partials/Layout";
 import {
@@ -13,11 +20,13 @@ import {
   PrivacyPolicyTab,
   TermsConditionTab,
 } from "./Tabs";
+import RecipientAccountTab from "./Tabs/RecipientAccountTab";
 
 export default function Settings({ faq }) {
   const [profileImg, setProfileImg] = useState(profile);
   const [coverImg, setCoverImg] = useState(cover);
-
+    const [reloadCardList, setReloadCardList] = useState(false) // STATE TO DETERMINE WHEN CARD LIST RELOADS. EG: WHEN USER DELETES A CARD
+    
   // profile img
   const profileImgInput = useRef(null);
   const browseProfileImg = () => {
@@ -47,6 +56,7 @@ export default function Settings({ faq }) {
     }
   };
 
+  const apiCall = useMemo(() => new usersService(), []);
   // Tabs Handling
   const tabs = [
     {
@@ -58,35 +68,41 @@ export default function Settings({ faq }) {
     {
       id: 2,
       name: "payment",
-      title: "Payment Method",
+      title: "Payment Cards",
       iconName: "bank-card",
     },
     {
       id: 3,
+      name: "recipients-account",
+      title: "Recipients Account",
+      iconName: "bank-card",
+    },
+    {
+      id: 4,
       name: "notification",
       title: "Notification Setting",
       iconName: "notification-setting",
     },
     {
-      id: 4,
+      id: 5,
       name: "login_activity",
       title: "Login Activity",
       iconName: "login-activity",
     },
     {
-      id: 5,
+      id: 6,
       name: "password",
       title: "Change Password",
       iconName: "password-hover",
     },
     {
-      id: 6,
+      id: 7,
       name: "faq",
       title: "FAQ",
       iconName: "block-question",
     },
     {
-      id: 7,
+      id: 8,
       name: "privacy",
       title: "Privacy Policy",
       iconName: "page-right",
@@ -103,6 +119,48 @@ export default function Settings({ faq }) {
     setTab(value);
   };
 
+  // Recipient Account
+  const [recipientAccount, setRecipientAccount] = useState({
+    state: false,
+    loader: false,
+    msg: "",
+    data: null,
+  });
+
+  const getRecipientAccount = useCallback(async () => {
+    setRecipientAccount((prev) => ({ loader: true }));
+
+    let res;
+    try {
+      res = await apiCall.getRecipient();
+      res = res.data;
+
+      if (res?.internal_return < 0) {
+        setRecipientAccount((prev) => ({
+          loader: false,
+          msg: "Sorry, something went wrong",
+        }));
+        setTimeout(() => setRecipientAccount((prev) => prev), 5000);
+        return;
+      }
+
+      return setTimeout(() => {
+        setRecipientAccount((prev) => ({ loader: false, data: res }));
+      });
+    } catch (error) {
+      setRecipientAccount((prev) => ({
+        loader: false,
+        msg: "Sorry, an error occurred",
+      }));
+      setTimeout(() => setRecipientAccount((prev) => prev), 5000);
+      return;
+    }
+  }, [apiCall]);
+
+  useEffect(() => {
+    getRecipientAccount();
+  }, [reloadCardList]);
+
   return (
     <>
       <Layout>
@@ -162,6 +220,15 @@ export default function Settings({ faq }) {
                       <PaymentMathodsTab />
                     </div>
                   )}
+                  {tab === "recipients-account" && (
+                    <div className="tab-item">
+                      <RecipientAccountTab
+                        recipientAccount={recipientAccount}
+                        setRecipientAccount={setRecipientAccount}
+                        setReloadCardList={setReloadCardList}
+                      />
+                    </div>
+                  )}
                   {tab === "notification" && (
                     <div className="tab-item">
                       <NotificationSettingTab />

src/components/jobPopout/FamilyOfferJobPopout.jsx

@@ -0,0 +1,261 @@
+import React, { useState } from "react";
+import Detail from "./popoutcomponent/Detail";
+import ModalCom from "../Helpers/ModalCom";
+import { useNavigate } from "react-router-dom";
+
+import usersService from "../../services/UsersService";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+import localImgLoad from "../../lib/localImgLoad";
+
+import { tableReload } from "../../store/TableReloads";
+import { useDispatch } from "react-redux";
+
+function FamilyOfferJobPopout({ details, onClose, situation }) {
+  const apiUrl = new usersService();
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+
+  const [requestStatus, setRequestStatus] = useState({
+    loading: false,
+    status: false,
+    message: "",
+    trigger: "",
+  });
+
+  //FUNCTION TO HANDLE AN OFFER
+  const handleOffer = ({ target: { name } }) => {
+    const reqData = {
+      // offer_result: 100,
+      offer_code: details.contract,
+      contract: details.contract,
+    };
+
+    //logic to determine the button pressed and set reqDate accordingly
+    if (name == "accept") {
+      setRequestStatus({
+        loading: true,
+        status: false,
+        message: "",
+        trigger: "offer",
+      });
+      reqData.offer_result = 100;
+    }
+    if (name == "reject") {
+      setRequestStatus({
+        loading: true,
+        status: false,
+        message: "",
+        trigger: "reject",
+      });
+      reqData.offer_result = 333;
+    }
+
+    // API CALL
+    apiUrl
+      .offersResponse(reqData)
+      .then((response) => {
+        if (response.status != 200 || response.data.internal_return < 0) {
+          setRequestStatus({
+            loading: false,
+            status: false,
+            message: `Unable to ${name} Offer, try again later`,
+            trigger: "",
+          });
+          return;
+        }
+        setRequestStatus({
+          loading: false,
+          status: true,
+          message: `Offer ${name}ed Successfully`,
+          trigger: "",
+        });
+        setTimeout(() => {
+          onClose();
+          dispatch(tableReload({ type: "MYTASKTABLE" }));
+          navigate("/mytask", { replace: true });
+          setRequestStatus({
+            loading: false,
+            status: false,
+            message: "",
+            trigger: "",
+          });
+        }, 2000);
+      })
+      .catch((error) => {
+        setRequestStatus({
+          loading: false,
+          status: false,
+          message: `Opps! An Error Occurred`,
+          trigger: "",
+        });
+      })
+      .finally(() => {
+        setTimeout(() => {
+          setRequestStatus({
+            loading: false,
+            status: false,
+            message: "",
+            trigger: "",
+          });
+        }, 5000);
+      });
+  };
+
+  return (
+    <ModalCom action={onClose} situation={situation}>
+      <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+        <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">
+            Start Task
+          </h1>
+          <button
+            type="button"
+            className="text-[#374557] dark:text-red-500"
+            onClick={onClose}
+          >
+            <svg
+              width="36"
+              height="36"
+              viewBox="0 0 36 36"
+              fill="none"
+              className="fill-current"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
+                fill=""
+                fillOpacity="0.6"
+              />
+              <path
+                d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
+                fill="#"
+                fillOpacity="0.6"
+              />
+            </svg>
+          </button>
+        </div>
+        <div className="md:flex bg-white rounded-lg shadow-lg">
+          <div className="p-4 w-full md:w-3/4 md:border-r-2">
+            <div className="flex gap-2">
+                <div className="image-wrapper w-32">
+                    <img className="w-full h-auto" src={localImgLoad(`images/taskbanners/${details.banner}`)} alt='Banner-Image' />
+                </div>
+                <div className="details-wrapper">
+                    <p className="text-lg my-5 font-semibold text-slate-900 tracking-wide">
+                    {details.title}
+                    </p>
+
+                    {/* INPUT SECTION */}
+                    <div className="my-2 md:flex">
+                    <Detail
+                        label="Date"
+                        value={
+                        (details.offer_added && details.offer_added?.split(" ")[0]) ||
+                        "default"
+                        }
+                    />
+                    </div>
+
+                    <div className="my-2 md:flex">
+                    <Detail label="Description" value={details.description} />
+                    </div>
+
+                    <div className="my-2 md:flex">
+                    <Detail
+                        label="Offer Expire"
+                        value={details.expire && details.expire.split(" ")[0]}
+                    />
+                    </div>
+
+                    <div className="my-2 md:flex">
+                    <Detail label="Price" value={details.thePrice} />
+                    </div>
+
+                    <div className="my-2 md:flex">
+                    <Detail
+                        label="Duration"
+                        value={`${details.timeline_days} day(s)`}
+                    />
+                    </div>
+
+                    <div className="my-2 md:flex">
+                    <Detail
+                        label="Detail"
+                        value={details.job_description || details.description}
+                    />
+                    </div>
+                </div>
+            </div>
+          </div>
+
+          {/* ACTION SECTION */}
+          <div className="p-4 w-full md:w-1/4 h-full">
+            <div className="my-3 md:flex md:justify-center">
+              {requestStatus.loading && requestStatus.trigger == "offer" ? (
+                <LoadingSpinner size={8} color="sky-blue" />
+              ) : (
+                <button
+                  name="accept"
+                  onClick={handleOffer}
+                  disabled={requestStatus.loading}
+                  className="px-2 py-2 w-20 flex justify-center items-center border-2 border-green-900 bg-green-500 text-base rounded-2xl text-white"
+                >
+                  I am ready to start
+                </button>
+              )}
+            </div>
+
+            {/* <div className="mt-10 md:mt-20 md:flex md:justify-center">
+              {requestStatus.loading && requestStatus.trigger == "reject" ? (
+                <LoadingSpinner size={8} color="sky-blue" />
+              ) : (
+                <button
+                  name="reject"
+                  onClick={handleOffer}
+                  disabled={requestStatus.loading}
+                  className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                >
+                  Reject Offer
+                </button>
+              )}
+            </div> */}
+
+            {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+            {requestStatus.message != "" &&
+              (!requestStatus.status ? (
+                <div
+                  className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                >
+                  {requestStatus.message}
+                </div>
+              ) : (
+                requestStatus.status && (
+                  <div
+                    className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                  >
+                    {requestStatus.message}
+                  </div>
+                )
+              ))}
+            {/* End of error or success display */}
+          </div>
+        </div>
+
+        {/* close button */}
+        <div className="p-6 flex justify-end">
+          <button
+            onClick={onClose}
+            disabled={requestStatus.loading}
+            type="button"
+            className="border-gradient text-18 tracking-wide px-2 py-2 rounded-full"
+          >
+            <span className="text-gradient">Cancel</span>
+          </button>
+        </div>
+        {/* end of close button */}
+      </div>
+    </ModalCom>
+  );
+}
+
+export default FamilyOfferJobPopout;

src/components/jobPopout/JobListPopout.jsx

@@ -253,7 +253,7 @@ function JobListPopout({ details, onClose, situation }) {
             >
               {(props) => {
                 return (
-                  <Form className="mb-4">
+                  <Form className="mb-4 hidden">
                     {/* Assign to Family */}
                     <JobFieldInput
                       label="Assign to family"

src/index.css

@@ -11,6 +11,14 @@
   font-family: "Product Sans";
   src: url("./assets/fonts/Product Sans Bold.ttf");
 }
+.SENDER{
+  margin-left: 60px !important;
+  background-color: azure;
+}
+.RECIPIENT{
+  margin-right: 60px !important;
+  background-color: #add8e6 !important;
+}
 .wallet-box{
   background-color: aliceblue;
   border-radius: 20px;
@@ -24,6 +32,13 @@
 .referral{
   margin-bottom: 20px
 }
+.task_action_panel{
+  font-family: sans; color: white;
+  font-weight: bolder;
+  font-size: 14px;
+  font-family: Circular, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
+  padding: 0px 10px 5px 10px
+}
 .heroSilderTitle{
   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
   font-family: sans; color: white;
@@ -34,7 +49,7 @@
   min-width: 280px !important;
 }
 .job-action{
-  background-color: aliceblue;
+  background-color: #4687ba;
   height: 100px;
   border-radius: 15px;
   padding: 5px;
@@ -47,9 +62,12 @@
   border-radius: 15px;
 }
 .msg_header{
-  background-color: #1a3544;
-  color: white;
+  background-color: white;
+  color: black;
   font-weight: bold;
+  border-radius: 9px;
+  font-size: 14px;
+  font-family: Circular, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
 }
 .siderCardDescription{
   background-color: aliceblue;

src/lib/fomattedDate.js

@@ -0,0 +1,17 @@
+export default function formattedDate(dateString) {
+  const parts = dateString.split(" ");
+  const datePart = parts[0];
+  const timePart = parts[1];
+
+  const [month, day, year] = datePart.split("-").map(Number);
+  let [hour, minute] = timePart.slice(0, -2).split(":").map(Number);
+
+  // Convert 12-hour time to 24-hour time if necessary
+  if (timePart.endsWith("PM") && hour !== 12) {
+    hour += 12;
+  } else if (timePart.endsWith("AM") && hour === 12) {
+    hour = 0;
+  }
+
+  return new Date(year, month - 1, day, hour, minute);
+}

src/middleware/AuthRoute.jsx

@@ -1,12 +1,15 @@
-import { useEffect, useState, useCallback, useMemo } from "react";
-import { Navigate, Outlet, useLocation, useNavigate } from "react-router-dom";
-import usersService from "../services/UsersService";
-import LoadingSpinner from "../components/Spinners/LoadingSpinner";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { Navigate, Outlet, useNavigate } from "react-router-dom";
+import LoadingSpinner from "../components/Spinners/LoadingSpinner";
+import formattedDate from "../lib/fomattedDate";
+import usersService from "../services/UsersService";
+import { commonHeadBanner } from "../store/CommonHeadBanner";
+import { recentActivitiesData } from "../store/RecentActivitiesData";
 import { updateUserDetails } from "../store/UserDetails";
 import { updateJobs } from "../store/jobLists";
+import { updateNotifications } from "../store/notifications";
 import { updateUserJobList } from "../store/userJobList";
-import { commonHeadBanner } from "../store/CommonHeadBanner";
 
 const AuthRoute = ({ redirectPath = "/login", children }) => {
   const apiCall = useMemo(() => new usersService(), []);
@@ -18,9 +21,11 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
 
   const { jobListTable } = useSelector((state) => state.tableReload);
 
-  const { userDetails:{username, uid} } = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
+  const {
+    userDetails: { username, uid },
+  } = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
 
-  let loggedIn = username && uid ? true : false // variable to determine if user is logged in
+  let loggedIn = username && uid ? true : false; // variable to determine if user is logged in
 
   useEffect(() => {
     //Removing Data stored at localStorage after session expires
@@ -84,7 +89,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
               return;
             }
             setLoadProfileDetails(res.data);
-            dispatch(updateUserDetails({...res.data, loggedIn:true}));
+            dispatch(updateUserDetails({ ...res.data }));
             setIsLogin({ loading: false, status: true });
           })
           .catch((error) => {
@@ -95,6 +100,66 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     }
   }, []);
 
+  useEffect(() => {
+    const getNotifications = () => {
+      // function to load user notification
+      dispatch(updateNotifications({ loading: true }));
+      apiCall
+        .getMyNotifications()
+        .then((res) => {
+          if (res.data.internal_return < 0) {
+            dispatch(updateNotifications({ loading: false, data: null }));
+            return;
+          }
+          setLoadProfileDetails(res.data);
+
+          const _raw = res.data?.result_list;
+
+          //Sort the notifications in ascending order based on the API time
+          const _sorted = _raw?.sort((a, b) => {
+            const timeA = new Date(a?.date)?.getTime();
+            const timeB = new Date(b?.date)?.getTime();
+            return timeA - timeB;
+          });
+
+          // header component
+          const _header = _sorted?.slice(0, 5);
+          // Notification Layout
+          const _today = _sorted?.slice(0, 7);
+
+          const _days = () => {
+            const sevenDaysAgo = new Date();
+            sevenDaysAgo.setDate(new Date() - 7);
+            return _sorted?.filter((notification) => {
+              const notificationDate = new Date(
+                formattedDate(notification?.date)
+              );
+              return notificationDate >= sevenDaysAgo;
+            });
+          };
+
+          // Dispatch all notifications, sorted, and recent based on their filter type
+          dispatch(
+            updateNotifications({
+              loading: false,
+              // data: {
+              //   raw: _raw,
+              //   today: _today,
+              //   // days: _days(),
+              //   sort: _sorted,
+              //   header: _header,
+              // },
+              data: _sorted
+            })
+          );
+        })
+        .catch((error) => {
+          dispatch(updateNotifications({ loading: false, data: null }));
+        });
+    };
+    getNotifications();
+  }, []);
+
   useEffect(() => {
     const getMyJobList = async () => {
       dispatch(updateUserJobList({ loading: true, data: [] }));
@@ -126,22 +191,54 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
   }, [apiCall, dispatch]);
 
   //FUNCTION TO GET COMMON HEAD DATA
-  useEffect(()=>{
-    apiCall.getHeroJBanners().then((res) => {
-      if (res.data.internal_return < 0) {
-        return;
-      }
-      dispatch(commonHeadBanner(res.data));
-    })
-    .catch((error) => {
-      console.log('ERROR ', error)
-    });
-  },[])
+  useEffect(() => {
+    apiCall
+      .getHeroJBanners()
+      .then((res) => {
+        if (res.data.internal_return < 0) {
+          return;
+        }
+        dispatch(commonHeadBanner(res.data));
+      })
+      .catch((error) => {
+        console.log("ERROR ", error);
+      });
+  }, []);
+  //
+  //FUNCTION TO GET COMMON HEAD DATA
+  useEffect(() => {
+    apiCall
+      .getRecentActivitiedData()
+      .then((res) => {
+        //   debugger;
+        if (res.data?.internal_return < 0) {
+          return;
+        }
+        dispatch(recentActivitiesData(res.data));
+      })
+      .catch((error) => {
+        console.log("ERROR ", error);
+      });
+  }, []);
+
+  // useEffect(() => {
+  //   apiCall
+  //     .getHeroJBanners()
+  //     .then((res) => {
+  //       if (res.data.internal_return < 0) {
+  //         return;
+  //       }
+  //       dispatch(commonHeadBanner(res.data));
+  //     })
+  //     .catch((error) => {
+  //       console.log("ERROR ", error);
+  //     });
+  // }, []);
+  //
 
   return isLogin.loading && !loggedIn ? (
     <LoadingSpinner size="32" color="sky-blue" height="h-screen" />
-  ) : 
-  !isLogin.status && !loggedIn ? (
+  ) : !isLogin.status && !loggedIn ? (
     <Navigate to={redirectPath} replace />
   ) : (
     children || <Outlet />

src/services/UsersService.js

@@ -39,12 +39,12 @@ class usersService {
     localStorage.setItem("session_token", ``);
     return this.postAuxEnd("/authstart", reqData);
   }
-  
+
   authLogin(reqData) {
     localStorage.setItem("session_token", ``);
     return this.postAuxEnd("/authlogin", reqData);
   }
-  
+
   marketJobData(reqData) {
     var postData = {
       uuid: localStorage.getItem("uuid"),
@@ -147,6 +147,16 @@ class usersService {
     return this.postAuxEnd("/homebanners", postData);
   }
 
+  getRecentActivitiedData() {
+    var postData = {
+      uuid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      page: 0,
+      limit: 100,
+    };
+    return this.postAuxEnd("/dashrecent", postData);
+  }
   getGetPendingJobs() {
     var postData = {
       uuid: localStorage.getItem("uid"),
@@ -216,6 +226,42 @@ class usersService {
     return this.postAuxEnd("/sendmoneyfee", postData);
   }
 
+  // Start Credit for Cards 
+  getStartCredit(value) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: 11053,
+      ...value,
+    };
+    return this.postAuxEnd("/startcredit", postData);
+  }
+
+  // Paying using Previous Cards
+  getPaidPrevCard(value) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: 11056,
+      ...value,
+    };
+    return this.postAuxEnd("/payprevcard", postData);
+  }
+
+  // Paying using New Card
+  getPaidNewCard(value) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: 11054,
+      ...value,
+    };
+    return this.postAuxEnd("/paynewcard", postData);
+  }
+
   getFamilySampleTasks() {
     var postData = {
       uid: localStorage.getItem("uid"),
@@ -433,8 +479,8 @@ class usersService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      senderid: localStorage.getItem("member_id"),
       action: 33020,
+      mode: 100,
       ...reqData,
     };
     return this.postAuxEnd("/sendmoney", postData);
@@ -568,13 +614,13 @@ class usersService {
   }
 
   // END POINT TO GET BANK NAME
-  getCountryBank() {
+  getCountryBank(value) {
     var postData = {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       action: 11183,
-      // country: "NG",
+      ...value,
     };
     return this.postAuxEnd("/countrybanks", postData);
   }
@@ -899,6 +945,53 @@ class usersService {
     return this.postAuxEnd("/familysuggestlist", postData);
   }
 
+    // FUNCTION TO CHANGE PROFILE PASSWORD
+    profilePassChange(reqData) {
+      var postData = {
+        uid: localStorage.getItem("uid"),
+        member_id: localStorage.getItem("member_id"),
+        sessionid: localStorage.getItem("session_token"),
+        action: 11005,
+        ...reqData,
+      };
+      return this.postAuxEnd("/profilepasschange", postData);
+    }
+
+    // FUNCTION TO GET ACCOUNT SETTINGS
+    getAccSettings() {
+      var postData = {
+        uid: localStorage.getItem("uid"),
+        member_id: localStorage.getItem("member_id"),
+        sessionid: localStorage.getItem("session_token"),
+        action: 11059,
+      };
+      return this.postAuxEnd("/getaccsettings", postData);
+    }
+
+    // FUNCTION TO SET ACCOUNT SETTINGS
+    setAccSettings(reqdata) {
+      var postData = {
+        uid: localStorage.getItem("uid"),
+        member_id: localStorage.getItem("member_id"),
+        sessionid: localStorage.getItem("session_token"),
+        action: 11058,
+        ...reqdata,
+      };
+      return this.postAuxEnd("/setaccsettings", postData);
+    }
+
+    // FUNCTION TO DELETE PAY CARD
+    payRemCard(reqData) {
+      var postData = {
+        uid: localStorage.getItem("uid"),
+        member_id: localStorage.getItem("member_id"),
+        sessionid: localStorage.getItem("session_token"),
+        action: 11057,
+        ...reqData,
+      };
+      return this.postAuxEnd("/payremcard", postData);
+    }
+
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)

src/store/RecentActivitiesData.js

@@ -0,0 +1,20 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+    recentActivitiesData: {}
+};
+
+export const recentActivitiesDataSlice = createSlice({
+    name: "recentActivitiesData",
+    initialState,
+    reducers: {
+        recentActivitiesData: (state,action) => {
+            state.recentActivitiesData = {...action.payload}
+        },
+    },
+});
+
+// Action creators are generated for each case reducer function
+export const { recentActivitiesData } = recentActivitiesDataSlice.actions;
+
+export default recentActivitiesDataSlice.reducer;

src/store/TableReloads.js

@@ -5,7 +5,8 @@ const initialState = {
   pendingListTable: false,
   myTaskTable: false,
   othersInterestedTable: false,
-  couponTable: false
+  couponTable: false,
+  walletTable: false,
 };
 
 export const tableReloadSlice = createSlice({
@@ -29,6 +30,9 @@ export const tableReloadSlice = createSlice({
         case "COUPONTABLE":
           state.couponTable = !state.couponTable;
           return;
+        case "WALLETTABLE":
+          state.walletTable = !state.walletTable;
+          return;
         default:
           return state;
       }

src/store/notifications.js

@@ -0,0 +1,22 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  notifications: {
+    loading: false,
+    data: null,
+  },
+};
+
+export const notificationsSlice = createSlice({
+  name: "notifications",
+  initialState,
+  reducers: {
+    updateNotifications: (state, action) => {
+      state.notifications = { ...action.payload };
+    },
+  },
+});
+
+export const { updateNotifications } = notificationsSlice.actions;
+
+export default notificationsSlice.reducer;

src/store/store.js

@@ -1,11 +1,12 @@
 import { configureStore } from "@reduxjs/toolkit";
 import drawerReducer from "./drawer";
 
+import commonHeadBannerReducer from "./CommonHeadBanner";
+import tableReloadReducer from "./TableReloads";
 import userDetailReducer from "./UserDetails";
 import jobReducer from "./jobLists";
-import tableReloadReducer from "./TableReloads";
-import userJobListReducer from './userJobList'
-import commonHeadBannerReducer from './CommonHeadBanner'
+import notificationsReducer from "./notifications";
+import userJobListReducer from "./userJobList";
 
 export default configureStore({
   reducer: {
@@ -14,6 +15,7 @@ export default configureStore({
     jobLists: jobReducer,
     tableReload: tableReloadReducer,
     userJobList: userJobListReducer,
-    commonHeadBanner: commonHeadBannerReducer
+    commonHeadBanner: commonHeadBannerReducer,
+    notifications: notificationsReducer,
   },
-});
+});

src/views/MyWalletPage.jsx

@@ -1,9 +1,5 @@
 import WalletRoutes from "../components/MyWallet/Wallet";
 
 export default function MyWalletPage() {
-  return (
-    <>
-      <WalletRoutes />
-    </>
-  );
+  return <WalletRoutes />;
 }

src/views/NotificationPage.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import Notification from "../components/Notification";
 
 export default function notification() {

tailwind.config.js

@@ -21,7 +21,8 @@ module.exports = {
         'alice-blue': '#f0f8ff'
       },
       screens:{
-        xxs: '400px'
+        xxs: '400px',
+        xxl:'1900px'
       }
     },
   },