apply loan page started
This commit is contained in:
victorAnumudu
@@ -0,0 +1,133 @@
|
||||
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 { applyLoan } from '../../services/siteServices'
|
||||
|
||||
export default function SelectLoanCom() {
|
||||
|
||||
const {data, isFetching, isError, error} = useQuery({
|
||||
queryKey: queryKeys.apply_loan,
|
||||
queryFn: () => applyLoan()
|
||||
})
|
||||
|
||||
console.log('data', data?.data)
|
||||
// const selectLoanUsers = data?.data?.demo_data?.list // APPLY LOAN LIST
|
||||
|
||||
return (
|
||||
<div className='w-full'>
|
||||
<BreadcrumbCom title='Apply' paths={['Dashboard', 'Apply']} />
|
||||
<p className='py-4'>
|
||||
coming soon ...
|
||||
</p>
|
||||
{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={dummy} itemsPerPage={7}>
|
||||
{({ data }) => (
|
||||
<>
|
||||
<table className="py-2 w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
|
||||
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
|
||||
<tr>
|
||||
<th scope="col" className="p-3">
|
||||
<div className="flex items-center">
|
||||
<input id="checkbox-all-search" type="checkbox" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
|
||||
<label htmlFor="checkbox-all-search" className="sr-only">checkbox</label>
|
||||
</div>
|
||||
</th>
|
||||
<th scope="col" className="px-4 py-2">
|
||||
Name
|
||||
</th>
|
||||
<th scope="col" className="px-4 py-2">
|
||||
To
|
||||
</th>
|
||||
<th scope="col" className="px-4 py-2">
|
||||
From
|
||||
</th>
|
||||
<th scope="col" className="px-4 py-2">
|
||||
Ticket Number
|
||||
</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">
|
||||
<td className="w-3 p-3">
|
||||
<div className="flex items-center">
|
||||
<input id="checkbox-table-search-1" type="checkbox" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
|
||||
<label htmlFor="checkbox-table-search-1" className="sr-only">checkbox</label>
|
||||
</div>
|
||||
</td>
|
||||
<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?.email || 'neil.sims@flowbite12345.com'}</div>
|
||||
</div>
|
||||
</th>
|
||||
<td className="px-3 py-2">
|
||||
{item?.to || ''}
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<div className="flex items-center">
|
||||
{item?.from || ''}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<div className="flex items-center">
|
||||
{item?.ticket || ''}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-3 py-2 flex gap-2">
|
||||
{/* <!-- 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> */}
|
||||
<span className='text-red-500 text-xl'>
|
||||
<Icons name='trash' />
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
:
|
||||
<tr className="w-3 p-3">
|
||||
<td className="px-3 py-2" colSpan={6}>
|
||||
<div className="flex justify-center items-center">
|
||||
No Record Found
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</>
|
||||
)}
|
||||
</TableWrapper>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
const dummy = [
|
||||
{name:'ok'}
|
||||
]
|
||||
Reference in New Issue
Block a user