Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
c2bda67ab1 | ||
|
victorAnumudu
|
cea0ebfe82 |
@@ -1,39 +1,43 @@
|
||||
import React from 'react'
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import React, { useState } from 'react'
|
||||
import { keepPreviousData, useQuery } from "@tanstack/react-query";
|
||||
import {Link} from 'react-router-dom'
|
||||
|
||||
import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
|
||||
import TableWrapper from '../tableWrapper/TableWrapper'
|
||||
import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
|
||||
import Icons from '../Icons'
|
||||
|
||||
import Avatar from '../../assets/user_avatar.jpg'
|
||||
import queryKeys from '../../services/queryKeys'
|
||||
import { selectLoan } from '../../services/siteServices'
|
||||
import { getTransactions } from '../../services/siteServices'
|
||||
import getDateFromDateString from '../../helpers/GetDateFromDateString';
|
||||
import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
|
||||
|
||||
export default function RequestCom() {
|
||||
|
||||
const {data, isFetching, isError, error} = useQuery({
|
||||
queryKey: queryKeys.select_loan,
|
||||
queryFn: () => selectLoan()
|
||||
const [page, setPage] = useState(1)
|
||||
|
||||
const {data, isFetching, isError, error, isPlaceholderData, isPending} = useQuery({
|
||||
queryKey: [...queryKeys.transactions, page],
|
||||
queryFn: () => getTransactions({page}),
|
||||
// placeholderData: keepPreviousData,
|
||||
})
|
||||
|
||||
const selectUsers = data?.data?.result_data?.data // APPLY LOAN LIST
|
||||
const selectUsers = data?.data?.transactions // TRANSACTIONS LIST
|
||||
const pagination = data?.data?.pagination
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-col gap-8'>
|
||||
<BreadcrumbCom title='Request' paths={['Dashboard', 'Request']} />
|
||||
|
||||
<div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
|
||||
{isFetching ?
|
||||
{isPending ?
|
||||
<>
|
||||
<p className='text-slate-800'>Loading...</p>
|
||||
</>
|
||||
: isError ?
|
||||
<p className='text-red-500'>{error.message}</p>
|
||||
:
|
||||
<TableWrapper data={selectUsers} itemsPerPage={15}>
|
||||
<TablePaginatedWrapper data={selectUsers} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
|
||||
{({ data }) => (
|
||||
<>
|
||||
<table className="py-2 w-full text-sm">
|
||||
@@ -42,9 +46,9 @@ export default function RequestCom() {
|
||||
<th scope="col" className="px-2 py-2">
|
||||
Name
|
||||
</th>
|
||||
<th scope="col" className="px-2">
|
||||
{/* <th scope="col" className="px-2">
|
||||
Loan
|
||||
</th>
|
||||
</th> */}
|
||||
<th scope="col" className="px-2">
|
||||
Added
|
||||
</th>
|
||||
@@ -55,25 +59,25 @@ export default function RequestCom() {
|
||||
</thead>
|
||||
<tbody>
|
||||
{(data && data.length > 0) ? data?.map((item, index) => (
|
||||
<tr className="py-2 border-t border-dashed border-slate-300">
|
||||
<tr key={index} className="py-2 border-t border-dashed border-slate-300">
|
||||
<td className="px-2 py-2">
|
||||
<div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
|
||||
<img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
|
||||
<div className="text-left">
|
||||
<div className="text-base font-semibold">{item?.name || ''}</div>
|
||||
<div className="font-normal text-gray-500">{item?.bvn}</div>
|
||||
<div className="text-base font-semibold">{item?.account_id || ''}</div>
|
||||
<div className="font-normal text-gray-500">{item?.transaction_id}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
{/* <td className="px-2">
|
||||
<div className="text-left">
|
||||
<div className="text-base font-semibold">{item?.loan}</div>
|
||||
<div className="font-normal text-gray-500">{item?.description}</div>
|
||||
</div>
|
||||
</td>
|
||||
</td> */}
|
||||
<td className="px-2">
|
||||
<div className="text-left">
|
||||
<div className="font-normal text-gray-500">{getDateFromDateString(item?.added)} {getTimeFromDateString(item?.added)}</div>
|
||||
<div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2 text-right">
|
||||
@@ -93,7 +97,7 @@ export default function RequestCom() {
|
||||
))
|
||||
:
|
||||
<tr className="py-2 border-t border-dashed border-slate-300">
|
||||
<td className="px-3 py-2" colSpan={4}>
|
||||
<td className="px-3 py-2" colSpan={3}>
|
||||
<div className="flex justify-center items-center">
|
||||
No Record Found
|
||||
</div>
|
||||
@@ -104,7 +108,7 @@ export default function RequestCom() {
|
||||
</table>
|
||||
</>
|
||||
)}
|
||||
</TableWrapper>
|
||||
</TablePaginatedWrapper>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,121 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import MainBtn from "../MainBtn";
|
||||
import Icons from "../Icons";
|
||||
|
||||
|
||||
export default function TablePaginatedWrapper({
|
||||
data = [],
|
||||
itemsPerPage = 5,
|
||||
pagination,
|
||||
setPage,
|
||||
isFetching,
|
||||
filterItem,
|
||||
children,
|
||||
}) {
|
||||
const [isLoading, setIsLoading] = useState(isFetching)
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [filteredData, setFilteredData] = useState(data);
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(0);
|
||||
const [newData, setNewData] = useState([]);
|
||||
|
||||
const numberOfSelection = itemsPerPage;
|
||||
|
||||
const handlePrev = () => {
|
||||
setPage(prev => prev - 1)
|
||||
};
|
||||
const handleNext = () => {
|
||||
setPage(prev => prev + 1)
|
||||
};
|
||||
|
||||
const handleSearch = ({ target: { value } }, name) => {
|
||||
setSearchTerm(value);
|
||||
let newFilteredData = data.filter((item) =>
|
||||
item[name].toLowerCase().startsWith(value.toLowerCase())
|
||||
);
|
||||
setFilteredData(newFilteredData);
|
||||
setCurrentPage(0);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setIsLoading(true)
|
||||
setTimeout(()=>{
|
||||
setNewData(
|
||||
filteredData?.slice(currentPage, numberOfSelection + currentPage)
|
||||
);
|
||||
setIsLoading(false)
|
||||
},1000)
|
||||
}, [currentPage, filteredData, numberOfSelection]);
|
||||
|
||||
useEffect(()=>{
|
||||
setCurrentPage(0)
|
||||
},[itemsPerPage])
|
||||
|
||||
return (
|
||||
<div className="relative w-full">
|
||||
{data.length > 0 && filterItem && (
|
||||
<div className="mb-10 flex justify-end items-center gap-2">
|
||||
{filterItem.map((item, index) => (
|
||||
<label
|
||||
key={index}
|
||||
className="flex flex-col sm:flex-row items-center gap-2 text-slate-600 dark:text-slate-100 transition-all duration-500"
|
||||
>
|
||||
Search by {item[0].toUpperCase() + item.slice(1)}
|
||||
<input
|
||||
name={item}
|
||||
type="text"
|
||||
className="py-1 px-2 text-sm min-w-[100px] text-black dark:text-white bg-white dark:bg-slate-800 rounded-full border-0 outline-none ring-1 ring-slate-300 dark:ring-white transition-all duration-500"
|
||||
value={searchTerm}
|
||||
onChange={(e) => {
|
||||
handleSearch(e, item);
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col">
|
||||
<div className="w-full overflow-x-auto">
|
||||
{children({ data: newData })}
|
||||
</div>
|
||||
|
||||
<div className='w-full flex flex-col lg:flex-row justify-center items-center gap-3 md:gap-6'>
|
||||
<div className="text-sm text-center lg:text-left font-normal text-gray-500 dark:text-gray-400 block w-full">Showing <span className="font-semibold text-gray-900 dark:text-white">
|
||||
{isLoading ? '----' : `page ${pagination?.current_page}`}</span> of <span className="font-semibold text-gray-900 dark:text-white">{pagination?.total_pages}</span>
|
||||
</div>
|
||||
{(newData.length >= 0) &&
|
||||
<div className='flex items-center gap-3 md:gap-6'>
|
||||
<MainBtn
|
||||
onClick={handlePrev}
|
||||
// text='Prev'
|
||||
className={`${!pagination?.has_prev ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light text-center flex justify-center gap-2 items-center`}
|
||||
disabled={isLoading || !pagination?.has_prev}
|
||||
>
|
||||
<Icons name='prev' />
|
||||
</MainBtn>
|
||||
<MainBtn
|
||||
onClick={handleNext}
|
||||
// text='Next'
|
||||
className={`${!pagination?.has_next ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light text-center flex justify-center gap-2 items-center`}
|
||||
disabled={isLoading || !pagination?.has_next}
|
||||
>
|
||||
<Icons name='next' />
|
||||
</MainBtn>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isLoading && <TableIsLoading />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const TableIsLoading = () => {
|
||||
return (
|
||||
<div className="w-full absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[991] inset-0 flex justify-center items-center">
|
||||
<p className="rounded-md shadow-md p-4 bg-white/90 dark:bg-gray-900 text-brown dark:text-white">Loading...</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
const queryKeys = {
|
||||
dashboard: ['dashboard'],
|
||||
loans: ['loans'],
|
||||
transactions: ['transactions'],
|
||||
apply_loan: ['apply'],
|
||||
select_loan: ['select-loan'],
|
||||
approved_loan: ['approved-loan'],
|
||||
|
||||
@@ -56,12 +56,18 @@ export const getDashData = (reqData) => {
|
||||
return getAuxEnd(`/dashboard`, postData)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET APPLIED LOANS TABLE
|
||||
// FUNCTION TO GET LOANS TABLE
|
||||
export const getLoans = (reqData) => {
|
||||
const postData = { ...reqData }
|
||||
return getAuxEnd(`/loans`, postData)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET TRANSACTIONS TABLE
|
||||
export const getTransactions = (reqData) => {
|
||||
const postData = { ...reqData }
|
||||
return getAuxEnd(`/transactions`, postData)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user