added limit to card and account adding

.env

@@ -74,3 +74,9 @@ 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

@@ -46,3 +46,8 @@ 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

@@ -52,3 +52,8 @@ REACT_APP_TOTAL_NUM_FILE=4
 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/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}
         >
+          {data?.data?.length > 1 ?
+            <>
             <option value={""}>Select your Country</option>
-          {data?.length > 0 &&
+            {data?.data?.map((item, idx) => (
-            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/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,15 +40,12 @@ 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 ? (
-        :
-        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">Last Login</th> */}
                 <th className="py-4 text-center">No of Tasks</th>
                 <th className="py-4 text-right"></th>
               </tr>
@@ -55,10 +60,13 @@ export default function FamilyTable({ className, familyList, loader, popUpHandle
                   last_login,
                   task_count,
                   family_uid,
-                        banner
+                  banner,
                 } = props;
                 let addedDate = added?.split(" ")[0];
-                      let LoginDate = last_login?.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"
@@ -84,16 +92,22 @@ export default function FamilyTable({ className, familyList, loader, popUpHandle
                               {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">
+                    {/* <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> */}
                     <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">
@@ -116,16 +130,15 @@ export default function FamilyTable({ className, familyList, loader, popUpHandle
                     </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,11 +148,10 @@ 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

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,6 +316,11 @@ function AddFundDollars(props) {
 
         {tab === "new" && (
           <div className="new-details w-full max-h-[22rem]">
+            {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}
@@ -553,6 +560,9 @@ function AddFundDollars(props) {
                   }}
                 </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;
+  const { cardNum } = value;
-  value.description =
+  let description = value.description;
-    type === "new"
+  let digits = value.digits;
-      ? cardDetails.cardNum[0] === "4"
+
-        ? "Visa"
+  if (type === "new") {
-        : cardDetails.cardNum[0] == "5"
+    const firstDigit = cardNum[0];
-        ? "Master"
+    if (firstDigit === "4") {
-        : "ATM"
+      description = "Visa";
-      : value.description;
+    } else if (firstDigit === "5") {
-  value.digits = type === "new" ? cardDetails.cardNum.slice(-4) : value.digits;
+      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">
+        <h1 className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1 space-x-1">
-          {value.description} Card
+          {description} Card
         </h1>
-        <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
+        <p className="text-xl font-normal text-dark-gray dark:text-white tracking-wide">
-          Bank **************{value.digits}
+          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,10 +195,27 @@ 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 () => {
+    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,
@@ -199,16 +223,12 @@ function ConfirmAddFund({
         currency,
       };
 
-    try {
+      // Send request to server to make the payment using getPaidPrevCard method of usersService
-      setConfirmCredit((prev) => ({
-        ...prev,
-        show: {
-          acceptConfirm: { loader: true },
-        },
-      }));
       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,11 +263,25 @@ function ConfirmAddFund({
     }
   };
 
+  /**
+   * Handles the payment process when a new card is used.
+   * @async
+   */
   const handleNewCard = async () => {
+    try {
+      // Extract necessary data from __confirmData and __confirmCardDetails
       const { amount, credit_reference, uid } = __confirmData;
-    const { address, cardNum, cvv, expirationMonth, expirationYear } =
+      const { address, cardNum, cvv, expirationMonth, expirationYear } = __confirmCardDetails;
-      __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, ""),
@@ -257,16 +294,13 @@ function ConfirmAddFund({
         uid,
       };
 
-    try {
+      // Send request to server to process payment
-      setConfirmCredit((prev) => ({
-        ...prev,
-        show: {
-          acceptConfirm: { loader: true },
-        },
-      }));
       const res = await apiURL.getPaidNewCard(reqData);
       const _response = res.data;
+
+      // Handle response from server
       if (res.data.internal_return < 0) {
+        // Payment could not be completed
         setConfirmCredit((prev) => ({
           ...prev,
           show: {
@@ -275,9 +309,8 @@ function ConfirmAddFund({
           },
           data: _response,
         }));
-        return;
+      } else {
-      }
+        // Payment was successful
-
         setTimeout(() => {
           setConfirmCredit((prev) => ({
             ...prev,
@@ -287,9 +320,12 @@ function ConfirmAddFund({
             },
             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,6 +524,11 @@ function NairaWithdraw({
                       )}
 
                       {tab == "new" && (
+                        recipients.loading ?
+                          <div className="mt-3 flex flex-col w-full h-[188px] justify-center items-center">
+                            <LoadingSpinner size='10' color='sky-blue' />
+                          </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]">
@@ -789,6 +796,8 @@ function NairaWithdraw({
                               {/* 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={() => {
+                onClick={onWalletClick}
-                  if (pathname == "/my-wallet")
-                    props.setBalanceDropdown.toggle();
-                  else navigate("/my-wallet", { replace: true });
-                }}
                 className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
               >
                 Manage

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/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,4 +1,3 @@
-import React from "react";
 import Axios from "axios";
 
 class SiteService {
@@ -17,7 +16,7 @@ class SiteService {
 
   // Contact Data{POST}
   contactData() {
-        return this.postAuxEnd("/contact", null)
+    return this.postAuxEnd("/contact", null);
   }
 
   faqData() {
@@ -29,7 +28,14 @@ class SiteService {
   }
 
   addFamily(reqData) {
-        return this.postAuxEnd('/familyadd', 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) {
@@ -37,9 +43,9 @@ class SiteService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-           ...reqData
+      ...reqData,
     };
-        return this.postAuxEnd('/familylist', postData)
+    return this.postAuxEnd("/familylist", postData);
   }
 
   assignJobTask(reqData) {
@@ -47,9 +53,9 @@ class SiteService {
       uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-           ...reqData
+      ...reqData,
     };
-        return this.postAuxEnd('/assigntask', postData)
+    return this.postAuxEnd("/assigntask", postData);
   }
 
   //----------------------------------------  -----