changed payment to purchase

src/assets/images/icons/arrow.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 20" id="Arrow"><path fill-rule="evenodd" d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413" fill="#4687ba" class="color000000 svgShape"></path></svg>

src/components/FamilyAcc/FamilyTable.jsx

@@ -157,8 +157,6 @@ 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 ${

src/components/FourZeroFour/index.jsx

@@ -16,11 +16,11 @@ export default function FourZeroFour() {
     },
   };
   return (
-    <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={`my-custom-bg-class flex justify-center items-center w-full min-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="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' />
+          <img src={localImgLoad('images/404.png')} className="w-72" alt='404Image' />
           <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>

src/components/History/RewardsTable.jsx

@@ -50,7 +50,7 @@ function RewardsTable() {
     <div className='flex flex-col justify-between min-h-[500px]'>
     {familyRewardHistory.loading ? 
     <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
-    :
+    : familyRewardHistory.data.length ?
     <table className="wallet-activity w-full table-auto border-collapse text-left">
         <thead className='border-b-2'>
             <tr className='text-slate-600'>
@@ -60,8 +60,6 @@ function RewardsTable() {
             <th className="p-2">Confirmation</th>
             </tr>
         </thead>
-        {familyRewardHistory.data.length ?
-        (
         <tbody>
             {currentReward.map((item, index) => {
                 let date = new Date(item.added).toLocaleDateString()
@@ -84,24 +82,15 @@ function RewardsTable() {
             }
             )}
         </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>
+    :familyRewardHistory.error ?
+    <div className="p-2 text-slate-500 flex flex-col grow justify-center items-center">
+        <span>Opps! an error occurred. Please try again!</span>
+    </div>
+    :
+    <div className="p-2 text-slate-500 flex flex-col grow justify-center items-center">
+        <span>No Rewards History Found!</span>
+    </div>
     }
 
     {/* PAGINATION BUTTON */}

src/components/History/index.jsx

@@ -255,9 +255,9 @@ export default function History() {
                     {/* PURCHASE SECTION */}
                     {tab == 'purchases' &&
                         <div className="wallet w-full border-t">
-                            <h1 className="p-2 text-xl font-bold text-dark-gray dark:text-white tracking-wide">Purchases</h1>
+                            {/* <h1 className="p-2 text-xl font-bold text-dark-gray dark:text-white tracking-wide">Purchases</h1> */}
                             {purchaseHistory.loading ? 
-                            <LoadingSpinner size='16' color='sky-blue' />
+                            <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
                             :
                             <PurchasesTable purchase={purchaseHistory} />
                             }
@@ -268,10 +268,10 @@ export default function History() {
                     {/* RECENT ACTIVITY SECTION */}
                     {tab == 'recent' &&
                         <div className="wallet w-full border-t">
-                            <h1 className="p-2 text-xl font-bold text-dark-gray dark:text-white tracking-wide">Recent Activity</h1>
+                            {/* <h1 className="p-2 text-xl font-bold text-dark-gray dark:text-white tracking-wide">Recent Activity</h1> */}
                             {/* <p className='text-base text-slate-500 dark:text-white'>Activity Report</p> */}
                             {paymentHistory.loading ? 
-                            <LoadingSpinner size='16' color='sky-blue' />
+                            <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
                             :
                             <RecentActivityTable payment={paymentHistory} />
                         }

src/components/MyWallet/WalletComponent/PurchasesTable.jsx

@@ -16,45 +16,36 @@ function PurchasesTable({purchase}) {
 
   return (
     <div className='flex flex-col justify-between min-h-[500px]'>
-    <table className="wallet-activity w-full table-auto border-collapse text-left">
-        <thead className='border-b-2'>
-            <tr className='text-slate-600'>
-            <th className="p-2">Trx.</th>
-            <th className="p-2">Amount</th>
-            <th className="p-2">Fee</th>
-            </tr>
-        </thead>
         {purchase.data.length ?
-        (
+        <table className="wallet-activity w-full table-auto border-collapse text-left">
-        <tbody>
+            <thead className='border-b-2'>
-            {currentPurchase.map((item, index) => (
+                <tr className='text-slate-600'>
-            <tr key={index} className='text-slate-500'>
+                <th className="p-2">Trx.</th>
-                <td className="p-2">{item.added_date}<br />
+                <th className="p-2">Amount</th>
-                   <b>{item.confirmation} </b>
+                <th className="p-2">Fee</th>
-                </td>
+                </tr>
-                <td className="p-2">{item.amount}</td>
+            </thead>
-                <td className="p-2">{item.fee}</td>
+            <tbody>
-            </tr>
+                {currentPurchase.map((item, index) => (
-            ))}
+                <tr key={index} className='text-slate-500'>
-        </tbody>
+                    <td className="p-2">{item.added_date}<br />
-        )
+                    <b>{item.confirmation} </b>
+                    </td>
+                    <td className="p-2">{item.amount}</td>
+                    <td className="p-2">{item.fee}</td>
+                </tr>
+                ))}
+            </tbody>
+        </table>
+        :purchase.error ?
+        <div className="p-2 text-slate-500 flex flex-col grow justify-center items-center">
+            <span>Opps! an error occurred. Please try again!</span>
+        </div>
         :
-        purchase.error ? 
+        <div className="p-2 text-slate-500 flex flex-col grow justify-center items-center">
-        (
+            <span>No Purchase History Found!</span>
-        <tbody>
+        </div> 
-            <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 Purchase 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) >= purchase?.data?.length ? true : false} data={purchase?.data} start={indexOfFirstItem} stop={indexOfLastItem} />

src/components/MyWallet/WalletComponent/RecentActivityTable.jsx

@@ -19,16 +19,16 @@ function RecentActivityTable({ payment }) {
 
   return (
     <div className="flex flex-col justify-between min-h-[500px]">
-      <table className="wallet-activity w-full table-auto border-collapse text-left">
+      {payment?.data?.length > 0 ? 
-        <thead className="border-b-2">
+        <table className="wallet-activity w-full table-auto border-collapse text-left">
-          <tr className="text-slate-600">
+          <thead className="border-b-2">
-            <th className="p-2">Date</th>
+            <tr className="text-slate-600">
-            <th className="p-4">Trx.</th>
+              <th className="p-2">Date</th>
-            <th className="p-2">Amnt./Fee</th>
+              <th className="p-4">Trx.</th>
-            <th className="p-2">Status</th>
+              <th className="p-2">Amnt./Fee</th>
-          </tr>
+              <th className="p-2">Status</th>
-        </thead>
+            </tr>
-        {payment?.data?.length > 0 ? (
+          </thead>
           <tbody>
             {currentActivity.map((item, index) => (
               <tr key={index} className="text-slate-500">
@@ -46,24 +46,16 @@ function RecentActivityTable({ payment }) {
               </tr>
             ))}
           </tbody>
-        ) : payment?.error ? (
+        </table>
-          <tbody>
+      :payment.error ?
-            <tr className="text-slate-500">
+        <div className="p-2 text-slate-500 flex flex-col grow justify-center items-center">
-              <td className="p-2" colSpan={4}>
+            <span>Opps! an error occurred. Please try again!</span>
-                Opps! an error occurred. Please try again!
+        </div>
-              </td>
+        :
-            </tr>
+        <div className="p-2 text-slate-500 flex flex-col grow justify-center items-center">
-          </tbody>
+            <span>No Payment History Found!</span>
-        ) : (
+        </div> 
-          <tbody>
+      }
-            <tr className="text-slate-500">
-              <td className="p-2" colSpan={4}>
-                No Payment History Found!
-              </td>
-            </tr>
-          </tbody>
-        )}
-      </table>
 
       {/* PAGINATION BUTTON */}
       <PaginatedList