BVN verification table updated
This commit is contained in:
victorAnumudu
@@ -3,37 +3,14 @@ import React from 'react'
|
||||
import { NewDateTimeFormatter } from '../../../lib/NewDateTimeFormatter'
|
||||
// import {KTIcon} from '../../../helpers'
|
||||
// import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
|
||||
type dashDataProps = {
|
||||
loading: boolean,
|
||||
data: {
|
||||
call_return?: string
|
||||
recent_applications? : {}[]
|
||||
recent_bvn?: {
|
||||
id?: string
|
||||
uid?: string
|
||||
bvn?: string
|
||||
status?: string
|
||||
added?: string
|
||||
updated?: string
|
||||
firstname?: string | null
|
||||
lastname?: string | null
|
||||
middlename?: string | null
|
||||
gender?: string | null
|
||||
birthdate?: string | null
|
||||
phone?: string | null
|
||||
nationality?: string | null
|
||||
}[]
|
||||
}
|
||||
}
|
||||
import { dashDataProps } from '../../../../app/pages/dashboard/model'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
dashData: dashDataProps
|
||||
dashData?: dashDataProps
|
||||
}
|
||||
|
||||
const ListsWidget3: React.FC<Props> = ({dashData, className}) => {
|
||||
console.log('dashData', dashData.data)
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Header */}
|
||||
@@ -57,7 +34,7 @@ const ListsWidget3: React.FC<Props> = ({dashData, className}) => {
|
||||
{/* end::Header */}
|
||||
{/* begin::Body */}
|
||||
<div className='card-body pt-2'>
|
||||
{dashData.loading ?
|
||||
{dashData?.loading ?
|
||||
null
|
||||
:
|
||||
dashData?.data?.recent_bvn && dashData?.data?.recent_bvn.length ?
|
||||
|
||||
@@ -1,12 +1,18 @@
|
||||
|
||||
import { FC } from 'react'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
|
||||
import { dashDataProps } from '../../../../app/pages/dashboard/model'
|
||||
import { NewDateTimeFormatter } from '../../../lib/NewDateTimeFormatter'
|
||||
|
||||
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
dashData?: dashDataProps
|
||||
}
|
||||
|
||||
const TablesWidget10: FC<Props> = ({className}) => {
|
||||
const TablesWidget10: FC<Props> = ({className, dashData}) => {
|
||||
console.log('dashData', dashData?.data?.recent_applications)
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Header */}
|
||||
@@ -32,7 +38,11 @@ const TablesWidget10: FC<Props> = ({className}) => {
|
||||
</div> */}
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
|
||||
{/* begin::Body */}
|
||||
{dashData?.loading ?
|
||||
null
|
||||
:
|
||||
<div className='card-body py-3'>
|
||||
{/* begin::Table container */}
|
||||
<div className='table-responsive'>
|
||||
@@ -61,334 +71,80 @@ const TablesWidget10: FC<Props> = ({className}) => {
|
||||
{/* end::Table head */}
|
||||
{/* begin::Table body */}
|
||||
<tbody>
|
||||
<tr>
|
||||
<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='' />
|
||||
{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>
|
||||
<div className='d-flex justify-content-start flex-column'>
|
||||
<a href='#' className='text-gray-900 fw-bold text-hover-primary fs-6'>
|
||||
Ana Simmons
|
||||
</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>
|
||||
<span className='text-muted fw-semibold text-muted d-block fs-7'>
|
||||
HTML, JS, ReactJS
|
||||
</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>
|
||||
<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-2.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'>
|
||||
Jessie Clarcson
|
||||
<a
|
||||
href='#'
|
||||
className='btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1'
|
||||
>
|
||||
<KTIcon iconName='pencil' className='fs-3' />
|
||||
</a>
|
||||
<span className='text-muted fw-semibold text-muted d-block fs-7'>
|
||||
C#, ASP.NET, MS SQL
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<a href='#' className='text-gray-900 fw-bold text-hover-primary d-block fs-6'>
|
||||
Agoda
|
||||
</a>
|
||||
<span className='text-muted fw-semibold text-muted d-block fs-7'>
|
||||
Houses & Hotels
|
||||
</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'>70%</span>
|
||||
</div>
|
||||
<div className='progress h-6px w-100'>
|
||||
<div
|
||||
className='progress-bar bg-danger'
|
||||
role='progressbar'
|
||||
style={{width: '70%'}}
|
||||
></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>
|
||||
<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-5.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'>
|
||||
Lebron Wayde
|
||||
<a
|
||||
href='#'
|
||||
className='btn btn-icon btn-bg-light btn-active-color-primary btn-sm'
|
||||
>
|
||||
<KTIcon iconName='trash' className='fs-3' />
|
||||
</a>
|
||||
<span className='text-muted fw-semibold text-muted d-block fs-7'>
|
||||
PHP, Laravel, VueJS
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<a href='#' className='text-gray-900 fw-bold text-hover-primary d-block fs-6'>
|
||||
RoadGee
|
||||
</a>
|
||||
<span className='text-muted fw-semibold text-muted d-block fs-7'>
|
||||
Transportation
|
||||
</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'>60%</span>
|
||||
</div>
|
||||
<div className='progress h-6px w-100'>
|
||||
<div
|
||||
className='progress-bar bg-success'
|
||||
role='progressbar'
|
||||
style={{width: '60%'}}
|
||||
></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>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
:
|
||||
<tr>
|
||||
<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-20.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'>
|
||||
Natali Goodwin
|
||||
</a>
|
||||
<span className='text-muted fw-semibold text-muted d-block fs-7'>
|
||||
Python, PostgreSQL, ReactJS
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<a href='#' className='text-gray-900 fw-bold text-hover-primary d-block fs-6'>
|
||||
The Hill
|
||||
</a>
|
||||
<span className='text-muted fw-semibold text-muted d-block fs-7'>Insurance</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-warning'
|
||||
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>
|
||||
<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-23.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'>
|
||||
Kevin Leonard
|
||||
</a>
|
||||
<span className='text-muted fw-semibold text-muted d-block fs-7'>
|
||||
HTML, JS, ReactJS
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<a href='#' className='text-gray-900 fw-bold text-hover-primary d-block fs-6'>
|
||||
RoadGee
|
||||
</a>
|
||||
<span className='text-muted fw-semibold text-muted d-block fs-7'>
|
||||
Art Director
|
||||
</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'>90%</span>
|
||||
</div>
|
||||
<div className='progress h-6px w-100'>
|
||||
<div
|
||||
className='progress-bar bg-info'
|
||||
role='progressbar'
|
||||
style={{width: '90%'}}
|
||||
></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>
|
||||
<td colSpan={5}>No data found!</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
{/* end::Table body */}
|
||||
</table>
|
||||
@@ -396,7 +152,9 @@ const TablesWidget10: FC<Props> = ({className}) => {
|
||||
</div>
|
||||
{/* end::Table container */}
|
||||
</div>
|
||||
}
|
||||
{/* begin::Body */}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -96,7 +96,7 @@ const DashboardPage: FC = () => {
|
||||
</div>
|
||||
{/* RECENT LOAN APPLICATION */}
|
||||
<div className="col-xl-8">
|
||||
<TablesWidget10 className="card-xxl-stretch mb-5 mb-xl-8" />
|
||||
<TablesWidget10 dashData={dashDetails} className="card-xxl-stretch mb-5 mb-xl-8" />
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
export type dashDataProps = {
|
||||
loading: boolean,
|
||||
data: {
|
||||
call_return?: string
|
||||
recent_applications? : {
|
||||
firstname?: string
|
||||
lastname?: string
|
||||
uid?: string
|
||||
loan_amount?: string
|
||||
payment_month?: string
|
||||
sales_agent?: string
|
||||
gender?: string | null
|
||||
marital_status?: string
|
||||
email?: string
|
||||
address?: string
|
||||
state?: string
|
||||
country?: string
|
||||
status?: string
|
||||
added?: string
|
||||
updated?: string
|
||||
}[]
|
||||
recent_bvn?: {
|
||||
id?: string
|
||||
uid?: string
|
||||
bvn?: string
|
||||
status?: string
|
||||
added?: string
|
||||
updated?: string
|
||||
firstname?: string | null
|
||||
lastname?: string | null
|
||||
middlename?: string | null
|
||||
gender?: string | null
|
||||
birthdate?: string | null
|
||||
phone?: string | null
|
||||
nationality?: string | null
|
||||
}[]
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user