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

Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into JobList-Categories

Browse Source
This commit was merged in pull request #193.
This commit is contained in:
Chukwumdiebube Ojinta
2023-06-20 20:47:36 +01:00
parent 3ce97a4b76 6e9af99d46
commit d63690a43c
11 changed files with 127 additions and 44 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() {
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>
src/components/MyWallet/AddFundDollars.jsx
+28 -10
View File
@@ -1,8 +1,10 @@
import React,{useState} from 'react'
import React,{useEffect, useState} from 'react'
import { useNavigate } from 'react-router-dom'
import InputCom from '../Helpers/Inputs/InputCom';
import PaginatedList from '../Pagination/PaginatedList';
import { handlePagingFunc } from '../Pagination/HandlePagination';
import LoadingSpinner from '../Spinners/LoadingSpinner';
import usersService from '../../services/UsersService';
import { Form, Formik } from "formik";
import * as Yup from "yup";
@@ -56,17 +58,18 @@ const initialValues = {
function AddFundDollars(props) {
const navigate = useNavigate()
let apiCall = new usersService()
let [tab, setTab] = useState("previous"); //STATE FOR SWITCHING BETWEEN TABS
let [prevCardDetails, setPrevCardDetails] = useState(null) // STATE TO HOLD PREVIOUS CARD SELECTED
let previousCards = {data:[1,2]} //USER PREVIOUS CARDS // TO BE REPLACED LATER FROM DATA FROM API
let [payListCard, setPayListCard] = useState({loading: true, data:[]}) //USER PREVIOUS CARDS
const [currentPage, setCurrentPage] = useState(0);
const indexOfFirstItem = Number(currentPage);
const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
const currentPreviousCards = previousCards?.data?.slice(indexOfFirstItem, indexOfLastItem);
const currentPreviousCards = payListCard?.data?.slice(indexOfFirstItem, indexOfLastItem);
const handlePagination = (e) => {
handlePagingFunc(e,setCurrentPage)
@@ -95,6 +98,15 @@ function AddFundDollars(props) {
props.setInput('')
}
useEffect(()=>{
apiCall.payListCard().then(res => {
setPayListCard({loading: false, data: res.data.result_list})
}).catch(err => {
console.log('PAYCARDLIST ERROR', err)
setPayListCard({loading: false, data: []})
})
}, [])
return (
<>
<h1 className='mb-2 text-xl font-bold text-dark-gray dark:text-white'>Payment Method</h1>
@@ -125,18 +137,24 @@ function AddFundDollars(props) {
{/* previous tab */}
{tab == 'previous' ?
<div className="p-4 previous-details w-full border min-h-[300px] flex flex-col justify-between items-center">
{previousCards?.data?.length ?
{ payListCard.loading ?
<LoadingSpinner size='10' color='sky-blue' />
:
payListCard?.data?.length ?
<table className="my-3 w-full">
<tbody>
{currentPreviousCards.map((item, index)=>(
<tr key={index}>
<tr key={index} className={index != 0 && 'border-t-2'}>
<td>
<div className='flex items-center gap-5'>
<div className='my-2 flex items-center gap-5'>
<input type="radio" className='w-8 h-8' name='card' value='value' />
<div className='card-details'>
<h1 className='text-lg font-bold text-dark-gray dark:text-white tracking-wide'>Master Card</h1>
<p className='text-base font-bold text-dark-gray dark:text-white tracking-wide'>Bank **************3535</p>
<p className='text-sm font-bold text-green-700 dark:text-white tracking-wide'>Verified</p>
<h1 className='text-lg font-bold text-dark-gray dark:text-white tracking-wide'>{item.description} Card</h1>
<p className='text-base font-bold text-dark-gray dark:text-white tracking-wide'>Bank **************{item.digits}</p>
<div className='w-full sm:flex items-center gap-5'>
<p className='text-base font-bold text-dark-gray dark:text-white tracking-wide'>{item.added}</p>
<p className='text-sm font-bold text-green-700 dark:text-white tracking-wide'>Verified</p>
</div>
</div>
</div>
</td>
@@ -168,7 +186,7 @@ function AddFundDollars(props) {
}
{/* PAGINATION BUTTON */}
<div className='w-full'>
<PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= previousCards?.data?.length ? true : false} data={previousCards?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
<PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= payListCard?.data?.length ? true : false} data={payListCard?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
</div>
{/* END OF PAGINATION BUTTON */}
</div>
src/components/MyWallet/WalletComponent/PurchasesTable.jsx
+3 -3
View File
@@ -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>
src/components/MyWallet/WalletComponent/RecentActivityTable.jsx
+1 -1
View File
@@ -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'>