files
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,8 @@
|
||||
export default function DummyLogo() {
|
||||
return (
|
||||
<div className="w-20 rounded cursor-pointer bg-primary text-white-light p-2 flex flex-col justify-center items-center gap-0">
|
||||
<h1 className="text-sm font-bold">digiFI</h1>
|
||||
<p className="text-12">Logo</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import React from 'react'
|
||||
import { AiFillProduct, AiOutlineDashboard } from 'react-icons/ai'
|
||||
import { FaEdit } from 'react-icons/fa'
|
||||
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 (
|
||||
<>
|
||||
{name.toLowerCase() == 'dashboard' ?
|
||||
<AiOutlineDashboard className={`text-base ${className}`} />
|
||||
: name.toLowerCase() == 'money' ?
|
||||
<FaRegMoneyBill1 className={`text-base ${className}`} />
|
||||
:name.toLowerCase() == 'dot' ?
|
||||
<GoDotFill className={`text-base ${className}`} />
|
||||
:name.toLowerCase() == 'people' ?
|
||||
<IoPeople className={`text-base ${className}`} />
|
||||
:name.toLowerCase() == 'product' ?
|
||||
<AiFillProduct className={`text-base ${className}`} />
|
||||
:name.toLowerCase() == 'trash' ?
|
||||
<IoTrash className={`text-base ${className}`} />
|
||||
:name.toLowerCase() == 'eye' ?
|
||||
<FaEye className={`text-base ${className}`} />
|
||||
:name.toLowerCase() == 'next' ?
|
||||
<TbPlayerTrackNext className={`text-base ${className}`} />
|
||||
:name.toLowerCase() == 'prev' ?
|
||||
<TbPlayerTrackPrev className={`text-base ${className}`} />
|
||||
:name.toLowerCase() == 'edit' ?
|
||||
<FaEdit className={`text-base ${className}`} />
|
||||
:
|
||||
null
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function InputText({id, name, type='text', value, handleChange}) {
|
||||
return (
|
||||
<div className='w-full h-10 round overflow-hidden'>
|
||||
<input id={id} name={name} type={type} value={value} onChange={handleChange} className='p-2 w-full h-full text-black outline-0 ring-0 border border-slate-400 focus:border-purple-600 rounded' />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function Label({name, htmlfor, error}) {
|
||||
return (
|
||||
<label className='text-black font-semibold flex gap-1 items-center' htmlFor={htmlfor}>{name} {error && <span className='text-red-500 text-sm'>{error}</span>}</label>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
export default function MainBtn({
|
||||
onClick,
|
||||
className,
|
||||
text,
|
||||
shrinkAside,
|
||||
children,
|
||||
loading,
|
||||
disabled
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
disabled={disabled}
|
||||
className={`py-2 px-3 rounded text-12 lg:text-lg ${className || ''} ${(disabled || loading) && 'opacity-60'}`}
|
||||
onClick={onClick}
|
||||
>
|
||||
{children && children}
|
||||
{shrinkAside ? '' : loading? 'Loading...' : text}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import React from 'react'
|
||||
import { FaCircleNotch } from "react-icons/fa";
|
||||
|
||||
export default function PageLoader() {
|
||||
return (
|
||||
<div className="w-full h-full fixed top-0 left-0 bg-white opacity-75 z-50">
|
||||
<div className="flex justify-center items-center mt-[50vh]">
|
||||
<FaCircleNotch className='text-5xl text-violet-600 animate-spin' />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
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'
|
||||
|
||||
import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
|
||||
import getDateFromDateString from '../../helpers/GetDateFromDateString';
|
||||
|
||||
export default function LoanOffersCom() {
|
||||
|
||||
const {data, isFetching, isError, error} = useQuery({
|
||||
queryKey: queryKeys.apply_loan,
|
||||
queryFn: () => applyLoan()
|
||||
})
|
||||
|
||||
const appliedUsers = data?.data?.result_data?.data // APPLY LOAN LIST
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-col gap-8'>
|
||||
<BreadcrumbCom title='Applications' paths={['Dashboard', 'Applications']} />
|
||||
|
||||
{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={appliedUsers} 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">
|
||||
Amount
|
||||
</th>
|
||||
<th scope="col" className="px-4 py-2">
|
||||
Added
|
||||
</th>
|
||||
<th scope="col" className="px-4 py-2">
|
||||
Verified
|
||||
</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">
|
||||
{item?.amount || ''}
|
||||
</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">
|
||||
<div className="flex items-center">
|
||||
{!item?.verified ? 'N/A' : `${getDateFromDateString(item?.verified)} ${getTimeFromDateString(item?.verified)}`}
|
||||
</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={6}>
|
||||
<div className="flex justify-center items-center">
|
||||
No Record Found
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</>
|
||||
)}
|
||||
</TableWrapper>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { useDispatch } from 'react-redux'
|
||||
import { useLocation, useNavigate } from 'react-router-dom'
|
||||
// import { useMutation } from '@tanstack/react-query'
|
||||
|
||||
import Label from '../Label'
|
||||
import InputText from '../InputText'
|
||||
import PageLoader from '../PageLoader'
|
||||
import { updateUserDetails } from "../../store/UserDetails";
|
||||
// import { loginUser } from '../../services/siteServices'
|
||||
|
||||
import GoogleDownload from '../../assets/download/andriod.jpg'
|
||||
import IOSDownload from '../../assets/download/apple.jpg'
|
||||
import RouteLinks from '../../RouteLinks'
|
||||
|
||||
export default function LoginCom() {
|
||||
|
||||
const dispatch = useDispatch()
|
||||
const navigate = useNavigate()
|
||||
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const [fields, setFields] = useState({
|
||||
username: '',
|
||||
password: '',
|
||||
})
|
||||
|
||||
const handleChange = ({target:{name, value}}) => {
|
||||
setFields(prev => ({...prev, [name]:value}))
|
||||
}
|
||||
|
||||
// const login = useMutation({
|
||||
// mutationFn: (fields) => {
|
||||
// if(!fields.username || !fields.password){
|
||||
// throw new Error('Please provide all fields marked *')
|
||||
// }
|
||||
// return loginUser(fields)
|
||||
// },
|
||||
// onError: (error) => {
|
||||
// console.log(error)
|
||||
// },
|
||||
// onSuccess: (res) => {
|
||||
// // const {token, room} = res?.data?.data
|
||||
// // if(token){
|
||||
// // localStorage.setItem('token', token)
|
||||
// // localStorage.setItem('room', room)
|
||||
// // // const data = {token}
|
||||
// // // dispatch(updateUserDetails({ ...data }));
|
||||
// // }
|
||||
// navigate(myLinks.home, {state:{proceed:'true'}}) // later add redux to dispatch state
|
||||
// }
|
||||
// })
|
||||
|
||||
|
||||
const handleLogin = () => {
|
||||
setLoading(true)
|
||||
const data = {name: 'dummy'}
|
||||
localStorage.setItem('token', 'token')
|
||||
dispatch(updateUserDetails({ ...data }));
|
||||
setTimeout(()=>{
|
||||
navigate(RouteLinks.homePage, {replace:true})
|
||||
},500)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={`h-screen bg-sky-300 flex flex-col items-center bg-[url('./assets/login-bg.jpg')] bg-cover bg-center bg-no-repeat`}>
|
||||
<div className='flex flex-col gap-3 w-[80%] sm:w-[500px] bg-white rounded-xl mt-8 p-8 shadow'>
|
||||
<div className='w-full mb-8 flex flex-col gap-1'>
|
||||
<h1 className='text-2xl md:text-3xl font-bold'>Digifi BackOffice</h1>
|
||||
<p className='text-sm font-medium text-slate-400'>Welcome back, please login to your account</p>
|
||||
</div>
|
||||
<div className='text-input flex flex-col gap-2'>
|
||||
<Label name='Username' htmlfor='username' />
|
||||
<InputText id='username' name='username' value={fields.username} handleChange={handleChange} />
|
||||
</div>
|
||||
<div className='text-input flex flex-col gap-2'>
|
||||
<Label name='Password' htmlfor='password' />
|
||||
<InputText id='password' name='password' type='password' value={fields.password} handleChange={handleChange} />
|
||||
</div>
|
||||
|
||||
{/* {login.error &&
|
||||
<>
|
||||
<div className="w-full text-center p-2">
|
||||
<p className='text-red-500 text-sm'>{login.error.message}</p>
|
||||
</div>
|
||||
</>
|
||||
} */}
|
||||
|
||||
<div className='mt-5 flex justify-end items-center'>
|
||||
{/* <button onClick={()=>{login.mutate(fields)}} disabled={login.isPending} className='px-3 py-2 bg-purple-800 text-white font-bold rounded'>{login.isPending ? 'loading...' : 'Login'}</button> */}
|
||||
<button onClick={handleLogin} className='px-4 py-[5px] bg-purple-600 text-white font-bold rounded'>{loading ? 'Loading...' : 'SIGN IN'}</button>
|
||||
</div>
|
||||
|
||||
<div className="hidden mt-8 gri grid-cols-2 gap-8">
|
||||
<div className="w-full">
|
||||
<a className="icon google"
|
||||
href='#' >
|
||||
<img src={IOSDownload} className='w-100 h-auto' alt='IOS Download' />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<a className="icon apple" href='#'>
|
||||
<img src={GoogleDownload} className='w-100 h-auto' alt='IOS Download' />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { MdKeyboardDoubleArrowRight } from 'react-icons/md'
|
||||
import { TiHomeOutline } from 'react-icons/ti'
|
||||
|
||||
export default function BreadcrumbCom({title, span, paths}) {
|
||||
return (
|
||||
<div className='w-full py-2 flex justify-between items-center'>
|
||||
<div className='flex flex-col md:flex-row gap-1 md:items-center'>
|
||||
<h1 className='text-12 sm:text-lg md:text-2xl text-black dark:text-black-gray font-semibold'>{title}</h1>
|
||||
<span className='text-red-500 text-10 sm:text-base md:text-xl'>{span && span}</span>
|
||||
</div>
|
||||
<div className='flex gap-2 items-center text-black-gray dark:text-black-gray text-base'>
|
||||
<TiHomeOutline className='text-black dark:text-black-gray' />
|
||||
{paths.map((item, index) => (
|
||||
<div className='flex gap-2 items-center text-black dark:text-black-gray text-10 sm:text-sm' key={index}>
|
||||
<MdKeyboardDoubleArrowRight />
|
||||
<p className={`${index + 1 == paths.length ? 'text-sky-600 dark:text-black-gray' : ''}`}>{item}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
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 DisbursementsLoanCom() {
|
||||
|
||||
const {data, isFetching, isError, error} = useQuery({
|
||||
queryKey: queryKeys.approved_loan,
|
||||
queryFn: () => approvedLoan()
|
||||
})
|
||||
|
||||
const approvedUsers = data?.data?.result_data?.data // DISBURSED LOAN LIST
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-col gap-8'>
|
||||
<BreadcrumbCom title='Disbursements' paths={['Dashboard', 'Disbursements']} />
|
||||
|
||||
{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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
import { LuSunDim } from "react-icons/lu";
|
||||
import { IoMdSunny } from "react-icons/io";
|
||||
|
||||
import { generalLayoutContext } from "../../context/GeneralLayoutContext"
|
||||
|
||||
import UserAvatar from '../../assets/user_avatar.jpg'
|
||||
import HandBurger from "./HandBurger"
|
||||
import { Link } from "react-router-dom"
|
||||
import RouteLinks from "../../RouteLinks"
|
||||
import { useState } from "react";
|
||||
import MainBtn from "../MainBtn";
|
||||
import { TbLogout2 } from "react-icons/tb";
|
||||
|
||||
export default function DashboardHeader({showAsideDrawer, setShowAsideDrawer}) {
|
||||
|
||||
const {theme, handleTheme, handleDrawer, setLogoutModal} = generalLayoutContext()
|
||||
|
||||
const [activeMenu, setActiveMenu] = useState('')
|
||||
|
||||
const handleActiveMenu = (name) => {
|
||||
if(activeMenu == name){
|
||||
setActiveMenu('')
|
||||
}else{
|
||||
setActiveMenu(name)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* HEADER SECTION*/}
|
||||
<header className='sticky top-0 z-[777] w-full px-3 md:px-10 bg-white shadow-sm text-brown dark:shadow-white dark:bg-black dark:text-white'>
|
||||
<div className='w-full flex h-20 justify-between lg:justify-end items-center'>
|
||||
<div className="lg:hidden">
|
||||
<HandBurger asideDisplay={()=>setShowAsideDrawer(prev => !prev)} showAside={showAsideDrawer} barColor="bg-black-gray" />
|
||||
</div>
|
||||
|
||||
{/* USER AVATAR */}
|
||||
<div className="flex gap-4 justify-end">
|
||||
|
||||
{/* GO TO WALLET */}
|
||||
<Link to={RouteLinks.walletPage} className="relative px-2 flex justify-center items-center gap-2 cursor-pointer">
|
||||
<i className="fa-solid fa-wallet text-xl"></i>
|
||||
</Link>
|
||||
|
||||
{/* MESSAGE */}
|
||||
{/* <button onClick={()=>handleDrawer(drawerName.chat)} className="relative px-2 flex justify-center items-center gap-2 cursor-pointer">
|
||||
<i className="fa-regular fa-envelope text-xl"></i>
|
||||
<div className="absolute w-4 h-4 right-0 top-4 text-[8px] flex justify-center items-center rounded-full bg-emerald-500 animate-pulse">1</div>
|
||||
</button> */}
|
||||
|
||||
{/* NOTIFICATION */}
|
||||
{/* <button onClick={()=>{}} className="relative px-2 flex justify-center items-center gap-2 cursor-pointer">
|
||||
<i className="fa-regular fa-bell text-xl"></i>
|
||||
<div className="absolute w-4 h-4 right-0 top-4 text-[8px] flex justify-center items-center rounded-full bg-emerald-500 animate-pulse">1</div>
|
||||
</button> */}
|
||||
|
||||
{/* THEME SELECTION */}
|
||||
<div onClick={handleTheme} className='px-2 flex justify-center items-center gap-2 cursor-pointer' title='Switch Color Mode'>
|
||||
{theme == 'dark' ?
|
||||
<IoMdSunny className="text-sm md:text-xl font-bold" />
|
||||
:
|
||||
<LuSunDim className="text-sm md:text-xl font-bold" />
|
||||
}
|
||||
</div>
|
||||
|
||||
{/* USER AVATRA */}
|
||||
{/* <div className='w-10 h-10 rounded shadow-round_black dark:shadow-round_white'>
|
||||
<img src={UserAvatar} alt='user image' className='w-full h-full p-1 rounded-full' />
|
||||
</div> */}
|
||||
|
||||
<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">
|
||||
<div className="w-full h-full flex flex-col gap-4">
|
||||
<div className="flex flex-col text-black dark:text-white text-base sm:text-lg">
|
||||
<h1 className="font-semibold">Username</h1>
|
||||
<p className="-mt-2">username@gmail.com</p>
|
||||
</div>
|
||||
<div className="bg-primary rounded w-full flex justify-center items-center gap-2">
|
||||
<MainBtn
|
||||
text='Logout'
|
||||
className="w-full text-center text-white font-medium text-lg flex justify-center gap-2 items-center"
|
||||
onClick={()=>setLogoutModal(true)}
|
||||
>
|
||||
<TbLogout2 className="text-base" />
|
||||
</MainBtn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Outlet } from 'react-router-dom'
|
||||
import { FaArrowRight, FaArrowLeft } from "react-icons/fa6";
|
||||
|
||||
import DashboardAside from './aside/DashboardAside'
|
||||
import DashboardHeader from './DashboardHeader'
|
||||
import { generalLayoutContext } from '../../context/GeneralLayoutContext'
|
||||
|
||||
export default function DashboardLayout() {
|
||||
const [shrinkAside, setShrinkAside] = useState(false)
|
||||
|
||||
const [showAsideDrawer, setShowAsideDrawer] = useState(false)
|
||||
|
||||
useEffect(()=>{
|
||||
window.addEventListener('resize', ()=>{
|
||||
setShrinkAside(false)
|
||||
setShowAsideDrawer(false)
|
||||
})
|
||||
},[])
|
||||
return (
|
||||
<div className='w-full flex relative m-auto h-screen overflow-hidden'>
|
||||
<div
|
||||
className={`${shrinkAside ? 'w-28' : 'w-72'} hidden lg:block relative z-[999] bg-black text-white-light`}
|
||||
>
|
||||
<div className='sticky top-0 h-full'>
|
||||
<DashboardAside shrinkAside={shrinkAside} />
|
||||
<button
|
||||
className='absolute top-[72px] -translate-y-[50px] -right-5 block p-2 rounded shadow-round_black dark:shadow-round_white bg-white dark:bg-black text-black dark:text-white'
|
||||
onClick={()=>setShrinkAside(prev => !prev)}
|
||||
>
|
||||
{shrinkAside ? <FaArrowRight />: <FaArrowLeft />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div
|
||||
// onClick={()=>setShowAsideDrawer(prev => !prev)}
|
||||
className={`${showAsideDrawer ? 'left-0' : '-left-96'} w-4/5 sm:w-72 lg:hidden fixed inset-0 z-[999] bg-black text-white-light`}>
|
||||
<DashboardAside />
|
||||
<button
|
||||
className='absolute top-[72px] -translate-y-[50px] -right-5 block p-2 rounded shadow-round_black dark:shadow-round_white bg-white dark:bg-black text-black dark:text-white'
|
||||
onClick={(e)=>setShowAsideDrawer(prev => !prev)}
|
||||
>
|
||||
<FaArrowLeft />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className='relative w-full h-full overflow-y-auto'>
|
||||
{/* HEADER SECTION generalLayoutContext*/}
|
||||
<DashboardHeader showAsideDrawer={showAsideDrawer} setShowAsideDrawer={setShowAsideDrawer} />
|
||||
|
||||
{/* BODY SECTION */}
|
||||
{/* main takes the full width minus that of the header and footer 72 for header, 39 for footer total 111 */}
|
||||
<div className='main p-3 md:p-10 bg-white-light dark:bg-slate-800 text-brown dark:text-white-light min-h-[calc(99vh-111px)]'>
|
||||
<Outlet />
|
||||
</div>
|
||||
|
||||
{/* FOOTER SECTION */}
|
||||
<footer className="sticky bottom-0 text-center lg:text-end w-full bg-white dark:bg-slate-800 dark:text-white-light p-3 md:px-10 shadow-[0px_0px_2px_black]">
|
||||
<p className="text-10">Copyright @ {new Date().getFullYear()} - Developed by digiFi. All Rights Reserved</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
|
||||
export default function HandBurger({showAside, asideDisplay, barColor}) {
|
||||
return (
|
||||
<div
|
||||
className="relative lg:hidden w-5 h-5 flex flex-col items-center justify-between cursor-pointer"
|
||||
onClick={asideDisplay}
|
||||
>
|
||||
{/* <div
|
||||
className={`absolute left-0 w-5 h-1 rounded-md ${barColor ? barColor :'bg-primary'} dark:bg-dark-light${
|
||||
showAside ? "top-1/2 -translate-y-1/2 rotate-45" : "top-0"
|
||||
}`}
|
||||
></div> */}
|
||||
<div
|
||||
className={`absolute left-0 w-5 h-1 rounded-md ${barColor ? barColor :'bg-primary'} dark:bg-white-light ${
|
||||
showAside
|
||||
? "bottom-1/2 translate-y-1/2 rotate-45"
|
||||
: ""
|
||||
}`}
|
||||
></div>
|
||||
<div
|
||||
className={`absolute left-0 top-1/2 -translate-y-1/2 w-5 h-1 rounded-md ${barColor ? barColor :'bg-primary'} dark:bg-white-light transition-all duration-300 ${
|
||||
showAside
|
||||
? "rotate-[2000deg] opacity-0"
|
||||
: ""
|
||||
}`}
|
||||
></div>
|
||||
<div
|
||||
className={`absolute left-0 w-5 h-1 rounded-md ${barColor ? barColor :'bg-primary'} dark:bg-white-light ${
|
||||
showAside
|
||||
? "top-1/2 -translate-y-1/2 -rotate-45"
|
||||
: "bottom-0"
|
||||
}`}
|
||||
></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import MainBtn from "../MainBtn"
|
||||
import ModalWrapper from "../modals/ModalWrapper"
|
||||
import RouteLinks from "../../RouteLinks"
|
||||
import { updateUserDetails } from "../../store/UserDetails"
|
||||
import { useDispatch } from "react-redux"
|
||||
|
||||
|
||||
export default function LogoutModal({close}) {
|
||||
const navigate = useNavigate()
|
||||
|
||||
const dispatch = useDispatch()
|
||||
|
||||
const handleLogout = () => {
|
||||
dispatch(updateUserDetails({}))
|
||||
localStorage.clear()
|
||||
navigate(RouteLinks.loginPage, {replace:true})
|
||||
close()
|
||||
// location.reload()
|
||||
}
|
||||
return (
|
||||
<ModalWrapper
|
||||
>
|
||||
<div className="relative bg-white rounded-lg shadow-round_black dark:shadow-round_white dark:bg-gray-700 dark:text-white">
|
||||
{/* <!-- Modal header --> */}
|
||||
<div className="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
|
||||
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
LOGOUT
|
||||
</h3>
|
||||
<button onClick={close} type="button" className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="default-modal">
|
||||
<svg className="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
|
||||
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
|
||||
</svg>
|
||||
<span className="sr-only">Close modal</span>
|
||||
</button>
|
||||
</div>
|
||||
{/* <!-- Modal body --> */}
|
||||
<div className="p-4 md:p-5 text-center">
|
||||
<svg className="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
|
||||
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
|
||||
</svg>
|
||||
<h3 className="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">Are you sure you want to logout?</h3>
|
||||
<div className="flex justify-center items-center gap-6">
|
||||
<MainBtn onClick={handleLogout} text='Logout' className="text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800" />
|
||||
<MainBtn onClick={close} text='Cancel' className="border text-black dark:text-white" />
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- Modal footer --> */}
|
||||
</div>
|
||||
</ModalWrapper>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { Link, useLocation } from "react-router-dom"
|
||||
import Icons from "../../Icons"
|
||||
|
||||
export default function AsideLink({shrinkAside, name, to, icon}) {
|
||||
|
||||
const {pathname} = useLocation()
|
||||
|
||||
return (
|
||||
<Link
|
||||
className={`w-full flex items-center gap-2 px-4 py-2 my-1 text-[13px] font-semibold rounded-md hover:text-white-light hover:bg-white/10 ${pathname == to ? 'bg-white/10 text-white-light' : 'text-slate-400'}`}
|
||||
to={to}
|
||||
>
|
||||
{icon && <Icons name={icon} />}
|
||||
{shrinkAside ? '' : name}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
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, to, children, isOpen}) {
|
||||
|
||||
// const btnName = name
|
||||
|
||||
const {pathname} = useLocation()
|
||||
|
||||
const isMatchedPath = pathname.split('/').includes('')
|
||||
// isMatchedPath.splice(0,1)
|
||||
|
||||
const [hideSubMenu, setHideSubMenu] = useState(isOpen)
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`w-full px-4 text-[13px] font-semibold rounded`}
|
||||
>
|
||||
<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) ? 'rotate-180' : 'rotate-0'}`} />
|
||||
</button>
|
||||
<div className={`w-full ${(hideSubMenu) ? 'block' : 'hidden'}`}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,163 @@
|
||||
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 to={link.to} shrinkAside={shrinkAside} name={link.name} icon={link.icon} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
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 shrinkAside={shrinkAside} name={link.name} icon={link.icon} isOpen={subLinkList.includes(pathname)} >
|
||||
<>
|
||||
{link.subLinks.map((subItem, index)=>{
|
||||
let active = subItem.status == 1 ? true : false
|
||||
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>
|
||||
)
|
||||
}
|
||||
})}
|
||||
</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', 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:'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},
|
||||
]
|
||||
},
|
||||
]
|
||||
@@ -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},
|
||||
]
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,33 @@
|
||||
import { Link, useLocation } from "react-router-dom"
|
||||
import { layoutDefaultContext } from "../../context/DefaultLayoutContext"
|
||||
|
||||
|
||||
export default function FooterLinks({
|
||||
linkName,
|
||||
href,
|
||||
}) {
|
||||
|
||||
const {pathname} = useLocation()
|
||||
|
||||
const {subLinkIsActive, setSubLinkIsActive} = layoutDefaultContext() // CONTEXT TO GET WHEN A SUBLINK IS CLICKED
|
||||
|
||||
return (
|
||||
<Link
|
||||
to={href}
|
||||
className={`${pathname == href && 'text-white-light/50'} block relative p-1 font-semibold text-sm lg:text-sm text-white-light before:absolute before:left-0 before:top-full before:w-0 before:content-[''] before:h-[2px] before:bg-white-light hover:before:w-full hover:text-white-light/50`}
|
||||
onClick={()=>{
|
||||
if(subLinkIsActive){
|
||||
setSubLinkIsActive((prev)=>{
|
||||
if(prev == linkName){
|
||||
return null
|
||||
}else{
|
||||
return linkName
|
||||
}
|
||||
})
|
||||
}
|
||||
}}
|
||||
>
|
||||
{linkName}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import { Link, useLocation } from "react-router-dom"
|
||||
import { layoutDefaultContext } from "../../context/DefaultLayoutContext"
|
||||
|
||||
export default function NavLinks({
|
||||
linkName,
|
||||
href,
|
||||
}) {
|
||||
|
||||
const {pathname} = useLocation()
|
||||
|
||||
const {subLinkIsActive, setSubLinkIsActive} = layoutDefaultContext() // CONTEXT TO GET WHEN A SUBLINK IS CLICKED
|
||||
|
||||
return (
|
||||
<Link
|
||||
to={href}
|
||||
className={`${pathname == href && 'text-brown/50'} block uppercase relative p-1 font-semibold text-sm lg:text-sm text-brown before:absolute before:left-0 before:top-full before:w-0 before:content-[''] before:h-[2px] before:bg-brown hover:before:w-full hover:text-brown/50`}
|
||||
onClick={()=>{
|
||||
if(subLinkIsActive){
|
||||
setSubLinkIsActive((prev)=>{
|
||||
// e.stopPropagation()
|
||||
// console.log('bubble')
|
||||
if(prev == linkName){
|
||||
return null
|
||||
}else{
|
||||
return linkName
|
||||
}
|
||||
})
|
||||
}
|
||||
}}
|
||||
>
|
||||
{linkName}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
// import { useLocation } from "react-router-dom"
|
||||
import NavLinks from "./NavLinks"
|
||||
import { layoutDefaultContext } from "../../context/DefaultLayoutContext"
|
||||
|
||||
|
||||
export default function NavLinksWithSubLinks({
|
||||
linkName,
|
||||
subLink=[],
|
||||
asLink=true,
|
||||
}) {
|
||||
|
||||
// const {pathname} = useLocation()
|
||||
const {subLinkIsActive, setSubLinkIsActive} = layoutDefaultContext() // CONTEXT TO GET WHEN A SUBLINK IS CLICKED
|
||||
|
||||
return (
|
||||
// <Link
|
||||
// to={''}
|
||||
// className="z-[999] relative p-1 font-semibold text-sm lg:text-lg text-brown"
|
||||
// >
|
||||
// <span className="flex gap-1 items-center">
|
||||
// {linkName}
|
||||
// <i className="fa-solid fa-caret-up rotate-180"></i>
|
||||
// </span>
|
||||
// {/* sub links section */}
|
||||
// <div className="py-3 absolute top-[60px] w-48 rounded-md bg-white-light">
|
||||
// {subLink.map(item => (
|
||||
// <div className="w-full px-2 py-1">
|
||||
// <NavLinks
|
||||
// linkName={item.linkName}
|
||||
// href={item.link}
|
||||
// />
|
||||
// </div>
|
||||
// ))}
|
||||
// </div>
|
||||
// </Link>
|
||||
|
||||
<>
|
||||
{asLink ?
|
||||
<button
|
||||
className={`${(subLinkIsActive && subLinkIsActive == linkName) && 'text-brown/50'} z-[999] uppercase relative text-left p-1 font-semibold text-sm lg:text-sm text-brown hover:text-brown/50`}
|
||||
onClick={()=>setSubLinkIsActive((prev)=>{
|
||||
// e.stopPropagation()
|
||||
// console.log('bubble')
|
||||
if(prev == linkName){
|
||||
return null
|
||||
}else{
|
||||
return linkName
|
||||
}
|
||||
})}
|
||||
>
|
||||
<span className="flex gap-1 items-center">
|
||||
{linkName}
|
||||
<i className={`fa-solid fa-caret-up ${(subLinkIsActive && subLinkIsActive == linkName) ? 'rotate-0' : 'rotate-180'}`}></i>
|
||||
</span>
|
||||
{/* sub links section */}
|
||||
<div
|
||||
className={`p-0 overflow-hidden absolute top-[55px] w-48 rounded-md bg-white shadow-md ${(subLinkIsActive && subLinkIsActive == linkName) && 'p-3'}`}
|
||||
onClick={()=>setSubLinkIsActive((prev)=>{
|
||||
// e.stopPropagation()
|
||||
// console.log('bubble')
|
||||
if(prev == linkName){
|
||||
return null
|
||||
}else{
|
||||
return linkName
|
||||
}
|
||||
})}
|
||||
>
|
||||
{subLink.map(item => (
|
||||
<div key={item.linkName} className={`w-full h-0 overflow-hidden px-2 ${(subLinkIsActive && subLinkIsActive == linkName) && 'h-10'}`}>
|
||||
<NavLinks
|
||||
linkName={item.linkName}
|
||||
href={item.link}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</button>
|
||||
:
|
||||
<button
|
||||
className={`${(subLinkIsActive && subLinkIsActive == linkName) && 'text-brown/50'} z-[999] uppercase relative text-left p-1 font-semibold text-sm lg:text-sm text-brown hover:text-brown/50`}
|
||||
onClick={()=>setSubLinkIsActive((prev)=>{
|
||||
if(prev == linkName){
|
||||
return null
|
||||
}else{
|
||||
return linkName
|
||||
}
|
||||
})}
|
||||
>
|
||||
<span className="flex gap-1 items-center">
|
||||
{linkName}
|
||||
<i className={`fa-solid fa-caret-up ${(subLinkIsActive && subLinkIsActive == linkName) ? 'rotate-0' : 'rotate-180'}`}></i>
|
||||
</span>
|
||||
{/* sub links section */}
|
||||
<div className={`p-0 overflow-hidden absolute top-[55px] w-48 rounded-md bg-white-light shadow-md ${(subLinkIsActive && subLinkIsActive == linkName) && 'p-3'}`}>
|
||||
{subLink.map(item => (
|
||||
<div key={item.linkName} className={`w-full h-0 overflow-hidden px-2 ${(subLinkIsActive && subLinkIsActive == linkName) && 'h-10'}`}>
|
||||
{/* <NavLinks
|
||||
linkName={item.linkName}
|
||||
href={item.link}
|
||||
/> */}
|
||||
coming soon
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</button>
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
export default function DummyModalChildren() {
|
||||
return (
|
||||
<>
|
||||
<div className="relative bg-white rounded-lg shadow dark:bg-gray-700">
|
||||
{/* <!-- Modal header --> */}
|
||||
<div className="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
|
||||
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
Terms of Service
|
||||
</h3>
|
||||
<button type="button" className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="default-modal">
|
||||
<svg className="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
|
||||
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
|
||||
</svg>
|
||||
<span className="sr-only">Close modal</span>
|
||||
</button>
|
||||
</div>
|
||||
{/* <!-- Modal body --> */}
|
||||
<div className="p-4 md:p-5 space-y-4">
|
||||
<p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
|
||||
With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
|
||||
</p>
|
||||
<p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
|
||||
The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- Modal footer --> */}
|
||||
<div className="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
|
||||
<button data-modal-hide="default-modal" type="button" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">I accept</button>
|
||||
<button data-modal-hide="default-modal" type="button" className="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Decline</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
|
||||
export default function ModalWrapper({children, maxWidth}) {
|
||||
return (
|
||||
<div className="bg-gray-900/40 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-[999] flex flex-col justify-center items-center w-full md:inset-0 h-[calc(100%)] max-h-full">
|
||||
<div className={`pop-modal relative p-4 w-full ${maxWidth ? maxWidth : 'max-w-2xl'} max-h-full`}>
|
||||
{/* <!-- Modal content --> */}
|
||||
<div className="pb-4">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// id="default-modal" tabIndex={-1} aria-hidden="true"
|
||||
@@ -0,0 +1,112 @@
|
||||
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 { selectLoan } from '../../services/siteServices'
|
||||
import getDateFromDateString from '../../helpers/GetDateFromDateString';
|
||||
import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
|
||||
|
||||
export default function SelectedLoanCom() {
|
||||
|
||||
const {data, isFetching, isError, error} = useQuery({
|
||||
queryKey: queryKeys.select_loan,
|
||||
queryFn: () => selectLoan()
|
||||
})
|
||||
|
||||
const selectUsers = data?.data?.result_data?.data // APPLY LOAN LIST
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-col gap-8'>
|
||||
<BreadcrumbCom title='Selected - ' span='Loan options selected by the users before applying' paths={['Dashboard', 'Selected']} />
|
||||
|
||||
{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={selectUsers} 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>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
const dummy = [
|
||||
{name:'ok'}
|
||||
]
|
||||
@@ -0,0 +1,125 @@
|
||||
import { ReactNode, useEffect, useState } from "react";
|
||||
import MainBtn from "../MainBtn";
|
||||
import Icons from "../Icons";
|
||||
|
||||
|
||||
export default function TableWrapper({
|
||||
data = [],
|
||||
itemsPerPage = 5,
|
||||
filterItem,
|
||||
children,
|
||||
}) {
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [filteredData, setFilteredData] = useState(data);
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(0);
|
||||
const [newData, setNewData] = useState([]);
|
||||
|
||||
const numberOfSelection = itemsPerPage;
|
||||
|
||||
const handlePrev = () => {
|
||||
if (currentPage != 0) {
|
||||
setCurrentPage((prev) => prev - numberOfSelection);
|
||||
}
|
||||
};
|
||||
const handleNext = () => {
|
||||
if (currentPage < data.length) {
|
||||
setCurrentPage((prev) => prev + numberOfSelection);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearch = ({ target: { value } }, name) => {
|
||||
setSearchTerm(value);
|
||||
let newFilteredData = data.filter((item) =>
|
||||
item[name].toLowerCase().startsWith(value.toLowerCase())
|
||||
);
|
||||
setFilteredData(newFilteredData);
|
||||
setCurrentPage(0);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setIsLoading(true)
|
||||
setTimeout(()=>{
|
||||
setNewData(
|
||||
filteredData?.slice(currentPage, numberOfSelection + currentPage)
|
||||
);
|
||||
setIsLoading(false)
|
||||
},1000)
|
||||
}, [currentPage, filteredData]);
|
||||
|
||||
useEffect(()=>{
|
||||
setCurrentPage(0)
|
||||
},[itemsPerPage])
|
||||
|
||||
return (
|
||||
<div className="p-2 w-full bg-white shadow-round_black dark:shadow-round_white dark:bg-gray-800 rounded-md">
|
||||
{data.length > 0 && filterItem && (
|
||||
<div className="mb-10 flex justify-end items-center gap-2">
|
||||
{filterItem.map((item, index) => (
|
||||
<label
|
||||
key={index}
|
||||
className="flex flex-col sm:flex-row items-center gap-2 text-slate-600 dark:text-slate-100 transition-all duration-500"
|
||||
>
|
||||
Search by {item[0].toUpperCase() + item.slice(1)}
|
||||
<input
|
||||
name={item}
|
||||
type="text"
|
||||
className="py-1 px-2 text-sm min-w-[100px] text-black dark:text-white bg-white dark:bg-slate-800 rounded-full border-0 outline-none ring-1 ring-slate-300 dark:ring-white transition-all duration-500"
|
||||
value={searchTerm}
|
||||
onChange={(e) => {
|
||||
handleSearch(e, item);
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col">
|
||||
<div className="w-full overflow-x-auto">
|
||||
{children({ data: newData })}
|
||||
</div>
|
||||
|
||||
{/* PAGINATION BUTTON */}
|
||||
{newData.length > 0 &&
|
||||
<div className='p-2 w-full flex flex-col lg:flex-row justify-center items-center gap-3 md:gap-6'>
|
||||
<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>
|
||||
{(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>
|
||||
|
||||
{isLoading && <TableIsLoading />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const TableIsLoading = () => {
|
||||
return (
|
||||
<div className="w-full fixed z-[991] inset-0 flex justify-center items-center">
|
||||
<p className="rounded-md shadow-md p-4 bg-white/90 dark:bg-gray-900 text-brown dark:text-white">Loading...</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user