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

history layout changed

Browse Source
This commit was merged in pull request #191.
This commit is contained in:
victorAnumudu
2023-06-20 15:50:47 +01:00
parent b7927a9d6a
commit 6f26e2e88f
3 changed files with 56 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/History/index.jsx
+52 -26
View File
@@ -13,7 +13,9 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
export default function History() { export default function History() {
const apiCall = new usersService() const apiCall = new usersService()
let [tab, setTab] = useState("purchases"); //STATE FOR SWITCHING BETWEEN TABS
let [paymentHistory, setPaymentHistory] = useState({ // FOR PAYMENT HISTORY let [paymentHistory, setPaymentHistory] = useState({ // FOR PAYMENT HISTORY
loading: true, loading: true,
@@ -63,7 +65,7 @@ export default function History() {
<> <>
<Layout> <Layout>
<div className="history-wrapper w-full mb-10"> <div className="history-wrapper w-full mb-10">
<div className="main-wrapper w-full"> <div className="w-full">
<div className="sm:flex justify-between items-center mb-6"> <div className="sm:flex justify-between items-center mb-6">
<div className="mb-5 sm:mb-0"> <div className="mb-5 sm:mb-0">
<h1 className="text-26 font-bold text-dark-gray dark:text-white"> <h1 className="text-26 font-bold text-dark-gray dark:text-white">
@@ -213,33 +215,57 @@ export default function History() {
{/*</div>*/} {/*</div>*/}
{/*<MarketHistorySection />*/} {/*<MarketHistorySection />*/}
{/* <TopHxBox className="mb-11" /> */} {/* <TopHxBox className="mb-11" /> */}
<div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'> <div className='w-full p-4 md:p-8 bg-white dark:bg-dark-white rounded-2xl shadow bottomMargin'>
{/* PURCHASE SECTION */} {/* switch button */}
<div className="lg:w-1/2 w-full mb-10 lg:mb-0"> <div className="my-1 flex items-center border-b border-slate-300">
<div className="wallet w-full md:p-8 p-4 h-full max-h-[700px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow"> <button
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">Purchases</h1> name="purchases"
{purchaseHistory.loading ? onClick={(e) => setTab(e.target.name)}
<LoadingSpinner size='16' color='sky-blue' /> className={`p-2 text-lg font-bold text-slate-600 dark:text-white border ${
: tab == "purchases" ? "border-sky-blue" : "border-slate-300"
<PurchasesTable purchase={purchaseHistory} /> } tracking-wide transition duration-200`}
} >
</div> Purchases
</button>
<button
name="recent"
onClick={(e) => setTab(e.target.name)}
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border ${
tab == "recent" ? "border-sky-blue" : "border-slate-300"
} tracking-wide transition duration-200`}
>
Recent Activity
</button>
</div> </div>
{/* END OF PURCHASE SECTION */} {/* END OF switch button */}
<div className="history-tables w-full">
{/* RECENT ACTIVITY SECTION */} {/* PURCHASE SECTION */}
<div className="lg:w-1/2 w-full mb-10 lg:mb-0"> {tab == 'purchases' &&
<div className="wallet w-full md:p-8 p-4 h-full max-h-[700px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow"> <div className="wallet w-full border-t">
<h1 className="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">Purchases</h1>
{/* <p className='text-base text-slate-500 dark:text-white'>Activity Report</p> */} {purchaseHistory.loading ?
{paymentHistory.loading ? <LoadingSpinner size='16' color='sky-blue' />
<LoadingSpinner size='16' color='sky-blue' /> :
: <PurchasesTable purchase={purchaseHistory} />
<RecentActivityTable payment={paymentHistory} /> }
</div>
} }
</div> {/* END OF PURCHASE SECTION */}
{/* 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>
{/* <p className='text-base text-slate-500 dark:text-white'>Activity Report</p> */}
{paymentHistory.loading ?
<LoadingSpinner size='16' color='sky-blue' />
:
<RecentActivityTable payment={paymentHistory} />
}
</div>
}
{/* END OF RECENT ACTIVITY SECTION */}
</div> </div>
{/* END OF RECENT ACTIVITY SECTION */}
</div> </div>
{/*<HistoryTable />*/} {/*<HistoryTable />*/}
</div> </div>
src/components/MyWallet/WalletComponent/PurchasesTable.jsx
+3 -3
View File
@@ -15,11 +15,11 @@ function PurchasesTable({purchase}) {
} }
return ( return (
<div className='flex flex-col justify-between h-full'> <div className='flex flex-col justify-between min-h-[500px]'>
<table className="wallet-activity w-full table-auto border-collapse text-left"> <table className="wallet-activity w-full table-auto border-collapse text-left">
<thead className='border-b-2'> <thead className='border-b-2'>
<tr className='text-slate-600'> <tr className='text-slate-600'>
<th className="p-4">Trx.</th> <th className="p-2">Trx.</th>
<th className="p-2">Amount</th> <th className="p-2">Amount</th>
<th className="p-2">Fee</th> <th className="p-2">Fee</th>
</tr> </tr>
@@ -29,7 +29,7 @@ function PurchasesTable({purchase}) {
<tbody> <tbody>
{currentPurchase.map((item, index) => ( {currentPurchase.map((item, index) => (
<tr key={index} className='text-slate-500'> <tr key={index} className='text-slate-500'>
<td className="p-4">{item.added_date}<br /> <td className="p-2">{item.added_date}<br />
<b>{item.confirmation} </b> <b>{item.confirmation} </b>
</td> </td>
<td className="p-2">{item.amount}</td> <td className="p-2">{item.amount}</td>
src/components/MyWallet/WalletComponent/RecentActivityTable.jsx
+1 -1
View File
@@ -15,7 +15,7 @@ function RecentActivityTable({payment}) {
} }
return ( return (
<div className='flex flex-col justify-between h-full'> <div className='flex flex-col justify-between min-h-[500px]'>
<table className="wallet-activity w-full table-auto border-collapse text-left"> <table className="wallet-activity w-full table-auto border-collapse text-left">
<thead className='border-b-2'> <thead className='border-b-2'>
<tr className='text-slate-600'> <tr className='text-slate-600'>