changed payment to purchase

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