loan offers added

src/RouteLinks.js

@@ -7,6 +7,7 @@ const RouteLinks = {
     applicationsLoanPage: '/loans/apply',
     disbursementsLoanPage: '/loans/disbursements',
     selectedLoanPage: '/loans/select',
+    loanOffersPage: '/loans/offers',
 }
 
 export default RouteLinks

src/SiteRoutes.jsx

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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) => {
+    // const handleHideSubMenu = (name) => {
-        // e.stopPropagation()
+    //     // e.stopPropagation()
-        setHideSubMenu((prev) => {
+    //     setHideSubMenu((prev) => {
-            if(prev == name){
+    //         if(prev == name){
-                return ''
+    //             return ''
-            }else{
+    //         }else{
-                return name
+    //             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: 'Payments', status:1, icon: 'dot', to: ''},
-        {name: 'Configurations', 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: '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: 'Applications', status:1, icon: 'dot', to: ''},
-        {name: 'Configuration', 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

@@ -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

@@ -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

@@ -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'>
+            {(newData.length >= itemsPerPage) &&
-                <MainBtn 
+              <div className='flex items-center gap-3 md:gap-6'>
-                    onClick={handlePrev}
+                  <MainBtn 
-                    // text='Prev' 
+                      onClick={handlePrev}
-                    className={`${currentPage == 0 ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light text-center flex justify-center gap-2 items-center`} 
+                      // text='Prev' 
-                    disabled={isLoading}
+                      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>
+                  <Icons name='prev' />
-                <MainBtn 
+                  </MainBtn>
-                    onClick={handleNext}
+                  <MainBtn 
-                    // text='Next' 
+                      onClick={handleNext}
-                    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`} 
+                      // text='Next' 
-                    disabled={isLoading}
+                      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>
+                  <Icons name='next' />
-            </div>
+                  </MainBtn>
+              </div>
+            }
           </div>
         }
       </div>

src/pages/LoanOffersPage.jsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import LoanOffersCom from '../components/loanofferscom/LoanOffersCom'
+
+export default function LoanOffersPage() {
+  return (
+    <LoanOffersCom />
+  )
+}

src/services/queryKeys.js

@@ -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

@@ -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 }