DigiFi/digifi-office
1
0
Fork 0
Code Issues Pull Requests Releases Activity

loan offers added

Browse Source
This commit is contained in:
victorAnumudu
2025-02-22 19:00:54 +01:00
parent 60e434b511
commit 0143a85462
12 changed files with 364 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/RouteLinks.js
+1
View File
@@ -7,6 +7,7 @@ const RouteLinks = {
applicationsLoanPage: '/loans/apply',
disbursementsLoanPage: '/loans/disbursements',
selectedLoanPage: '/loans/select',
loanOffersPage: '/loans/offers',
}
export default RouteLinks
src/SiteRoutes.jsx
+2
View File
@@ -12,6 +12,7 @@ import ApprovedLoansPage from './pages/ApprovedLoansPage' // APPROVED LOANS PAGE
import DisbursementsLoanPage from './pages/DisbursementsLoanPage' // DISBURSEMENTS LOANS PAGE
import ApplicationsLoanPage from './pages/ApplicationsLoanPage' // APPLICATIONS LOANS PAGE
import SelectedLoanPage from './pages/SelectedLoanPage' // SELECTED LOANS PAGE
import LoanOffersPage from './pages/LoanOffersPage' // SELECTED LOANS PAGE
// const Home = lazy(() => import('./pages/Home'));
@@ -28,6 +29,7 @@ export default function SiteRoutes() {
<Route path={RouteLinks.disbursementsLoanPage} element={<DisbursementsLoanPage />} /> {`*/DISBURSEMENTS LOANS PAGE*/`}
<Route path={RouteLinks.applicationsLoanPage} element={<ApplicationsLoanPage />} /> {`*/APPLICATIONS LOANS PAGE*/`}
<Route path={RouteLinks.selectedLoanPage} element={<SelectedLoanPage />} /> {`*/SELECTED LOANS PAGE*/`}
<Route path={RouteLinks.loanOffersPage} element={<LoanOffersPage />} /> {`*/LOANS OFFERS PAGE*/`}
</Route>
{/* ERROR PAGE */}
src/components/applicationsloancom/ApplicationsLoanCom.jsx
+1 -1
View File
@@ -13,7 +13,7 @@ import { applyLoan } from '../../services/siteServices'
import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
import getDateFromDateString from '../../helpers/GetDateFromDateString';
export default function ApplicationsLoanCom() {
export default function LoanOffersCom() {
const {data, isFetching, isError, error} = useQuery({
queryKey: queryKeys.apply_loan,
src/components/layouts/DashboardHeader.jsx
+2 -2
View File
@@ -68,7 +68,7 @@ export default function DashboardHeader({showAsideDrawer, setShowAsideDrawer}) {
<img src={UserAvatar} alt='user image' className='w-full h-full p-1 rounded-full' />
</div> */}
<button onClick={()=>handleActiveMenu('avatar')} className='relative w-10 h-10 rounded shadow-round_black dark:shadow-round_white'>
<div onClick={()=>handleActiveMenu('avatar')} className='relative cursor-pointer w-10 h-10 rounded shadow-round_black dark:shadow-round_white'>
<img src={UserAvatar} alt='user avatar' className='w-full h-full p-1 rounded-full' />
{activeMenu == 'avatar' &&
<div className="pop-modal absolute p-4 w-52 sm:w-96 bg-white dark:bg-black right-0 top-16 rounded shadow-round_black dark:shadow-round_white">
@@ -89,7 +89,7 @@ export default function DashboardHeader({showAsideDrawer, setShowAsideDrawer}) {
</div>
</div>
}
</button>
</div>
</div>
</div>
</header>
src/components/layouts/aside/AsideLinkWithSubLinks.jsx
+8 -6
View File
@@ -1,27 +1,29 @@
import { useState } from "react";
import { useLocation } from "react-router-dom"
import { FaCaretDown } from "react-icons/fa";
import Icons from "../../Icons";
export default function AsideLinkWithSubLinks({shrinkAside, name, icon, hideSubMenu, setHideSubMenu, to, children}) {
export default function AsideLinkWithSubLinks({shrinkAside, name, icon, to, children, isOpen}) {
// const btnName = name
const {pathname} = useLocation()
// const [hideSubMenu, setHideSubMenu] = useState(true)
const isMatchedPath = pathname.split('/').includes('')
// isMatchedPath.splice(0,1)
const subLinkIsOpen = children.props.children.map(item => item.props).map(link => link.children).map(to => to.props.to).includes(pathname)
const [hideSubMenu, setHideSubMenu] = useState(isOpen)
return (
<div
className={`w-full px-4 text-[13px] font-semibold rounded`}
>
<button onClick={()=>setHideSubMenu(name)} name={name} className="py-2 w-full flex items-center justify-between gap-2 cursor-pointer text-slate-400">
<button onClick={()=>setHideSubMenu(prev => !prev)} name={name} className="py-2 w-full flex items-center justify-between gap-2 cursor-pointer text-slate-400">
<span className="flex gap-2 items-center">{icon && <Icons name={icon} />}{shrinkAside ? '' : name}</span>
<FaCaretDown className={`text-base ${(hideSubMenu==name || subLinkIsOpen) ? 'rotate-180' : 'rotate-0'}`} />
<FaCaretDown className={`text-base ${(hideSubMenu) ? 'rotate-180' : 'rotate-0'}`} />
</button>
<div className={`w-full ${(hideSubMenu == name || subLinkIsOpen) ? 'block' : 'hidden'}`}>
<div className={`w-full ${(hideSubMenu) ? 'block' : 'hidden'}`}>
{children}
</div>
</div>
src/components/layouts/aside/DashboardAside.jsx
+66 -23
View File
@@ -19,18 +19,18 @@ export default function DashboardAside({shrinkAside=false}) {
const {userDetails} = useSelector((state) => state.userDetails) // GETS LOGGED IN USER ROLE DETAILS
const {role}= userDetails
const [hideSubMenu, setHideSubMenu] = useState('')
// const [hideSubMenu, setHideSubMenu] = useState('')
const handleHideSubMenu = (name) => {
// e.stopPropagation()
setHideSubMenu((prev) => {
if(prev == name){
return ''
}else{
return name
}
})
}
// const handleHideSubMenu = (name) => {
// // e.stopPropagation()
// setHideSubMenu((prev) => {
// if(prev == name){
// return ''
// }else{
// return name
// }
// })
// }
return (
<div className='w-full h-full flex flex-col'>
@@ -46,36 +46,77 @@ export default function DashboardAside({shrinkAside=false}) {
if(active && !hasSubLinks){
return (
<div key={index}>
<AsideLink key={index} to={link.to} shrinkAside={shrinkAside} name={link.name} icon={link.icon} />
<AsideLink to={link.to} shrinkAside={shrinkAside} name={link.name} icon={link.icon} />
</div>
)
}else if(active && hasSubLinks){
}
if(active && hasSubLinks){
// let subLinkList = link.subLinks.filter(value => value.to).map(item => { //any of all open
// if(item.to){
// return item.to
// }
// })
let subLinkList = []
link.subLinks.forEach(item =>{
if(item.to){
subLinkList.push(item.to)
}else if(item.subLinks?.length > 0){
item.subLinks.forEach(item => {
subLinkList.push(item.to)
})
}
})
// console.log('subLinkList', subLinkList)
return (
<div key={index} className="w-full">
{link.title &&
<h1 className="px-4 py-2 text-12 text-slate-400 font-semibold uppercase mt-3 mb-1 border-b border-slate-800">{link.title}</h1>
}
<AsideLinkWithSubLinks hideSubMenu={hideSubMenu} setHideSubMenu={handleHideSubMenu} shrinkAside={shrinkAside} name={link.name} icon={link.icon}>
<AsideLinkWithSubLinks shrinkAside={shrinkAside} name={link.name} icon={link.icon} isOpen={subLinkList.includes(pathname)} >
<>
{link.subLinks.map((subItem, index)=>{
let active = subItem.status == 1 ? true : false
if(active){
let hasSubLinks = (subItem.subLinks && subItem.subLinks.length > 0) ? true : false
if(active && !hasSubLinks){
return (
<div key={index}>
<AsideLink key={index} to={subItem.to} shrinkAside={shrinkAside} name={subItem.name} icon={subItem.icon} />
</div>
)
}else if(active && hasSubLinks){
let subLinkList = subItem.subLinks.filter(value => value.to).map(item => { // specific open
if(item.to){
return item.to
}
})
return(
<AsideLinkWithSubLinks shrinkAside={shrinkAside} name={subItem.name} icon={subItem.icon} isOpen={subLinkList.includes(pathname)}>
<>
{subItem.subLinks.map((item, index)=>{
let active = item.status == 1 ? true : false
if(active){
return (
<div key={index}>
<AsideLink key={index} to={item.to} shrinkAside={shrinkAside} name={item.name} icon={item.icon} />
</div>
)
}
})}
</>
</AsideLinkWithSubLinks>
)
}else{
return null
}
})}
</>
</AsideLinkWithSubLinks>
</div>
)
}else{
return null
}
})}
</div>
<div className='px-4 py-2'>
<div className="bg-primary rounded w-full flex justify-center items-center gap-2">
<MainBtn
@@ -99,18 +140,20 @@ const asideNavLinks = [
{name: 'Applications', status:1, icon: 'dot', to: RouteLinks.applicationsLoanPage},
{name: 'Approved Loans', status:1, icon: 'dot', to: RouteLinks.approvedLoansPage},
{name: 'Disbursements', status:1, icon: 'dot', to: RouteLinks.disbursementsLoanPage},
{name: 'Payments', status:1, icon: 'dot', to: '#'},
{name: 'Configurations', status:1, icon: 'dot', to: '#'},
{name: 'Payments', status:1, icon: 'dot', to: ''},
{name: 'Configurations', status:1, icon: 'dot', subLinks: [
{name: 'Loan Offers', status:1, icon: 'dot', to: RouteLinks.loanOffersPage },
]
},
],
},
{name:'Product 2', title:'Product 2', status:1, icon: 'product', subLinks: [
{name: 'Applications', status:1, icon: 'dot', to: '#'},
{name: 'Configuration', status:1, icon: 'dot', to: '#'},
{name: 'Applications', status:1, icon: 'dot', to: ''},
]
},
{name:'Product 3', title:'Product 3', status:1, icon: 'product', subLinks: [
{name: 'Applications', status:1, icon: 'dot', to: '#'},
{name: 'Configuration', status:1, icon: 'dot', to: '#'},
{name: 'Applications', status:1, icon: 'dot', to: ''},
{name: 'Configuration', status:1, icon: 'dot', to: ''},
]
},
{name:'Administration', title:'Admin', status:1, icon: 'people', subLinks: [
src/components/layouts/aside/_DashboardAside.jsx
+120
View File
@@ -0,0 +1,120 @@
import { useEffect, useState } from "react";
import {Link, useLocation} from 'react-router-dom'
import RouteLinks from "../../../RouteLinks";
import DummyLogo from "../../DummyLogo";
import MainBtn from "../../MainBtn";
import AsideLink from "./AsideLink";
import AsideLinkWithSubLinks from "./AsideLinkWithSubLinks";
import { useSelector } from "react-redux";
import { generalLayoutContext } from "../../../context/GeneralLayoutContext";
import { TbLogout2 } from "react-icons/tb";
export default function DashboardAside({shrinkAside=false}) {
const {pathname} = useLocation()
const {setLogoutModal} = generalLayoutContext()
const {userDetails} = useSelector((state) => state.userDetails) // GETS LOGGED IN USER ROLE DETAILS
const {role}= userDetails
const [hideSubMenu, setHideSubMenu] = useState('')
const handleHideSubMenu = (name) => {
// e.stopPropagation()
setHideSubMenu((prev) => {
if(prev == name){
return ''
}else{
return name
}
})
}
return (
<div className='w-full h-full flex flex-col'>
<div className="px-4 w-full h-24 logo flex items-center">
<DummyLogo />
</div>
<hr className="border-slate-400" />
<div className="p-4 w-full flex flex-col gap-2 h-full overflow-y-auto">
{asideNavLinks.map((link, index) => {
let active = link.status == 1 ? true : false
let hasSubLinks = (link.subLinks && link.subLinks.length > 0) ? true : false
if(active && !hasSubLinks){
return (
<div key={index}>
<AsideLink key={index} to={link.to} shrinkAside={shrinkAside} name={link.name} icon={link.icon} />
</div>
)
}else if(active && hasSubLinks){
return (
<div key={index} className="w-full">
{link.title &&
<h1 className="px-4 py-2 text-12 text-slate-400 font-semibold uppercase mt-3 mb-1 border-b border-slate-800">{link.title}</h1>
}
<AsideLinkWithSubLinks hideSubMenu={hideSubMenu} setHideSubMenu={handleHideSubMenu} shrinkAside={shrinkAside} name={link.name} icon={link.icon}>
<>
{link.subLinks.map((subItem, index)=>{
let active = subItem.status == 1 ? true : false
if(active){
return (
<div key={index}>
<AsideLink key={index} to={subItem.to} shrinkAside={shrinkAside} name={subItem.name} icon={subItem.icon} />
</div>
)
}
})}
</>
</AsideLinkWithSubLinks>
</div>
)
}else{
return null
}
})}
</div>
<div className='px-4 py-2'>
<div className="bg-primary rounded w-full flex justify-center items-center gap-2">
<MainBtn
shrinkAside={shrinkAside}
text='Logout'
className="w-full text-center flex justify-center gap-2 items-center"
onClick={()=>setLogoutModal(true)}
>
<TbLogout2 className="text-base" />
</MainBtn>
</div>
</div>
</div>
)
}
const asideNavLinks = [
{name:'Dashboard', status:1, icon: 'dashboard', to: RouteLinks.homePage},
{name:'Salary Loan', title:'Loan', status:1, icon: 'money', subLinks: [
{name: 'Selected Loans', status:1, icon: 'dot', to: RouteLinks.selectedLoanPage},
{name: 'Applications', status:1, icon: 'dot', to: RouteLinks.applicationsLoanPage},
{name: 'Approved Loans', status:1, icon: 'dot', to: RouteLinks.approvedLoansPage},
{name: 'Disbursements', status:1, icon: 'dot', to: RouteLinks.disbursementsLoanPage},
{name: 'Payments', status:1, icon: 'dot', to: '#'},
{name: 'Configurations', status:1, icon: 'dot', to: '#'},
],
},
{name:'Product 2', title:'Product 2', status:1, icon: 'product', subLinks: [
{name: 'Applications', status:1, icon: 'dot', to: '#'},
{name: 'Configuration', status:1, icon: 'dot', to: '#'},
]
},
{name:'Product 3', title:'Product 3', status:1, icon: 'product', subLinks: [
{name: 'Applications', status:1, icon: 'dot', to: '#'},
{name: 'Configuration', status:1, icon: 'dot', to: '#'},
]
},
{name:'Administration', title:'Admin', status:1, icon: 'people', subLinks: [
{name: 'Users', status:1, icon: 'dot', to: RouteLinks.usersPage},
]
},
]
src/components/loanofferscom/LoanOffersCom.jsx
+129
View File
@@ -0,0 +1,129 @@
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 { loanOffers } from '../../services/siteServices'
import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
import getDateFromDateString from '../../helpers/GetDateFromDateString';
export default function ApplicationsLoanCom() {
const {data, isFetching, isError, error} = useQuery({
queryKey: queryKeys.apply_loan,
queryFn: () => loanOffers()
})
const loanOffersUsersList = data?.data // LOAN OFFERS LIST
return (
<div className='w-full flex flex-col gap-8'>
<BreadcrumbCom title='Loan offers' paths={['Dashboard', 'Loan offers']} />
{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={loanOffersUsersList} 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">
CID
</th>
<th scope="col" className="px-4 py-2">
Loan
</th>
<th scope="col" className="px-4 py-2">
Amount
</th>
<th scope="col" className="px-4 py-2">
Description
</th>
<th scope="col" className="px-4 py-2">
Days Duration
</th>
<th scope="col" className="px-4 py-2">
Ative
</th>
<th scope="col" className="px-4 py-2">
Score
</th>
<th scope="col" className="px-4 py-2">
Lorder
</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?.cid}</div>
</div>
</th>
<td className="px-3 py-2">
{item?.loan}
</td>
<td className="px-3 py-2">
{item?.amount || ''}
</td>
<td className="px-3 py-2">
{item?.description}
</td>
<td className="px-3 py-2">
{item?.days_duration}
</td>
<td className="px-3 py-2">
{item?.active}
</td>
<td className="px-3 py-2">
{item?.score}
</td>
<td className="px-3 py-2">
{item?.lorder}
</td>
{/* <td className="px-3 py-2 flex gap-3 md:gap-4">
<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={8}>
<div className="flex justify-center items-center">
No Record Found
</div>
</td>
</tr>
}
</tbody>
</table>
</>
)}
</TableWrapper>
}
</div>
)
}
src/components/tableWrapper/TableWrapper.jsx
+20 -18
View File
@@ -87,24 +87,26 @@ export default function TableWrapper({
<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 ? '----' : `${currentPage + 1}-${currentPage + numberOfSelection >= data.length ? data.length : (currentPage + numberOfSelection)}`}</span> of <span className="font-semibold text-gray-900 dark:text-white">{data.length}</span>
</div>
<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-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-center flex justify-center gap-2 items-center`}
disabled={isLoading}
>
<Icons name='next' />
</MainBtn>
</div>
{(newData.length >= itemsPerPage) &&
<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-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-center flex justify-center gap-2 items-center`}
disabled={isLoading}
>
<Icons name='next' />
</MainBtn>
</div>
}
</div>
}
</div>
src/pages/LoanOffersPage.jsx
+8
View File
@@ -0,0 +1,8 @@
import React from 'react'
import LoanOffersCom from '../components/loanofferscom/LoanOffersCom'
export default function LoanOffersPage() {
return (
<LoanOffersCom />
)
}
src/services/queryKeys.js
+1
View File
@@ -2,6 +2,7 @@ const queryKeys = {
apply_loan: ['apply'],
select_loan: ['select-loan'],
approved_loan: ['approved-loan'],
loan_offers: ['loan-offers'],
}
export default queryKeys
src/services/siteServices.js
+6
View File
@@ -56,6 +56,12 @@ export const applyLoan = (reqData) => {
return getAuxEnd(`/office/loan/apply`, postData)
}
// FUNCTION TO GET APPLIED LOANS TABLE
export const loanOffers = (reqData) => {
const postData = { ...reqData }
return getAuxEnd(`/office/offers`, postData)
}
// FUNCTION TO GET APPLIED LOANS TABLE
export const selectLoan = (reqData) => {
const postData = { ...reqData }