History new layout #191
@@ -13,7 +13,9 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||
|
||||
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
|
||||
loading: true,
|
||||
@@ -63,7 +65,7 @@ export default function History() {
|
||||
<>
|
||||
<Layout>
|
||||
<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="mb-5 sm:mb-0">
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white">
|
||||
@@ -213,33 +215,57 @@ export default function History() {
|
||||
{/*</div>*/}
|
||||
{/*<MarketHistorySection />*/}
|
||||
{/* <TopHxBox className="mb-11" /> */}
|
||||
<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-[700px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">Purchases</h1>
|
||||
{purchaseHistory.loading ?
|
||||
<LoadingSpinner size='16' color='sky-blue' />
|
||||
:
|
||||
<PurchasesTable purchase={purchaseHistory} />
|
||||
}
|
||||
</div>
|
||||
<div className='w-full p-4 md:p-8 bg-white dark:bg-dark-white rounded-2xl shadow bottomMargin'>
|
||||
{/* switch button */}
|
||||
<div className="my-1 flex items-center border-b border-slate-300">
|
||||
<button
|
||||
name="purchases"
|
||||
onClick={(e) => setTab(e.target.name)}
|
||||
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border ${
|
||||
tab == "purchases" ? "border-sky-blue" : "border-slate-300"
|
||||
} tracking-wide transition duration-200`}
|
||||
>
|
||||
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>
|
||||
{/* END OF PURCHASE 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-[700px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
|
||||
<h1 className="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} />
|
||||
{/* END OF switch button */}
|
||||
<div className="history-tables w-full">
|
||||
{/* 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>
|
||||
{purchaseHistory.loading ?
|
||||
<LoadingSpinner size='16' color='sky-blue' />
|
||||
:
|
||||
<PurchasesTable purchase={purchaseHistory} />
|
||||
}
|
||||
</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>
|
||||
{/* END OF RECENT ACTIVITY SECTION */}
|
||||
</div>
|
||||
{/*<HistoryTable />*/}
|
||||
</div>
|
||||
|
||||
@@ -15,11 +15,11 @@ function PurchasesTable({purchase}) {
|
||||
}
|
||||
|
||||
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">
|
||||
<thead className='border-b-2'>
|
||||
<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">Fee</th>
|
||||
</tr>
|
||||
@@ -29,7 +29,7 @@ function PurchasesTable({purchase}) {
|
||||
<tbody>
|
||||
{currentPurchase.map((item, index) => (
|
||||
<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>
|
||||
</td>
|
||||
<td className="p-2">{item.amount}</td>
|
||||
|
||||
@@ -15,7 +15,7 @@ function RecentActivityTable({payment}) {
|
||||
}
|
||||
|
||||
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">
|
||||
<thead className='border-b-2'>
|
||||
<tr className='text-slate-600'>
|
||||
|
||||
Reference in New Issue
Block a user