victorAnumudu
122 lines
3.6 KiB
TypeScript
122 lines
3.6 KiB
TypeScript
import { FC, useEffect, useState } from 'react';
|
|
import { useIntl } from 'react-intl';
|
|
import { toAbsoluteUrl } from '../../../_digifi/helpers';
|
|
import { PageTitle } from '../../../_digifi/layout/core';
|
|
import {
|
|
// ListsWidget2,
|
|
ListsWidget3,
|
|
// ListsWidget4,
|
|
// ListsWidget6,
|
|
// TablesWidget5,
|
|
TablesWidget10,
|
|
// MixedWidget8,
|
|
CardsWidget7,
|
|
CardsWidget17,
|
|
CardsWidget20,
|
|
ListsWidget26,
|
|
EngageWidget10,
|
|
} 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 = () => {
|
|
const [dashDetails, setDashDetails] = useState<DashDataProps>({loading:true, data:{}})
|
|
|
|
useEffect(()=>{
|
|
getUserDashDetails().then(res => {
|
|
setDashDetails({loading:false, data:res.data})
|
|
}).catch(err => {
|
|
setDashDetails({loading:false, data:{}})
|
|
console.log(err)
|
|
})
|
|
},[])
|
|
|
|
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::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">
|
|
<EngageWidget10 className="h-md-100" />
|
|
</div>
|
|
{/* end::Col */}
|
|
</div>
|
|
{/* end::Row */}
|
|
|
|
{/* 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>
|
|
{/* 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>
|
|
{/* end::Row */}
|
|
</Content>
|
|
</>
|
|
)
|
|
}
|
|
|
|
const DashboardWrapper: FC = () => {
|
|
const intl = useIntl();
|
|
return (
|
|
<>
|
|
<PageTitle breadcrumbs={[]}>
|
|
{intl.formatMessage({ id: 'MENU.DASHBOARD' })}
|
|
</PageTitle>
|
|
<DashboardPage />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export { DashboardWrapper };
|