Added History table to history page #41
@@ -1,4 +1,4 @@
|
||||
import React from "react";
|
||||
import React, {useState, useEffect} from "react";
|
||||
import HistoryAnalyticsCard from "../Cards/HistoryAnalyticsCard";
|
||||
import SellHistoryMarketVisitorAnalytic from "../Home/SellHistoryMarketVisitorAnalytic";
|
||||
import Layout from "../Partials/Layout";
|
||||
@@ -6,7 +6,59 @@ import HistoryTable from "./HistoryTable";
|
||||
import MarketHistorySection from "./MarketHistorySection";
|
||||
import TopHxBox from "./TopHxBox";
|
||||
|
||||
import usersService from "../../services/UsersService";
|
||||
import PurchasesTable from "../MyWallet/WalletComponent/PurchasesTable";
|
||||
import RecentActivityTable from "../MyWallet/WalletComponent/RecentActivityTable";
|
||||
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||
|
||||
export default function History() {
|
||||
|
||||
const apiCall = new usersService()
|
||||
|
||||
let [paymentHistory, setPaymentHistory] = useState({ // FOR PAYMENT HISTORY
|
||||
loading: true,
|
||||
data: [],
|
||||
error: false
|
||||
})
|
||||
|
||||
let [purchaseHistory, setPurchaseHistory] = useState({ // FOR PURCHASE HISTORY
|
||||
loading: true,
|
||||
data: [],
|
||||
error: false
|
||||
})
|
||||
|
||||
//FUNCTION TO GET PAYMENT HISTORY
|
||||
const getPaymentHistory = ()=>{
|
||||
apiCall.getPaymentHx().then((res)=>{
|
||||
if(res.data.internal_return < 0){ // success but no data
|
||||
setPaymentHistory(prev => ({...prev, loading: false}))
|
||||
return
|
||||
}
|
||||
setPaymentHistory(prev => ({...prev, loading: false, data: res.data.result_list}))
|
||||
}).catch((error)=>{
|
||||
setPaymentHistory(prev => ({...prev, loading: false, error: true}))
|
||||
})
|
||||
}
|
||||
|
||||
//FUNCTION TO GET PURCHASE HISTORY
|
||||
const getPurchaseHistory = ()=>{
|
||||
apiCall.getPurchaseHx().then((res)=>{
|
||||
if(res.data.internal_return < 0){ // success but no data
|
||||
setPurchaseHistory(prev => ({...prev, loading: false}))
|
||||
return
|
||||
}
|
||||
// console.log('purchase',res.data)
|
||||
setPurchaseHistory(prev => ({...prev, loading: false, data: res.data.result_list}))
|
||||
}).catch((error)=>{
|
||||
setPurchaseHistory(prev => ({...prev, loading: false, error: true}))
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
getPaymentHistory()
|
||||
getPurchaseHistory()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<Layout>
|
||||
@@ -148,7 +200,35 @@ export default function History() {
|
||||
</div>
|
||||
</div>
|
||||
{/*<MarketHistorySection />*/}
|
||||
<TopHxBox className="mb-11" />
|
||||
{/* <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-[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>
|
||||
{purchaseHistory.loading ?
|
||||
<LoadingSpinner size='16' color='sky-blue' />
|
||||
:
|
||||
<PurchasesTable purchase={purchaseHistory} />
|
||||
}
|
||||
</div>
|
||||
</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-[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>
|
||||
{paymentHistory.loading ?
|
||||
<LoadingSpinner size='16' color='sky-blue' />
|
||||
:
|
||||
<RecentActivityTable payment={paymentHistory} />
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
{/* END OF RECENT ACTIVITY SECTION */}
|
||||
</div>
|
||||
<HistoryTable />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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 ?
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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='/' />} />
|
||||
|
||||
@@ -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
|
||||
@@ -7,6 +7,7 @@ import LoadingSpinner from '../Spinners/LoadingSpinner';
|
||||
|
||||
import {Formik, Form} from 'formik'
|
||||
import * as Yup from 'yup'
|
||||
import ReferralTable from '../MyWallet/WalletComponent/ReferralTable';
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
email: Yup.string()
|
||||
@@ -169,39 +170,7 @@ function ReferralDisplay() {
|
||||
)
|
||||
:
|
||||
(
|
||||
<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>
|
||||
{referralList.data.length ?
|
||||
referralList.data.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>
|
||||
))
|
||||
:
|
||||
(
|
||||
referralList.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>
|
||||
<ReferralTable history={referralList} />
|
||||
)
|
||||
}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user