added background image to error page

src/components/FamilyAcc/FamilyTable.jsx

@@ -52,15 +52,20 @@ export default function FamilyTable({
     task_count,
     family_uid,
     banner,
+    enable_traking,
   }) => {
     // Check for valid dates
     const addedDate = added ? added.split(" ")[0] : "N/A";
     const loginDate = last_login ? formatDateString(last_login) : "N/A";
+    const key = `family-${family_uid}`; // Assign a unique key
+
+    const trackingStatus =
+      enable_traking === "0" ? "Stopped" : enable_traking === "100" ? "Active" : "";
 
     return (
       <tr
-        className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29]  hover:bg-gray-50"
-        key={family_uid}
+        className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
+        key={key}
       >
         <td className="py-4">
           <div className="flex space-x-2 items-center w-full">
@@ -85,6 +90,23 @@ export default function FamilyTable({
             </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 font-medium whitespace-nowrap ${
+                enable_traking === "0"
+                  ? "text-[#FF0000] dark:text-[#FF6666]"
+                  : enable_traking === "100"
+                  ? "text-[#00A000] dark:text-[#00FF00]"
+                  : "text-dark-gray dark:text-white"
+              }`}
+            >
+              {trackingStatus}
+            </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">
@@ -92,6 +114,7 @@ export default function FamilyTable({
             </span>
           </div>
         </td>
+
         <td className="text-right py-4 px-2 flex items-center justify-center">
           <button
             onClick={() =>
@@ -116,6 +139,8 @@ export default function FamilyTable({
     );
   };
 
+  console.log(currentFamilyList);
+
   return (
     <div
       className={`update-table w-full h-full p-4 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] flex flex-col justify-between ${
@@ -134,6 +159,7 @@ export default function FamilyTable({
                 <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">Tracking</th>
                     <th className="py-4 text-center">No of Tasks</th>
                     <th className="py-4 text-right"></th>
                   </tr>

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

@@ -4,9 +4,12 @@ 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()
@@ -28,6 +31,8 @@ const validationSchema = Yup.object().shape({
 
 function FamilyAddFundPopout({action, situation, wallet, familyData}) {
 
+  const dispatch = useDispatch()
+
   const apiUrl = new usersService()
 
   const [startTransfer, setStartTransfer] = useState({loading:true, data: {}})
@@ -38,7 +43,7 @@ function FamilyAddFundPopout({action, situation, wallet, familyData}) {
   // initial values for formik
   let initialValues = {
     amount: '',
-    from : startTransfer?.data?.origing_current_balance*0.01 || 'N/A',
+    from : AmountTo2DP(startTransfer?.data?.origing_current_balance*0.01),
     to: `${familyData.firstname} ${familyData.lastname}`,
     comment: ''
   };
@@ -54,7 +59,7 @@ function FamilyAddFundPopout({action, situation, wallet, familyData}) {
       wallet_uid : wallet.wallet_uid,
       origing_wallet_uid : startTransfer?.data?.origing_wallet_uid,
       currency : startTransfer?.data?.currency,
-      amount : values.amount,
+      amount : values.amount*100,
       description : values.comment,
       family_transfer_mode : 100,
       action : 22014
@@ -75,14 +80,14 @@ function FamilyAddFundPopout({action, situation, wallet, familyData}) {
     }
 
     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}`})
+      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){
+      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:''})
@@ -91,6 +96,7 @@ function FamilyAddFundPopout({action, situation, wallet, familyData}) {
       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 => {
@@ -272,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>

src/components/FourZeroFour/index.jsx

@@ -2,6 +2,8 @@ import React from "react";
 // import Lottie from "react-lottie";
 import { useNavigate } from "react-router-dom";
 import * as animationData from "../../assets/images/Lotties/77618-website-404-error-animation.json";
+import { localImgLoad } from "../../lib";
+// import BgError from '../../assets/images/wrench-page-notfound.jpg'
 
 export default function FourZeroFour() {
   const navigate = useNavigate();
@@ -14,16 +16,21 @@ export default function FourZeroFour() {
     },
   };
   return (
-    <div className="flex justify-center items-center w-full h-screen bg-[#232247]">
-      <div>
+    <div className={`my-custom-bg-class flex justify-center items-center w-full h-screen before:content-[''] before:absolute before:inset-0 before:bg-[#cdcdcd]/[.8]`}>
+      <div className="relative pt-32 max-w-3xl">
         {/* <Lottie options={defaultOptions} width={600} height={600} /> */}
-        <div className="flex justify-center">
+        <div className="px-16 md:px-24 flex flex-col items-center justify-center gap-4">
+          <img src={localImgLoad('images/404.png')} className="w-72" alt='404 Image' />
+          <p className="mt-8 text-red-600 font-black text-4xl md:text-5xl tracking-wider text-center">Sorry!</p>
+          <h1 className="text-black text-4xl md:text-5xl font-black tracking-wide text-center leading-tight">The page can’t be found.</h1>
+          <p className="px-2 md:px-8 text-slate-700 text-base md:text-lg text-center">The page you're looking for isn't available. Use the go back button below</p>
           <button
             onClick={() => navigate(-1)}
             type="button"
-            className="btn-gradient text-white text-lg w-[150px] h-[50px] rounded-full"
+            className="px-4 md:px-8 border-2 border-[#2b70fa] rounded-lg text-[#007bff] text-base md:text-lg h-[48px] flex justify-center items-center gap-1"
           >
-            Go Back
+            <span>Go Back</span>
+            <span className="pb-1">&rarr;</span>
           </button>
         </div>
       </div>

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/History/RewardsTable.jsx

@@ -0,0 +1,114 @@
+import React, {useEffect, useState} from 'react'
+import Image from '../../assets/images/taskbanners/default.jpg'
+
+import usersService from '../../services/UsersService';
+import { handlePagingFunc } from '../../components/Pagination/HandlePagination';
+import PaginatedList from '../../components/Pagination/PaginatedList';
+
+import LoadingSpinner from '../Spinners/LoadingSpinner';
+
+import { AmountTo2DP } from '../Helpers/PriceFormatter';
+
+function RewardsTable() {
+
+    const apiCall = new usersService()
+
+    let [familyRewardHistory, setFamilyRewardHistory] = useState({ // FOR PURCHASE HISTORY
+        loading: true,
+        data: [],
+        error: false
+    })
+
+    const [currentPage, setCurrentPage] = useState(0);
+    const indexOfFirstItem = Number(currentPage);
+    const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
+    const currentReward = familyRewardHistory?.data?.slice(indexOfFirstItem, indexOfLastItem);
+  
+    const handlePagination = (e) => {
+      handlePagingFunc(e,setCurrentPage)
+    }
+
+
+    //FUNCTION TO GET FAMILY REWARD HISTORY
+    const getFamilyRewardHistory = ()=>{
+        apiCall.getFamilyRewardHx().then((res)=>{
+            if(res.data.internal_return < 0){ // success but no data
+                setFamilyRewardHistory(prev => ({...prev, loading: false}))
+                return
+            }
+            setFamilyRewardHistory(prev => ({...prev, loading: false, data: res.data.result_list}))
+        }).catch((error)=>{
+            setFamilyRewardHistory(prev => ({...prev, loading: false, error: true}))
+        })
+    }
+
+    useEffect(()=>{
+        getFamilyRewardHistory()
+      }, [])
+
+  return (
+    <div className='flex flex-col justify-between min-h-[500px]'>
+    {familyRewardHistory.loading ? 
+    <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
+    :
+    <table className="wallet-activity w-full table-auto border-collapse text-left">
+        <thead className='border-b-2'>
+            <tr className='text-slate-600'>
+            <th className="p-2"></th>
+            <th className="p-2">Amount</th>
+            <th className="p-2">Date</th>
+            <th className="p-2">Confirmation</th>
+            </tr>
+        </thead>
+        {familyRewardHistory.data.length ?
+        (
+        <tbody>
+            {currentReward.map((item, index) => {
+                let date = new Date(item.added).toLocaleDateString()
+                return (
+                    <tr key={index} className='text-slate-500'>
+                        <td className="p-2">
+                            <div className='flex items-center gap-2'>
+                                <img src={item.icon} className='min-w-[60px] max-w-[60px] min-h-[60px] max-h-[60px] rounded-full bg-slate-500' alt='Reward Logo' />
+                                <div className='flex flex-col'>
+                                    <h1 className='text-lg font-bold'>Reward to {item.rec_firstname} {item.rec_lastname}</h1>
+                                    <p className='text-sm'>{item.description}</p>
+                                </div>
+                            </div>
+                        </td>
+                        <td className="p-2">{AmountTo2DP(item.amount*0.01)} {item.currency}</td>
+                        <td className="p-2">{date}</td>
+                        <td className="p-2">{item.confirmation}</td>
+                    </tr>
+                )
+            }
+            )}
+        </tbody>
+        )
+        :
+        familyRewardHistory.error ? 
+        (
+        <tbody>
+            <tr className='text-slate-500'>
+                <td className="p-2" colSpan={4}>Opps! an error occurred. Please try again!</td>
+            </tr>
+        </tbody>
+        )
+        :
+        <tbody>
+            <tr className='text-slate-500'>
+                <td className="p-2" colSpan={4}>No Rewards History Found!</td>
+            </tr>
+        </tbody>
+        }
+    </table>
+    }
+
+    {/* PAGINATION BUTTON */}
+    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= familyRewardHistory?.data?.length ? true : false} data={familyRewardHistory?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+    {/* END OF PAGINATION BUTTON */}
+    </div>
+  )
+}
+
+export default RewardsTable

src/components/History/index.jsx

@@ -10,6 +10,7 @@ import usersService from "../../services/UsersService";
 import PurchasesTable from "../MyWallet/WalletComponent/PurchasesTable";
 import RecentActivityTable from "../MyWallet/WalletComponent/RecentActivityTable";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
+import RewardsTable from "./RewardsTable";
 
 export default function History() {
 
@@ -58,6 +59,9 @@ export default function History() {
 
   useEffect(()=>{
     getPaymentHistory()
+  }, [])
+
+  useEffect(()=>{
     getPurchaseHistory()
   }, [])
 
@@ -236,6 +240,15 @@ export default function History() {
                     >
                     Recent Activity
                     </button>
+                    <button
+                    name="reward"
+                    onClick={(e) => setTab(e.target.name)}
+                    className={`px-4 py-1 rounded-t-2xl ${
+                        tab == "reward" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
+                      }`}
+                    >
+                    Rewards
+                    </button>
                 </div>
                 {/* END OF switch button */}
                 <div className="history-tables w-full">
@@ -265,6 +278,14 @@ export default function History() {
                         </div>
                     }
                     {/* END OF RECENT ACTIVITY SECTION */}
+
+                    {/* REWARD SECTION */}
+                    {tab == 'reward' &&
+                        <div className="wallet w-full border-t">
+                            <RewardsTable />
+                        </div>
+                    }
+                    {/* END OF REWARD SECTION */}
                 </div>
             </div>
             {/*<HistoryTable />*/}

src/components/MyWallet/Popup/CompleteConfirmCredit.jsx

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

@@ -304,6 +304,12 @@ input[type="text"][dir="rtl"] {
     transform: rotate(360deg);
   }
 }
+
+.my-custom-bg-class{
+  background: url("./assets/images/wrench-page-notfound.jpg") center/cover;
+  position: relative;
+}
+
 /* TODO: =================================default end================================ */
 /* TODO: =================================update password================================ */
 .content-wrapper.thankyou-section {

src/services/UsersService.js

@@ -496,6 +496,19 @@ class usersService {
     return this.postAuxEnd("/purchasehx", postData);
   }
 
+  // API FUNCTION TO GET FAMILY REWARD HISTORY
+  getFamilyRewardHx() {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      offset: 1,
+      limit: 20,
+      action: 22011,
+    };
+    return this.postAuxEnd("/familyrewardhx", postData);
+  }
+
   // API FUNCTION TO GET PAYMENT HISTORY
   getPaymentHx() {
     var postData = {