apply loan endpoint added

This commit is contained in:
victorAnumudu
2025-02-18 21:25:21 +01:00
parent 1e07d271d0
commit 85e40478b7
8 changed files with 88 additions and 124 deletions
+8 -1
View File
@@ -1,8 +1,9 @@
import React from 'react'
import { AiFillProduct, AiOutlineDashboard } from 'react-icons/ai'
import { FaRegMoneyBill1 } from 'react-icons/fa6'
import { FaEye, FaRegMoneyBill1 } from 'react-icons/fa6'
import { GoDotFill } from 'react-icons/go'
import { IoPeople, IoTrash } from 'react-icons/io5'
import { TbPlayerTrackNext, TbPlayerTrackPrev } from 'react-icons/tb'
export default function Icons({name, className}) {
return (
@@ -19,6 +20,12 @@ export default function Icons({name, className}) {
<AiFillProduct className={`text-base ${className}`} />
:name.toLowerCase() == 'trash' ?
<IoTrash lassName={`text-base ${className}`} />
:name.toLowerCase() == 'eye' ?
<FaEye lassName={`text-base ${className}`} />
:name.toLowerCase() == 'next' ?
<TbPlayerTrackNext lassName={`text-base ${className}`} />
:name.toLowerCase() == 'prev' ?
<TbPlayerTrackPrev lassName={`text-base ${className}`} />
:
null
}
+1 -1
View File
@@ -10,7 +10,7 @@ export default function MainBtn({
return (
<button
disabled={disabled}
className={`py-3 px-4 rounded text-12 lg:text-lg ${className || ''} ${(disabled || loading) && 'opacity-60'}`}
className={`py-2 px-3 rounded text-12 lg:text-lg ${className || ''} ${(disabled || loading) && 'opacity-60'}`}
onClick={onClick}
>
{children && children}
+20 -39
View File
@@ -17,15 +17,12 @@ export default function ApplyCom() {
queryFn: () => applyLoan()
})
console.log('data', data?.data)
// const appliedUsers = data?.data?.demo_data?.list // APPLY LOAN LIST
const appliedUsers = data?.data?.result_data?.data // APPLY LOAN LIST
return (
<div className='w-full'>
<div className='w-full flex flex-col gap-3'>
<BreadcrumbCom title='Apply' paths={['Dashboard', 'Apply']} />
<p className='py-4'>
coming soon ...
</p>
{isFetching ?
<>
<div className="w-full py-4">
@@ -37,29 +34,23 @@ export default function ApplyCom() {
<p className='text-red-500'>{error.message}</p>
</div>
:
<TableWrapper data={dummy} itemsPerPage={7}>
<TableWrapper data={appliedUsers} itemsPerPage={9}>
{({ data }) => (
<>
<table className="hidden py-2 w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<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
Loan
</th>
<th scope="col" className="px-4 py-2">
From
Amount
</th>
<th scope="col" className="px-4 py-2">
Ticket Number
Added
</th>
<th scope="col" className="px-4 py-2">
Action
@@ -69,39 +60,34 @@ export default function ApplyCom() {
<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 className="font-normal text-gray-500">{item?.bvn}</div>
</div>
</th>
<td className="px-3 py-2">
{item?.to || ''}
{item?.loan || ''}
</td>
<td className="px-3 py-2">
{item?.amount || ''}
</td>
<td className="px-3 py-2">
<div className="flex items-center">
{item?.from || ''}
{new Date(item?.added).toDateString()}
</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">
<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> */}
<span className='text-primary text-xl'>
<Icons name='eye' />
</span>
<span className='text-red-500 text-xl'>
<Icons name='trash' />
</span>
@@ -110,7 +96,7 @@ export default function ApplyCom() {
))
:
<tr className="w-3 p-3">
<td className="px-3 py-2" colSpan={6}>
<td className="px-3 py-2" colSpan={5}>
<div className="flex justify-center items-center">
No Record Found
</div>
@@ -125,9 +111,4 @@ export default function ApplyCom() {
}
</div>
)
}
const dummy = [
{name:'ok'}
]
}
@@ -8,24 +8,21 @@ import Icons from '../Icons'
import Avatar from '../../assets/user_avatar.jpg'
import queryKeys from '../../services/queryKeys'
import { applyLoan } from '../../services/siteServices'
import { approvedLoan } from '../../services/siteServices'
export default function ApprovedLoanCom() {
const {data, isFetching, isError, error} = useQuery({
queryKey: queryKeys.apply_loan,
queryFn: () => applyLoan()
queryKey: queryKeys.approved_loan,
queryFn: () => approvedLoan()
})
console.log('data', data?.data)
// const approvedUsers = data?.data?.demo_data?.list // APPLY LOAN LIST
const approvedUsers = data?.data?.result_data?.data // APPLY LOAN LIST
return (
<div className='w-full'>
<BreadcrumbCom title='Apply' paths={['Dashboard', 'Apply']} />
<p className='py-4'>
coming soon ...
</p>
<div className='w-full flex flex-col gap-3'>
<BreadcrumbCom title='Approved Loan' paths={['Dashboard', 'Approved Loan']} />
{isFetching ?
<>
<div className="w-full py-4">
@@ -37,29 +34,23 @@ export default function ApprovedLoanCom() {
<p className='text-red-500'>{error.message}</p>
</div>
:
<TableWrapper data={dummy} itemsPerPage={7}>
<TableWrapper data={approvedUsers} itemsPerPage={9}>
{({ 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
Loan
</th>
<th scope="col" className="px-4 py-2">
From
Amount
</th>
<th scope="col" className="px-4 py-2">
Ticket Number
Added
</th>
<th scope="col" className="px-4 py-2">
Action
@@ -69,39 +60,34 @@ export default function ApprovedLoanCom() {
<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 className="font-normal text-gray-500">{item?.bvn}</div>
</div>
</th>
<td className="px-3 py-2">
{item?.to || ''}
{item?.loan || ''}
</td>
<td className="px-3 py-2">
{item?.amount || ''}
</td>
<td className="px-3 py-2">
<div className="flex items-center">
{item?.from || ''}
{new Date(item?.added).toDateString()}
</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">
<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> */}
<span className='text-primary text-xl'>
<Icons name='eye' />
</span>
<span className='text-red-500 text-xl'>
<Icons name='trash' />
</span>
@@ -110,7 +96,7 @@ export default function ApprovedLoanCom() {
))
:
<tr className="w-3 p-3">
<td className="px-3 py-2" colSpan={6}>
<td className="px-3 py-2" colSpan={5}>
<div className="flex justify-center items-center">
No Record Found
</div>
@@ -125,9 +111,4 @@ export default function ApprovedLoanCom() {
}
</div>
)
}
const dummy = [
{name:'ok'}
]
}
+21 -35
View File
@@ -8,24 +8,21 @@ import Icons from '../Icons'
import Avatar from '../../assets/user_avatar.jpg'
import queryKeys from '../../services/queryKeys'
import { applyLoan } from '../../services/siteServices'
import { selectLoan } from '../../services/siteServices'
export default function SelectLoanCom() {
const {data, isFetching, isError, error} = useQuery({
queryKey: queryKeys.apply_loan,
queryFn: () => applyLoan()
queryKey: queryKeys.select_loan,
queryFn: () => selectLoan()
})
console.log('data', data?.data)
// const selectLoanUsers = data?.data?.demo_data?.list // APPLY LOAN LIST
const selectUsers = data?.data?.result_data?.data // APPLY LOAN LIST
return (
<div className='w-full'>
<div className='w-full flex flex-col gap-3'>
<BreadcrumbCom title='Apply' paths={['Dashboard', 'Apply']} />
<p className='py-4'>
coming soon ...
</p>
{isFetching ?
<>
<div className="w-full py-4">
@@ -37,29 +34,23 @@ export default function SelectLoanCom() {
<p className='text-red-500'>{error.message}</p>
</div>
:
<TableWrapper data={dummy} itemsPerPage={7}>
<TableWrapper data={selectUsers} itemsPerPage={9}>
{({ 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
Loan
</th>
<th scope="col" className="px-4 py-2">
From
Amount
</th>
<th scope="col" className="px-4 py-2">
Ticket Number
Added
</th>
<th scope="col" className="px-4 py-2">
Action
@@ -69,39 +60,34 @@ export default function SelectLoanCom() {
<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 className="font-normal text-gray-500">{item?.bvn}</div>
</div>
</th>
<td className="px-3 py-2">
{item?.to || ''}
{item?.loan || ''}
</td>
<td className="px-3 py-2">
{item?.amount || ''}
</td>
<td className="px-3 py-2">
<div className="flex items-center">
{item?.from || ''}
{new Date(item?.added).toDateString()}
</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">
<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> */}
<span className='text-primary text-xl'>
<Icons name='eye' />
</span>
<span className='text-red-500 text-xl'>
<Icons name='trash' />
</span>
@@ -110,7 +96,7 @@ export default function SelectLoanCom() {
))
:
<tr className="w-3 p-3">
<td className="px-3 py-2" colSpan={6}>
<td className="px-3 py-2" colSpan={5}>
<div className="flex justify-center items-center">
No Record Found
</div>
+11 -6
View File
@@ -1,5 +1,6 @@
import { ReactNode, useEffect, useState } from "react";
import MainBtn from "../MainBtn";
import Icons from "../Icons";
export default function TableWrapper({
@@ -89,16 +90,20 @@ export default function TableWrapper({
<div className='flex items-center gap-3 md:gap-6'>
<MainBtn
onClick={handlePrev}
text='Prev'
className={`${currentPage == 0 ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light`}
// text='Prev'
className={`${currentPage == 0 ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light text-center flex justify-center gap-2 items-center`}
disabled={isLoading}
/>
>
<Icons name='prev' />
</MainBtn>
<MainBtn
onClick={handleNext}
text='Next'
className={`${currentPage + numberOfSelection >= data.length ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light`}
// text='Next'
className={`${currentPage + numberOfSelection >= data.length ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light text-center flex justify-center gap-2 items-center`}
disabled={isLoading}
/>
>
<Icons name='next' />
</MainBtn>
</div>
</div>
}
+2
View File
@@ -1,5 +1,6 @@
import React from 'react'
import BreadcrumbCom from '../components/breadcrumb/BreadcrumbCom'
// import ApprovedLoanCom from '../components/approvedloancom/ApprovedLoanCom'
export default function ApprovedLoansPage() {
return (
@@ -8,6 +9,7 @@ export default function ApprovedLoansPage() {
<p className=''>
coming soon ...
</p>
{/* <ApprovedLoanCom /> */}
</div>
)
}
+2
View File
@@ -1,5 +1,6 @@
import React from 'react'
import BreadcrumbCom from '../components/breadcrumb/BreadcrumbCom'
// import SelectLoanCom from '../components/selectloancom/SelectLoanCom'
export default function SelectPage() {
return (
@@ -8,6 +9,7 @@ export default function SelectPage() {
<p className=''>
coming soon ...
</p>
{/* <SelectLoanCom /> */}
</div>
)
}