WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

added history table to history page

Browse Source
This commit was merged in pull request #41.
This commit is contained in:
victorAnumudu
2023-05-08 12:52:21 +01:00
parent e201d4726d
commit 4ff53fbfa1
6 changed files with 148 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyWallet/AddFund.jsx
+1 -1
View File
@@ -71,7 +71,7 @@ function AddFund({payment}) {
</div>
<div className="lg:w-1/2 w-full mb-10 lg:mb-0">
<div className="wallet w-full md:p-8 p-4 h-full max-h-[600px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
<div className="wallet w-full md:p-8 p-4 h-full max-h-[590px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
<h2 className='text-gray-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
<p className='text-base text-gray-600 dark:text-white'>Activity Report</p>
{payment.loading ?
src/components/MyWallet/Balance.jsx
+2 -33
View File
@@ -5,7 +5,7 @@ import PurchasesTable from './WalletComponent/PurchasesTable'
import CouponTable from './WalletComponent/CouponTable'
import LoadingSpinner from '../Spinners/LoadingSpinner'
function Balance({wallet, payment, coupon, purchase}) {
function Balance({wallet, coupon}) {
return (
<div className="content-wrapper">
<div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
@@ -65,36 +65,6 @@ function Balance({wallet, payment, coupon, purchase}) {
{/* END OF WALLET SECTION */}
{/* RECENT ACTIVITY SECTION */}
<div className="lg:w-1/2 w-full mb-10 lg:mb-0">
<div className="wallet w-full md:p-8 p-4 h-full max-h-[500px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
<h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
<p className='text-base text-slate-500 dark:text-white'>Activity Report</p>
{payment.loading ?
<LoadingSpinner size='16' color='sky-blue' />
:
<RecentActivityTable payment={payment} />
}
</div>
</div>
{/* END OF RECENT ACTIVITY SECTION */}
</div>
<div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
{/* PURCHASE SECTION */}
<div className="lg:w-1/2 w-full mb-10 lg:mb-0">
<div className="wallet w-full md:p-8 p-4 h-full max-h-[500px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
<h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Purchases</h2>
{purchase.loading ?
<LoadingSpinner size='16' color='sky-blue' />
:
<PurchasesTable purchase={purchase} />
}
</div>
</div>
{/* END OF PURCHASE SECTION */}
{/* COUPON SECTION */}
<div className="lg:w-1/2 w-full mb-10 lg:mb-0">
<div className="wallet w-full md:p-8 p-4 h-full max-h-[500px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
@@ -107,8 +77,7 @@ function Balance({wallet, payment, coupon, purchase}) {
</div>
</div>
{/* END OF COUPON SECTION */}
</div>
</div>
</div>
)
}
src/components/MyWallet/Wallet.jsx
+1 -1
View File
@@ -115,7 +115,7 @@ const WalletRoutes = () => {
<Route path='add-fund' element={<AddFund payment={paymentHistory} />} />
<Route path='add-fund/confirm-add-fund' element={<ConfirmAddFund payment={paymentHistory} />} />
<Route path='transfer-fund' element={<TransferFund payment={paymentHistory} wallet={walletList} />} />
<Route index element={<Balance payment={paymentHistory} purchase={purchaseHistory} coupon={couponHistory} wallet={walletList} />} />
<Route index element={<Balance coupon={couponHistory} wallet={walletList} />} />
<Route path='transfer-fund/add-recipient' element={<AddRecipient />} />
<Route path='transfer-fund/confirm-transfer' element={<ConfirmTransfer payment={paymentHistory} wallet={walletList} />} />
<Route path='*' element={<Navigate to='/' />} />
src/components/MyWallet/WalletComponent/ReferralTable.jsx
+60
View File
@@ -0,0 +1,60 @@
import React, {useState} from 'react'
import PaginatedList from '../../Pagination/PaginatedList';
import {handlePagingFunc} from '../../Pagination/HandlePagination';
function ReferralTable({history}) {
const [currentPage, setCurrentPage] = useState(0);
const indexOfFirstItem = Number(currentPage);
const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
const currentReferral = history?.data?.slice(indexOfFirstItem, indexOfLastItem);
const handlePagination = (e) => {
handlePagingFunc(e,setCurrentPage)
}
return (
<>
<table className="referral-list w-full table-auto border-collapse text-left">
<thead className='border-b-2'>
<tr className='text-slate-600'>
<th className="p-3">Added/Name</th>
<th className="p-3">Email</th>
<th className="p-3">Status</th>
</tr>
</thead>
<tbody>
{history.data.length ?
currentReferral.map((item, index) => (
<tr key={index} className='text-slate-500'>
<td className="p-3">{item.added_date} / {item.firstname} {item.lastname}</td>
<td className="p-3">{item.email}</td>
<td className="p-3">{item.status}</td>
</tr>
))
:
(
history.error ?
<tr className='text-slate-500'>
<td colSpan={3}>Opps! couldn't get referral history. Try reloading the page</td>
</tr>
:
(
<tr className='text-slate-500'>
<td colSpan={3}>No Item Found on referral List</td>
</tr>
)
)
}
</tbody>
</table>
{/* PAGINATION BUTTON */}
<PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= history?.data?.length ? true : false} data={history?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
{/* END OF PAGINATION BUTTON */}
</>
)
}
export default ReferralTable