Compare commits

..

7 Commits

Author SHA1 Message Date
Elias c53c37611a remove extra backoffice menu 2024-05-14 11:00:13 +01:00
tokslaw f7d82c0958 Merge branch 'dashboard-table-adjustment' of DigiFi/digifi-bko into master 2024-05-12 00:47:30 +00:00
victorAnumudu e1535de92c adjusted table list display 2024-05-10 18:41:03 +01:00
ameye 93f3c0c526 Merge branch 'list-pagination-modified' of DigiFi/digifi-bko into master 2024-05-10 13:10:40 +00:00
victorAnumudu 4cb347cfa0 modified table pagination 2024-05-10 12:46:15 +01:00
victorAnumudu 75699342c7 modified table pagination 2024-05-10 11:58:34 +01:00
ameye f2741f3325 Merge branch 'dash-details' of DigiFi/digifi-bko into master 2024-05-10 10:45:21 +00:00
7 changed files with 210 additions and 165 deletions
BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

+36 -22
View File
@@ -1,18 +1,23 @@
import clsx from 'clsx' import clsx from 'clsx';
import {KTIcon, toAbsoluteUrl} from '../../../helpers' import { KTIcon, toAbsoluteUrl } from '../../../helpers';
import {HeaderNotificationsMenu, HeaderUserMenu, Search, ThemeModeSwitcher} from '../../../partials' import {
import {useLayout} from '../../core' HeaderNotificationsMenu,
HeaderUserMenu,
Search,
ThemeModeSwitcher,
} from '../../../partials';
import { useLayout } from '../../core';
const itemClass = 'ms-1 ms-md-4' const itemClass = 'ms-1 ms-md-4';
const btnClass = const btnClass =
'btn btn-icon btn-custom btn-icon-muted btn-active-light btn-active-color-primary w-35px h-35px' 'btn btn-icon btn-custom btn-icon-muted btn-active-light btn-active-color-primary w-35px h-35px';
const userAvatarClass = 'symbol-35px' const userAvatarClass = 'symbol-35px';
const btnIconClass = 'fs-2' const btnIconClass = 'fs-2';
const Navbar = () => { const Navbar = () => {
const {config} = useLayout() const { config } = useLayout();
return ( return (
<div className='app-navbar flex-shrink-0'> <div className="app-navbar flex-shrink-0">
{/* <div className={clsx('app-navbar-item align-items-stretch', itemClass)}> {/* <div className={clsx('app-navbar-item align-items-stretch', itemClass)}>
<Search /> <Search />
</div> */} </div> */}
@@ -43,33 +48,42 @@ const Navbar = () => {
</div> */} </div> */}
<div className={clsx('app-navbar-item', itemClass)}> <div className={clsx('app-navbar-item', itemClass)}>
<ThemeModeSwitcher toggleBtnClass={clsx('btn-active-light-primary btn-custom')} /> <ThemeModeSwitcher
toggleBtnClass={clsx('btn-active-light-primary btn-custom')}
/>
</div> </div>
<div className={clsx('app-navbar-item', itemClass)}> <div className={clsx('app-navbar-item', itemClass)}>
<div <div
className={clsx('cursor-pointer symbol', userAvatarClass)} className={clsx('cursor-pointer symbol', userAvatarClass)}
data-kt-menu-trigger="{default: 'click'}" data-kt-menu-trigger="{default: 'click'}"
data-kt-menu-attach='parent' data-kt-menu-attach="parent"
data-kt-menu-placement='bottom-end' data-kt-menu-placement="bottom-end"
> >
<img src={toAbsoluteUrl('media/avatars/300-3.jpg')} alt='' /> <img
src={toAbsoluteUrl('media/avatars/300-3.jpg')}
alt=""
style={{ cursor: 'auto' }}
/>
</div> </div>
<HeaderUserMenu /> {/* <HeaderUserMenu /> */}
</div> </div>
{config.app?.header?.default?.menu?.display && ( {config.app?.header?.default?.menu?.display && (
<div className='app-navbar-item d-lg-none ms-2 me-n3' title='Show header menu'>
<div <div
className='btn btn-icon btn-active-color-primary w-35px h-35px' className="app-navbar-item d-lg-none ms-2 me-n3"
id='kt_app_header_menu_toggle' title="Show header menu"
> >
<KTIcon iconName='text-align-left' className={btnIconClass} /> <div
className="btn btn-icon btn-active-color-primary w-35px h-35px"
id="kt_app_header_menu_toggle"
>
<KTIcon iconName="text-align-left" className={btnIconClass} />
</div> </div>
</div> </div>
)} )}
</div> </div>
) );
} };
export {Navbar} export { Navbar };
@@ -57,7 +57,7 @@ export default function RecentBVNList({
},[itemsPerPage]) },[itemsPerPage])
return ( return (
<div className="w-full"> <div className="w-full d-flex flex-column h-100">
<h1 className={`text-2xl mb-5 font-semibold ${titleClass && titleClass}`}>{tableTitle}</h1> <h1 className={`text-2xl mb-5 font-semibold ${titleClass && titleClass}`}>{tableTitle}</h1>
{data.length > 0 && filterItem && ( {data.length > 0 && filterItem && (
@@ -86,7 +86,7 @@ export default function RecentBVNList({
{/* show prev and next button if data exist */} {/* show prev and next button if data exist */}
{(data.length > 0 && data.length > itemsPerPage) && ( {(data.length > 0 && data.length > itemsPerPage) && (
<div className="mt-2 mt-sm-5 w-full d-flex gap-4 justify-content-center align-items-center"> <div className="w-full h-100 d-flex gap-4 justify-content-center align-items-end">
<button <button
onClick={handlePrev} onClick={handlePrev}
className={`text-sm md:text-lg d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${ className={`text-sm md:text-lg d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
@@ -94,6 +94,7 @@ export default function RecentBVNList({
? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pe-none" ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pe-none"
: "text-slate-600 border-slate-600 dark:text-white dark:border-white" : "text-slate-600 border-slate-600 dark:text-white dark:border-white"
}`} }`}
disabled={currentPage == 0}
// style={{width:'30px', height:'30px'}} // style={{width:'30px', height:'30px'}}
> >
&lt; Previous &lt; Previous
@@ -106,11 +107,12 @@ export default function RecentBVNList({
<button <button
key={index} key={index}
onClick={handleNext} onClick={handleNext}
className={`text-sm md:text-lg d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${ className={`text-sm md:text-lg rounded-circle d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
currentPage != index currentPage != index
? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400" ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400"
: "text-slate-600 border-slate-600 dark:text-white dark:border-white pe-none" : "text-slate-600 border-slate-600 dark:text-white dark:border-white pe-none"
}`} }`}
disabled={currentPage != index}
style={{width:'30px', height:'30px'}} style={{width:'30px', height:'30px'}}
> >
{index/itemsPerPage +1} {index/itemsPerPage +1}
@@ -126,6 +128,7 @@ export default function RecentBVNList({
? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pe-none" ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pe-none"
: "text-slate-600 border-slate-600 dark:text-white dark:border-white" : "text-slate-600 border-slate-600 dark:text-white dark:border-white"
}`} }`}
disabled={currentPage + numberOfSelection >= data.length}
// style={{width:'30px', height:'30px'}} // style={{width:'30px', height:'30px'}}
> >
Next &gt; Next &gt;
@@ -57,7 +57,7 @@ export default function RecentLoanAppList({
},[itemsPerPage]) },[itemsPerPage])
return ( return (
<div className="w-full"> <div className="w-full d-flex flex-column h-100">
<h1 className={`text-2xl mb-5 font-semibold ${titleClass && titleClass}`}>{tableTitle}</h1> <h1 className={`text-2xl mb-5 font-semibold ${titleClass && titleClass}`}>{tableTitle}</h1>
{data.length > 0 && filterItem && ( {data.length > 0 && filterItem && (
@@ -86,7 +86,7 @@ export default function RecentLoanAppList({
{/* show prev and next button if data exist */} {/* show prev and next button if data exist */}
{(data.length > 0 && data.length > itemsPerPage) && ( {(data.length > 0 && data.length > itemsPerPage) && (
<div className="mt-2 mt-sm-5 w-full d-flex gap-4 justify-content-center align-items-center"> <div className="w-full h-100 d-flex gap-4 justify-content-center align-items-end">
<button <button
onClick={handlePrev} onClick={handlePrev}
className={`text-sm md:text-lg d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${ className={`text-sm md:text-lg d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
@@ -94,6 +94,7 @@ export default function RecentLoanAppList({
? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pe-none" ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pe-none"
: "text-slate-600 border-slate-600 dark:text-white dark:border-white" : "text-slate-600 border-slate-600 dark:text-white dark:border-white"
}`} }`}
disabled={currentPage == 0}
// style={{width:'30px', height:'30px'}} // style={{width:'30px', height:'30px'}}
> >
&lt; Previous &lt; Previous
@@ -111,6 +112,7 @@ export default function RecentLoanAppList({
? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400" ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400"
: "text-slate-600 border-slate-600 dark:text-white dark:border-white pe-none" : "text-slate-600 border-slate-600 dark:text-white dark:border-white pe-none"
}`} }`}
disabled={currentPage != index}
style={{width:'30px', height:'30px'}} style={{width:'30px', height:'30px'}}
> >
{index/itemsPerPage +1} {index/itemsPerPage +1}
@@ -126,6 +128,7 @@ export default function RecentLoanAppList({
? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pe-none" ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pe-none"
: "text-slate-600 border-slate-600 dark:text-white dark:border-white" : "text-slate-600 border-slate-600 dark:text-white dark:border-white"
}`} }`}
disabled={currentPage + numberOfSelection >= data.length}
// style={{width:'30px', height:'30px'}} // style={{width:'30px', height:'30px'}}
> >
Next &gt; Next &gt;
+24
View File
@@ -0,0 +1,24 @@
// FUNCTION TO RETURN AMOUNT TO TWO DECIMAL PLACES
export const AmountTo2DP = (
amount = "00",
) => {
// Convert the number to a string
let numStr = String(amount);
// Split the string into integer and decimal parts
let parts = numStr.split(".");
let integerPart = parts[0] || "";
let decimalPart = parts[1] || "";
// Add thousands separators to the integer part
let formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
// Truncate or pad the decimal part to two decimal points
let formattedDecimal = decimalPart.slice(0, 2).padEnd(2, "0");
// Combine the formatted integer and decimal parts
let formattedNumber = formattedInteger + '.' + formattedDecimal;
// return formattedNumber;
return formattedNumber;
};
@@ -17,9 +17,9 @@ const ListsWidget3: React.FC<Props> = ({dashData, className}) => {
{/* begin::Header */} {/* begin::Header */}
<div className='card-header border-0'> <div className='card-header border-0'>
<h3 className='card-title fw-bold text-gray-900'>BVN Verification</h3> <h3 className='card-title fw-bold text-gray-900'>BVN Verification</h3>
<div className='card-toolbar'>
{/* begin::Menu */} {/* begin::Menu */}
{/* <button {/* <div className='card-toolbar'>
<button
type='button' type='button'
className='btn btn-sm btn-icon btn-color-primary btn-active-light-primary' className='btn btn-sm btn-icon btn-color-primary btn-active-light-primary'
data-kt-menu-trigger='click' data-kt-menu-trigger='click'
@@ -27,43 +27,43 @@ const ListsWidget3: React.FC<Props> = ({dashData, className}) => {
data-kt-menu-flip='top-end' data-kt-menu-flip='top-end'
> >
<KTIcon iconName='category' className='fs-2' /> <KTIcon iconName='category' className='fs-2' />
</button> */} </button>
{/* <Dropdown1 /> */} <Dropdown1 />
</div> */}
{/* end::Menu */} {/* end::Menu */}
</div> </div>
</div>
{/* end::Header */} {/* end::Header */}
{/* begin::Body */} {/* begin::Body */}
<div className='card-body pt-2'> <div className='card-body pt-0'>
{dashData?.loading ? {dashData?.loading ?
null null
: :
dashData?.data?.recent_bvn && dashData?.data?.recent_bvn.length ? dashData?.data?.recent_bvn && dashData?.data?.recent_bvn.length ?
<RecentBVNList <RecentBVNList
data = {dashData?.data?.recent_bvn} data = {dashData?.data?.recent_bvn}
itemsPerPage={5} itemsPerPage={7}
> >
{(data:RecentBVNProps) => ( {(data:RecentBVNProps) => (
<> <>
{data?.map(item => ( {data?.map(item => (
<div key={item?.uid} className='d-flex align-items-center mb-8'> <div key={item?.uid} className='d-flex align-items-center mb-8'>
{/* begin::Bullet */} {/* begin::Bullet */}
<span className='bullet bullet-vertical h-40px bg-primary'></span> <span className='bullet bullet-vertical h-40px bg-primary me-5'></span>
{/* end::Bullet */} {/* end::Bullet */}
{/* begin::Checkbox */} {/* begin::Checkbox */}
<div className='form-check form-check-custom form-check-solid mx-5'> {/* <div className='form-check form-check-custom form-check-solid mx-5'>
<input className='form-check-input' type='checkbox' value='' /> <input className='form-check-input' type='checkbox' value='' />
</div> </div> */}
{/* end::Checkbox */} {/* end::Checkbox */}
{/* begin::Description */} {/* begin::Description */}
<div className='flex-grow-1'> <div className='flex-grow-1'>
<a href='#' className='text-gray-800 text-hover-primary fw-bold fs-6'> <span className='text-gray-800 fw-bold fs-6'>
{item?.bvn} {item?.bvn}
</a> </span>
<span className='text-muted fw-semibold d-block'>{NewDateTimeFormatter(item?.added)}</span> <span className='text-muted fw-semibold d-block'>{NewDateTimeFormatter(item?.added)}</span>
</div> </div>
{/* end::Description */} {/* end::Description */}
<span className='badge badge-light-primary fs-8 fw-bold'>New</span> <span className='badge badge-light-primary fs-8 fw-bold'>status: {item?.status}</span>
</div> </div>
))} ))}
</> </>
@@ -1,10 +1,10 @@
import { FC } from 'react' import { FC } from 'react'
import {KTIcon, toAbsoluteUrl} from '../../../helpers' import {KTIcon, toAbsoluteUrl} from '../../../helpers'
import { DashDataProps, RecentApplicationsProps } from '../../../../app/pages/dashboard/model' import { DashDataProps } from '../../../../app/pages/dashboard/model'
import { NewDateTimeFormatter } from '../../../lib/NewDateTimeFormatter' import { NewDateTimeFormatter } from '../../../lib/NewDateTimeFormatter'
import RecentLoanAppList from '../../../layout/components/paginatedListing/RecentLoanAppList' import { Link } from 'react-router-dom'
import { AmountTo2DP } from '../../../lib/AmountFormatter'
type Props = { type Props = {
className: string className: string
@@ -15,11 +15,12 @@ const TablesWidget10: FC<Props> = ({className, dashData}) => {
return ( return (
<div className={`card ${className}`}> <div className={`card ${className}`}>
{/* begin::Header */} {/* begin::Header */}
<div className='card-header border-0 pt-5'> <div className='card-header border-0'>
<h3 className='card-title align-items-start flex-column'> <h3 className='card-title fw-bold text-gray-900'>Recent Loan Application</h3>
<span className='card-label fw-bold fs-3 mb-1'>Recent Loan Application</span> {/* <h3 className='card-title align-items-start flex-column'>
{/* <span className='text-muted mt-1 fw-semibold fs-7'>Over 500 members</span> */} <span className='card-label fw-bold fs-3'>Recent Loan Application</span>
</h3> <span className='text-muted mt-1 fw-semibold fs-7'>Over 500 members</span>
</h3> */}
{/* <div {/* <div
className='card-toolbar' className='card-toolbar'
data-bs-toggle='tooltip' data-bs-toggle='tooltip'
@@ -42,13 +43,8 @@ const TablesWidget10: FC<Props> = ({className, dashData}) => {
{dashData?.loading ? {dashData?.loading ?
null null
: dashData?.data?.recent_applications ? : dashData?.data?.recent_applications ?
<RecentLoanAppList
data={dashData?.data?.recent_applications}
itemsPerPage={5}
>
{(data:RecentApplicationsProps)=>(
<> <>
<div className='card-body py-3'> <div className='card-body py-0'>
{/* begin::Table container */} {/* begin::Table container */}
<div className='table-responsive'> <div className='table-responsive'>
{/* begin::Table */} {/* begin::Table */}
@@ -68,7 +64,7 @@ const TablesWidget10: FC<Props> = ({className, dashData}) => {
</div> </div>
</th> </th>
<th className='min-w-150px'>Authors</th> <th className='min-w-150px'>Authors</th>
<th className='min-w-140px'>Amount</th> <th className='min-w-140px'>Amount (NGN)</th>
<th className='min-w-120px'>Progress</th> <th className='min-w-120px'>Progress</th>
<th className='min-w-100px text-end'>Actions</th> <th className='min-w-100px text-end'>Actions</th>
</tr> </tr>
@@ -76,8 +72,10 @@ const TablesWidget10: FC<Props> = ({className, dashData}) => {
{/* end::Table head */} {/* end::Table head */}
{/* begin::Table body */} {/* begin::Table body */}
<tbody> <tbody>
{data && data.length ? {dashData?.data?.recent_applications && dashData?.data?.recent_applications.length ?
data.map(item => ( dashData?.data?.recent_applications.map((item, index:any) => {
if(index < 6){
return (
<tr key={item?.uid}> <tr key={item?.uid}>
<td> <td>
<div className='form-check form-check-sm form-check-custom form-check-solid'> <div className='form-check form-check-sm form-check-custom form-check-solid'>
@@ -87,12 +85,12 @@ const TablesWidget10: FC<Props> = ({className, dashData}) => {
<td> <td>
<div className='d-flex align-items-center'> <div className='d-flex align-items-center'>
<div className='symbol symbol-45px me-5'> <div className='symbol symbol-45px me-5'>
<img src={toAbsoluteUrl('media/avatars/300-14.jpg')} alt='' /> <img src={toAbsoluteUrl('media/avatars/avatar1.jpg')} alt='' />
</div> </div>
<div className='d-flex justify-content-start flex-column'> <div className='d-flex justify-content-start flex-column'>
<a href='#' className='text-gray-900 fw-bold text-hover-primary fs-6'> <span className='text-gray-900 fw-bold fs-6'>
{item?.firstname} {item?.lastname} {item?.firstname} {item?.lastname}
</a> </span>
<span className='text-muted fw-semibold text-muted d-block fs-7'> <span className='text-muted fw-semibold text-muted d-block fs-7'>
{NewDateTimeFormatter(item?.added)} {NewDateTimeFormatter(item?.added)}
</span> </span>
@@ -100,8 +98,8 @@ const TablesWidget10: FC<Props> = ({className, dashData}) => {
</div> </div>
</td> </td>
<td> <td>
<span className='text-gray-900 fw-bold text-hover-primary d-block fs-6'> <span className='text-gray-900 fw-bold d-block fs-6'>
{item.loan_amount} {AmountTo2DP(item.loan_amount)}
</span> </span>
<span className='text-muted fw-semibold text-muted d-block fs-7'> <span className='text-muted fw-semibold text-muted d-block fs-7'>
{item?.sales_agent? `Agent: ${item?.sales_agent}` : ``} {item?.sales_agent? `Agent: ${item?.sales_agent}` : ``}
@@ -144,7 +142,9 @@ const TablesWidget10: FC<Props> = ({className, dashData}) => {
</div> </div>
</td> </td>
</tr> </tr>
)) )
}
})
: :
<tr> <tr>
<td colSpan={5}>No data found!</td> <td colSpan={5}>No data found!</td>
@@ -154,12 +154,13 @@ const TablesWidget10: FC<Props> = ({className, dashData}) => {
{/* end::Table body */} {/* end::Table body */}
</table> </table>
{/* end::Table */} {/* end::Table */}
<p className='py-1 w-100 text-center text-hover-primary'>
<Link to='/loan/pages/process/started'>more applications</Link>
</p>
</div> </div>
{/* end::Table container */} {/* end::Table container */}
</div> </div>
</> </>
)}
</RecentLoanAppList>
: :
null null
} }