added limit to card and account adding

.env

@@ -68,7 +68,15 @@ REACT_APP_MAX_FILE_SIZE=1000000
 REACT_APP_TOTAL_NUM_FILE=4
 
 REACT_APP_LOGOUT_TEXT="Sign Out"
+REACT_APP_APPLE_SOCIAL_LOGIN=0
+REACT_APP_LINKEDIN_SOCIAL_LOGIN=0
 
 
 #apigate.lotus.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227
+
+
+REACT_APP_MAX_CREDIT_CARDS=4
+REACT_APP_MAX_CREDIT_BANK_ACCOUNT=4
+
+REACT_APP_MAX_FAMILY_MEMBERS=8

.env.development

@@ -42,4 +42,12 @@ REACT_APP_GOOGLE_REDIRECT_URL=http://localhost:9082/login/auth/
 REACT_APP_MAX_FILE_SIZE=1000000
 REACT_APP_TOTAL_NUM_FILE=4
 
-REACT_APP_LOGOUT_TEXT="Sign Out"
+REACT_APP_LOGOUT_TEXT="Sign Out"
+
+REACT_APP_APPLE_SOCIAL_LOGIN=0
+REACT_APP_LINKEDIN_SOCIAL_LOGIN=0
+
+REACT_APP_MAX_CREDIT_CARDS=4
+REACT_APP_MAX_CREDIT_BANK_ACCOUNT=4
+
+REACT_APP_MAX_FAMILY_MEMBERS=8

.env.production

@@ -49,4 +49,11 @@ DISABLE_ESLINT_PLUGIN=true
 REACT_APP_MAX_FILE_SIZE=1000000
 REACT_APP_TOTAL_NUM_FILE=4
 
-REACT_APP_LOGOUT_TEXT="Sign Out"
+REACT_APP_LOGOUT_TEXT="Sign Out"
+REACT_APP_APPLE_SOCIAL_LOGIN=0
+REACT_APP_LINKEDIN_SOCIAL_LOGIN=0
+
+REACT_APP_MAX_CREDIT_CARDS=4
+REACT_APP_MAX_CREDIT_BANK_ACCOUNT=4
+
+REACT_APP_MAX_FAMILY_MEMBERS=8

src/assets/images/twitter_icon.svg

@@ -0,0 +1,3 @@
+<svg width="1200" height="1227" viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="white"/>
+</svg>

src/components/AddJob/AddJob.jsx

@@ -134,7 +134,7 @@ function AddJob({ popUpHandler, categories }) {
   };
 
   return (
-    <div className="add-job p-5 w-full bg-white rounded-md flex flex-col justify-between">
+    <div className="add-job p-5 w-full bg-white dark:bg-dark-white dark:text-white rounded-md flex flex-col justify-between">
       <Formik
         initialValues={initialValues}
         validationSchema={validationSchema}
@@ -163,7 +163,7 @@ function AddJob({ popUpHandler, categories }) {
                         id="country"
                         name="country"
                         value={props.values.country}
-                        className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
+                        className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border`}
                         onChange={props.handleChange}
                         onBlur={props.handleBlur}
                       >
@@ -200,7 +200,6 @@ function AddJob({ popUpHandler, categories }) {
                         fieldClass="px-6 text-right"
                         label="Price"
                         labelClass="tracking-wide"
-                        inputBg="bg-slate-100"
                         type="number"
                         name="price"
                         placeholder="0"
@@ -222,7 +221,6 @@ function AddJob({ popUpHandler, categories }) {
                       fieldClass="px-6"
                       label="Title"
                       labelClass="tracking-wide"
-                      inputBg="bg-slate-100"
                       type="text"
                       name="title"
                       value={props.values.title}
@@ -242,7 +240,6 @@ function AddJob({ popUpHandler, categories }) {
                       fieldClass="px-6"
                       label="Description"
                       labelClass="tracking-wide"
-                      inputBg="bg-slate-100"
                       type="text"
                       name="description"
                       value={props.values.description}
@@ -274,7 +271,7 @@ function AddJob({ popUpHandler, categories }) {
                       <textarea
                         id="Job Delivery Details"
                         rows="5"
-                        className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px]`}
+                        className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px] border`}
                         style={{ resize: "none" }}
                         name="job_detail"
                         value={props.values.job_detail}
@@ -343,7 +340,7 @@ function AddJob({ popUpHandler, categories }) {
                     <Field
                       component="select"
                       name="timeline_days"
-                      className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${
+                      className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border ${
                         props.errors.timeline_days &&
                         props.touched.timeline_days
                           ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"

src/components/AuthPages/Login/index.jsx

@@ -329,35 +329,51 @@ 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}
-                          style={{visibility: 'hidden'}}
-                        />
-                      </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}
-                        />
+                      <div className="sm:grid grid-cols-2 gap-1">
+                        <div className="w-full">
+                          <BrandBtn
+                            link="#"
+                            imgSrc={googleLogo}
+                            brand="Google"
+                            onClick={googleLogin}
+                          />
+                        </div>
+                        <div
+                          className={`w-full ${
+                            process.env.REACT_APP_APPLE_SOCIAL_LOGIN !== 0 &&
+                            "hidden"
+                          }`}
+                        >
+                          <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}
+                            // style={{visibility: 'hidden'}}
+                          />
+                        </div>
+                        <div className="w-full">
+                          <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}
+                          />
+                        </div>
+                        <div
+                          className={`w-full ${
+                            process.env.REACT_APP_LINKEDIN_SOCIAL_LOGIN !== 0 &&
+                            "hidden"
+                          }`}
+                        >
+                          <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>
                   </div>
@@ -433,12 +449,12 @@ export default function Login() {
               }
               {/* END of login component */}
 
-              {loginType == "full" &&
-              <div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
-                This site is protected by hCaptcha and the our Privacy Policy
-                and Terms of Service apply.
-              </div>
-              }
+              {loginType == "full" && (
+                <div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
+                  This site is protected by hCaptcha and the our Privacy Policy
+                  and Terms of Service apply.
+                </div>
+              )}
             </div>
           </div>
         </div>
@@ -447,7 +463,14 @@ export default function Login() {
   );
 }
 
-const BrandBtn = ({ link, imgSrc, brand, onClick, isAnchor = false, style = {visibility: 'visible' } }) => {
+const BrandBtn = ({
+  link,
+  imgSrc,
+  brand,
+  onClick,
+  isAnchor = false,
+  style = { visibility: "visible" },
+}) => {
   // const doGoogle = async () => {
   //   alert("start google");
   // };
@@ -467,7 +490,7 @@ const BrandBtn = ({ link, imgSrc, brand, onClick, isAnchor = false, style = {vis
   //   alert("start facebook");
   // };
   return (
-    <div className="w-full sm:w-1/2 flex justify-center bottomMargin" style={style}>
+    <div className="w-full flex justify-center bottomMargin" style={style}>
       {isAnchor ? (
         <a
           href={link}

src/components/AuthPages/SignUp/index.jsx

@@ -1,20 +1,26 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
 
 export default function SignUp() {
+  const queryParams = new URLSearchParams(location?.search);
+  const country = queryParams.get("cnt")?.toUpperCase();
+  
+  const {pathname} = useLocation()
+  const currentPath = country ? `${pathname}?cnt=${country.toLowerCase()}`:pathname // Determines the new pathname is country query params exist
+
   const [signUpLoading, setSignUpLoading] = useState(false);
   const [checked, setValue] = useState(false);
   // for the catch error
   const [msgError, setMsgError] = useState("");
   const [showPassword, setShowPassword] = useState(false);
-  const [countries, setCountries] = useState([]);
+  const [countries, setCountries] = useState({loading:true, data:[]});
 
   const [formData, setFormData] = useState({
-    country: "",
+    country: country? country : "",
     first_name: "",
     last_name: "",
     email: "",
@@ -45,9 +51,18 @@ export default function SignUp() {
     try {
       if (res.status === 200) {
         const { signup_country } = await res.data;
-        setCountries(signup_country);
+        // setCountries(signup_country);
+        if(country){ // IF LINK/PATHNAME HAS CNT QUERY VALUE
+          let cnt = signup_country.filter(item => item[0]==country) // test to see country passed in query param exist from list of countries supplied by API
+          if(!cnt.length){ // IF CNT EMPTY, SET FORMDATA COUNTRY BACK TO EMPTY STRING: RE: THIS IS BCOS WE INITAIL SET COUNTRY VALUE IN FORMDATA, IF COUNTRY PARAM IS PRESENT IN LINK
+            setFormData(prev => ({...prev, country: ''}))
+            return setCountries({loading: false, data: signup_country});
+          }
+          return setCountries({loading: false, data: cnt});
+        }
+        setCountries({loading: false, data:signup_country});
       } else if (res.data.result !== 100) {
-        setCountries("Nothing see here!");
+        setCountries({loading: false, data:[]});
       }
     } catch (error) {
       throw new Error(error);
@@ -134,7 +149,7 @@ export default function SignUp() {
       <AuthLayout slogan="Welcome to WrenchBoard">
         <div className="w-full">
           <div className="mb-5">
-            <Link to="#">
+            <Link to={currentPath}>
               <img
                 src={WrenchBoard}
                 alt="wrenchboard"
@@ -172,6 +187,7 @@ export default function SignUp() {
                   name="country"
                   value={formData.country}
                   inputHandler={handleInputChange}
+                  disable={country && countries?.data?.length <= 1 ? true : false}
                 />
                 <div className="input-fl-name mb-5 sm:flex w-full sm:space-x-6 ">
                   <div className="input-item sm:w-1/2 w-full mb-5 sm:mb-0">
@@ -306,6 +322,7 @@ export default function SignUp() {
                 <div className="signin-area mb-1">
                   <div className="flex justify-center">
                     <button
+                      disabled={countries.loading}
                       type="button"
                       onClick={handleSignUp}
                       className={`rounded-[0.475rem] mb-6 text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
@@ -333,6 +350,7 @@ const SelectOption = ({
   inputHandler,
   value,
   data, // passing the data from parent
+  disable
 }) => {
   return (
     <div className="input-com mb-7">
@@ -346,19 +364,39 @@ const SelectOption = ({
       </div>
       <div>
         <select
+        disabled={disable}
           name={name}
           id={name}
           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 focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent "
           onChange={inputHandler}
           value={value}
         >
-          <option value={""}>Select your Country</option>
-          {data?.length > 0 &&
-            data?.map((item, idx) => (
+          {data?.data?.length > 1 ?
+            <>
+            <option value={""}>Select your Country</option>
+            {data?.data?.map((item, idx) => (
               <option value={item[0]} key={idx}>
                 {item[1]}
               </option>
             ))}
+            </>
+            :
+            data?.data?.length == 1 ?
+            data?.data?.map((item, idx) => (
+              <option value={item[0]} key={idx}>
+                {item[1]}
+              </option>
+            ))
+            :
+            data?.data?.length < 1 && data.loading ?
+            <option value=''>
+              Loading...
+            </option>
+            :
+            <option value=''>
+              No Country Found!
+            </option>
+          }
         </select>
       </div>
     </div>

src/components/Cards/AvailableJobsCard.jsx

@@ -1,9 +1,7 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
-import usersService from "../../services/UsersService";
-import { PriceFormatter } from "../Helpers/PriceFormatter";
+import { useEffect, useState } from "react";
 import dataImage2 from "../../assets/images/data-table-user-2.png";
+import { PriceFormatter } from "../Helpers/PriceFormatter";
+import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
 
 export default function AvailableJobsCard({
   className,
@@ -156,27 +154,6 @@ export default function AvailableJobsCard({
                 </p>
               </div>
 
-              {/* <div className="card-two-info flex gap-2 items-center">
-              <div className="owned-by flex space-x-2 items-center">
-                <div>
-                  <p className="text-thin-light-gray text-sm leading-3">Added</p>
-                  <p className="text-base   text-dark-gray dark:text-white">
-                    {datas.offer_added}
-                  </p>
-                </div>
-              </div>
-              <div className="w-[1px] bg-light-purple dark:bg-dark-light-purple  h-7"></div>
-              <div className="created-by flex space-x-2 items-center flex-row-reverse">
-                <div>
-                  <p className="text-thin-light-gray text-sm leading-3 text-right">
-                    Expires
-                  </p>
-                  <p className="text-base text-dark-gray dark:text-white text-right">
-                    {datas.expire}
-                  </p>
-                </div>
-              </div>
-            </div> */}
               <div className="block sm:flex flex-wrap gap-4">
                 <p className="text-sm text-thin-light-gray flex flext-start gap-1">
                   Price: <span className="text-purple">{thePrice}</span>

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -197,7 +197,7 @@ const  AssignTaskPopout = React.memo(({ action, details, situation, familyDetail
         <div className="w-full h-full lg:w-[700px] lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
           <div className="w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
             <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
-              Assign task to {familyDetails?.firstname || details.firstName}
+              Assign task to {familyDetails?.firstname || details?.firstName}
             </h1>
             <button
               type="button"
@@ -263,7 +263,7 @@ const  AssignTaskPopout = React.memo(({ action, details, situation, familyDetail
                   </div>
                   {/* Task Type === select */}
                   {taskType == "select" && (
-                    <div className="p-4 w-full h-[400px] overflow-y-auto bg-slate-100">
+                    <div className="p-4 w-full h-[400px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
                       {familyTask?.data?.length ? (
                         familyTask?.data?.map((item, index) => (
                           <div
@@ -283,7 +283,7 @@ const  AssignTaskPopout = React.memo(({ action, details, situation, familyDetail
                               }
                               className="w-[15px] h-[15px] cursor-pointer"
                             />
-                            <p className="w-full text-dark-gray tracking-wide">
+                            <p className="w-full text-dark-gray dark:text-white tracking-wide">
                               {item?.title}
                             </p>
                           </div>
@@ -354,7 +354,7 @@ const  AssignTaskPopout = React.memo(({ action, details, situation, familyDetail
                               Delivery Detail
                             </label>
                             <textarea
-                              className={`p-1 w-full text-sm text-slate-900 outline-none border border-slate-300 rounded-md`}
+                              className={`p-1 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
                               rows="5"
                               style={{ resize: "none" }}
                               value={activeTask?.data?.job_detail}

src/components/FamilyAcc/FamilyTable.jsx

@@ -1,21 +1,29 @@
 import React, { useState } from "react";
-import dataImage1 from "../../assets/images/data-table-user-1.png";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
 import { useNavigate } from "react-router-dom";
 import { handlePagingFunc } from "../Pagination/HandlePagination";
 import PaginatedList from "../Pagination/PaginatedList";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 
-import familyImage from '../../assets/images/no-family-side.png'
+import familyImage from "../../assets/images/no-family-side.png";
+import { formatDateString } from "../../lib";
 import localImgLoad from "../../lib/localImgLoad";
 
-export default function FamilyTable({ className, familyList, loader, popUpHandler }) {
+export default function FamilyTable({
+  className,
+  familyList,
+  loader,
+  popUpHandler,
+}) {
   const navigate = useNavigate();
 
   const [currentPage, setCurrentPage] = useState(0);
   const indexOfFirstItem = Number(currentPage);
   const indexOfLastItem =
     Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
-  const currentFamilyList = familyList?.slice(indexOfFirstItem, indexOfLastItem);
+  const currentFamilyList = familyList?.slice(
+    indexOfFirstItem,
+    indexOfLastItem
+  );
 
   const handlePagination = (e) => {
     handlePagingFunc(e, setCurrentPage);
@@ -32,100 +40,105 @@ export default function FamilyTable({ className, familyList, loader, popUpHandle
           <div className="h-full min-h-[500px] w-full overflow-hidden flex justify-center items-center">
             <LoadingSpinner size="16" color="sky-blue" />
           </div>
-        ) 
-        :
-        familyList?.length > 0 ?
-          (
-            <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 relative">
-              <thead className="sticky top-0">
-                <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-bottom ">
-                  <th className="py-4">Name</th>
-                  <th className="py-4 text-center">Last Login</th>
-                  <th className="py-4 text-center">No of Tasks</th>
-                  <th className="py-4 text-right"></th>
-                </tr>
-              </thead>
-              <tbody className="h-full">
-                  {currentFamilyList?.map((props, idx) => {
-                      let {
-                        firstname,
-                        lastname,
-                        age,
-                        added,
-                        last_login,
-                        task_count,
-                        family_uid,
-                        banner
-                      } = props;
-                      let addedDate = added?.split(" ")[0];
-                      let LoginDate = last_login?.split(" ")[0];
-                      return (
-                        <tr
-                          className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29]  hover:bg-gray-50"
-                          key={family_uid}
-                        >
-                          <td className=" py-4">
-                            <div className="flex space-x-2 items-center w-full">
-                              <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1]">
-                                <img
-                                  // src={dataImage1}
-                                  src={localImgLoad(`images/icons/${banner}`)}
-                                  alt="data"
-                                  className="w-full h-full"
-                                />
-                              </div>
-                              <div className="flex flex-col flex-[0.9]">
-                                <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                                  {`${firstname} ${lastname} (${age})`}
-                                </h1>
-                                <span className="text-sm text-thin-light-gray">
-                                  Added:{" "}
-                                  <span className="text-purple ml-1">
-                                    {addedDate}
-                                  </span>
-                                </span>
-                              </div>
-                            </div>
-                          </td>
-                          <td className="text-center py-4 px-2">
+        ) : familyList?.length > 0 ? (
+          <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 relative">
+            <thead className="sticky top-0">
+              <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-bottom ">
+                <th className="py-4">Name</th>
+                {/* <th className="py-4 text-center">Last Login</th> */}
+                <th className="py-4 text-center">No of Tasks</th>
+                <th className="py-4 text-right"></th>
+              </tr>
+            </thead>
+            <tbody className="h-full">
+              {currentFamilyList?.map((props, idx) => {
+                let {
+                  firstname,
+                  lastname,
+                  age,
+                  added,
+                  last_login,
+                  task_count,
+                  family_uid,
+                  banner,
+                } = props;
+                let addedDate = added?.split(" ")[0];
+                let LoginDate =
+                  last_login === ""
+                    ? "never logged in"
+                    : formatDateString(last_login);
+                return (
+                  <tr
+                    className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29]  hover:bg-gray-50"
+                    key={family_uid}
+                  >
+                    <td className=" py-4">
+                      <div className="flex space-x-2 items-center w-full">
+                        <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1]">
+                          <img
+                            // src={dataImage1}
+                            src={localImgLoad(`images/icons/${banner}`)}
+                            alt="data"
+                            className="w-full h-full"
+                          />
+                        </div>
+                        <div className="flex flex-col flex-[0.9]">
+                          <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                            {`${firstname} ${lastname} (${age})`}
+                          </h1>
+                          <span className="text-sm text-thin-light-gray">
+                            Added:{" "}
+                            <span className="text-purple ml-1">
+                              {addedDate}
+                            </span>
+                          </span>
+                          <span className="text-sm text-thin-light-gray">
+                            Last Login:{" "}
+                            <span className="text-purple ml-1">
+                              {LoginDate}
+                            </span>
+                          </span>
+                        </div>
+                      </div>
+                    </td>
+                    {/* <td className="text-center py-4 px-2">
                             <div className="flex space-x-1 items-center justify-center">
                               <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
                                 {LoginDate}
                               </span>
                             </div>
-                          </td>
-                          <td className="text-center py-4 px-2">
-                            <div className="flex space-x-1 items-center justify-center">
-                              <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                                {task_count}
-                              </span>
-                            </div>
-                          </td>
-                          <td className="text-right py-4 px-2 flex items-center justify-center">
-                            <button
-                              onClick={() => {
-                                navigate("/manage-family", {
-                                  state: { ...props },
-                                });
-                              }}
-                              type="button"
-                              className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                            >
-                              Manage
-                            </button>
-                          </td>
-                        </tr>
-                      );
-                    })
-                  }
-              </tbody>
-            </table>
-          )
-          : 
-          (
+                          </td> */}
+                    <td className="text-center py-4 px-2">
+                      <div className="flex space-x-1 items-center justify-center">
+                        <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
+                          {task_count}
+                        </span>
+                      </div>
+                    </td>
+                    <td className="text-right py-4 px-2 flex items-center justify-center">
+                      <button
+                        onClick={() => {
+                          navigate("/manage-family", {
+                            state: { ...props },
+                          });
+                        }}
+                        type="button"
+                        className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                      >
+                        Manage
+                      </button>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        ) : (
           <div className="font-bold text-center text-xl md:text-2xl lg:text-4xl text-dark-gray md:flex items-center justify-between">
             <div className="p-2 w-full md:w-1/2">
-              <p className="mb-4 p-3 md:p-16">Add your family, assign tasks, and get the whole team engaged.</p>
+              <p className="mb-4 p-3 md:p-16">
+                Add your family, assign tasks, and get the whole team engaged.
+              </p>
               <button
                 onClick={popUpHandler}
                 type="button"
@@ -135,14 +148,13 @@ export default function FamilyTable({ className, familyList, loader, popUpHandle
               </button>
             </div>
             <div className="p-2 w-full md:w-1/2">
-              <img className='w-full' src={familyImage} alt="Add Family" />
+              <img className="w-full" src={familyImage} alt="Add Family" />
             </div>
           </div>
-          )
-        }
+        )}
       </div>
-        {/* PAGINATION BUTTON */}
-        <PaginatedList
+      {/* PAGINATION BUTTON */}
+      <PaginatedList
         onClick={handlePagination}
         prev={currentPage == 0 ? true : false}
         next={

src/components/FamilyAcc/Tabs/FamilyAccount.jsx

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

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

@@ -92,8 +92,8 @@ export default function InputCom({
           value={value}
           onChange={inputHandler}
           className={`input-field placeholder:text-base text-dark-gray w-full h-full ${
-            inputBg ? inputBg : "bg-[#FAFAFA] tracking-wide"
-          } dark:bg-[#11131F] focus:ring-0 focus:outline-none ${fieldClass}`}
+            inputBg ? inputBg : "bg-[#FAFAFA] dark:bg-[#11131F] dark:text-white tracking-wide"
+          } focus:ring-0 focus:outline-none ${fieldClass}`}
           type={type}
           id={name}
           name={name}

src/components/Home/HomeActivities.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import dataImage1 from "../../assets/images/data-table-user-1.png";
 import usersService from "../../services/UsersService";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 
 export default function HomeActivities({ className }) {
   const [recentActivitiesData, setRecentActivitiesData] = useState({
@@ -78,7 +79,9 @@ export default function HomeActivities({ className }) {
             {/*</tr>*/}
 
             {recentActivitiesData.loading ? (
-              <></>
+              <div className="h-[100px] w-full flex justify-center items-center">
+                <LoadingSpinner color="sky-blue" size="16" />
+              </div>
             ) : recentActivitiesData.data ? (
               recentActivitiesData.data?.map((item) => {
                 let addedDate = item?.added?.split(" ")[0];

src/components/MarketPlace/MainSection.jsx

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

src/components/MarketPlace/PopUp/MarketPopUp.jsx

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

src/components/MarketPlace/index.jsx

@@ -1,7 +1,7 @@
-import Layout from "../Partials/Layout";
-import MainSection from "./MainSection";
-import CommonHead from "../UserHeader/CommonHead";
 import { useSelector } from "react-redux";
+import Layout from "../Partials/Layout";
+import CommonHead from "../UserHeader/CommonHead";
+import MainSection from "./MainSection";
 
 export default function MarketPlace({ commonHeadData }) {
   let { jobLists } = useSelector((state) => state.jobLists);
@@ -20,4 +20,4 @@ export default function MarketPlace({ commonHeadData }) {
       </Layout>
     </>
   );
-}
+}

src/components/MyPendingJobs/MyPendingJobTable.jsx

@@ -33,11 +33,6 @@ export default function MyPendingJobTable({ MyJobList, className }) {
         <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
           <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
             <tbody>
-              {/*<tr className="text-base text-thin-light-gray border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">*/}
-              {/*    <td className="py-4">All Product</td>*/}
-              {/*    <td className="py-4 text-right">.</td>*/}
-              {/*</tr>*/}
-
               {
                 <>
                   {MyJobList &&

src/components/MyWallet/Popup/AddFundDollars.jsx

@@ -64,6 +64,8 @@ const initialValues = {
 };
 
 function AddFundDollars(props) {
+  let MaxNoOfCards = process.env.REACT_APP_MAX_CREDIT_CARDS // HOLDS THE VALUE OF THE MAX NUMBER OF CARDS USER CAN ADD
+  
   const apiCall = new usersService();
   let countryWallet = props.walletItem.country;
   const [tab, setTab] = useState("previous");
@@ -240,7 +242,7 @@ function AddFundDollars(props) {
               <label
                 onClick={() => setTab("new")}
                 htmlFor="new"
-                className="cursor-pointer flex items-center gap-1"
+                className={`cursor-pointer flex items-center gap-1 ${payListCards.data.length >= MaxNoOfCards ? 'pointer-events-none':''}`}
               >
                 <input
                   id="new"
@@ -251,7 +253,7 @@ function AddFundDollars(props) {
                     tab == "new" ? "" : ""
                   }  tracking-wide transition duration-200`}
                 />
-                Add New Card
+                Add New Card {payListCards.data.length >= MaxNoOfCards && <span className="text-[14px] text-red-500">Max Reached</span>}
               </label>
             </div>
           </form>
@@ -314,245 +316,253 @@ function AddFundDollars(props) {
 
         {tab === "new" && (
           <div className="new-details w-full max-h-[22rem]">
-            <div className="w-full flex flex-col justify-between">
-              <Formik
-                initialValues={initialValues}
-                validationSchema={validationSchema}
-                onSubmit={handleSubmit}
-              >
-                {(props) => {
-                  return (
-                    <Form className="md:pl-8">
-                      <div className="flex flex-col-reverse sm:flex-row">
-                        <div className="flex-1 sm:mr-10">
-                          <div className="fields w-full">
-                            {/* Inputs */}
-                            {/* Name */}
-                            <div className="flex items-center field w-full my-2 flex-[0.4] gap-3">
-                              <label className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1">
-                                Name:
-                              </label>
-                              <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-2">
-                              {/* Card Number */}
-                              <div className="field w-full flex-[0.6]">
-                                <InputCom
-                                  fieldClass="px-6"
-                                  spanTag="*"
-                                  iconName={cardIcons}
-                                  label="Card Number"
-                                  type="text"
-                                  name="cardNum"
-                                  onInput={handleCards}
-                                  placeholder="Enter Card Number"
-                                  value={handleCardNumberChange(
-                                    props.values.cardNum
-                                  )}
-                                  inputHandler={props.handleChange}
-                                  blurHandler={props.handleBlur}
-                                  error={props.errors.cardNum}
-                                />
+            {payListCards.loading ?
+              <div className="pt-10 flex w-full h-full justify-center items-center">
+                <LoadingSpinner size='10' color='sky-blue' />
+              </div>
+            :payListCards.data.length < MaxNoOfCards ?
+              <div className="w-full flex flex-col justify-between">
+                <Formik
+                  initialValues={initialValues}
+                  validationSchema={validationSchema}
+                  onSubmit={handleSubmit}
+                >
+                  {(props) => {
+                    return (
+                      <Form className="md:pl-8">
+                        <div className="flex flex-col-reverse sm:flex-row">
+                          <div className="flex-1 sm:mr-10">
+                            <div className="fields w-full">
+                              {/* Inputs */}
+                              {/* Name */}
+                              <div className="flex items-center field w-full my-2 flex-[0.4] gap-3">
+                                <label className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1">
+                                  Name:
+                                </label>
+                                <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>
 
-                              {/* 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">
-                                  <div className="select-option">
-                                    <div
-                                      className={`flex items-center justify-between mb-2.5`}
-                                    >
-                                      <label
-                                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold line-clamp-3 flex items-center"
-                                        htmlFor="expiration"
-                                      >
-                                        Exp Month{" "}
-                                        <span className="text-red-700 text-sm italic">
-                                          *
-                                        </span>
-                                        <span className="text-[12px] text-red-500 ml-1">
-                                          {props.errors.expirationMonth && "**"}
-                                        </span>
-                                      </label>
-                                    </div>
-                                    <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 placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#fafafa] focus:ring-0 focus:outline-none`}
-                                        value={props.values.expirationMonth}
-                                        onChange={props.handleChange}
-                                        onBlur={props.handleBlur}
-                                        name="expirationMonth"
-                                      >
-                                        <option
-                                          value=""
-                                          className="text-dark-gray"
-                                        >
-                                          Month
-                                        </option>
-                                        {expireMonth?.length &&
-                                          expireMonth.map((item, index) => (
-                                            <option
-                                              key={index}
-                                              value={
-                                                Number(item.value) < 10
-                                                  ? "0" + item.value
-                                                  : item.value
-                                              }
-                                            >
-                                              {item.name}
-                                            </option>
-                                          ))}
-                                      </select>
-                                    </div>
-                                  </div>
+                              <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={cardIcons}
+                                    label="Card Number"
+                                    type="text"
+                                    name="cardNum"
+                                    onInput={handleCards}
+                                    placeholder="Enter Card Number"
+                                    value={handleCardNumberChange(
+                                      props.values.cardNum
+                                    )}
+                                    inputHandler={props.handleChange}
+                                    blurHandler={props.handleBlur}
+                                    error={props.errors.cardNum}
+                                  />
                                 </div>
 
-                                <div className="field w-full mb-6 xl:mb-0 col-span-1">
-                                  <div className="select-option">
-                                    <div
-                                      className={`flex items-center justify-between mb-2.5`}
-                                    >
-                                      <label
-                                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center line-clamp-3"
-                                        htmlFor="expiration"
+                                {/* 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">
+                                    <div className="select-option">
+                                      <div
+                                        className={`flex items-center justify-between mb-2.5`}
                                       >
-                                        Exp Year{" "}
-                                        <span className="text-red-700 text-sm tracking-wide">
-                                          *
-                                        </span>
-                                        <span className="text-[12px] text-red-500 italic">
-                                          {props.errors.expirationYear && "**"}
-                                        </span>
-                                      </label>
-                                    </div>
-                                    <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 placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#fafafa] focus:ring-0 focus:outline-none`}
-                                        value={props.values.expirationYear}
-                                        onChange={props.handleChange}
-                                        onBlur={props.handleBlur}
-                                        name="expirationYear"
-                                      >
-                                        <option
-                                          value=""
-                                          className="text-dark-gray"
+                                        <label
+                                          className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold line-clamp-3 flex items-center"
+                                          htmlFor="expiration"
                                         >
-                                          Year
-                                        </option>
-                                        {expireYear?.length &&
-                                          expireYear.map((item, index) => (
-                                            <option key={index} value={item}>
-                                              {item}
-                                            </option>
-                                          ))}
-                                      </select>
+                                          Exp Month{" "}
+                                          <span className="text-red-700 text-sm italic">
+                                            *
+                                          </span>
+                                          <span className="text-[12px] text-red-500 ml-1">
+                                            {props.errors.expirationMonth && "**"}
+                                          </span>
+                                        </label>
+                                      </div>
+                                      <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 placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#fafafa] focus:ring-0 focus:outline-none`}
+                                          value={props.values.expirationMonth}
+                                          onChange={props.handleChange}
+                                          onBlur={props.handleBlur}
+                                          name="expirationMonth"
+                                        >
+                                          <option
+                                            value=""
+                                            className="text-dark-gray"
+                                          >
+                                            Month
+                                          </option>
+                                          {expireMonth?.length &&
+                                            expireMonth.map((item, index) => (
+                                              <option
+                                                key={index}
+                                                value={
+                                                  Number(item.value) < 10
+                                                    ? "0" + item.value
+                                                    : item.value
+                                                }
+                                              >
+                                                {item.name}
+                                              </option>
+                                            ))}
+                                        </select>
+                                      </div>
+                                    </div>
+                                  </div>
+
+                                  <div className="field w-full mb-6 xl:mb-0 col-span-1">
+                                    <div className="select-option">
+                                      <div
+                                        className={`flex items-center justify-between mb-2.5`}
+                                      >
+                                        <label
+                                          className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center line-clamp-3"
+                                          htmlFor="expiration"
+                                        >
+                                          Exp Year{" "}
+                                          <span className="text-red-700 text-sm tracking-wide">
+                                            *
+                                          </span>
+                                          <span className="text-[12px] text-red-500 italic">
+                                            {props.errors.expirationYear && "**"}
+                                          </span>
+                                        </label>
+                                      </div>
+                                      <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 placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#fafafa] focus:ring-0 focus:outline-none`}
+                                          value={props.values.expirationYear}
+                                          onChange={props.handleChange}
+                                          onBlur={props.handleBlur}
+                                          name="expirationYear"
+                                        >
+                                          <option
+                                            value=""
+                                            className="text-dark-gray"
+                                          >
+                                            Year
+                                          </option>
+                                          {expireYear?.length &&
+                                            expireYear.map((item, index) => (
+                                              <option key={index} value={item}>
+                                                {item}
+                                              </option>
+                                            ))}
+                                        </select>
+                                      </div>
                                     </div>
                                   </div>
                                 </div>
                               </div>
-                            </div>
 
-                            {/* 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={cardIcons}
-                                  label="CVV"
-                                  type="text"
-                                  name="cvv"
-                                  placeholder="CVV"
-                                  maxLength={3}
-                                  value={props.values.cvv}
-                                  inputHandler={props.handleChange}
-                                  blurHandler={props.handleBlur}
-                                  error={props.errors.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={cardIcons}
+                                    label="CVV"
+                                    type="text"
+                                    name="cvv"
+                                    placeholder="CVV"
+                                    maxLength={3}
+                                    value={props.values.cvv}
+                                    inputHandler={props.handleChange}
+                                    blurHandler={props.handleBlur}
+                                    error={props.errors.cvv}
+                                  />
+                                </div>
+                                <div className="field w-full flex-[0.6]">
+                                  <InputCom
+                                    fieldClass="px-6"
+                                    spanTag="*"
+                                    label="Billing Address"
+                                    type="text"
+                                    name="address"
+                                    placeholder="Billing Address"
+                                    value={props.values.Address}
+                                    inputHandler={props.handleChange}
+                                    blurHandler={props.handleBlur}
+                                    error={props.errors.address}
+                                  />
+                                </div>
                               </div>
-                              <div className="field w-full flex-[0.6]">
-                                <InputCom
-                                  fieldClass="px-6"
-                                  spanTag="*"
-                                  label="Billing Address"
-                                  type="text"
-                                  name="address"
-                                  placeholder="Billing Address"
-                                  value={props.values.Address}
-                                  inputHandler={props.handleChange}
-                                  blurHandler={props.handleBlur}
-                                  error={props.errors.address}
-                                />
-                              </div>
-                            </div>
 
-                            {/* Postal Code and State */}
-                            <div className="sm:grid gap-5 grid-cols-3 my-2">
-                              <div className="field w-full xl:mb-0 col-span-1">
-                                <InputCom
-                                  fieldClass="px-6"
-                                  spanTag="*"
-                                  label="Postal Code"
-                                  type="number"
-                                  name="code"
-                                  placeholder="Postal Code"
-                                  value={props.values.code}
-                                  maxLength={6}
-                                  inputHandler={props.handleChange}
-                                  blurHandler={props.handleBlur}
-                                  error={props.errors.code}
-                                />
-                              </div>
-                              <div className="field w-full col-span-1">
-                                <InputCom
-                                  fieldClass="px-6"
-                                  spanTag="*"
-                                  label="State"
-                                  type="text"
-                                  name="state"
-                                  placeholder="State"
-                                  value={props.values.state.toUpperCase()}
-                                  inputHandler={props.handleChange}
-                                  blurHandler={props.handleBlur}
-                                  error={props.errors.state}
-                                />
+                              {/* Postal Code and State */}
+                              <div className="sm:grid gap-5 grid-cols-3 my-2">
+                                <div className="field w-full xl:mb-0 col-span-1">
+                                  <InputCom
+                                    fieldClass="px-6"
+                                    spanTag="*"
+                                    label="Postal Code"
+                                    type="number"
+                                    name="code"
+                                    placeholder="Postal Code"
+                                    value={props.values.code}
+                                    maxLength={6}
+                                    inputHandler={props.handleChange}
+                                    blurHandler={props.handleBlur}
+                                    error={props.errors.code}
+                                  />
+                                </div>
+                                <div className="field w-full col-span-1">
+                                  <InputCom
+                                    fieldClass="px-6"
+                                    spanTag="*"
+                                    label="State"
+                                    type="text"
+                                    name="state"
+                                    placeholder="State"
+                                    value={props.values.state.toUpperCase()}
+                                    inputHandler={props.handleChange}
+                                    blurHandler={props.handleBlur}
+                                    error={props.errors.state}
+                                  />
+                                </div>
                               </div>
                             </div>
                           </div>
                         </div>
-                      </div>
 
-                      <div className="add-fund-btn flex justify-end items-center gap-2 mt-4">
-                        <button
-                          className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center text-base rounded-full"
-                          onClick={handleClose}
-                        >
-                          Cancel
-                        </button>
-                        <button
-                          type="submit"
-                          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"
-                        >
-                          {props.confirmCredit?.show?.awaitConfirm?.loader ? (
-                            <LoadingSpinner size="6" color="sky-blue" />
-                          ) : (
-                            <>
-                              <span className="text-white">Continue</span>{" "}
-                              <Icons name="chevron-right" />
-                            </>
-                          )}
-                        </button>
-                      </div>
-                    </Form>
-                  );
-                }}
-              </Formik>
-            </div>
+                        <div className="add-fund-btn flex justify-end items-center gap-2 mt-4">
+                          <button
+                            className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center text-base rounded-full"
+                            onClick={handleClose}
+                          >
+                            Cancel
+                          </button>
+                          <button
+                            type="submit"
+                            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"
+                          >
+                            {props.confirmCredit?.show?.awaitConfirm?.loader ? (
+                              <LoadingSpinner size="6" color="sky-blue" />
+                            ) : (
+                              <>
+                                <span className="text-white">Continue</span>{" "}
+                                <Icons name="chevron-right" />
+                              </>
+                            )}
+                          </button>
+                        </div>
+                      </Form>
+                    );
+                  }}
+                </Formik>
+              </div>
+            :
+            null
+            }
           </div>
         )}
       </div>

src/components/MyWallet/Popup/CompleteConfirmCredit.jsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 function CompleteConfirmCredit({ onClose, confirmCredit }) {
   const { data } = confirmCredit;
   return (

src/components/MyWallet/Popup/ConfirmAddFund.jsx

@@ -7,25 +7,32 @@ 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;
+  const { cardNum } = value;
+  let description = value.description;
+  let digits = value.digits;
+
+  if (type === "new") {
+    const firstDigit = cardNum[0];
+    if (firstDigit === "4") {
+      description = "Visa";
+    } else if (firstDigit === "5") {
+      description = "Master";
+    } else {
+      description = "ATM";
+    }
+    digits = cardNum.slice(-4);
+  }
+
   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 className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1 space-x-1">
+          {description} Card
         </h1>
-        <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
-          Bank **************{value.digits}
+        <p className="text-xl font-normal text-dark-gray dark:text-white tracking-wide">
+          Bank **************{digits}
         </p>
       </div>
     </div>
@@ -41,7 +48,7 @@ function AmountSection({ currency, amount, country }) {
       <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">
+      <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
         {formattedAmount}
       </span>
     </div>
@@ -59,7 +66,7 @@ function TransactionFeeSection({ currency, fee, country }) {
       <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">
+      <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
         {formattedFee}
       </span>
     </div>
@@ -78,7 +85,7 @@ function TotalSection({ currency, amount, fee, country }) {
       <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">
+      <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
         {formattedTotal}
       </span>
     </div>
@@ -127,7 +134,7 @@ function ConfirmAddFund({
       logo: "https://www.wrenchboard.com/assets/images/wrench-500-500-icon.png",
     },
   };
-  //debugger;
+
   const fwConfig = {
     ...config,
     text: "Proceed",
@@ -188,27 +195,40 @@ function ConfirmAddFund({
 
   const debouncedSuccessPayment = debounce(onSuccessPayment, 5000);
 
+  /**
+   * Handles the process of making a payment using a previously saved card.
+   * Updates the state to show a loader while the payment is being processed,
+   * sends a request to the server to make the payment, and updates the state with the response.
+   * If the payment is successful, it also dispatches an action to reload the wallet table.
+   */
   const handlePrevCard = async () => {
-    const { amount, credit_reference, currency } = __confirmData;
-    const { card_uid } = __confirmCardDetails;
-
-    const reqData = {
-      amount: amount * 100,
-      card_uid,
-      credit_reference,
-      currency,
-    };
-
     try {
+      // Show loader while the payment is being processed
       setConfirmCredit((prev) => ({
         ...prev,
         show: {
           acceptConfirm: { loader: true },
         },
       }));
+
+      // Extract necessary data from confirmCredit and confirmCardDetails objects
+      const { amount, credit_reference, currency } = __confirmData;
+      const { card_uid } = __confirmCardDetails;
+
+      // Create request data object with required parameters for making the payment
+      const reqData = {
+        amount: amount * 100,
+        card_uid,
+        credit_reference,
+        currency,
+      };
+
+      // Send request to server to make the payment using getPaidPrevCard method of usersService
       const res = await apiURL.getPaidPrevCard(reqData);
       const _response = res.data;
-      if (res.data.internal_return < 0) {
+
+      // If internal_return value in the response is less than 0, hide the loader and return
+      if (_response.internal_return < 0) {
         setConfirmCredit((prev) => ({
           ...prev,
           show: {
@@ -218,6 +238,7 @@ function ConfirmAddFund({
         return;
       }
 
+      // Update state to show the acceptConfirm state and the response data
       setTimeout(() => {
         setConfirmCredit((prev) => ({
           ...prev,
@@ -227,9 +248,11 @@ function ConfirmAddFund({
           },
           data: _response,
         }));
+        // Dispatch an action to reload the wallet table
         dispatch(tableReload({ type: "WALLETTABLE" }));
       }, 1500);
     } catch (error) {
+      // Handle error and hide the loader
       setConfirmCredit((prev) => ({
         ...prev,
         show: {
@@ -240,45 +263,44 @@ function ConfirmAddFund({
     }
   };
 
+  /**
+   * Handles the payment process when a new card is used.
+   * @async
+   */
   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 {
+      // Extract necessary data from __confirmData and __confirmCardDetails
+      const { amount, credit_reference, uid } = __confirmData;
+      const { address, cardNum, cvv, expirationMonth, expirationYear } = __confirmCardDetails;
+
+      // Set loading state to indicate payment is being processed
       setConfirmCredit((prev) => ({
         ...prev,
         show: {
           acceptConfirm: { loader: true },
         },
       }));
+
+      // Prepare request data
+      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,
+      };
+
+      // Send request to server to process payment
       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(() => {
+      // Handle response from server
+      if (res.data.internal_return < 0) {
+        // Payment could not be completed
         setConfirmCredit((prev) => ({
           ...prev,
           show: {
@@ -287,9 +309,23 @@ function ConfirmAddFund({
           },
           data: _response,
         }));
-        dispatch(tableReload({ type: "WALLETTABLE" }));
-      }, 1500);
+      } else {
+        // Payment was successful
+        setTimeout(() => {
+          setConfirmCredit((prev) => ({
+            ...prev,
+            show: {
+              awaitConfirm: { loader: false, state: false },
+              acceptConfirm: { loader: false, state: true },
+            },
+            data: _response,
+          }));
+          console.log("Show meeeeeeeeee");
+          dispatch(tableReload({ type: "WALLETTABLE" }));
+        }, 1500);
+      }
     } catch (error) {
+      // Handle error during payment process
       setConfirmCredit((prev) => ({
         ...prev,
         show: {
@@ -362,7 +398,7 @@ function ConfirmAddFund({
                     <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">
+                    <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
                       {__confirmData?.credit_reference}
                     </span>
                   </div>

src/components/MyWallet/Popup/CreditPopup.jsx

@@ -6,7 +6,7 @@ import CompleteConfirmCredit from "./CompleteConfirmCredit";
 import ConfirmAddFund from "./ConfirmAddFund";
 
 const CreditPopup = ({ details, onClose, situation, walletItem }) => {
-  let [input, setInput] = useState("");
+  const [input, setInput] = useState("");
   const [confirmCredit, setConfirmCredit] = useState({
     show: {
       awaitConfirm: { loader: false, state: false },
@@ -15,6 +15,8 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
     data: {},
   });
 
+  console.log(confirmCredit);
+
   return (
     <ModalCom
       action={onClose}

src/components/MyWallet/Popup/NairaWithdraw.jsx

@@ -12,6 +12,8 @@ function NairaWithdraw({
   state,
   setShowConfirmNairaWithdraw,
 }) {
+
+  let MaxNoOfBanks = process.env.REACT_APP_MAX_CREDIT_BANK_ACCOUNT // HOLDS THE VALUE OF THE MAX NUMBER OF BANKS USER CAN ADD
   const apiCall = new usersService();
   const [tab, setTab] = useState("previous");
   let [requestStatus, setRequestStatus] = useState(false);
@@ -422,7 +424,7 @@ function NairaWithdraw({
                         <label
                           onClick={() => setTab("new")}
                           htmlFor="new"
-                          className="cursor-pointer flex items-center gap-1"
+                          className={`cursor-pointer flex items-center gap-1 ${recipients.data.length >= MaxNoOfBanks ? 'pointer-events-none':''}`}
                         >
                           <input
                             id="new"
@@ -434,7 +436,7 @@ function NairaWithdraw({
                               tab == "new" ? "" : ""
                             }  tracking-wide transition duration-200`}
                           />
-                          New Account{" "}
+                          New Account{" "} {recipients.data.length >= MaxNoOfBanks && <span className="text-[14px] text-red-500">Max Reached</span>}
                         </label>
                       </div>
                     </div>
@@ -522,273 +524,280 @@ function NairaWithdraw({
                       )}
 
                       {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 tracking-[1.5px]"
-                                  name="newAccount.country"
-                                  value={props.values.newAccount?.country}
-                                  onChange={(e) => {
-                                    props.handleChange(e);
-                                    handleBankOptions(e);
-                                  }}
-                                >
-                                  {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] tracking-[1.5px]"
-                                >
-                                  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.bank_uid}
-                                        >
-                                          {item.name}
-                                        </option>
-                                      ))}
-                                    </>
-                                  ) : (
-                                    <option
-                                      className="text-slate-500 text-lg"
-                                      value=""
-                                    >
-                                      {allCountries.data?.length
-                                        ? "Select..."
-                                        : "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 tracking-[1.5px]"
-                                  inputClass="flex items-center max-w-[15rem]"
-                                  type="text"
-                                  name="newAccount.accountNumber"
-                                  placeholder="Account No"
-                                  maxLength={10}
-                                  value={props.values.newAccount?.accountNumber}
-                                  inputHandler={props.handleChange}
-                                  blurHandler={props.handleBlur}
-                                />
-                                {/* {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 tracking-[1.5px]"
-                                  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 tracking-[1.5px]"
-                                  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 tracking-[1.5px]"
-                                  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 */}
+                        recipients.loading ?
+                          <div className="mt-3 flex flex-col w-full h-[188px] justify-center items-center">
+                            <LoadingSpinner size='10' color='sky-blue' />
                           </div>
-                        </div>
+                        :recipients.data.length < MaxNoOfBanks ?
+                          <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 tracking-[1.5px]"
+                                    name="newAccount.country"
+                                    value={props.values.newAccount?.country}
+                                    onChange={(e) => {
+                                      props.handleChange(e);
+                                      handleBankOptions(e);
+                                    }}
+                                  >
+                                    {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] tracking-[1.5px]"
+                                  >
+                                    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.bank_uid}
+                                          >
+                                            {item.name}
+                                          </option>
+                                        ))}
+                                      </>
+                                    ) : (
+                                      <option
+                                        className="text-slate-500 text-lg"
+                                        value=""
+                                      >
+                                        {allCountries.data?.length
+                                          ? "Select..."
+                                          : "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 tracking-[1.5px]"
+                                    inputClass="flex items-center max-w-[15rem]"
+                                    type="text"
+                                    name="newAccount.accountNumber"
+                                    placeholder="Account No"
+                                    maxLength={10}
+                                    value={props.values.newAccount?.accountNumber}
+                                    inputHandler={props.handleChange}
+                                    blurHandler={props.handleBlur}
+                                  />
+                                  {/* {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 tracking-[1.5px]"
+                                    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 tracking-[1.5px]"
+                                    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 tracking-[1.5px]"
+                                    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 className="mt-3 flex w-full h-[188px] justify-center items-center"></div>
                       )}
                     </div>
 

src/components/MyWallet/WalletBox.jsx

@@ -13,7 +13,10 @@ export default function WalletBox({ wallet, payment }) {
               </div>
             ) : wallet.data.length ? (
               wallet.data.map((item, index) => (
-                <div key={item.wallet_uid} className="lg:w-full h-full mb-10 lg:mb-0">
+                <div
+                  key={item.wallet_uid}
+                  className="lg:w-full h-full mb-10 lg:mb-0"
+                >
                   <WalletItemCard walletItem={item} payment={payment} />
                 </div>
               ))

src/components/MyWallet/WalletHeader.jsx

@@ -13,6 +13,12 @@ export default function WalletHeader(props) {
   //props.myWalletList.result_list
   let { pathname } = useLocation();
   let navigate = useNavigate();
+
+  const onWalletClick = () => {
+    if (pathname == "/my-wallet")
+      props.setBalanceDropdown.toggle();
+    else navigate("/my-wallet", { replace: true });
+  }
   return (
     <>
       <div className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px]  items-center rounded-full relative  bg-sky-blue pr-1.5 pl-4">
@@ -49,6 +55,7 @@ export default function WalletHeader(props) {
                     <li
                       key={index}
                       className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple"
+                      onClick={onWalletClick}
                     >
                       <div className="sm:flex justify-between items-center">
                         <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
@@ -56,7 +63,7 @@ export default function WalletHeader(props) {
                             <img src={localImgLoad(`images/currency/${image}`)} className="w-14 h-14" alt="" />
                           </div>
                           <div className="name">
-                            <p className="text-base text-dark-gray dark:text-white font-medium">
+                            <p className="text-2xl font-bold text-dark-gray dark:text-white">
                               {value.description}
                             </p>
                           </div>
@@ -178,11 +185,7 @@ export default function WalletHeader(props) {
                             </button> */}
               <Link
                 to="/my-wallet"
-                onClick={() => {
-                  if (pathname == "/my-wallet")
-                    props.setBalanceDropdown.toggle();
-                  else navigate("/my-wallet", { replace: true });
-                }}
+                onClick={onWalletClick}
                 className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
               >
                 Manage

src/components/MyWallet/WalletItemCard.jsx

@@ -7,10 +7,6 @@ import CreditPopup from "./Popup/CreditPopup";
 import WalletAction from "./WalletAction";
 
 export default function WalletItemCard({ walletItem, payment }) {
-  //   const [eth] = useState(90);
-  //   const [btc] = useState(85);
-  //   const [ltc] = useState(20);
-
   const { userDetails } = useSelector((state) => state?.userDetails);
   let accountType = userDetails?.account_type == "FAMILY";
 

src/components/Partials/Layout.jsx

@@ -156,7 +156,7 @@ export default function Layout({ children }) {
                   fill="none"
                   xmlns="http://www.w3.org/2000/svg"
                 >
-                  <circle cx="68" cy="68" r="68" fill="#5356FB" />
+                  <circle cx="68" cy="68" r="68" fill="#4687ba" />
                   <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"

src/components/Settings/Tabs/DeleteCardPopout.jsx

@@ -69,7 +69,7 @@ function DeleteCardPopout({action, situation, data, setReloadCardList}) {
                     fill="none"
                     xmlns="http://www.w3.org/2000/svg"
                 >
-                    <circle cx="68" cy="68" r="68" fill="#5356FB" />
+                    <circle cx="68" cy="68" r="68" fill="#4687ba" />
                     <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"

src/components/jobPopout/DeleteJobPopout.jsx

@@ -103,7 +103,7 @@ function DeleteJobPopout({ details, onClose, situation }) {
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <circle cx="68" cy="68" r="68" fill="#5356FB" />
+              <circle cx="68" cy="68" r="68" fill="#4687ba" />
               <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"

src/components/jobPopout/JobListPopout.jsx

@@ -1,11 +1,11 @@
+import { Field, Form, Formik } from "formik";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import Detail from "./popoutcomponent/Detail";
-import ModalCom from "../Helpers/ModalCom";
-import InputCom from "../Helpers/Inputs/InputCom/index";
-import SiteService from "../../services/SiteService";
-import { Form, Formik, Field } from "formik";
 import * as Yup from "yup";
+import SiteService from "../../services/SiteService";
+import InputCom from "../Helpers/Inputs/InputCom/index";
+import ModalCom from "../Helpers/ModalCom";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
+import Detail from "./popoutcomponent/Detail";
 
 const validationSchema = Yup.object().shape({
   family: Yup.string().required("This is required "),
@@ -202,7 +202,7 @@ function JobListPopout({ details, onClose, situation }) {
             </svg>
           </button>
         </div>
-        <div className="md:flex bg-white rounded-lg shadow-lg">
+        <div className="md:flex bg-white dark:bg-dark-white rounded-lg shadow-lg">
           <div className="p-4 w-full md:w-2/4 md:border-r-2">
             {/* <p className='text-lg font-semibold text-slate-900 tracking-wide'>{details.title}</p> */}
 
@@ -225,16 +225,16 @@ function JobListPopout({ details, onClose, situation }) {
             <div className="my-3 md:flex">
               <Detail
                 label="Created"
-                value={`Dummy, no value found for created!`}
-              />
+                value={new Date(details?.created).toDateString()}//{`Dummy, no value found for created!`}
+                />
             </div>
 
             <div className="my-3">
-              <label className="w-full text-slate-900 tracking-wide font-semibold">
+              <label className="w-full text-slate-900 dark:text-white tracking-wide font-semibold">
                 Delivery Detail
               </label>
               <textarea
-                className={`p-1 w-full text-sm text-slate-900 outline-none border border-slate-300 rounded-md`}
+                className={`p-1 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
                 rows="5"
                 style={{ resize: "none" }}
                 value={textArea}
@@ -322,7 +322,7 @@ function JobListPopout({ details, onClose, situation }) {
                       input={true}
                       inputName="individual"
                       value={props?.values.individual}
-                      placeholder="enter email of individual"
+                      placeholder="Enter email of individual"
                       inputHandler={props?.handleChange}
                       btnText="Send Offer to Individual"
                       loader={loader?.jobFields.individual}
@@ -396,7 +396,7 @@ const JobFieldInput = ({
   data,
 }) => {
   return (
-    <div className="field w-full p-3 mb-2 bg-red-50 rounded-md">
+    <div className="field w-full p-3 mb-2 bg-red-50 dark:bg-[#D85A5A] rounded-md">
       {select && (
         <>
           <div className={`input-com ${parentClass}`}>
@@ -468,7 +468,10 @@ const JobFieldInput = ({
           type="submit"
           name={inputName}
           onClick={errorHandler}
-          className="px-2 py-1 text-sm text-white btn-gradient tracking-wide rounded-md"
+          className={`px-2 py-1 text-sm text-white btn-gradient tracking-wide rounded-md ${
+            !value && "disabled:grayscale-[65%] transition duration-300"
+          }`}
+          disabled={!value}
         >
           {loader ? <LoadingSpinner size={5} /> : btnText}
         </button>

src/components/jobPopout/PendingJobsPopout.jsx

@@ -1,11 +1,11 @@
-import React, { useMemo, useState } from "react";
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import usersService from "../../services/UsersService";
 import ModalCom from "../Helpers/ModalCom";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import Detail from "./popoutcomponent/Detail";
-import { useNavigate } from "react-router-dom";
 
 import { useDispatch } from "react-redux";
 import { tableReload } from "../../store/TableReloads";
@@ -18,85 +18,95 @@ const showSuccessToast = (message) => {
 };
 
 function PendingJobsPopout({ details, onClose, situation }) {
-
-  const dispatch = useDispatch()
-  const navigate = useNavigate()
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
 
   const [pendingJobLoader, setPendingJobLoader] = useState({
     extend: false,
     offer: false,
   });
 
-  let [requestMessage, setRequestMessage] = useState({status: false, message: ''})
+  let [requestMessage, setRequestMessage] = useState({
+    status: false,
+    message: "",
+  });
 
   const apiCall = new usersService();
 
   const handlePendingJobsBtn = ({ target: { name } }) => {
-      let { job_uid, offer_code } = details;
+    let { job_uid, offer_code } = details;
 
-      let reqData;
+    let reqData;
 
-      let pendingData = { job_uid, offer_code };
-      if(name=='extend'){ // RUNS THIS TO EXTEND JOB EXPIRY BY ONE WEEK
-        reqData = { ...pendingData };
-        setPendingJobLoader({ extend: true });
-        apiCall.pendingJobExtend(reqData).then(res => {
-          setRequestMessage({status: true, message: res.data.status})
+    let pendingData = { job_uid, offer_code };
+    if (name == "extend") {
+      // RUNS THIS TO EXTEND JOB EXPIRY BY ONE WEEK
+      reqData = { ...pendingData };
+      setPendingJobLoader({ extend: true });
+      apiCall
+        .pendingJobExtend(reqData)
+        .then((res) => {
+          setRequestMessage({ status: true, message: res.data.status });
           setTimeout(() => {
             setPendingJobLoader({ extend: false, offer: false });
-            setRequestMessage({status: false, message: ''})
+            setRequestMessage({ status: false, message: "" });
             onClose();
             dispatch(tableReload({ type: "PENDINGTABLE" }));
           }, 4000);
-        }).catch(error => {
-          setRequestMessage({status: false, message:'Try Again'})
-          setTimeout(() => {
-            setPendingJobLoader({ extend: false, offer: false });
-            setRequestMessage({status: false, message: ''})
-          }, 3000);
         })
-      }else if(name=='offer'){ // RUNS THIS IF JOB IS SENT TO USER
-        reqData = { ...pendingData };
-        setPendingJobLoader({ offer: true });
-        apiCall.pendingJobSendTome(reqData).then(res => {
-          setRequestMessage({status: true, message: res.data.status})
+        .catch((error) => {
+          setRequestMessage({ status: false, message: "Try Again" });
           setTimeout(() => {
             setPendingJobLoader({ extend: false, offer: false });
-            setRequestMessage({status: false, message: ''})
+            setRequestMessage({ status: false, message: "" });
+          }, 3000);
+        });
+    } else if (name == "offer") {
+      // RUNS THIS IF JOB IS SENT TO USER
+      reqData = { ...pendingData };
+      setPendingJobLoader({ offer: true });
+      apiCall
+        .pendingJobSendTome(reqData)
+        .then((res) => {
+          setRequestMessage({ status: true, message: res.data.status });
+          setTimeout(() => {
+            setPendingJobLoader({ extend: false, offer: false });
+            setRequestMessage({ status: false, message: "" });
           }, 4000);
-        }).catch(error => {
-          setRequestMessage('Try Again')
+        })
+        .catch((error) => {
+          setRequestMessage("Try Again");
           setTimeout(() => {
             setPendingJobLoader({ extend: false, offer: false });
-            setRequestMessage({status: false, message: ''})
+            setRequestMessage({ status: false, message: "" });
           }, 3000);
-        })
-      } else return
-      // try {
-      //   if (name === "extend") {
-      //     setPendingJobLoader({ extend: true });
-      //     reqData = { ...pendingData };
-      //     // let { data } =
-      //     await apiCall.pendingJobExtend(reqData);
-      //     showSuccessToast("Job has been extended by a week!");
-      //     dispatch(tableReload({ type: "PENDINGTABLE" }));
-      //   } else if (name === "offer") {
-      //     setPendingJobLoader({ offer: true });
-      //     reqData = { ...pendingData };
-      //     // let { data } =
-      //     await apiCall.pendingJobSendTome(reqData);
-      //     showSuccessToast("Offer sent, check your email");
-      //   } else return;
+        });
+    } else return;
+    // try {
+    //   if (name === "extend") {
+    //     setPendingJobLoader({ extend: true });
+    //     reqData = { ...pendingData };
+    //     // let { data } =
+    //     await apiCall.pendingJobExtend(reqData);
+    //     showSuccessToast("Job has been extended by a week!");
+    //     dispatch(tableReload({ type: "PENDINGTABLE" }));
+    //   } else if (name === "offer") {
+    //     setPendingJobLoader({ offer: true });
+    //     reqData = { ...pendingData };
+    //     // let { data } =
+    //     await apiCall.pendingJobSendTome(reqData);
+    //     showSuccessToast("Offer sent, check your email");
+    //   } else return;
 
-      //   setTimeout(() => {
-      //     setPendingJobLoader({ extend: false, offer: false });
-      //     onClose();
-      //   }, 2700);
-      // } catch (error) {
-      //   setPendingJobLoader({ extend: false, offer: false });
-      //   throw new Error(error);
-      // }
-    }
+    //   setTimeout(() => {
+    //     setPendingJobLoader({ extend: false, offer: false });
+    //     onClose();
+    //   }, 2700);
+    // } catch (error) {
+    //   setPendingJobLoader({ extend: false, offer: false });
+    //   throw new Error(error);
+    // }
+  };
 
   return (
     <ModalCom action={onClose} situation={situation} className="edit-popup">
@@ -131,9 +141,9 @@ function PendingJobsPopout({ details, onClose, situation }) {
             </svg>
           </button>
         </div>
-        <div className="md:flex bg-white rounded-lg shadow-lg">
+        <div className="md:flex bg-white dark:bg-dark-white rounded-lg shadow-lg">
           <div className="p-4 w-full md:w-3/4 md:border-r-2">
-            <p className="text-base font-semibold text-slate-900 tracking-wide">
+            <p className="text-base font-semibold text-slate-900 dark:text-white tracking-wide">
               {details.title}
             </p>
             <div className="my-2 p-2 flex justify-start items-center space-x-2 bg-red-100 border-2 border-red-300">
@@ -177,7 +187,11 @@ function PendingJobsPopout({ details, onClose, situation }) {
               <Detail
                 label="Price"
                 // value={`${details.price * 0.01} ${details.currency}`}
-                value={PriceFormatter(details.price * 0.01, details?.currency_code, details.currency)}
+                value={PriceFormatter(
+                  details.price * 0.01,
+                  details?.currency_code,
+                  details.currency
+                )}
               />
             </div>
 
@@ -194,19 +208,11 @@ function PendingJobsPopout({ details, onClose, situation }) {
                 value={details.job_description || details.description}
               />
             </div>
-
-            {/* <div className="my-2 md:flex">
-              <Detail
-                label="Public Link"
-                value="https://work.wrenchboard.com/plb/viewjob/218B4BWB83"
-                bg="bg-slate-200"
-              />
-            </div> */}
           </div>
 
           {/* ACTION SECTION */}
           <div className="p-4 w-full md:w-1/4 h-full">
-            <p className="mb-6 text-sm">Actions</p>
+            <p className="mb-6 text-sm dark:text-white">Actions</p>
 
             <div className="mb-3">
               <p className="px-2 py-1 text-sm bg-slate-100">
@@ -229,11 +235,15 @@ function PendingJobsPopout({ details, onClose, situation }) {
                 )}
               </button>
             </div>
-            {pendingJobLoader.extend && requestMessage.message &&
-              <div className={`p-1 ${requestMessage.status ? 'bg-green-500':'bg-red-500'} text-white rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}>
+            {pendingJobLoader.extend && requestMessage.message && (
+              <div
+                className={`p-1 ${
+                  requestMessage.status ? "bg-green-500" : "bg-red-500"
+                } text-white rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+              >
                 <p>{requestMessage.message}</p>
               </div>
-            }
+            )}
 
             <div className="my-3">
               <button
@@ -251,11 +261,15 @@ function PendingJobsPopout({ details, onClose, situation }) {
               </button>
             </div>
 
-            {pendingJobLoader.offer && requestMessage.message &&
-              <div className={`p-1 ${requestMessage.status ? 'bg-green-500':'bg-red-500'} text-white rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}>
+            {pendingJobLoader.offer && requestMessage.message && (
+              <div
+                className={`p-1 ${
+                  requestMessage.status ? "bg-green-500" : "bg-red-500"
+                } text-white rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+              >
                 <p>{requestMessage.message}</p>
               </div>
-            }
+            )}
 
             <div className="mt-10 md:mt-32 md:flex md:justify-center">
               <button
@@ -284,4 +298,4 @@ function PendingJobsPopout({ details, onClose, situation }) {
   );
 }
 
-export default PendingJobsPopout;
+export default PendingJobsPopout;

src/lib/fomattedDate.js

@@ -1,4 +1,4 @@
-export default function formattedDate(dateString) {
+export function formattedDate(dateString) {
   const parts = dateString.split(" ");
   const datePart = parts[0];
   const timePart = parts[1];
@@ -15,3 +15,26 @@ export default function formattedDate(dateString) {
 
   return new Date(year, month - 1, day, hour, minute);
 }
+
+export function formatDateString(inputDateString) {
+  // Parse the input date string
+  const parsedDate = new Date(inputDateString);
+
+  // Get day, month, year, and time components
+  const day = parsedDate.toLocaleDateString(undefined, { weekday: "long" });
+  const month = parsedDate.toLocaleDateString(undefined, { month: "short" });
+  const date = parsedDate.toLocaleDateString(undefined, { day: "numeric" });
+  const year = parsedDate.toLocaleDateString(undefined, { year: "numeric" });
+
+  // Get the time in 12-hour format with 'AM' or 'PM'
+  const hours = parsedDate.getHours();
+  const minutes = parsedDate.getMinutes();
+  const time = `${hours % 12 || 12}:${minutes.toString().padStart(2, "0")} ${
+    hours < 12 ? "AM" : "PM"
+  }`;
+
+  // Combine the components into the desired format
+  const formattedDate = `${day}, ${month} ${date} ${year} - ${time}`;
+
+  return formattedDate;
+}

src/lib/index.js

@@ -1,12 +1,13 @@
 import ClearCookies from "./ClearCookies";
 import checkAndSetError from "./checkAndSetError";
-import formattedDate from "./fomattedDate";
+import { formatDateString, formattedDate } from "./fomattedDate";
 import getTimeAgo from "./getTimeAgo";
 import localImgLoad from "./localImgLoad";
 
 export {
   ClearCookies,
   checkAndSetError,
+  formatDateString,
   formattedDate,
   getTimeAgo,
   localImgLoad,

src/middleware/AuthRoute.jsx

@@ -2,7 +2,6 @@ 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";
@@ -11,6 +10,7 @@ import { updateJobs } from "../store/jobLists";
 import { updateNotifications } from "../store/notifications";
 import { updateUserJobList } from "../store/userJobList";
 import { updateWalletDetails } from "../store/walletDetails";
+import { formattedDate } from "../lib";
 
 const AuthRoute = ({ redirectPath = "/login", children }) => {
   const apiCall = useMemo(() => new usersService(), []);

src/services/SiteService.js

@@ -1,107 +1,113 @@
-import React from "react";
 import Axios from "axios";
 
 class SiteService {
-    constructor() {
-        console.log("Er are here anyway");
-    }
-    // Blog Data {Get}
-    blogData() {
-        return this.getAuxEnd("/blogdata", null);
-    }
+  constructor() {
+    console.log("Er are here anyway");
+  }
+  // Blog Data {Get}
+  blogData() {
+    return this.getAuxEnd("/blogdata", null);
+  }
 
-    // Country Data {GET}
-    countryData() {
-        return this.getAuxEnd("/country", null);
-    }
+  // Country Data {GET}
+  countryData() {
+    return this.getAuxEnd("/country", null);
+  }
 
-    // Contact Data{POST}
-    contactData() {
-        return this.postAuxEnd("/contact", null)
-    }
+  // Contact Data{POST}
+  contactData() {
+    return this.postAuxEnd("/contact", null);
+  }
 
-    faqData() {
-        return this.getAuxEnd("/faq", null);
-    }
+  faqData() {
+    return this.getAuxEnd("/faq", null);
+  }
 
-    priceData() {
-        return this.getAuxEnd("/pricing", null);
-    }
+  priceData() {
+    return this.getAuxEnd("/pricing", null);
+  }
 
-    addFamily(reqData) {
-        return this.postAuxEnd('/familyadd', reqData)
-    }
+  addFamily(reqData) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: 22015,
+      ...reqData,
+    };
+    return this.postAuxEnd("/familyadd", postData);
+  }
 
-    familyListings(reqData) {
-        var postData = {
-            uid: localStorage.getItem("uid"),
-            member_id: localStorage.getItem("member_id"),
-            sessionid: localStorage.getItem("session_token"),
-           ...reqData
-          };
-        return this.postAuxEnd('/familylist', postData)
-    }
+  familyListings(reqData) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      ...reqData,
+    };
+    return this.postAuxEnd("/familylist", postData);
+  }
 
-    assignJobTask(reqData) {
-        var postData = {
-            uid: localStorage.getItem("uid"),
-            member_id: localStorage.getItem("member_id"),
-            sessionid: localStorage.getItem("session_token"),
-           ...reqData
-          };
-        return this.postAuxEnd('/assigntask', postData)
-    }
+  assignJobTask(reqData) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      ...reqData,
+    };
+    return this.postAuxEnd("/assigntask", postData);
+  }
 
-    //----------------------------------------  -----
-    //----------------------------------------  -----
-    // Unified call below
-    //----------------------------------------  -----
-    //----------------------------------------  -----
-    getAuxEnd(uri, reqData) {
-        const endPoint = process.env.REACT_APP_AUX_ENDPOINT + uri;
-        return Axios.get(endPoint)
-            .then((response) => {
-                // console.log(response);
-                // res = response;
-                // console.log("~~~~~~~ Toks2 GET ~~~~~~~~");
-                return response;
-            })
-            .catch((error) => {
-                if (error.response) {
-                    //response status is an error code
-                    console.log(error.response.status);
-                } else if (error.request) {
-                    //response not received though the request was sent
-                    console.log(error.request);
-                } else {
-                    //an error occurred when setting up the request
-                    console.log(error.message);
-                }
-            });
-    }
+  //----------------------------------------  -----
+  //----------------------------------------  -----
+  // Unified call below
+  //----------------------------------------  -----
+  //----------------------------------------  -----
+  getAuxEnd(uri, reqData) {
+    const endPoint = process.env.REACT_APP_AUX_ENDPOINT + uri;
+    return Axios.get(endPoint)
+      .then((response) => {
+        // console.log(response);
+        // res = response;
+        // console.log("~~~~~~~ Toks2 GET ~~~~~~~~");
+        return response;
+      })
+      .catch((error) => {
+        if (error.response) {
+          //response status is an error code
+          console.log(error.response.status);
+        } else if (error.request) {
+          //response not received though the request was sent
+          console.log(error.request);
+        } else {
+          //an error occurred when setting up the request
+          console.log(error.message);
+        }
+      });
+  }
 
-    postAuxEnd(uri, reqData) {
-        const endPoint = process.env.REACT_APP_AUX_ENDPOINT + uri;
-        return Axios.post(endPoint, reqData)
-            .then((response) => {
-                console.log(response);
-                // res = response;
-                console.log("~~~~~~~ Toks2 POST ~~~~~~~~");
-                return response;
-            })
-            .catch((error) => {
-                if (error.response) {
-                    //response status is an error code
-                    console.log(error.response.status);
-                } else if (error.request) {
-                    //response not received though the request was sent
-                    console.log(error.request);
-                } else {
-                    //an error occurred when setting up the request
-                    console.log(error.message);
-                }
-            });
-    }
+  postAuxEnd(uri, reqData) {
+    const endPoint = process.env.REACT_APP_AUX_ENDPOINT + uri;
+    return Axios.post(endPoint, reqData)
+      .then((response) => {
+        console.log(response);
+        // res = response;
+        console.log("~~~~~~~ Toks2 POST ~~~~~~~~");
+        return response;
+      })
+      .catch((error) => {
+        if (error.response) {
+          //response status is an error code
+          console.log(error.response.status);
+        } else if (error.request) {
+          //response not received though the request was sent
+          console.log(error.request);
+        } else {
+          //an error occurred when setting up the request
+          console.log(error.message);
+        }
+      });
+  }
 }
 
 export default SiteService;

src/views/AddJobPage.jsx

@@ -5,27 +5,32 @@ import ModalCom from "../components/Helpers/ModalCom";
 function AddJobPage({ action, situation, categories }) {
   return (
     <ModalCom action={action} situation={situation} className="edit-popup">
-      <div className="lg:w-[600px] w-full lg:overflow-hidden lg:rounded-2xl bg-white dark:bg-dark-white  ">
-        <div className="heading flex justify-between items-center py-6  md:px-[30px] px-[23px] border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29] ">
+      <div className="lg:w-[600px] w-full lg:overflow-hidden lg:rounded-2xl bg-white dark:bg-dark-white dark:text-white">
+        <div className="heading flex justify-between items-center py-6  md:px-[30px] px-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
           <p className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             Create New Job
           </p>
-          <button type="button" onClick={action}>
+          <button
+            type="button"
+            className="text-[#374557] dark:text-red-500"
+            onClick={action}
+          >
             <svg
-              width="32"
-              height="32"
-              viewBox="0 0 32 32"
+              width="36"
+              height="36"
+              viewBox="0 0 36 36"
               fill="none"
+              className="fill-current"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M32 14.3645C32 15.5022 32 16.6399 32 17.7779C31.8143 17.8408 31.8787 18.0048 31.8565 18.1334C30.6952 24.8402 26.8853 29.2664 20.4091 31.362C19.4672 31.6668 18.4669 31.7917 17.4935 31.9997C16.3558 31.9997 15.2181 31.9997 14.0801 31.9997C13.8574 31.741 13.5279 31.7984 13.2475 31.7416C6.90872 30.4552 2.74424 26.7311 0.684152 20.6107C0.386668 19.7268 0.396442 18.7733 0 17.9199C0 16.6399 0 15.3598 0 14.0798C0.259 13.884 0.190585 13.5694 0.240675 13.3162C1.52285 6.84244 5.35655 2.66392 11.5936 0.623067C12.4549 0.34116 13.3785 0.343909 14.2221 0C15.3125 0 16.4029 0 17.4932 0C17.525 0.110258 17.6111 0.120948 17.7089 0.130417C24.2666 0.77242 29.8064 5.52819 31.449 11.9351C31.6552 12.739 31.8174 13.5542 32 14.3645ZM29.3431 16.0699C29.3718 8.68538 23.4154 2.66942 16.0684 2.66178C8.69759 2.65445 2.66972 8.58489 2.65353 15.8601C2.63704 23.2563 8.52319 29.2979 15.7868 29.3404C23.2862 29.3846 29.3144 23.4832 29.3431 16.0699Z"
-                fill="#374557"
+                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="M14.1604 16.0221C12.3843 14.2567 10.6724 12.5534 8.95837 10.8525C8.53353 10.431 8.23421 9.97162 8.46175 9.34031C8.83956 8.29209 9.95101 8.07371 10.794 8.906C12.3611 10.4536 13.9344 11.9963 15.4529 13.5909C15.9202 14.0817 16.1447 14.0005 16.5662 13.5643C18.0961 11.9804 19.6617 10.4307 21.2282 8.88248C22.0596 8.06058 23.208 8.30064 23.5522 9.35008C23.7584 9.97865 23.459 10.4383 23.0336 10.8619C21.489 12.3991 19.9531 13.9443 18.4088 15.4815C18.2421 15.6476 18.0408 15.779 17.8188 15.9558C19.629 17.7563 21.366 19.4676 23.0831 21.1987C23.934 22.0567 23.6875 23.2106 22.6072 23.556C21.9658 23.761 21.5223 23.4186 21.1067 23.0023C19.5502 21.444 17.9757 19.9031 16.448 18.3171C16.0616 17.9157 15.8854 17.9811 15.5375 18.3378C13.9835 19.9318 12.399 21.4956 10.8242 23.0692C10.4015 23.4916 9.94887 23.7768 9.30961 23.516C8.27819 23.0948 8.06073 22.0814 8.87591 21.2418C10.0307 20.0528 11.2118 18.8891 12.3895 17.7221C12.9588 17.1577 13.5462 16.6106 14.1604 16.0221Z"
-                fill="#374557"
+                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>

src/views/MarketPlacePage.jsx

@@ -1,5 +1,4 @@
 import MarketPlace from "../components/MarketPlace";
-
 import { useSelector } from "react-redux";
 
 export default function MarketPlacePage() {