Merge branch 'dash-details' of DigiFi/digifi-bko into master
This commit is contained in:
Gogs
@@ -0,0 +1,137 @@
|
||||
import { ReactNode, useEffect, useState } from "react";
|
||||
import { RecentBVNProps } from "../../../../app/pages/dashboard/model";
|
||||
|
||||
type PaginatedListProps = {
|
||||
data: RecentBVNProps,
|
||||
itemsPerPage?: number,
|
||||
filterItem?: string[],
|
||||
tableTitle?: string,
|
||||
titleClass?:string,
|
||||
children: (data:RecentBVNProps) => ReactNode;
|
||||
}
|
||||
|
||||
export default function RecentBVNList({
|
||||
data,
|
||||
itemsPerPage = 5,
|
||||
filterItem,
|
||||
tableTitle,
|
||||
titleClass,
|
||||
children,
|
||||
}:PaginatedListProps) {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [filteredData, setFilteredData] = useState(data);
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(0);
|
||||
const [newData, setNewData] = useState<any>([]);
|
||||
|
||||
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 } }:{target: {value:string}}, name:string) => {
|
||||
setSearchTerm(value);
|
||||
let newFilteredData:any = data.filter((item:any) =>
|
||||
item[name].toLowerCase().startsWith(value.toLowerCase())
|
||||
);
|
||||
setFilteredData(newFilteredData);
|
||||
setCurrentPage(0);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setNewData(
|
||||
filteredData?.slice(currentPage, numberOfSelection + currentPage)
|
||||
);
|
||||
}, [currentPage, filteredData]);
|
||||
|
||||
useEffect(()=>{
|
||||
setCurrentPage(0)
|
||||
},[itemsPerPage])
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<h1 className={`text-2xl mb-5 font-semibold ${titleClass && titleClass}`}>{tableTitle}</h1>
|
||||
|
||||
{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>
|
||||
)}
|
||||
|
||||
{children(newData)}
|
||||
|
||||
{/* show prev and next button if data exist */}
|
||||
{(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">
|
||||
<button
|
||||
onClick={handlePrev}
|
||||
className={`text-sm md:text-lg rounded-circle d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
|
||||
currentPage == 0
|
||||
? "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"
|
||||
}`}
|
||||
style={{width:'30px', height:'30px'}}
|
||||
>
|
||||
<
|
||||
</button>
|
||||
|
||||
{data.length && data.map((item, index)=>{
|
||||
item = item
|
||||
if(index%itemsPerPage == 0 && index >= currentPage && index <= currentPage+itemsPerPage){
|
||||
return (
|
||||
<button
|
||||
key={index}
|
||||
onClick={handleNext}
|
||||
className={`text-sm md:text-lg rounded-circle d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
|
||||
currentPage != index
|
||||
? "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"
|
||||
}`}
|
||||
style={{width:'30px', height:'30px'}}
|
||||
>
|
||||
{index/itemsPerPage +1}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
})}
|
||||
|
||||
<button
|
||||
onClick={handleNext}
|
||||
className={`text-sm md:text-lg rounded-circle d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
|
||||
currentPage + numberOfSelection >= data.length
|
||||
? "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"
|
||||
}`}
|
||||
style={{width:'30px', height:'30px'}}
|
||||
>
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
import { ReactNode, useEffect, useState } from "react";
|
||||
import { RecentApplicationsProps } from "../../../../app/pages/dashboard/model";
|
||||
|
||||
type PaginatedListProps = {
|
||||
data: RecentApplicationsProps,
|
||||
itemsPerPage?: number,
|
||||
filterItem?: string[],
|
||||
tableTitle?: string,
|
||||
titleClass?:string,
|
||||
children: (data:RecentApplicationsProps) => ReactNode;
|
||||
}
|
||||
|
||||
export default function RecentLoanAppList({
|
||||
data,
|
||||
itemsPerPage = 5,
|
||||
filterItem,
|
||||
tableTitle,
|
||||
titleClass,
|
||||
children,
|
||||
}:PaginatedListProps) {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [filteredData, setFilteredData] = useState(data);
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(0);
|
||||
const [newData, setNewData] = useState<any>([]);
|
||||
|
||||
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 } }:{target: {value:string}}, name:string) => {
|
||||
setSearchTerm(value);
|
||||
let newFilteredData:any = data.filter((item:any) =>
|
||||
item[name].toLowerCase().startsWith(value.toLowerCase())
|
||||
);
|
||||
setFilteredData(newFilteredData);
|
||||
setCurrentPage(0);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setNewData(
|
||||
filteredData?.slice(currentPage, numberOfSelection + currentPage)
|
||||
);
|
||||
}, [currentPage, filteredData]);
|
||||
|
||||
useEffect(()=>{
|
||||
setCurrentPage(0)
|
||||
},[itemsPerPage])
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<h1 className={`text-2xl mb-5 font-semibold ${titleClass && titleClass}`}>{tableTitle}</h1>
|
||||
|
||||
{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>
|
||||
)}
|
||||
|
||||
{children(newData)}
|
||||
|
||||
{/* show prev and next button if data exist */}
|
||||
{(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">
|
||||
<button
|
||||
onClick={handlePrev}
|
||||
className={`text-sm md:text-lg rounded-circle d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
|
||||
currentPage == 0
|
||||
? "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"
|
||||
}`}
|
||||
style={{width:'30px', height:'30px'}}
|
||||
>
|
||||
<
|
||||
</button>
|
||||
|
||||
{data.length && data.map((item, index)=>{
|
||||
item = item
|
||||
if(index%itemsPerPage == 0 && index >= currentPage && index <= currentPage+itemsPerPage){
|
||||
return (
|
||||
<button
|
||||
key={index}
|
||||
onClick={handleNext}
|
||||
className={`text-sm md:text-lg rounded-circle d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
|
||||
currentPage != index
|
||||
? "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"
|
||||
}`}
|
||||
style={{width:'30px', height:'30px'}}
|
||||
>
|
||||
{index/itemsPerPage +1}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
})}
|
||||
|
||||
<button
|
||||
onClick={handleNext}
|
||||
className={`text-sm md:text-lg rounded-circle d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
|
||||
currentPage + numberOfSelection >= data.length
|
||||
? "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"
|
||||
}`}
|
||||
style={{width:'30px', height:'30px'}}
|
||||
>
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,13 +1,17 @@
|
||||
|
||||
import React from 'react'
|
||||
import {KTIcon} from '../../../helpers'
|
||||
import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
import { NewDateTimeFormatter } from '../../../lib/NewDateTimeFormatter'
|
||||
// import {KTIcon} from '../../../helpers'
|
||||
// import {Dropdown1} from '../../content/dropdown/Dropdown1'
|
||||
import { DashDataProps, RecentBVNProps } from '../../../../app/pages/dashboard/model'
|
||||
import RecentBVNList from '../../../layout/components/paginatedListing/RecentBVNList'
|
||||
|
||||
type Props = {
|
||||
className: string
|
||||
dashData?: DashDataProps
|
||||
}
|
||||
|
||||
const ListsWidget3: React.FC<Props> = ({className}) => {
|
||||
const ListsWidget3: React.FC<Props> = ({dashData, className}) => {
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Header */}
|
||||
@@ -31,132 +35,43 @@ const ListsWidget3: React.FC<Props> = ({className}) => {
|
||||
{/* end::Header */}
|
||||
{/* begin::Body */}
|
||||
<div className='card-body pt-2'>
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-center mb-8'>
|
||||
{/* begin::Bullet */}
|
||||
<span className='bullet bullet-vertical h-40px bg-success'></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'>
|
||||
Create FireStone Logo
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block'>Due in 2 Days</span>
|
||||
</div>
|
||||
{/* end::Description */}
|
||||
<span className='badge badge-light-success fs-8 fw-bold'>New</span>
|
||||
</div>
|
||||
{/* end:Item */}
|
||||
{/* begin::Item */}
|
||||
<div 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'>
|
||||
Stakeholder Meeting
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block'>Due in 3 Days</span>
|
||||
</div>
|
||||
{/* end::Description */}
|
||||
<span className='badge badge-light-primary fs-8 fw-bold'>New</span>
|
||||
</div>
|
||||
{/* end:Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-center mb-8'>
|
||||
{/* begin::Bullet */}
|
||||
<span className='bullet bullet-vertical h-40px bg-warning'></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'>
|
||||
Scoping & Estimations
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block'>Due in 5 Days</span>
|
||||
</div>
|
||||
{/* end::Description */}
|
||||
<span className='badge badge-light-warning fs-8 fw-bold'>New</span>
|
||||
</div>
|
||||
{/* end:Item */}
|
||||
{/* begin::Item */}
|
||||
<div 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'>
|
||||
KPI App Showcase
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block'>Due in 2 Days</span>
|
||||
</div>
|
||||
{/* end::Description */}
|
||||
<span className='badge badge-light-primary fs-8 fw-bold'>New</span>
|
||||
</div>
|
||||
{/* end:Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-center mb-8'>
|
||||
{/* begin::Bullet */}
|
||||
<span className='bullet bullet-vertical h-40px bg-danger'></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'>
|
||||
Project Meeting
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block'>Due in 12 Days</span>
|
||||
</div>
|
||||
{/* end::Description */}
|
||||
<span className='badge badge-light-danger fs-8 fw-bold'>New</span>
|
||||
</div>
|
||||
{/* end:Item */}
|
||||
{/* begin::Item */}
|
||||
<div className='d-flex align-items-center'>
|
||||
{/* begin::Bullet */}
|
||||
<span className='bullet bullet-vertical h-40px bg-success'></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'>
|
||||
Customers Update
|
||||
</a>
|
||||
<span className='text-muted fw-semibold d-block'>Due in 1 week</span>
|
||||
</div>
|
||||
{/* end::Description */}
|
||||
<span className='badge badge-light-success fs-8 fw-bold'>New</span>
|
||||
</div>
|
||||
{/* end:Item */}
|
||||
{dashData?.loading ?
|
||||
null
|
||||
:
|
||||
dashData?.data?.recent_bvn && dashData?.data?.recent_bvn.length ?
|
||||
<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>
|
||||
}
|
||||
</div>
|
||||
{/* end::Body */}
|
||||
</div>
|
||||
|
||||
@@ -1,12 +1,17 @@
|
||||
|
||||
import { FC } from 'react'
|
||||
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
|
||||
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
|
||||
}
|
||||
|
||||
const TablesWidget10: FC<Props> = ({className}) => {
|
||||
const TablesWidget10: FC<Props> = ({className, dashData}) => {
|
||||
return (
|
||||
<div className={`card ${className}`}>
|
||||
{/* begin::Header */}
|
||||
@@ -32,371 +37,134 @@ const TablesWidget10: FC<Props> = ({className}) => {
|
||||
</div> */}
|
||||
</div>
|
||||
{/* end::Header */}
|
||||
|
||||
{/* begin::Body */}
|
||||
<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>
|
||||
<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='' />
|
||||
</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
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</tr>
|
||||
</tbody>
|
||||
{/* end::Table body */}
|
||||
</table>
|
||||
{/* end::Table */}
|
||||
</div>
|
||||
{/* end::Table container */}
|
||||
</div>
|
||||
{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>
|
||||
:
|
||||
null
|
||||
}
|
||||
{/* begin::Body */}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -45,6 +45,29 @@ export function postAuxEnd(uri:string, reqData:any):Promise<any> {
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
export function getAuxEnd(uri: string, reqData?: any): Promise<any> {
|
||||
const endPoint = import.meta.env.VITE_APP_USER_ENDPOINT + uri;
|
||||
const formData = new FormData();
|
||||
for (let value in reqData) {
|
||||
formData.append(value, reqData[value]);
|
||||
}
|
||||
return axios
|
||||
.get(endPoint, reqData)
|
||||
.then((response: {}) => {
|
||||
// if (response.data.internal_return == "-9999") {
|
||||
// localStorage.clear();
|
||||
// window.location.href = `/login?sessionExpired=true`;
|
||||
// }
|
||||
return response;
|
||||
})
|
||||
.catch((error: any) => {
|
||||
console.log(
|
||||
"ERROR3-------------------------------------------------------", error
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import axios from "axios";
|
||||
import { AuthModel, UserModel } from "./_models";
|
||||
|
||||
import { postAuxEnd } from "./AxiosCallHelper";
|
||||
import { postAuxEnd, getAuxEnd } from "./AxiosCallHelper";
|
||||
|
||||
const API_URL = import.meta.env.VITE_APP_API_URL;
|
||||
|
||||
@@ -10,6 +10,7 @@ const API_URL = import.meta.env.VITE_APP_API_URL;
|
||||
|
||||
export const GET_USER_BY_ACCESSTOKEN_URL = '/identity/verify_token'
|
||||
export const LOGIN_URL = '/identity/token'
|
||||
export const USER_DASH_DETAILS = `/dash`;
|
||||
export const REGISTER_URL = `${API_URL}/register`;
|
||||
export const REQUEST_PASSWORD_URL = `${API_URL}/forgot_password`;
|
||||
|
||||
@@ -55,3 +56,7 @@ export function requestPassword(email: string) {
|
||||
export function getUserByToken(token: string) {
|
||||
return postAuxEnd(GET_USER_BY_ACCESSTOKEN_URL, {token})
|
||||
}
|
||||
|
||||
export function getUserDashDetails() {
|
||||
return getAuxEnd(USER_DASH_DETAILS)
|
||||
}
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import { FC } from 'react';
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { useIntl } from 'react-intl';
|
||||
import { toAbsoluteUrl } from '../../../_digifi/helpers';
|
||||
import { PageTitle } from '../../../_digifi/layout/core';
|
||||
import {
|
||||
ListsWidget2,
|
||||
// ListsWidget2,
|
||||
ListsWidget3,
|
||||
ListsWidget4,
|
||||
ListsWidget6,
|
||||
TablesWidget5,
|
||||
// ListsWidget4,
|
||||
// ListsWidget6,
|
||||
// TablesWidget5,
|
||||
TablesWidget10,
|
||||
MixedWidget8,
|
||||
// MixedWidget8,
|
||||
CardsWidget7,
|
||||
CardsWidget17,
|
||||
CardsWidget20,
|
||||
@@ -18,76 +18,93 @@ import {
|
||||
} from '../../../_digifi/partials/widgets';
|
||||
import { ToolbarWrapper } from '../../../_digifi/layout/components/toolbar';
|
||||
import { Content } from '../../../_digifi/layout/components/content';
|
||||
import { getUserDashDetails } from '../../modules/auth/core/_requests';
|
||||
import { DashDataProps } from './model';
|
||||
|
||||
const DashboardPage: FC = () => (
|
||||
<>
|
||||
<ToolbarWrapper />
|
||||
<Content>
|
||||
{/* begin::Row */}
|
||||
<div className="row g-5 g-xl-10 mb-5 mb-xl-10">
|
||||
{/* begin::Col */}
|
||||
<div className="col-md-6 col-lg-6 col-xl-6 col-xxl-3 mb-md-5 mb-xl-10">
|
||||
<CardsWidget20
|
||||
className="h-md-50 mb-5 mb-xl-10"
|
||||
description="Active Projects"
|
||||
color="#F1416C"
|
||||
img={toAbsoluteUrl('media/patterns/vector-1.png')}
|
||||
/>
|
||||
<CardsWidget7
|
||||
className="h-md-50 mb-5 mb-xl-10"
|
||||
description="Professionals"
|
||||
icon={false}
|
||||
stats={357}
|
||||
labelColor="dark"
|
||||
textColor="gray-300"
|
||||
/>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
const DashboardPage: FC = () => {
|
||||
const [dashDetails, setDashDetails] = useState<DashDataProps>({loading:true, data:{}})
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className="col-md-6 col-lg-6 col-xl-6 col-xxl-3 mb-md-5 mb-xl-10">
|
||||
<CardsWidget17 className="h-md-50 mb-5 mb-xl-10" />
|
||||
<ListsWidget26 className="h-lg-50" />
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
useEffect(()=>{
|
||||
getUserDashDetails().then(res => {
|
||||
setDashDetails({loading:false, data:res.data})
|
||||
}).catch(err => {
|
||||
setDashDetails({loading:false, data:{}})
|
||||
console.log(err)
|
||||
})
|
||||
},[])
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className="col-xxl-6">
|
||||
<EngageWidget10 className="h-md-100" />
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
return (
|
||||
<>
|
||||
<ToolbarWrapper />
|
||||
<Content>
|
||||
{/* begin::Row */}
|
||||
<div className="row g-5 g-xl-10 mb-5 mb-xl-10">
|
||||
{/* begin::Col */}
|
||||
<div className="col-md-6 col-lg-6 col-xl-6 col-xxl-3 mb-md-5 mb-xl-10">
|
||||
<CardsWidget20
|
||||
className="h-md-50 mb-5 mb-xl-10"
|
||||
description="Active Projects"
|
||||
color="#F1416C"
|
||||
img={toAbsoluteUrl('media/patterns/vector-1.png')}
|
||||
/>
|
||||
<CardsWidget7
|
||||
className="h-md-50 mb-5 mb-xl-10"
|
||||
description="Professionals"
|
||||
icon={false}
|
||||
stats={357}
|
||||
labelColor="dark"
|
||||
textColor="gray-300"
|
||||
/>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className="row gx-5 gx-xl-10">
|
||||
{/* begin::Col */}
|
||||
<div className="col-xxl-6 mb-5 mb-xl-10">
|
||||
{/* <app-new-charts-widget8 cssclassName="h-xl-100" chartHeight="275px" [chartHeightNumber]="275"></app-new-charts-widget8> */}
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
{/* begin::Col */}
|
||||
<div className="col-md-6 col-lg-6 col-xl-6 col-xxl-3 mb-md-5 mb-xl-10">
|
||||
<CardsWidget17 className="h-md-50 mb-5 mb-xl-10" />
|
||||
<ListsWidget26 className="h-lg-50" />
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className="col-xxl-6 mb-5 mb-xl-10">
|
||||
{/* <app-cards-widget18 cssclassName="h-xl-100" image="./assetsmedia/stock/600x600/img-65.jpg"></app-cards-widget18> */}
|
||||
{/* begin::Col */}
|
||||
<div className="col-xxl-6">
|
||||
<EngageWidget10 className="h-md-100" />
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
{/* end::Row */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className="row gy-5 gx-xl-8">
|
||||
<div className="col-xxl-4">
|
||||
<ListsWidget3 className="card-xxl-stretch mb-xl-3" />
|
||||
{/* begin::Row */}
|
||||
<div className="row gx-5 gx-xl-10">
|
||||
{/* begin::Col */}
|
||||
<div className="col-xxl-6 mb-5 mb-xl-10">
|
||||
{/* <app-new-charts-widget8 cssclassName="h-xl-100" chartHeight="275px" [chartHeightNumber]="275"></app-new-charts-widget8> */}
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className="col-xxl-6 mb-5 mb-xl-10">
|
||||
{/* <app-cards-widget18 cssclassName="h-xl-100" image="./assetsmedia/stock/600x600/img-65.jpg"></app-cards-widget18> */}
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
<div className="col-xl-8">
|
||||
<TablesWidget10 className="card-xxl-stretch mb-5 mb-xl-8" />
|
||||
{/* end::Row */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className="row gy-5 gx-xl-8">
|
||||
{/* BVN VERIFICATION */}
|
||||
<div className="col-xxl-4">
|
||||
<ListsWidget3 dashData={dashDetails} className="card-xxl-stretch mb-xl-3" />
|
||||
</div>
|
||||
{/* RECENT LOAN APPLICATION */}
|
||||
<div className="col-xl-8">
|
||||
<TablesWidget10 dashData={dashDetails} className="card-xxl-stretch mb-5 mb-xl-8" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
</Content>
|
||||
</>
|
||||
);
|
||||
{/* end::Row */}
|
||||
</Content>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const DashboardWrapper: FC = () => {
|
||||
const intl = useIntl();
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
export type RecentApplicationsProps = {
|
||||
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
|
||||
}[]
|
||||
|
||||
export type RecentBVNProps = {
|
||||
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
|
||||
}[]
|
||||
|
||||
|
||||
export type DashDataProps = {
|
||||
loading: boolean,
|
||||
data: {
|
||||
call_return?: string
|
||||
recent_applications? : RecentApplicationsProps
|
||||
recent_bvn?: RecentBVNProps
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user