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

wallet page implentation

Browse Source
This commit is contained in:
victorAnumudu
2023-04-24 10:06:51 +01:00
parent 1fbf3d2f90
commit ee4437753d
10 changed files with 393 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyWallet/Balance.jsx
+67 -71
View File
@@ -1,10 +1,15 @@
import React, {useState} from 'react'
import { Link } from 'react-router-dom'
import RecentActivityTable from './WalletComponent/RecentActivityTable'
import PurchasesTable from './WalletComponent/PurchasesTable'
import CouponTable from './WalletComponent/CouponTable'
import LoadingSpinner from '../Spinners/LoadingSpinner'
function Balance() {
function Balance({wallet, payment, coupon, purchase}) {
return (
<div className="content-wrapper">
<div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
{/* WALLET 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 bg-white dark:bg-dark-white rounded-2xl shadow">
<div className='flex items-baseline justify-between'>
@@ -12,20 +17,25 @@ function Balance() {
<p className='text-base text-slate-500 dark:text-white'>Add New Wallet</p>
</div>
{/* wallet balance */}
<div className="md:flex items-center flex-wrap mt-3">
{wallet.loading ?
<LoadingSpinner size='16' color='sky-blue' />
:
wallet.data.length ?
wallet.data.map((item, index)=> (
<div key={index} className="md:flex items-center flex-wrap my-3 border-t-2 border-slate-400">
<div className='text-slate-900 w-full md:w-1/2 flex space-x-3 items-start justify-start'>
<div className='balance-info'>
<p className='py-2'>Currency</p>
<span className='text-base'>Naira</span>
<p className='text-base text-slate-500'>Naira</p>
<span className='text-base'>{item.description}</span>
<p className='text-base text-slate-500'>{item.symbol}</p>
</div>
<div className='balance-info'>
<p className='py-2'>balance</p>
<span className='text-sm py-1 px-2 bg-green-100 text-green-500 rounded-lg'>&#8358;0.00</span>
<span className='text-sm py-1 px-2 bg-green-100 text-green-500 rounded-lg'>{item.symbol}{(item.amount*1).toFixed(2)}</span>
</div>
<div className='balance-info'>
<p className='py-2'>Escrow</p>
<span className='text-sm py-1 px-2 bg-red-100 text-red-500 rounded-lg'>&#8358;0.00</span>
<span className='text-sm py-1 px-2 bg-red-100 text-red-500 rounded-lg'>{item.symbol}{(item.escrow*1).toFixed(2)}</span>
</div>
</div>
@@ -34,85 +44,71 @@ function Balance() {
<Link to='add-fund' className='text-base text-white px-3 py-1 bg-[orange] rounded-md hover:opacity-80'>Top Up</Link>
</div>
</div>
))
:
wallet.error ?
(
<div className="md:flex items-center flex-wrap mt-3">
<p className='text-base'>Opps! An Error occurred, please try again</p>
</div>
)
:
(
<div className="md:flex items-center flex-wrap mt-3">
<p className='text-base'>No Wallets Found!</p>
</div>
)
}
{/* end of wallet balance */}
</div>
</div>
{/* 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-[200px] 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-[300px] 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>
<table className="wallet-activity w-full table-auto border-collapse text-left">
<thead className='border-b-2'>
<tr className='text-slate-600'>
<th className="py-3">Date</th>
<th className="py-3">Recipient</th>
<th className="py-3">Amount/Fee</th>
<th className="py-3">Conf/Status</th>
</tr>
</thead>
<tbody>
<tr className='text-slate-500'>
<td className="py-3">Item</td>
<td className="py-3">Item</td>
<td className="py-3">Item</td>
<td className="py-3">Item</td>
</tr>
</tbody>
</table>
{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'>
<div className="lg:w-1/2 w-full mb-10 lg:mb-0">
<div className="wallet w-full md:p-8 p-4 h-[200px] 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>
<table className="wallet-activity w-full table-auto border-collapse text-left">
<thead className='border-b-2'>
<tr className='text-slate-600'>
<th className="py-3">Date</th>
<th className="py-3">Description</th>
<th className="py-3">Amount</th>
<th className="py-3">Fee</th>
</tr>
</thead>
<tbody>
<tr className='text-slate-500'>
<td className="py-3">Item</td>
<td className="py-3">Item</td>
<td className="py-3">Item</td>
<td className="py-3">Item</td>
</tr>
</tbody>
</table>
</div>
</div>
{/* 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-[200px] 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'>Coupons</h2>
<table className="wallet-activity w-full table-auto border-collapse text-left">
<thead className='border-b-2'>
<tr className='text-slate-600'>
<th className="py-3">Date</th>
<th className="py-3">Description</th>
<th className="py-3">Amount</th>
<th className="py-3">Active</th>
</tr>
</thead>
<tbody>
<tr className='text-slate-500'>
<td className="py-3">Item</td>
<td className="py-3">Item</td>
<td className="py-3">Item</td>
<td className="py-3">Item</td>
</tr>
</tbody>
</table>
<div className="wallet w-full md:p-8 p-4 h-full max-h-[200px] 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-[200px] 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'>Coupons</h2>
{coupon.loading ?
<LoadingSpinner size='16' color='sky-blue' />
:
<CouponTable coupon={coupon} />
}
</div>
</div>
{/* END OF COUPON SECTION */}
</div>
</div>
)
}