aplication and bvn list added

This commit was merged in pull request #13.
This commit is contained in:
victorAnumudu
2024-05-09 07:25:29 +01:00
parent 7cf4f9dbbe
commit 3839962e33
6 changed files with 470 additions and 170 deletions
@@ -3,11 +3,12 @@ import React from 'react'
import { NewDateTimeFormatter } from '../../../lib/NewDateTimeFormatter'
// import {KTIcon} from '../../../helpers'
// import {Dropdown1} from '../../content/dropdown/Dropdown1'
import { dashDataProps } from '../../../../app/pages/dashboard/model'
import { DashDataProps, RecentBVNProps } from '../../../../app/pages/dashboard/model'
import RecentBVNList from '../../../layout/components/paginatedListing/RecentBVNList'
type Props = {
className: string
dashData?: dashDataProps
dashData?: DashDataProps
}
const ListsWidget3: React.FC<Props> = ({dashData, className}) => {
@@ -38,27 +39,36 @@ const ListsWidget3: React.FC<Props> = ({dashData, className}) => {
null
:
dashData?.data?.recent_bvn && dashData?.data?.recent_bvn.length ?
dashData?.data?.recent_bvn.map(item => (
<div key={item?.uid} className='d-flex align-items-center mb-8'>
{/* begin::Bullet */}
<span className='bullet bullet-vertical h-40px bg-primary'></span>
{/* end::Bullet */}
{/* begin::Checkbox */}
<div className='form-check form-check-custom form-check-solid mx-5'>
<input className='form-check-input' type='checkbox' value='' />
</div>
{/* end::Checkbox */}
{/* begin::Description */}
<div className='flex-grow-1'>
<a href='#' className='text-gray-800 text-hover-primary fw-bold fs-6'>
{item?.bvn}
</a>
<span className='text-muted fw-semibold d-block'>{NewDateTimeFormatter(item?.added)}</span>
</div>
{/* end::Description */}
<span className='badge badge-light-primary fs-8 fw-bold'>New</span>
</div>
))
<RecentBVNList
data = {dashData?.data?.recent_bvn}
itemsPerPage={5}
>
{(data:RecentBVNProps) => (
<>
{data?.map(item => (
<div key={item?.uid} className='d-flex align-items-center mb-8'>
{/* begin::Bullet */}
<span className='bullet bullet-vertical h-40px bg-primary'></span>
{/* end::Bullet */}
{/* begin::Checkbox */}
<div className='form-check form-check-custom form-check-solid mx-5'>
<input className='form-check-input' type='checkbox' value='' />
</div>
{/* end::Checkbox */}
{/* begin::Description */}
<div className='flex-grow-1'>
<a href='#' className='text-gray-800 text-hover-primary fw-bold fs-6'>
{item?.bvn}
</a>
<span className='text-muted fw-semibold d-block'>{NewDateTimeFormatter(item?.added)}</span>
</div>
{/* end::Description */}
<span className='badge badge-light-primary fs-8 fw-bold'>New</span>
</div>
))}
</>
)}
</RecentBVNList>
:
<p>No list Found!</p>
}
@@ -1,18 +1,17 @@
import { FC } from 'react'
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
import { dashDataProps } from '../../../../app/pages/dashboard/model'
import { DashDataProps, RecentApplicationsProps } from '../../../../app/pages/dashboard/model'
import { NewDateTimeFormatter } from '../../../lib/NewDateTimeFormatter'
import RecentLoanAppList from '../../../layout/components/paginatedListing/RecentLoanAppList'
type Props = {
className: string
dashData?: dashDataProps
dashData?: DashDataProps
}
const TablesWidget10: FC<Props> = ({className, dashData}) => {
console.log('dashData', dashData?.data?.recent_applications)
return (
<div className={`card ${className}`}>
{/* begin::Header */}
@@ -42,116 +41,127 @@ const TablesWidget10: FC<Props> = ({className, dashData}) => {
{/* begin::Body */}
{dashData?.loading ?
null
: dashData?.data?.recent_applications ?
<RecentLoanAppList
data={dashData?.data?.recent_applications}
itemsPerPage={5}
>
{(data:RecentApplicationsProps)=>(
<>
<div className='card-body py-3'>
{/* begin::Table container */}
<div className='table-responsive'>
{/* begin::Table */}
<table className='table table-row-dashed table-row-gray-300 align-middle gs-0 gy-4'>
{/* begin::Table head */}
<thead>
<tr className='fw-bold text-muted'>
<th className='w-25px'>
<div className='form-check form-check-sm form-check-custom form-check-solid'>
<input
className='form-check-input'
type='checkbox'
value='1'
data-kt-check='true'
data-kt-check-target='.widget-9-check'
/>
</div>
</th>
<th className='min-w-150px'>Authors</th>
<th className='min-w-140px'>Amount</th>
<th className='min-w-120px'>Progress</th>
<th className='min-w-100px text-end'>Actions</th>
</tr>
</thead>
{/* end::Table head */}
{/* begin::Table body */}
<tbody>
{data && data.length ?
data.map(item => (
<tr key={item?.uid}>
<td>
<div className='form-check form-check-sm form-check-custom form-check-solid'>
<input className='form-check-input widget-9-check' type='checkbox' value='1' />
</div>
</td>
<td>
<div className='d-flex align-items-center'>
<div className='symbol symbol-45px me-5'>
<img src={toAbsoluteUrl('media/avatars/300-14.jpg')} alt='' />
</div>
<div className='d-flex justify-content-start flex-column'>
<a href='#' className='text-gray-900 fw-bold text-hover-primary fs-6'>
{item?.firstname} {item?.lastname}
</a>
<span className='text-muted fw-semibold text-muted d-block fs-7'>
{NewDateTimeFormatter(item?.added)}
</span>
</div>
</div>
</td>
<td>
<span className='text-gray-900 fw-bold text-hover-primary d-block fs-6'>
{item.loan_amount}
</span>
<span className='text-muted fw-semibold text-muted d-block fs-7'>
{item?.sales_agent? `Agent: ${item?.sales_agent}` : ``}
</span>
</td>
<td className='text-end'>
<div className='d-flex flex-column w-100 me-2'>
<div className='d-flex flex-stack mb-2'>
<span className='text-muted me-2 fs-7 fw-semibold'>50%</span>
</div>
<div className='progress h-6px w-100'>
<div
className='progress-bar bg-primary'
role='progressbar'
style={{width: '50%'}}
></div>
</div>
</div>
</td>
<td>
<div className='d-flex justify-content-end flex-shrink-0'>
<a
href='#'
className='btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1'
>
<KTIcon iconName='switch' className='fs-3' />
</a>
<a
href='#'
className='btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1'
>
<KTIcon iconName='pencil' className='fs-3' />
</a>
<a
href='#'
className='btn btn-icon btn-bg-light btn-active-color-primary btn-sm'
>
<KTIcon iconName='trash' className='fs-3' />
</a>
</div>
</td>
</tr>
))
:
<tr>
<td colSpan={5}>No data found!</td>
</tr>
}
</tbody>
{/* end::Table body */}
</table>
{/* end::Table */}
</div>
{/* end::Table container */}
</div>
</>
)}
</RecentLoanAppList>
:
<div className='card-body py-3'>
{/* begin::Table container */}
<div className='table-responsive'>
{/* begin::Table */}
<table className='table table-row-dashed table-row-gray-300 align-middle gs-0 gy-4'>
{/* begin::Table head */}
<thead>
<tr className='fw-bold text-muted'>
<th className='w-25px'>
<div className='form-check form-check-sm form-check-custom form-check-solid'>
<input
className='form-check-input'
type='checkbox'
value='1'
data-kt-check='true'
data-kt-check-target='.widget-9-check'
/>
</div>
</th>
<th className='min-w-150px'>Authors</th>
<th className='min-w-140px'>Company</th>
<th className='min-w-120px'>Progress</th>
<th className='min-w-100px text-end'>Actions</th>
</tr>
</thead>
{/* end::Table head */}
{/* begin::Table body */}
<tbody>
{dashData?.data.recent_applications && dashData?.data.recent_applications.length ?
dashData?.data.recent_applications.map(item => (
<tr key={item?.uid}>
<td>
<div className='form-check form-check-sm form-check-custom form-check-solid'>
<input className='form-check-input widget-9-check' type='checkbox' value='1' />
</div>
</td>
<td>
<div className='d-flex align-items-center'>
<div className='symbol symbol-45px me-5'>
<img src={toAbsoluteUrl('media/avatars/300-14.jpg')} alt='' />
</div>
<div className='d-flex justify-content-start flex-column'>
<a href='#' className='text-gray-900 fw-bold text-hover-primary fs-6'>
{item?.firstname} {item?.lastname}
</a>
<span className='text-muted fw-semibold text-muted d-block fs-7'>
{NewDateTimeFormatter(item?.added)}
</span>
</div>
</div>
</td>
<td>
<a href='#' className='text-gray-900 fw-bold text-hover-primary d-block fs-6'>
Intertico
</a>
<span className='text-muted fw-semibold text-muted d-block fs-7'>
Web, UI/UX Design
</span>
</td>
<td className='text-end'>
<div className='d-flex flex-column w-100 me-2'>
<div className='d-flex flex-stack mb-2'>
<span className='text-muted me-2 fs-7 fw-semibold'>50%</span>
</div>
<div className='progress h-6px w-100'>
<div
className='progress-bar bg-primary'
role='progressbar'
style={{width: '50%'}}
></div>
</div>
</div>
</td>
<td>
<div className='d-flex justify-content-end flex-shrink-0'>
<a
href='#'
className='btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1'
>
<KTIcon iconName='switch' className='fs-3' />
</a>
<a
href='#'
className='btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1'
>
<KTIcon iconName='pencil' className='fs-3' />
</a>
<a
href='#'
className='btn btn-icon btn-bg-light btn-active-color-primary btn-sm'
>
<KTIcon iconName='trash' className='fs-3' />
</a>
</div>
</td>
</tr>
))
:
<tr>
<td colSpan={5}>No data found!</td>
</tr>
}
</tbody>
{/* end::Table body */}
</table>
{/* end::Table */}
</div>
{/* end::Table container */}
</div>
null
}
{/* begin::Body */}