Card List Page Added #311
@@ -0,0 +1,91 @@
|
||||
import React, {useEffect, useState} from 'react'
|
||||
import method1 from "../../../assets/images/payment-method-1.png";
|
||||
import LoadingSpinner from '../../Spinners/LoadingSpinner';
|
||||
import usersService from "../../../services/UsersService";
|
||||
import { handlePagingFunc } from '../../Pagination';
|
||||
import PaginatedList from '../../Pagination/PaginatedList';
|
||||
|
||||
function CardList() {
|
||||
const api = new usersService();
|
||||
const [cardList, setCardList] = useState({loading: true, data: []})
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(0);
|
||||
const indexOfFirstItem = Number(currentPage);
|
||||
const indexOfLastItem =
|
||||
Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
|
||||
const currentCardList = cardList?.data?.slice(indexOfFirstItem, indexOfLastItem);
|
||||
|
||||
const handlePagination = (e) => {
|
||||
handlePagingFunc(e, setCurrentPage);
|
||||
};
|
||||
|
||||
useEffect(()=>{
|
||||
api.payListCard().then(res=>{
|
||||
setCardList({loading: false, data:res.data?.result_list})
|
||||
}).catch(err => {
|
||||
setCardList({loading: false, data:[]})
|
||||
console.log('ERROR', err)
|
||||
})
|
||||
},[])
|
||||
return (
|
||||
<div className='w-full'>
|
||||
<ul className="payment-items w-full min-h-[400px]">
|
||||
{cardList.loading ?
|
||||
<div className='w-full h-[300px] flex justify-center items-center'>
|
||||
<LoadingSpinner size='8' color='sky-blue' />
|
||||
</div>
|
||||
:
|
||||
cardList.data.length ?
|
||||
currentCardList.map(item =>(
|
||||
<li key={item.card_uid} className="sm:flex justify-between items-center w-full py-3 border-b border-light-purple dark:border-[#5356fb29] ">
|
||||
<div className="flex space-x-5 mb-2 sm:mb-0">
|
||||
<div className="w-[50px] h-[50px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
|
||||
<img className='rounded-full w-full h-full' src={method1} alt="payment" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="sm:text-xl text-lg tracking-wide text-dark-gray dark:text-white">
|
||||
Added: {item.added}
|
||||
</p>
|
||||
<p className="text-thin-light-gray sm:text-18 text-sm tracking-wide">
|
||||
{item.description} **********{item.digits}
|
||||
</p>
|
||||
{/* <p className="sm:text-18 text-sm tracking-wide text-light-green">
|
||||
Verified
|
||||
</p> */}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
))
|
||||
:
|
||||
<h1 className='font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap'>No Cards Found</h1>
|
||||
}
|
||||
</ul>
|
||||
|
||||
{/* PAGINATION BUTTON */}
|
||||
<PaginatedList
|
||||
onClick={handlePagination}
|
||||
prev={currentPage == 0 ? true : false}
|
||||
next={
|
||||
currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
|
||||
cardList?.data?.length
|
||||
? true
|
||||
: false
|
||||
}
|
||||
data={cardList?.data}
|
||||
start={indexOfFirstItem}
|
||||
stop={indexOfLastItem}
|
||||
/>
|
||||
{/* END OF PAGINATION BUTTON */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CardList
|
||||
@@ -1,120 +1,17 @@
|
||||
import React from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import method1 from "../../../assets/images/payment-method-1.png";
|
||||
import method2 from "../../../assets/images/payment-method-2.png";
|
||||
import method3 from "../../../assets/images/payment-method-3.png";
|
||||
import method4 from "../../../assets/images/payment-method-4.png";
|
||||
import CardList from "./CardList";
|
||||
|
||||
|
||||
export default function PaymentMathodsTab() {
|
||||
return (
|
||||
<>
|
||||
<div className="payment-method-tab w-full">
|
||||
<div className="payment-item-wrapper w-full">
|
||||
<ul className="payment-items">
|
||||
<li className="sm:flex justify-between items-center w-full py-[30px] border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] ">
|
||||
<div className="flex space-x-5 mb-3 sm:mb-0">
|
||||
<div className="sm:w-[120px] sm:h-[120px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
|
||||
<img src={method1} alt="payment" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="sm:text-xl text-lg tracking-wide text-dark-gray dark:text-white">
|
||||
Datch Bangla Bank Ltd
|
||||
</p>
|
||||
<p className="text-thin-light-gray sm:text-18 text-sm tracking-wide">
|
||||
Bank **********5535
|
||||
</p>
|
||||
<p className="sm:text-18 text-sm tracking-wide text-light-green">
|
||||
Verified
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide"
|
||||
>
|
||||
Manage
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
<li className="sm:flex justify-between items-center w-full py-[30px] border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] ">
|
||||
<div className="flex space-x-5 mb-3 sm:mb-0">
|
||||
<div className="sm:w-[120px] sm:h-[120px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
|
||||
<img src={method2} alt="payment" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="sm:text-xl text-lg tracking-wide text-dark-gray dark:text-white">
|
||||
Master Card
|
||||
</p>
|
||||
<p className="text-thin-light-gray sm:text-18 text-sm tracking-wide">
|
||||
Bank **********5535
|
||||
</p>
|
||||
<p className="sm:text-18 text-sm tracking-wide text-light-green">
|
||||
Verified
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide"
|
||||
>
|
||||
Manage
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
<li className="sm:flex justify-between items-center w-full py-[30px] border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] ">
|
||||
<div className="flex space-x-5 mb-3 sm:mb-0">
|
||||
<div className="sm:w-[120px] sm:h-[120px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
|
||||
<img src={method3} alt="payment" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="sm:text-xl text-lg tracking-wide text-dark-gray dark:text-white">
|
||||
Paypal Account
|
||||
</p>
|
||||
<p className="text-thin-light-gray sm:text-18 text-sm tracking-wide">
|
||||
Bank **********5535
|
||||
</p>
|
||||
<p className="sm:text-18 text-sm tracking-wide text-light-green">
|
||||
Verified
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide"
|
||||
>
|
||||
Manage
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
<li className="sm:flex justify-between items-center w-full py-[30px] border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] ">
|
||||
<div className="flex space-x-5 mb-3 sm:mb-0">
|
||||
<div className="sm:w-[120px] sm:h-[120px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
|
||||
<img src={method4} alt="payment" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="sm:text-xl text-lg tracking-wide text-dark-gray dark:text-white">
|
||||
Visa Card
|
||||
</p>
|
||||
<p className="text-thin-light-gray sm:text-18 text-sm tracking-wide">
|
||||
Bank **********5535
|
||||
</p>
|
||||
<p className="text-18 tracking-wide text-light-red">
|
||||
Unverified
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide"
|
||||
>
|
||||
Manage
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<CardList />
|
||||
<div className="py-7 flex space-x-4">
|
||||
<button
|
||||
type="button"
|
||||
|
||||
Reference in New Issue
Block a user