initial commit

src/_digifi/partials/widgets/lists/ListsWidget3.tsx

@@ -1,13 +1,39 @@
 
 import React from 'react'
-import {KTIcon} from '../../../helpers'
+import { NewDateTimeFormatter } from '../../../lib/NewDateTimeFormatter'
-import {Dropdown1} from '../../content/dropdown/Dropdown1'
+// 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
+    }[]
+  }
+}
 
 type Props = {
   className: string
+  dashData: dashDataProps
 }
 
-const ListsWidget3: React.FC<Props> = ({className}) => {
+const ListsWidget3: React.FC<Props> = ({dashData, className}) => {
+  console.log('dashData', dashData.data)
   return (
     <div className={`card ${className}`}>
       {/* begin::Header */}
@@ -31,132 +57,34 @@ const ListsWidget3: React.FC<Props> = ({className}) => {
       {/* end::Header */}
       {/* begin::Body */}
       <div className='card-body pt-2'>
-        {/* begin::Item */}
+        {dashData.loading ?
-        <div className='d-flex align-items-center mb-8'>
+        null
-          {/* begin::Bullet */}
+        :
-          <span className='bullet bullet-vertical h-40px bg-success'></span>
+        dashData?.data?.recent_bvn && dashData?.data?.recent_bvn.length ?
-          {/* end::Bullet */}
+        dashData?.data?.recent_bvn.map(item => (  
-          {/* begin::Checkbox */}
+          <div key={item?.uid} className='d-flex align-items-center mb-8'>
-          <div className='form-check form-check-custom form-check-solid mx-5'>
+            {/* begin::Bullet */}
-            <input className='form-check-input' type='checkbox' value='' />
+            <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>
-          {/* end::Checkbox */}
+        ))
-          {/* begin::Description */}
+        :
-          <div className='flex-grow-1'>
+        <p>No list Found!</p>
-            <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 &amp; 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 */}
       </div>
       {/* end::Body */}
     </div>

src/app/modules/auth/core/AxiosCallHelper.ts

@@ -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
+      );
+    });
+}
 
 

src/app/modules/auth/core/_requests.ts

@@ -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)
+}

src/app/pages/dashboard/DashboardWrapper.tsx

@@ -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,
+  // ListsWidget4,
-  ListsWidget6,
+  // ListsWidget6,
-  TablesWidget5,
+  // TablesWidget5,
   TablesWidget10,
-  MixedWidget8,
+  // MixedWidget8,
   CardsWidget7,
   CardsWidget17,
   CardsWidget20,
@@ -18,76 +18,92 @@ 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';
 
-const DashboardPage: FC = () => (
+const DashboardPage: FC = () => {
-  <>
+  const [dashDetails, setDashDetails] = useState({loading:true, data:{}})
-    <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 */}
+  useEffect(()=>{
-        <div className="col-md-6 col-lg-6 col-xl-6 col-xxl-3 mb-md-5 mb-xl-10">
+    getUserDashDetails().then(res => {
-          <CardsWidget17 className="h-md-50 mb-5 mb-xl-10" />
+      setDashDetails({loading:false, data:res.data})
-          <ListsWidget26 className="h-lg-50" />
+    }).catch(err => {
-        </div>
+      setDashDetails({loading:false, data:{}})
-        {/* end::Col */}
+      console.log(err)
+    })
+  },[])
 
-        {/* begin::Col */}
+  return (
-        <div className="col-xxl-6">
+    <>
-          <EngageWidget10 className="h-md-100" />
+      <ToolbarWrapper />
-        </div>
+      <Content>
-        {/* end::Col */}
+        {/* begin::Row */}
-      </div>
+        <div className="row g-5 g-xl-10 mb-5 mb-xl-10">
-      {/* end::Row */}
+          {/* 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 */}
+          {/* begin::Col */}
-      <div className="row gx-5 gx-xl-10">
+          <div className="col-md-6 col-lg-6 col-xl-6 col-xxl-3 mb-md-5 mb-xl-10">
-        {/* begin::Col */}
+            <CardsWidget17 className="h-md-50 mb-5 mb-xl-10" />
-        <div className="col-xxl-6 mb-5 mb-xl-10">
+            <ListsWidget26 className="h-lg-50" />
-          {/* <app-new-charts-widget8 cssclassName="h-xl-100" chartHeight="275px" [chartHeightNumber]="275"></app-new-charts-widget8> */}
+          </div>
-        </div>
+          {/* end::Col */}
-        {/* end::Col */}
 
-        {/* begin::Col */}
+          {/* begin::Col */}
-        <div className="col-xxl-6 mb-5 mb-xl-10">
+          <div className="col-xxl-6">
-          {/* <app-cards-widget18 cssclassName="h-xl-100" image="./assetsmedia/stock/600x600/img-65.jpg"></app-cards-widget18> */}
+            <EngageWidget10 className="h-md-100" />
+          </div>
+          {/* end::Col */}
         </div>
-        {/* end::Col */}
+        {/* end::Row */}
-      </div>
-      {/* end::Row */}
 
-      {/* begin::Row */}
+        {/* begin::Row */}
-      <div className="row gy-5 gx-xl-8">
+        <div className="row gx-5 gx-xl-10">
-        <div className="col-xxl-4">
+          {/* begin::Col */}
-          <ListsWidget3 className="card-xxl-stretch mb-xl-3" />
+          <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">
+        {/* end::Row */}
-          <TablesWidget10 className="card-xxl-stretch mb-5 mb-xl-8" />
+
+        {/* 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 className="card-xxl-stretch mb-5 mb-xl-8" />
+          </div>
         </div>
-      </div>
+        {/* end::Row */}
-      {/* end::Row */}
+      </Content>
-    </Content>
+    </>
-  </>
+  )
-);
+}
 
 const DashboardWrapper: FC = () => {
   const intl = useIntl();