disabled send btn on successful transfer

src/components/AuthPages/Login/index.jsx

@@ -484,8 +484,7 @@ export default function Login() {
 
               {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
+                  This site is protected by a Captcha. Our Privacy Policy and Terms of Service apply.
-                  and Terms of Service apply.
                 </div>
               )}
             </div>

src/components/FamilyAcc/Tabs/FamilyProfile.jsx

@@ -1,35 +1,42 @@
 import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
-import usersService from "../../../services/UsersService";
-import { useNavigate } from "react-router-dom";
 
-import { Formik, Form } from "formik";
+import { Form, Formik } from "formik";
 import * as Yup from "yup";
 
-
+export default function FamilyProfile({ familyData, className }) {
-export default function FamilyProfile({familyData, className }) {
-
   const validationSchema = Yup.object().shape({
-    firstname: Yup.string()
+    firstname: Yup.string().required("Firstname is required"),
-      .required("Firstname is required"),
     lastname: Yup.string()
       // .min(3, "Minimum 3 characters")
       // .max(25, "Maximum 25 characters")
       .required("Lastname is required"),
     year: Yup.number()
       .required("Year is required")
-      .min(new Date().getFullYear()-process.env.REACT_APP_FAMILY_MAXIMUM_AGE, `Age must be within ${process.env.REACT_APP_FAMILY_MINIMUM_AGE} to ${process.env.REACT_APP_FAMILY_MAXIMUM_AGE} years`)
+      .min(
-      .max(new Date().getFullYear()-process.env.REACT_APP_FAMILY_MINIMUM_AGE, `Age must be within ${process.env.REACT_APP_FAMILY_MINIMUM_AGE} to ${process.env.REACT_APP_FAMILY_MAXIMUM_AGE} years`),
+        new Date().getFullYear() - process.env.REACT_APP_FAMILY_MAXIMUM_AGE,
+        `Age must be within ${process.env.REACT_APP_FAMILY_MINIMUM_AGE} to ${process.env.REACT_APP_FAMILY_MAXIMUM_AGE} years`
+      )
+      .max(
+        new Date().getFullYear() - process.env.REACT_APP_FAMILY_MINIMUM_AGE,
+        `Age must be within ${process.env.REACT_APP_FAMILY_MINIMUM_AGE} to ${process.env.REACT_APP_FAMILY_MAXIMUM_AGE} years`
+      ),
     month: Yup.number()
       .required("Month is required")
       .min(1, "Month is required"),
   });
 
-  const navigate = useNavigate()
+  const navigate = useNavigate();
-  const api = new usersService()
+  const api = new usersService();
 
-  let [requestStatus, setRequestStatus] = useState({loading:false, status:false, message: ''})
+  let [requestStatus, setRequestStatus] = useState({
+    loading: false,
+    status: false,
+    message: "",
+  });
 
   // let [updateDetails, setUpdateDetails] = useState({
   //   family_uid: familyData.uid,
@@ -47,15 +54,16 @@ export default function FamilyProfile({familyData, className }) {
     lastname: familyData.lastname,
     year: familyData.year,
     month: familyData.month,
-    action: 22020
+    enable_traking: familyData.enable_traking,
+    action: 22020,
   };
-  
+
-  const handleChange = ({target:{name, value}})=>{
+  // const handleChange = ({ target: { name, value } }) => {
-    setUpdateDetails(prev => ({...prev, [name]:value}))
+  //   setUpdateDetails((prev) => ({ ...prev, [name]: value }));
-  }
+  // };
 
   const updateFamily = (values, helpers) => {
-    setRequestStatus({loading:true, status:false, message: ''})
+    setRequestStatus({ loading: true, status: false, message: "" });
     // let {firstname, lastname, year, month} = updateDetails
     // if(!firstname || !lastname || year == 0 || month == 0) {
     //   setRequestStatus({loading:false, status:false, message: 'Please fill all fields'})
@@ -63,22 +71,38 @@ export default function FamilyProfile({familyData, className }) {
     //     setRequestStatus({loading:false, status:false, message: ''})
     //   }, 5000)
     // }
-    api.getFamilyUpdate(values).then(res=>{
+    api
-      if(res.data.internal_return < 0){
+      .getFamilyUpdate(values)
-        return setRequestStatus({loading:false, status:false, message: 'Failed, try again!'})
+      .then((res) => {
-      }
+        if (res.data.internal_return < 0) {
-      setRequestStatus({loading:false, status:true, message: 'Family account updated'})
+          return setRequestStatus({
-      setTimeout(()=>{
+            loading: false,
-        navigate('/acc-family', {replace:true})
+            status: false,
-      }, 5000)
+            message: "Failed, try again!",
-    }).catch(error => {
+          });
-      setRequestStatus({loading:false, status:false, message: 'Unable to update, try again!'})
+        }
-    }).finally(()=>{
+        setRequestStatus({
-      setTimeout(()=>{
+          loading: false,
-        setRequestStatus({loading:false, status:false, message: ''})
+          status: true,
-      }, 5000)
+          message: "Family account updated",
-    })
+        });
-  }
+        setTimeout(() => {
+          navigate("/acc-family", { replace: true });
+        }, 5000);
+      })
+      .catch((error) => {
+        setRequestStatus({
+          loading: false,
+          status: false,
+          message: "Unable to update, try again!",
+        });
+      })
+      .finally(() => {
+        setTimeout(() => {
+          setRequestStatus({ loading: false, status: false, message: "" });
+        }, 5000);
+      });
+  };
 
   return (
     <div
@@ -93,102 +117,163 @@ export default function FamilyProfile({familyData, className }) {
       >
         {(props) => {
           return (
-          <Form className="logout-modal-body w-full lg:w-[500px] lg:mx-auto flex flex-col items-center px-10 py-8 gap-4">
+            <Form className="logout-modal-body w-full lg:w-[500px] lg:mx-auto flex flex-col items-center px-10 py-8 gap-4">
-            <InputCom
+              <InputCom
-              placeholder="Firstname"
+                placeholder="Firstname"
-              label="First Name:"
+                label="First Name:"
-              name="firstname"
+                name="firstname"
-              type="text"
+                type="text"
-              parentClass="flex items-center gap-1 w-full"
+                parentClass="flex items-center gap-1 w-full"
-              labelClass="flex-[0.2] mb-0"
+                labelClass="flex-[0.2] mb-0"
-              inputClass={`flex-[0.8] input-curve lg border border-[#dce4e9] ${props.errors.firstname && props.touched.firstname ? 'border border-red-500' : ''}`}
+                inputClass={`flex-[0.8] input-curve lg border border-[#dce4e9] ${
-              fieldClass="px-2"
+                  props.errors.firstname && props.touched.firstname
-              value={props.values.firstname}
+                    ? "border border-red-500"
-              inputHandler={props.handleChange}
+                    : ""
-            />
+                }`}
-            <InputCom
+                fieldClass="px-2"
-              placeholder="Lastname"
+                value={props.values.firstname}
-              label="Last Name:"
+                inputHandler={props.handleChange}
-              name="lastname"
+              />
-              type="text"
+              <InputCom
-              parentClass="flex items-center gap-1 w-full"
+                placeholder="Lastname"
-              labelClass="flex-[0.2] mb-0"
+                label="Last Name:"
-              inputClass={`flex-[0.8] input-curve lg border border-[#dce4e9] ${props.errors.lastname && props.touched.lastname ? 'border border-red-500' : ''}`}
+                name="lastname"
-              fieldClass="px-2"
+                type="text"
-              value={props.values?.lastname}
+                parentClass="flex items-center gap-1 w-full"
-              inputHandler={props.handleChange}
+                labelClass="flex-[0.2] mb-0"
-            />
+                inputClass={`flex-[0.8] input-curve lg border border-[#dce4e9] ${
-            <div className="input-com mb-7 flex flex-col gap-1 w-full">
+                  props.errors.lastname && props.touched.lastname
-              {/* Age dropdown */}
+                    ? "border border-red-500"
-              <div className="">
+                    : ""
-                <label
+                }`}
-                  className="input-label text-[#181c32] dark:text-white text-[15px] font-semibold"
+                fieldClass="px-2"
-                  htmlFor="age-selection"
+                value={props.values?.lastname}
+                inputHandler={props.handleChange}
+              />
+
+              <div className="input-com flex flex-col gap-1 w-full">
+                {/* Age dropdown */}
+                <div className="">
+                  <label
+                    className="input-label text-[#181c32] dark:text-white text-[15px] font-semibold"
+                    htmlFor="age-selection"
+                  >
+                    Birthday: (Year/Month)
+                  </label>
+                  {((props.errors.year && props.touched.year) ||
+                    (props.errors.month && props.touched.month)) && (
+                    <span className="text-[12px] text-red-500">
+                      {" "}
+                      {props.errors.year || props.errors.month}
+                    </span>
+                  )}
+                </div>
+                <div className="flex max-w-[330px] w-full self-end gap-4">
+                  <select
+                    name="year"
+                    id="yearDropdown"
+                    value={props.values.year}
+                    onChange={props.handleChange}
+                    className={`input-wrapper border border-[#f5f8fa] ${
+                      props.errors.year && props.touched.year
+                        ? "border border-red-500"
+                        : ""
+                    } dark:border-[#5e6278] w-56 rounded-[35px] h-10 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 px-4`}
+                  >
+                    <option value="">Select a Year</option>
+                    {years.map((year) => (
+                      <option key={year} value={year}>
+                        {year}
+                      </option>
+                    ))}
+                  </select>
+
+                  <select
+                    name="month"
+                    id="monthDropdown"
+                    // value={(months.filter(month => month.id == selectedMonth)[0]?.id) || ''}
+                    value={
+                      months.filter(
+                        (month) => month.id == props.values.month
+                      )[0]?.id || 0
+                    }
+                    onChange={props.handleChange}
+                    className={`input-wrapper border border-[#f5f8fa] ${
+                      props.errors.month && props.touched.month
+                        ? "border border-red-500"
+                        : ""
+                    } dark:border-[#5e6278] w-56 rounded-[35px] h-10 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 px-4`}
+                  >
+                    <option value="">Select a Month</option>
+                    {months.map(({ id, name }) => (
+                      <option key={id} value={id}>
+                        {name}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+
+              <div className="input-com mb-7 flex flex-col gap-1 w-full">
+                {/* Location dropdown */}
+                <div className="">
+                  <label
+                    className="input-label text-[#181c32] dark:text-white text-[15px] font-semibold"
+                    htmlFor="age-selection"
+                  >
+                    Location Tracking
+                  </label>
+                  {/* {((props.errors.year && props.touched.year) ||
+                    (props.errors.month && props.touched.month)) && (
+                    <span className="text-[12px] text-red-500">
+                      {" "}
+                      {props.errors.year || props.errors.month}
+                    </span>
+                  )} */}
+                </div>
+                <div className="flex max-w-[330px] w-full self-end gap-4">
+                  <select
+                    name="enable_traking"
+                    id="enable_traking"
+                    value={props.values.enable_traking}
+                    onChange={props.handleChange}
+                    className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-56 rounded-[35px] h-10 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 px-4`}
+                  >
+                    <option value={+0}>Disabled</option>
+                    <option value={+100}>Enabled</option>
+                  </select>
+                </div>
+              </div>
+
+              {requestStatus.message && (
+                <div
+                  className={`relative p-2 ${
+                    !requestStatus.status
+                      ? "text-[#912741] bg-[#fcd9e2] border-[#fbc6d3]"
+                      : "text-green-700"
+                  } mb-2 rounded-[0.475rem] text-xs font-light leading-[19.5px]`}
                 >
-                  Birthday: (Year/Month)
+                  {requestStatus.message}
-                </label>
+                </div>
-                {((props.errors.year && props.touched.year) || (props.errors.month && props.touched.month)) && (
+              )}
-                  <span className="text-[12px] text-red-500">
+              <div className="flex justify-end w-full">
-                    {' '}{props.errors.year || props.errors.month}
+                {requestStatus.loading ? (
-                  </span>
+                  <>
+                    <div className="signup btn-loader"></div>
+                    <LoadingSpinner size="4" />
+                  </>
+                ) : (
+                  <button
+                    type="submit"
+                    // onClick={updateFamily}
+                    // className={`rounded-[0.475rem] 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`}
+                    className="text-white btn-gradient text-lg tracking-wide px-6 py-2 rounded-full"
+                  >
+                    Update
+                  </button>
                 )}
               </div>
-              <div className="flex max-w-[330px] w-full self-end gap-4">
+            </Form>
-                <select
-                  name='year'
-                  id="yearDropdown"
-                  value={props.values.year}
-                  onChange={props.handleChange}
-                  className={`input-wrapper border border-[#f5f8fa] ${props.errors.year && props.touched.year ? 'border border-red-500' : ''} dark:border-[#5e6278] w-56 rounded-[35px] h-10 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 px-4`}
-                >
-                  <option value="">Select a Year</option>
-                  {years.map((year) => (
-                    <option key={year} value={year}>
-                      {year}
-                    </option>
-                  ))}
-                </select>
-
-                <select
-                  name='month'
-                  id="monthDropdown"
-                  // value={(months.filter(month => month.id == selectedMonth)[0]?.id) || ''}
-                  value={(months.filter(month => month.id == props.values.month)[0]?.id) || 0}
-                  onChange={props.handleChange}
-                  className={`input-wrapper border border-[#f5f8fa] ${props.errors.month && props.touched.month ? 'border border-red-500' : ''} dark:border-[#5e6278] w-56 rounded-[35px] h-10 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 px-4`}
-                >
-                  <option value="">Select a Month</option>
-                  {months.map(({id, name}) => (
-                    <option key={id} value={id}>
-                      {name}
-                    </option>
-                  ))}
-                </select>
-              </div>
-            </div>
-            {requestStatus.message && (
-              <div className={`relative p-2 ${!requestStatus.status ? 'text-[#912741] bg-[#fcd9e2] border-[#fbc6d3]' : 'text-green-700'} mb-2 rounded-[0.475rem] text-xs font-light leading-[19.5px]`}>
-                {requestStatus.message}
-              </div>
-            )}
-            <div className="flex justify-end w-full">
-              {requestStatus.loading ?
-                <>
-                <div className="signup btn-loader"></div>
-                <LoadingSpinner size='4' />
-                </>
-                :
-                <button
-                type="submit"
-                // onClick={updateFamily}
-                // className={`rounded-[0.475rem] 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`}
-                className="text-white btn-gradient text-lg tracking-wide px-6 py-2 rounded-full"
-                >
-                Update
-                </button>
-              }
-            </div>
-          </Form>
           );
         }}
       </Formik>
@@ -196,26 +281,28 @@ export default function FamilyProfile({familyData, className }) {
   );
 }
 
-  // Get the current year
+// Get the current year
-  // const currentYear = new Date().getFullYear() - process.env.REACT_APP_FAMILY_MINIMUM_AGE;
+// const currentYear = new Date().getFullYear() - process.env.REACT_APP_FAMILY_MINIMUM_AGE;
-  const currentYear = new Date().getFullYear();
 
-  // Generate an array of years from the current year to (currentYear - 19)
+// Calculate the current year and the year 3 years before the current year
-  const years = Array.from({ length: 19 }, (_, index) => currentYear - index);
+const currentYear = new Date().getFullYear();
-
+const startYear = currentYear - 3;
-  const months = [
-    {id:'1', name:"January"},
-    {id:'2', name:"February"},
-    {id:'3', name:"March"},
-    {id:'4', name:"April"},
-    {id:'5', name:"May"},
-    {id:'6', name:"June"},
-    {id:'7', name:"July"},
-    {id:'8', name:"August"},
-    {id:'9', name:"September"},
-    {id:'10', name:"October"},
-    {id:'11', name:"November"},
-    {id:'12', name:"December"},
-  ];
 
+// Generate an array of years from 4 years before the current year to 18 years before the current year
+const years = Array.from({ length: 15 }, (_, index) => startYear - index).reverse();
+// const latestYears = years.slice(0, process.env.REACT_APP_FAMILY_YEAR_RANGE);
 
+const months = [
+  { id: "1", name: "January" },
+  { id: "2", name: "February" },
+  { id: "3", name: "March" },
+  { id: "4", name: "April" },
+  { id: "5", name: "May" },
+  { id: "6", name: "June" },
+  { id: "7", name: "July" },
+  { id: "8", name: "August" },
+  { id: "9", name: "September" },
+  { id: "10", name: "October" },
+  { id: "11", name: "November" },
+  { id: "12", name: "December" },
+];

src/components/FamilyAcc/Tabs/FamilyWallet.jsx

@@ -11,13 +11,16 @@ function FamilyWallet({familyData}) {
 
   let [familyWallet, setFamilyWallet] = useState({loading:true, data: []})
 
+  let [familyWalletReload, setFamilyWalletReload] = useState(false) // STATE TO DETERMINE WHEN TO RELOAD FAMILY WALLET TAB/PAGE
+
   useEffect(()=>{
+    setFamilyWallet({loading:true, data: []})
     apiUrl.getFamilyWallet({family_uid:familyData?.uid}).then(res => {
       setFamilyWallet({loading:false, data: res?.data?.result_list || []})
     }).catch(error => {
       setFamilyWallet({loading:false, data: []})
     })
-  },[])
+  },[familyWalletReload])
 
   return (
     <div className='p-3 w-full h-full bg-white dark:bg-dark-white flex flex-col justify-start items-start'>
@@ -29,7 +32,7 @@ function FamilyWallet({familyData}) {
         familyWallet?.data?.length > 0 ?
         <div className='w-full p-4 flex flex-col gap-2'>
         {familyWallet?.data?.map((wallet, index)=>(
-            <Wallet key={index} wallet={wallet} familyData={familyData} />
+            <Wallet key={index} wallet={wallet} familyData={familyData} setFamilyWalletReload={setFamilyWalletReload} />
           ))}
         </div>
         :

src/components/FamilyAcc/Tabs/wallet/FamilyAddFundPopout.jsx

@@ -1,10 +1,15 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import ModalCom from '../../../Helpers/ModalCom'
 import InputCom from '../../../Helpers/Inputs/InputCom'
 import { Form, Formik } from "formik";
 import * as Yup from "yup";
 
+import {AmountTo2DP} from '../../../Helpers/PriceFormatter'
+import usersService from '../../../../services/UsersService';
 import LoadingSpinner from '../../../Spinners/LoadingSpinner';
+import { PriceFormatter } from '../../../Helpers/PriceFormatter';
+import { tableReload } from '../../../../store/TableReloads';
+import { useDispatch } from 'react-redux';
 
 const validationSchema = Yup.object().shape({
   // amount: Yup.string()
@@ -20,32 +25,105 @@ const validationSchema = Yup.object().shape({
   amount: Yup.number('Please enter a number')
   .min(1, "Price must be greater than 0")
   .required("Amount is required"),
+  comment: Yup.string()
+  .required("Comment is required"),
 });
 
 function FamilyAddFundPopout({action, situation, wallet, familyData}) {
 
+  const dispatch = useDispatch()
+
+  const apiUrl = new usersService()
+
+  const [startTransfer, setStartTransfer] = useState({loading:true, data: {}})
+
   const [requestStatus, setRequestStatus] = useState({loading:false, status:false, message:''})
 
+
   // initial values for formik
   let initialValues = {
     amount: '',
-    from : '',
+    from : AmountTo2DP(startTransfer?.data?.origing_current_balance*0.01),
     to: `${familyData.firstname} ${familyData.lastname}`,
     comment: ''
   };
-
+  // FUNCTION TO PERFORM FAMILY TRANSFER
   const handleAddFund = (values) => {
     setRequestStatus({loading:true, status:false, message:''})
-    setTimeout(()=>{
+
-      setRequestStatus({loading:false, status:false, message:''})
+    let senderBal = startTransfer?.data?.origing_current_balance || '' // SENDER'S ACCOUNT BALANCE
-    }, 3000)
+    let senderLimit = startTransfer?.data?.origing_transfer_limit || '' // SENDER'S TRANSFER LIMIT
-    // let reqData = {...values}
+
-    console.log(values)
+    let reqData = { // API REQUEST DATA
+      family_uid : familyData.uid,
+      wallet_uid : wallet.wallet_uid,
+      origing_wallet_uid : startTransfer?.data?.origing_wallet_uid,
+      currency : startTransfer?.data?.currency,
+      amount : values.amount*100,
+      description : values.comment,
+      family_transfer_mode : 100,
+      action : 22014
+    }
+
+    if(!senderBal || !senderLimit){ // RETURNS UNAUTHORIZED, IF SENDER BAL OR LIMIT IS NOT AVAILABLE
+      setRequestStatus({loading:false, status:false, message:'Unauthorized, try again later'})
+      return setTimeout(()=>{
+        setRequestStatus({loading:false, status:false, message:''})
+      }, 5000)
+    }
+
+    if(values.amount > senderBal*0.01){ // CHECKS TO SEE IF SENDER IS SENDING MORE THAN HIS BALANCE
+      setRequestStatus({loading:false, status:false, message:'You cannot send more than your balance'})
+      return setTimeout(()=>{
+        setRequestStatus({loading:false, status:false, message:''})
+      }, 5000)
+    }
+
+    if(values.amount > senderLimit*0.01){ // CHECKS TO SEE IF SENDER IS SENDING MORE THAN HIS LIMIT
+      setRequestStatus({loading:false, status:false, message:`You cannot exceed ${senderLimit*0.01} ${startTransfer?.data?.origing_currency.charAt(0).toUpperCase() + startTransfer?.data?.origing_currency.slice(1).toLowerCase()}`})
+      return setTimeout(()=>{
+        setRequestStatus({loading:false, status:false, message:''})
+      }, 5000)
+    }
+
+    apiUrl.familyTransfer(reqData).then(({data}) => {
+      if(data.internal_return < 0 || data.credit_confirm == '' || data.pay_confirm == ''){
+        setRequestStatus({loading:false, status:false, message:'Transfer Failed'})
+        return setTimeout(()=>{
+          setRequestStatus({loading:false, status:false, message:''})
+        }, 5000)
+      }
+      setRequestStatus({loading:false, status:true, message:'Transfer Successful'})
+      setTimeout(()=>{
+        setRequestStatus({loading:false, status:false, message:''})
+        dispatch(tableReload({ type: "WALLETTABLE" })); // UPDATES PARENT WALLET ACCOUNT
+        action() // TO CLOSE THE MODAL
+      }, 5000)
+    }).catch(error => {
+      setRequestStatus({loading:false, status:false, message:'Network Error, try again'})
+      setTimeout(()=>{
+        setRequestStatus({loading:false, status:false, message:''})
+      }, 5000)
+    })
   }
 
+  // LOAD FAMILY START TRANSFER
+  useEffect(()=>{
+    let reqData = {
+      family_uid: familyData.uid,
+      wallet_uid: wallet.wallet_uid,
+      action: 22013
+    }
+    apiUrl.familyTransferStart(reqData).then(response => {
+      setStartTransfer({loading:false, data:response?.data })
+    }).catch(err => {
+      setStartTransfer({loading:false, data: {}})
+    })
+  },[])
+
   return (
     <ModalCom action={action} situation={situation}>
-      <div className="relative logout-modal-wrapper lg:w-[450px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+      <div className="relative logout-modal-wrapper lg:w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
         <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             Add Fund
@@ -77,6 +155,9 @@ function FamilyAddFundPopout({action, situation, wallet, familyData}) {
           </button>
         </div>
         <div className="logout-modal-body w-full flex flex-col items-center px-10 py-8">
+          {startTransfer.loading && <LoadingSpinner size='16' color='sky-blue' height={'h-64'} />}
+          
+          { !startTransfer.loading &&
           <Formik
             initialValues={initialValues}
             validationSchema={validationSchema}
@@ -90,12 +171,12 @@ function FamilyAddFundPopout({action, situation, wallet, familyData}) {
                     <div className="field w-full mb-[0.5rem]">
                       <InputCom
                         placeholder="0"
-                        label="Amount:"
+                        label={`Amount (${startTransfer?.data?.currency})`}
                         name="amount"
                         type="text"
                         parentClass="flex items-center gap-1 w-full"
-                        labelClass="flex-[0.2] mb-0"
+                        labelClass="flex-[0.3] mb-0"
-                        inputClass={`flex-[0.8] input-curve lg border border-[#dce4e9] ${props.errors.amount && props.touched.amount ? 'border border-red-500' : ''}`}
+                        inputClass={`flex-[0.7] input-curve lg border border-[#dce4e9] ${props.errors.amount && props.touched.amount ? 'border border-red-500' : ''}`}
                         fieldClass="px-2 text-right"
                         value={props.values.amount}
                         inputHandler={props.handleChange}
@@ -106,13 +187,13 @@ function FamilyAddFundPopout({action, situation, wallet, familyData}) {
                     <div className="field w-full mb-[0.5rem]">
                       <InputCom
                         placeholder="From"
-                        label="From:"
+                        label={`From (${startTransfer?.data?.origing_currency})`}
                         name="from"
                         type="text"
                         parentClass="flex items-center gap-1 w-full"
-                        labelClass="flex-[0.2] mb-0"
+                        labelClass="flex-[0.3] mb-0"
-                        inputClass={`flex-[0.8] input-curve lg border border-[#dce4e9]`}
+                        inputClass={`flex-[0.7] input-curve lg border border-[#dce4e9]`}
-                        fieldClass="px-2"
+                        fieldClass="px-2 text-right"
                         value={props.values.from}
                         disable={true}
                       />
@@ -126,9 +207,9 @@ function FamilyAddFundPopout({action, situation, wallet, familyData}) {
                         name="to"
                         type="text"
                         parentClass="flex items-center gap-1 w-full"
-                        labelClass="flex-[0.2] mb-0"
+                        labelClass="flex-[0.3] mb-0"
-                        inputClass={`flex-[0.8] input-curve lg border border-[#dce4e9]`}
+                        inputClass={`flex-[0.7] input-curve lg border border-[#dce4e9]`}
-                        fieldClass="px-2"
+                        fieldClass="px-2 text-right"
                         value={props.values.to}
                         disable={true}
                       />
@@ -139,14 +220,15 @@ function FamilyAddFundPopout({action, situation, wallet, familyData}) {
                       <div className="w-full">
                       <label
                         htmlFor="Job Delivery Details"
-                        className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1'
+                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1"
                       >
                         Comment
+                        {/* {props.errors.comment && props.touched.comment && <span className='text-sm text-red-500'>{' '}{props.errors.comment}</span>} */}
                       </label>
                       <textarea
                         // id="Job Delivery Details"
                         rows="2"
-                        className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px] border`}
+                        className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px] border ${props.errors.comment && props.touched.comment ? 'border border-red-500' : ''}`}
                         style={{ resize: "none" }}
                         name="comment"
                         value={props.values.comment}
@@ -163,8 +245,8 @@ function FamilyAddFundPopout({action, situation, wallet, familyData}) {
                   {requestStatus.message != "" &&
                     (!requestStatus.status ? (
                       <div
-                        // className={`relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                        className={`relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                        className={`pb-1 absolute bottom-0 left-1/2 -translate-x-1/2 text-[#912741] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                        // className={`pb-1 absolute bottom-0 left-1/2 -translate-x-1/2 text-[#912741] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
 
                       >
                         {requestStatus.message}
@@ -172,8 +254,8 @@ function FamilyAddFundPopout({action, situation, wallet, familyData}) {
                     ) : (
                       requestStatus.status && (
                         <div
-                          // className={`relative p-4 text-green-700 bg-slate-200 border-slate-800 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                          className={`relative p-4 text-green-700 bg-slate-200 border-slate-800 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                          className={`pb-1 absolute bottom-0 left-1/2 -translate-x-1/2 text-green-700 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                          // className={`pb-1 absolute bottom-0 left-1/2 -translate-x-1/2 text-green-700 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
                         >
                           {requestStatus.message}
                         </div>
@@ -196,7 +278,8 @@ function FamilyAddFundPopout({action, situation, wallet, familyData}) {
                           :
                           <button
                             type="submit"
-                            className="w-[150px] h-[48px] rounded-full text-base text-white bg-sky-500 hover:bg-sky-400"
+                            className={`w-[150px] h-[48px] rounded-full text-base text-white bg-sky-500 hover:bg-sky-400 ${requestStatus.status ? 'opacity-50' : ''}`}
+                            disabled={requestStatus.status}
                           >
                             Send
                           </button>
@@ -208,6 +291,7 @@ function FamilyAddFundPopout({action, situation, wallet, familyData}) {
               </Form>
             )}
           </Formik>
+          }
         </div>
       </div>
     </ModalCom>

src/components/FamilyAcc/Tabs/wallet/Wallet.jsx

@@ -3,7 +3,7 @@ import { localImgLoad } from '../../../../lib'
 import { PriceFormatter } from '../../../Helpers/PriceFormatter'
 import FamilyAddFundPopout from './FamilyAddFundPopout'
 
-function Wallet({wallet, familyData}) {
+function Wallet({wallet, familyData, setFamilyWalletReload}) {
     const [addFundPopout, setAddFundPopout] = useState({ show: false, data: {} })
   return (
     <div className='w-full p-4 bg-[aliceblue] rounded-lg'
@@ -63,6 +63,7 @@ function Wallet({wallet, familyData}) {
         <FamilyAddFundPopout 
             action={() => {
                 setAddFundPopout({ show: false, data: {} });
+                setFamilyWalletReload(prev => !prev) // TO RELOAD FAMILY WALLET // DETERMINES WHEN TO RELOAD FAMILY WALLET TAB/PAGE
             }}
             situation={addFundPopout.show}
             wallet={wallet}

src/components/Helpers/PriceFormatter.jsx

@@ -50,3 +50,29 @@ export const PriceFormatter = (
     </span>
   );
 };
+
+
+// FUNCTION TO RETURN AMOUNT TO TWO DECIMAL PLACES
+export const AmountTo2DP = (
+  amount = "00",
+) => {
+  // Convert the number to a string
+  let numStr = String(amount);
+
+  // Split the string into integer and decimal parts
+  let parts = numStr.split(".");
+  let integerPart = parts[0] || "";
+  let decimalPart = parts[1] || "";
+
+  // Add thousands separators to the integer part
+  let formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+
+  // Truncate or pad the decimal part to two decimal points
+  let formattedDecimal = decimalPart.slice(0, 2).padEnd(2, "0");
+
+  // Combine the formatted integer and decimal parts
+  let formattedNumber = formattedInteger + '.' + formattedDecimal;
+
+  // return formattedNumber;
+  return formattedNumber;
+};

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -128,7 +128,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
 
         <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-[240px]">
+            <div className="max-h-[240px] h-full">
               <h2 className="font-semibold text-slate-900 dark:text-white tracking-wide">
                 {details?.title}
               </h2>
@@ -159,9 +159,9 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                   <div
                     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"
+                        ? " h-full flex items-center"
-                        : " overflow-y-auto max-h-[100px]"
+                        : " overflow-y-auto max-h-[80px]"
-                    }`}
+                    }  ${name === "Description" && "max-h-14 h-full overflow-auto"}`}
                   >
                     {danger ? (
                       <p

src/components/MyWallet/Popup/CompleteConfirmCredit.jsx

@@ -80,14 +80,16 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
                           </span>
                         </div>
 
-                        <div className="flex items-center gap-8">
+                        {isSuccess && (
-                          <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          <div className="flex items-center gap-8">
-                            Confirmation Number
+                            <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                          </h1>
+                              Confirmation Number
-                          <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                            </h1>
-                            {data?.confirmation}
+                            <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                          </span>
+                              {data?.confirmation}
-                        </div>
+                            </span>
+                          </div>
+                        )}
                       </>
                     )}
                 </div>

src/components/MyWallet/Popup/CreditPopup.jsx

@@ -17,7 +17,7 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
 
   const getTitle = () => {
     if (confirmCredit?.show?.acceptConfirm?.state) {
-      if (confirmCredit?.data?.internal_return < 0) {
+      if (confirmCredit?.data?.internal_return <= 0) {
         return "Credit Unsuccessful";
       } else {
         return "Credit Add Completed";

src/services/UsersService.js

@@ -1089,6 +1089,28 @@ class usersService {
       };
       return this.postAuxEnd("/familywallet", postData);
     }
+  
+    // FUNCTION TO START FAMILY TRANSFER
+    familyTransferStart(reqData) {
+      var postData = {
+        uid: localStorage.getItem("uid"),
+        member_id: localStorage.getItem("member_id"),
+        sessionid: localStorage.getItem("session_token"),
+        ...reqData,
+      };
+      return this.postAuxEnd("/familytransferstart", postData);
+    }
+
+    // FUNCTION TO PERFORM FAMILY TRANSFER
+    familyTransfer(reqData) {
+      var postData = {
+        uid: localStorage.getItem("uid"),
+        member_id: localStorage.getItem("member_id"),
+        sessionid: localStorage.getItem("session_token"),
+        ...reqData,
+      };
+      return this.postAuxEnd("/familytransfer", postData);
+    }
 
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)