BVN verification table updated

This commit is contained in:
victorAnumudu
2024-05-08 19:30:34 +01:00
parent 2526a5b627
commit 7cf4f9dbbe
4 changed files with 122 additions and 349 deletions
@@ -3,37 +3,14 @@ import React from 'react'
import { NewDateTimeFormatter } from '../../../lib/NewDateTimeFormatter' import { NewDateTimeFormatter } from '../../../lib/NewDateTimeFormatter'
// import {KTIcon} from '../../../helpers' // import {KTIcon} from '../../../helpers'
// import {Dropdown1} from '../../content/dropdown/Dropdown1' // import {Dropdown1} from '../../content/dropdown/Dropdown1'
import { dashDataProps } from '../../../../app/pages/dashboard/model'
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
}[]
}
}
type Props = { type Props = {
className: string className: string
dashData: dashDataProps dashData?: dashDataProps
} }
const ListsWidget3: React.FC<Props> = ({dashData, className}) => { const ListsWidget3: React.FC<Props> = ({dashData, className}) => {
console.log('dashData', dashData.data)
return ( return (
<div className={`card ${className}`}> <div className={`card ${className}`}>
{/* begin::Header */} {/* begin::Header */}
@@ -57,7 +34,7 @@ const ListsWidget3: React.FC<Props> = ({dashData, className}) => {
{/* end::Header */} {/* end::Header */}
{/* begin::Body */} {/* begin::Body */}
<div className='card-body pt-2'> <div className='card-body pt-2'>
{dashData.loading ? {dashData?.loading ?
null null
: :
dashData?.data?.recent_bvn && dashData?.data?.recent_bvn.length ? dashData?.data?.recent_bvn && dashData?.data?.recent_bvn.length ?
@@ -1,12 +1,18 @@
import { FC } from 'react' import { FC } from 'react'
import {KTIcon, toAbsoluteUrl} from '../../../helpers' import {KTIcon, toAbsoluteUrl} from '../../../helpers'
import { dashDataProps } from '../../../../app/pages/dashboard/model'
import { NewDateTimeFormatter } from '../../../lib/NewDateTimeFormatter'
type Props = { type Props = {
className: string className: string
dashData?: dashDataProps
} }
const TablesWidget10: FC<Props> = ({className}) => { const TablesWidget10: FC<Props> = ({className, dashData}) => {
console.log('dashData', dashData?.data?.recent_applications)
return ( return (
<div className={`card ${className}`}> <div className={`card ${className}`}>
{/* begin::Header */} {/* begin::Header */}
@@ -32,7 +38,11 @@ const TablesWidget10: FC<Props> = ({className}) => {
</div> */} </div> */}
</div> </div>
{/* end::Header */} {/* end::Header */}
{/* begin::Body */} {/* begin::Body */}
{dashData?.loading ?
null
:
<div className='card-body py-3'> <div className='card-body py-3'>
{/* begin::Table container */} {/* begin::Table container */}
<div className='table-responsive'> <div className='table-responsive'>
@@ -61,334 +71,80 @@ const TablesWidget10: FC<Props> = ({className}) => {
{/* end::Table head */} {/* end::Table head */}
{/* begin::Table body */} {/* begin::Table body */}
<tbody> <tbody>
<tr> {dashData?.data.recent_applications && dashData?.data.recent_applications.length ?
<td> dashData?.data.recent_applications.map(item => (
<div className='form-check form-check-sm form-check-custom form-check-solid'> <tr key={item?.uid}>
<input className='form-check-input widget-9-check' type='checkbox' value='1' /> <td>
</div> <div className='form-check form-check-sm form-check-custom form-check-solid'>
</td> <input className='form-check-input widget-9-check' type='checkbox' value='1' />
<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>
<div className='d-flex justify-content-start flex-column'> </td>
<a href='#' className='text-gray-900 fw-bold text-hover-primary fs-6'> <td>
Ana Simmons <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>
<span className='text-muted fw-semibold text-muted d-block fs-7'> <a
HTML, JS, ReactJS href='#'
</span> className='btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1'
</div> >
</div> <KTIcon iconName='pencil' className='fs-3' />
</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> </a>
<span className='text-muted fw-semibold text-muted d-block fs-7'> <a
C#, ASP.NET, MS SQL href='#'
</span> className='btn btn-icon btn-bg-light btn-active-color-primary btn-sm'
</div> >
</div> <KTIcon iconName='trash' className='fs-3' />
</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 &amp; 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> </a>
<span className='text-muted fw-semibold text-muted d-block fs-7'>
PHP, Laravel, VueJS
</span>
</div> </div>
</div> </td>
</td> </tr>
<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>
<tr> <tr>
<td> <td colSpan={5}>No data found!</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>
</tr> </tr>
}
</tbody> </tbody>
{/* end::Table body */} {/* end::Table body */}
</table> </table>
@@ -396,7 +152,9 @@ const TablesWidget10: FC<Props> = ({className}) => {
</div> </div>
{/* end::Table container */} {/* end::Table container */}
</div> </div>
}
{/* begin::Body */} {/* begin::Body */}
</div> </div>
) )
} }
+1 -1
View File
@@ -96,7 +96,7 @@ const DashboardPage: FC = () => {
</div> </div>
{/* RECENT LOAN APPLICATION */} {/* RECENT LOAN APPLICATION */}
<div className="col-xl-8"> <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>
</div> </div>
{/* end::Row */} {/* end::Row */}
+38
View File
@@ -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
}[]
}
}