CHIEFSOFT\ameye
107 lines
5.7 KiB
React
107 lines
5.7 KiB
React
import React from 'react'
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import {Link} from 'react-router-dom'
|
|
|
|
import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
|
|
import TableWrapper from '../tableWrapper/TableWrapper'
|
|
import Icons from '../Icons'
|
|
|
|
import Avatar from '../../assets/user_avatar.jpg'
|
|
import queryKeys from '../../services/queryKeys'
|
|
import { approvedLoan } from '../../services/siteServices'
|
|
import getDateFromDateString from '../../helpers/GetDateFromDateString';
|
|
import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
|
|
|
|
export default function ApprovedLoanCom() {
|
|
|
|
const {data, isFetching, isError, error} = useQuery({
|
|
queryKey: queryKeys.approved_loan,
|
|
queryFn: () => approvedLoan()
|
|
})
|
|
|
|
const approvedUsers = data?.data?.result_data?.data // APPLY LOAN LIST
|
|
|
|
return (
|
|
<div className='w-full flex flex-col gap-8'>
|
|
<BreadcrumbCom title='Approved' paths={['Dashboard', 'Approved']} />
|
|
|
|
{isFetching ?
|
|
<>
|
|
<div className="w-full py-4">
|
|
<p className='text-slate-800'>Loading...</p>
|
|
</div>
|
|
</>
|
|
: isError ?
|
|
<div className="w-full py-4">
|
|
<p className='text-red-500'>{error.message}</p>
|
|
</div>
|
|
:
|
|
<TableWrapper data={approvedUsers} itemsPerPage={15}>
|
|
{({ data }) => (
|
|
<>
|
|
<table className="py-2 w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
|
|
<thead className="text-sm md:text-base text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
|
|
<tr>
|
|
<th scope="col" className="px-4 py-2">
|
|
Name
|
|
</th>
|
|
<th scope="col" className="px-4 py-2">
|
|
Loan
|
|
</th>
|
|
<th scope="col" className="px-4 py-2">
|
|
Added
|
|
</th>
|
|
<th scope="col" className="px-4 py-2">
|
|
Action
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{(data && data.length > 0) ? data?.map((item, index) => (
|
|
<tr key={index} className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
|
|
<th scope="row" className="mr-4 flex items-center px-3 py-2 text-gray-900 whitespace-nowrap dark:text-white">
|
|
<img className="w-10 h-10 rounded-full" src={Avatar} alt="Jese image" />
|
|
<div className="px-3">
|
|
<div className="text-base font-semibold">{item?.name || ''}</div>
|
|
<div className="font-normal text-gray-500">{item?.bvn}</div>
|
|
</div>
|
|
</th>
|
|
<td className="px-3 py-2">
|
|
{item?.loan} - {item?.description}
|
|
</td>
|
|
<td className="px-3 py-2">
|
|
<div className="flex items-center">
|
|
{getDateFromDateString(item?.added)} {getTimeFromDateString(item?.added)}
|
|
</div>
|
|
</td>
|
|
<td className="px-3 py-2 flex gap-3 md:gap-4">
|
|
{/* <!-- Modal toggle --> */}
|
|
{/* <Link to={RouteLinks.manageAdminPage}>
|
|
<i onClick={handleShowEditModal} className="fa-solid fa-eye text-base md:text-lg cursor-pointer p-2 text-sky-600"></i>
|
|
</Link> */}
|
|
{/* <i onClick={handleShowEditModal} className="fa-solid fa-pen-to-square text-base md:text-lg cursor-pointer p-2"></i> */}
|
|
{/* <i onClick={handleDeleteModal} className="fa-solid fa-trash text-base md:text-lg cursor-pointer p-2 text-red-500"></i> */}
|
|
<Icons name='edit' />
|
|
<Icons name='eye' />
|
|
<Icons name='trash' className={'hidden text-red-500'} />
|
|
</td>
|
|
</tr>
|
|
))
|
|
:
|
|
<tr className="w-3 p-3">
|
|
<td className="px-3 py-2" colSpan={4}>
|
|
<div className="flex justify-center items-center">
|
|
No Record Found
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</>
|
|
)}
|
|
</TableWrapper>
|
|
}
|
|
</div>
|
|
)
|
|
} |