restored logout

src/_digifi/layout/components/header/Navbar.tsx

@@ -1,18 +1,23 @@
-import clsx from 'clsx'
-import {KTIcon, toAbsoluteUrl} from '../../../helpers'
-import {HeaderNotificationsMenu, HeaderUserMenu, Search, ThemeModeSwitcher} from '../../../partials'
-import {useLayout} from '../../core'
+import clsx from 'clsx';
+import { KTIcon, toAbsoluteUrl } from '../../../helpers';
+import {
+  HeaderNotificationsMenu,
+  HeaderUserMenu,
+  Search,
+  ThemeModeSwitcher,
+} from '../../../partials';
+import { useLayout } from '../../core';
 
-const itemClass = 'ms-1 ms-md-4'
+const itemClass = 'ms-1 ms-md-4';
 const btnClass =
-  'btn btn-icon btn-custom btn-icon-muted btn-active-light btn-active-color-primary w-35px h-35px'
-const userAvatarClass = 'symbol-35px'
-const btnIconClass = 'fs-2'
+  'btn btn-icon btn-custom btn-icon-muted btn-active-light btn-active-color-primary w-35px h-35px';
+const userAvatarClass = 'symbol-35px';
+const btnIconClass = 'fs-2';
 
 const Navbar = () => {
-  const {config} = useLayout()
+  const { config } = useLayout();
   return (
-    <div className='app-navbar flex-shrink-0'>
+    <div className="app-navbar flex-shrink-0">
       {/* <div className={clsx('app-navbar-item align-items-stretch', itemClass)}>
         <Search />
       </div> */}
@@ -43,33 +48,38 @@ const Navbar = () => {
       </div> */}
 
       <div className={clsx('app-navbar-item', itemClass)}>
-        <ThemeModeSwitcher toggleBtnClass={clsx('btn-active-light-primary btn-custom')} />
+        <ThemeModeSwitcher
+          toggleBtnClass={clsx('btn-active-light-primary btn-custom')}
+        />
       </div>
 
       <div className={clsx('app-navbar-item', itemClass)}>
         <div
           className={clsx('cursor-pointer symbol', userAvatarClass)}
           data-kt-menu-trigger="{default: 'click'}"
-          data-kt-menu-attach='parent'
-          data-kt-menu-placement='bottom-end'
+          data-kt-menu-attach="parent"
+          data-kt-menu-placement="bottom-end"
         >
-          <img src={toAbsoluteUrl('media/avatars/300-3.jpg')} alt='' />
+          <img src={toAbsoluteUrl('media/avatars/300-3.jpg')} alt="" />
         </div>
         <HeaderUserMenu />
       </div>
 
       {config.app?.header?.default?.menu?.display && (
-        <div className='app-navbar-item d-lg-none ms-2 me-n3' title='Show header menu'>
+        <div
+          className="app-navbar-item d-lg-none ms-2 me-n3"
+          title="Show header menu"
+        >
           <div
-            className='btn btn-icon btn-active-color-primary w-35px h-35px'
-            id='kt_app_header_menu_toggle'
+            className="btn btn-icon btn-active-color-primary w-35px h-35px"
+            id="kt_app_header_menu_toggle"
           >
-            <KTIcon iconName='text-align-left' className={btnIconClass} />
+            <KTIcon iconName="text-align-left" className={btnIconClass} />
           </div>
         </div>
       )}
     </div>
-  )
-}
+  );
+};
 
-export {Navbar}
+export { Navbar };

src/_digifi/layout/components/paginatedListing/RecentBVNList.tsx

@@ -0,0 +1,140 @@
+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 d-flex flex-column h-100">
+      <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="w-full h-100 d-flex gap-4 justify-content-center align-items-end">
+        <button
+          onClick={handlePrev}
+          className={`text-sm md:text-lg 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"
+          }`}
+          disabled={currentPage == 0}
+          // style={{width:'30px', height:'30px'}}
+        >
+          &lt; Previous
+        </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"
+                }`}
+                disabled={currentPage != index}
+                style={{width:'30px', height:'30px'}}
+              >
+                {index/itemsPerPage +1}
+              </button>
+            )
+          }
+        })} */}
+
+        <button
+          onClick={handleNext}
+          className={`text-sm md:text-lg 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"
+          }`}
+          disabled={currentPage + numberOfSelection >= data.length}
+          // style={{width:'30px', height:'30px'}}
+        >
+          Next &gt;
+        </button>
+      </div>
+      )}
+    </div>
+  );
+}

src/_digifi/layout/components/paginatedListing/RecentLoanAppList.tsx

@@ -0,0 +1,140 @@
+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 d-flex flex-column h-100">
+      <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="w-full h-100 d-flex gap-4 justify-content-center align-items-end">
+        <button
+          onClick={handlePrev}
+          className={`text-sm md:text-lg 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"
+          }`}
+          disabled={currentPage == 0}
+          // style={{width:'30px', height:'30px'}}
+        >
+          &lt; Previous
+        </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"
+                }`}
+                disabled={currentPage != index}
+                style={{width:'30px', height:'30px'}}
+              >
+                {index/itemsPerPage +1}
+              </button>
+            )
+          }
+        })} */}
+
+        <button
+          onClick={handleNext}
+          className={`text-sm md:text-lg 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"
+          }`}
+          disabled={currentPage + numberOfSelection >= data.length}
+          // style={{width:'30px', height:'30px'}}
+        >
+          Next &gt;
+        </button>
+      </div>
+      )}
+    </div>
+  );
+}

src/_digifi/lib/AmountFormatter.ts

@@ -0,0 +1,24 @@
+// FUNCTION TO RETURN AMOUNT TO TWO DECIMAL PLACES
+export const AmountTo2DP = (
+  amount = "00",
+) => {
+  // Convert the number to a string
+  let numStr = String(amount);
+
+  // Split the string into integer and decimal parts
+  let parts = numStr.split(".");
+  let integerPart = parts[0] || "";
+  let decimalPart = parts[1] || "";
+
+  // Add thousands separators to the integer part
+  let formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+
+  // Truncate or pad the decimal part to two decimal points
+  let formattedDecimal = decimalPart.slice(0, 2).padEnd(2, "0");
+
+  // Combine the formatted integer and decimal parts
+  let formattedNumber = formattedInteger + '.' + formattedDecimal;
+
+  // return formattedNumber;
+  return formattedNumber;
+};

src/_digifi/partials/layout/header-menus/HeaderUserMenu.tsx

@@ -1,83 +1,82 @@
-
-import {FC} from 'react'
-import {Link} from 'react-router-dom'
-import {useAuth} from '../../../../app/modules/auth'
-import {Languages} from './Languages'
-import {toAbsoluteUrl} from '../../../helpers'
+import { FC } from 'react';
+import { Link } from 'react-router-dom';
+import { useAuth } from '../../../../app/modules/auth';
+import { Languages } from './Languages';
+import { toAbsoluteUrl } from '../../../helpers';
 
 const HeaderUserMenu: FC = () => {
-  const {currentUser, logout} = useAuth()
+  const { currentUser, logout } = useAuth();
   return (
     <div
-      className='menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg menu-state-primary fw-bold py-4 fs-6 w-275px'
-      data-kt-menu='true'
+      className="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg menu-state-primary fw-bold py-4 fs-6 w-275px"
+      data-kt-menu="true"
     >
-      <div className='menu-item px-3'>
-        <div className='menu-content d-flex align-items-center px-3'>
-          <div className='symbol symbol-50px me-5'>
-            <img alt='Logo' src={toAbsoluteUrl('media/avatars/300-3.jpg')} />
+      <div className="menu-item px-3">
+        <div className="menu-content d-flex align-items-center px-3">
+          <div className="symbol symbol-50px me-5">
+            <img alt="Logo" src={toAbsoluteUrl('media/avatars/300-3.jpg')} />
           </div>
 
-          <div className='d-flex flex-column'>
-            <div className='fw-bolder d-flex align-items-center fs-5'>
+          <div className="d-flex flex-column">
+            <div className="fw-bolder d-flex align-items-center fs-5">
               {currentUser?.first_name} {currentUser?.first_name}
               {/*<span className='badge badge-light-success fw-bolder fs-8 px-2 py-1 ms-2'>Pro</span>*/}
             </div>
-            <a href='#' className='fw-bold text-muted text-hover-primary fs-7'>
+            <a href="#" className="fw-bold text-muted text-hover-primary fs-7">
               {currentUser?.email}
             </a>
           </div>
         </div>
       </div>
 
-      <div className='separator my-2'></div>
+      <div className="separator my-2"></div>
 
-      <div className='menu-item px-5'>
+      {/* <div className='menu-item px-5'>
         <Link to={'/crafted/pages/profile'} className='menu-link px-5'>
           My Profile
         </Link>
-      </div>
+      </div> */}
 
-      <div className='menu-item px-5'>
+      {/* <div className='menu-item px-5'>
         <a href='#' className='menu-link px-5'>
           <span className='menu-text'>My Projects</span>
           <span className='menu-badge'>
             <span className='badge badge-light-danger badge-circle fw-bolder fs-7'>3</span>
           </span>
         </a>
-      </div>
+      </div> */}
 
       <div
-        className='menu-item px-5'
-        data-kt-menu-trigger='hover'
-        data-kt-menu-placement='left-start'
-        data-kt-menu-flip='bottom'
+        className="menu-item px-5"
+        data-kt-menu-trigger="hover"
+        data-kt-menu-placement="left-start"
+        data-kt-menu-flip="bottom"
       >
-        <a href='#' className='menu-link px-5'>
+        {/* <a href='#' className='menu-link px-5'>
           <span className='menu-title'>My Subscription</span>
           <span className='menu-arrow'></span>
-        </a>
+        </a> */}
 
-        <div className='menu-sub menu-sub-dropdown w-175px py-4'>
-          <div className='menu-item px-3'>
+        <div className="menu-sub menu-sub-dropdown w-175px py-4">
+          {/* <div className='menu-item px-3'>
             <a href='#' className='menu-link px-5'>
               Referrals
             </a>
-          </div>
+          </div> */}
 
-          <div className='menu-item px-3'>
+          {/* <div className='menu-item px-3'>
             <a href='#' className='menu-link px-5'>
               Billing
             </a>
-          </div>
+          </div> */}
 
-          <div className='menu-item px-3'>
+          {/* <div className='menu-item px-3'>
             <a href='#' className='menu-link px-5'>
               Payments
             </a>
-          </div>
+          </div> */}
 
-          <div className='menu-item px-3'>
+          {/* <div className='menu-item px-3'>
             <a href='#' className='menu-link d-flex flex-stack px-5'>
               Statements
               <i
@@ -86,11 +85,11 @@ const HeaderUserMenu: FC = () => {
                 title='View your statements'
               ></i>
             </a>
-          </div>
+          </div> */}
 
-          <div className='separator my-2'></div>
+          <div className="separator my-2"></div>
 
-          <div className='menu-item px-3'>
+          {/* <div className='menu-item px-3'>
             <div className='menu-content px-3'>
               <label className='form-check form-switch form-check-custom form-check-solid'>
                 <input
@@ -103,33 +102,33 @@ const HeaderUserMenu: FC = () => {
                 <span className='form-check-label text-muted fs-7'>Notifications</span>
               </label>
             </div>
-          </div>
+          </div> */}
         </div>
       </div>
 
-      <div className='menu-item px-5'>
+      {/* <div className='menu-item px-5'>
         <a href='#' className='menu-link px-5'>
           My Statements
         </a>
-      </div>
+      </div> */}
 
-      <div className='separator my-2'></div>
+      <div className="separator my-2"></div>
 
-      <Languages />
+      {/* <Languages /> */}
 
-      <div className='menu-item px-5 my-1'>
+      {/* <div className='menu-item px-5 my-1'>
         <Link to='/crafted/account/settings' className='menu-link px-5'>
           Account Settings
         </Link>
-      </div>
+      </div> */}
 
-      <div className='menu-item px-5'>
-        <a onClick={logout} className='menu-link px-5'>
+      <div className="menu-item px-5">
+        <a onClick={logout} className="menu-link px-5">
           Sign Out
         </a>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export {HeaderUserMenu}
+export { HeaderUserMenu };

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

@@ -1,21 +1,25 @@
 
 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 */}
       <div className='card-header border-0'>
         <h3 className='card-title fw-bold text-gray-900'>BVN Verification</h3>
-        <div className='card-toolbar'>
-          {/* begin::Menu */}
-          {/* <button
+        {/* begin::Menu */}
+        {/* <div className='card-toolbar'>
+          <button
             type='button'
             className='btn btn-sm btn-icon btn-color-primary btn-active-light-primary'
             data-kt-menu-trigger='click'
@@ -23,140 +27,51 @@ const ListsWidget3: React.FC<Props> = ({className}) => {
             data-kt-menu-flip='top-end'
           >
             <KTIcon iconName='category' className='fs-2' />
-          </button> */}
-          {/* <Dropdown1 /> */}
-          {/* end::Menu */}
-        </div>
+          </button>
+          <Dropdown1 />
+        </div> */}
+        {/* end::Menu */}
       </div>
       {/* 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 &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 className='card-body pt-0'>
+        {dashData?.loading ?
+        null
+        :
+        dashData?.data?.recent_bvn && dashData?.data?.recent_bvn.length ?
+        <RecentBVNList
+        data = {dashData?.data?.recent_bvn}
+        itemsPerPage={7}
+        >
+          {(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 me-5'></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'>
+                    <span className='text-gray-800 fw-bold fs-6'>
+                      {item?.bvn}
+                    </span>
+                    <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'>status: {item?.status}</span>
+                </div>
+              ))}
+            </>
+          )}
+        </RecentBVNList>
+        :
+        <p>No list Found!</p>
+        }
       </div>
       {/* end::Body */}
     </div>

src/_digifi/partials/widgets/tables/TablesWidget10.tsx

@@ -1,20 +1,26 @@
 
 import { FC } from 'react'
 import {KTIcon, toAbsoluteUrl} from '../../../helpers'
+import { DashDataProps } from '../../../../app/pages/dashboard/model'
+import { NewDateTimeFormatter } from '../../../lib/NewDateTimeFormatter'
+import { Link } from 'react-router-dom'
+import { AmountTo2DP } from '../../../lib/AmountFormatter'
 
 type Props = {
   className: string
+  dashData?: DashDataProps
 }
 
-const TablesWidget10: FC<Props> = ({className}) => {
+const TablesWidget10: FC<Props> = ({className, dashData}) => {
   return (
     <div className={`card ${className}`}>
       {/* begin::Header */}
-      <div className='card-header border-0 pt-5'>
-        <h3 className='card-title align-items-start flex-column'>
-          <span className='card-label fw-bold fs-3 mb-1'>Recent Loan Application</span>
-          {/* <span className='text-muted mt-1 fw-semibold fs-7'>Over 500 members</span> */}
-        </h3>
+      <div className='card-header border-0'>
+      <h3 className='card-title fw-bold text-gray-900'>Recent Loan Application</h3>
+        {/* <h3 className='card-title align-items-start flex-column'>
+          <span className='card-label fw-bold fs-3'>Recent Loan Application</span>
+          <span className='text-muted mt-1 fw-semibold fs-7'>Over 500 members</span>
+        </h3> */}
         {/* <div
           className='card-toolbar'
           data-bs-toggle='tooltip'
@@ -32,371 +38,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='' />
+      {dashData?.loading ?
+      null
+      : dashData?.data?.recent_applications ?
+      <>
+        <div className='card-body py-0'>
+          {/* 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>
-                    <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 &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>
-                      <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 */}
+                  </th>
+                  <th className='min-w-150px'>Authors</th>
+                  <th className='min-w-140px'>Amount (NGN)</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>
+                {dashData?.data?.recent_applications && dashData?.data?.recent_applications.length ?
+                  dashData?.data?.recent_applications.map((item, index:any) => {
+                    if(index < 6){
+                      return (
+                        <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/avatar1.jpg')} alt='' />
+                              </div>
+                              <div className='d-flex justify-content-start flex-column'>
+                                <span className='text-gray-900 fw-bold fs-6'>
+                                  {item?.firstname} {item?.lastname}
+                                </span>
+                                <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 d-block fs-6'>
+                              {AmountTo2DP(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 */}
+            <p className='py-1 w-100 text-center text-hover-primary'>
+              <Link to='/loan/pages/process/started'>more applications</Link>
+            </p>
+          </div>
+          {/* end::Table container */}
         </div>
-        {/* end::Table container */}
-      </div>
+      </>
+      :
+      null
+      }
       {/* begin::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/modules/process/core/_models.ts

@@ -0,0 +1,43 @@
+import { ID, Response } from "../../../../_digifi/helpers"
+
+export type User = {
+  id?: ID
+  name?: string
+  avatar?: string
+  // email?: string
+  position?: string
+  role?: string
+  last_login?: string
+  two_steps?: boolean
+  joined_day?: string
+  online?: boolean
+  initials?: {
+    label: string
+    state: string
+  }
+  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 UsersQueryResponse = Response<Array<User>>
+
+export const initialUser: User = {
+  avatar: 'avatars/300-6.jpg',
+  position: 'Art Director',
+  role: 'Administrator',
+  name: '',
+  email: '',
+}

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

@@ -0,0 +1,87 @@
+import axios, { AxiosResponse } from "axios";
+import { ID, Response } from "../../../../_digifi/helpers"
+import { User, UsersQueryResponse } from "./_models";
+
+const API_URL = import.meta.env.VITE_APP_THEME_API_URL;
+const USER_URL = `${API_URL}/user`;
+// const GET_USERS_URL = `${API_URL}/users/query`;
+
+const NEW_USER_ENDPOINT = import.meta.env.VITE_APP_USER_ENDPOINT
+
+// const getStartedUsers = (query: string): Promise<UsersQueryResponse> => {
+//   return axios
+//     .get(`${GET_USERS_URL}?${query}`)
+//     .then((d: AxiosResponse<UsersQueryResponse>) => d.data);
+// };
+const getStartedUsers = (query: string): Promise<UsersQueryResponse> => { // FUNCTION TO GET USERS THAT HAVE STARTED LOAN APPLICATION
+  return axios
+    .get(`${NEW_USER_ENDPOINT}/loan/started`)
+    .then((d: AxiosResponse<UsersQueryResponse>) => d.data);
+};
+
+const getRejectedUsers = (query: string): Promise<UsersQueryResponse> => { // FUNCTION TO GET USERS THAT HAVE REJECTED LOAN APPLICATION
+  return axios
+    .get(`${NEW_USER_ENDPOINT}/loan/rejected`)
+    .then((d: AxiosResponse<UsersQueryResponse>) => d.data);
+};
+
+const getPendingUsers = (query: string): Promise<UsersQueryResponse> => { // FUNCTION TO GET USERS THAT HAVE PENDING LOAN APPLICATION
+  return axios
+    .get(`${NEW_USER_ENDPOINT}/loan/pending`)
+    .then((d: AxiosResponse<UsersQueryResponse>) => d.data);
+};
+
+const getReadyUsers = (query: string): Promise<UsersQueryResponse> => { // FUNCTION TO GET USERS THAT HAVE READY LOAN APPLICATION
+  return axios
+    .get(`${NEW_USER_ENDPOINT}/loan/ready`)
+    .then((d: AxiosResponse<UsersQueryResponse>) => d.data);
+};
+
+const getApprovedUsers = (query: string): Promise<UsersQueryResponse> => { // FUNCTION TO GET USERS THAT HAVE APPROVED LOAN APPLICATION
+  return axios
+    .get(`${NEW_USER_ENDPOINT}/loan/approved`)
+    .then((d: AxiosResponse<UsersQueryResponse>) => d.data);
+};
+
+const getUserById = (id: ID): Promise<User | undefined> => {
+  return axios
+    .get(`${USER_URL}/${id}`)
+    .then((response: AxiosResponse<Response<User>>) => response.data)
+    .then((response: Response<User>) => response.data);
+};
+
+const createUser = (user: User): Promise<User | undefined> => {
+  return axios
+    .put(USER_URL, user)
+    .then((response: AxiosResponse<Response<User>>) => response.data)
+    .then((response: Response<User>) => response.data);
+};
+
+const updateUser = (user: User): Promise<User | undefined> => {
+  return axios
+    .post(`${USER_URL}/${user.id}`, user)
+    .then((response: AxiosResponse<Response<User>>) => response.data)
+    .then((response: Response<User>) => response.data);
+};
+
+const deleteUser = (userId: ID): Promise<void> => {
+  return axios.delete(`${USER_URL}/${userId}`).then(() => {});
+};
+
+const deleteSelectedUsers = (userIds: Array<ID>): Promise<void> => {
+  const requests = userIds.map((id) => axios.delete(`${USER_URL}/${id}`));
+  return axios.all(requests).then(() => {});
+};
+
+export {
+  getStartedUsers,
+  getRejectedUsers,
+  getPendingUsers,
+  getReadyUsers,
+  getApprovedUsers,
+  deleteUser,
+  deleteSelectedUsers,
+  getUserById,
+  createUser,
+  updateUser,
+};

src/app/modules/process/user-approved/users-list/core/QueryResponseProvider.tsx

@@ -11,8 +11,8 @@ import {
   stringifyRequestQuery,
   WithChildren,
 } from '../../../../../../_digifi/helpers'
-import {getStartedUsers} from './_requests'
-import {User} from './_models'
+import {getApprovedUsers} from '../../../core/_requests'
+import {User} from '../../../core/_models'
 import {useQueryRequest} from './QueryRequestProvider'
 
 const QueryResponseContext = createResponseContext<User>(initialQueryResponse)
@@ -34,7 +34,7 @@ const QueryResponseProvider: FC<WithChildren> = ({children}) => {
   } = useQuery(
     `${QUERIES.USERS_LIST}-${query}`,
     () => {
-      return getStartedUsers(query)
+      return getApprovedUsers(query)
     },
     {cacheTime: 0, keepPreviousData: true, refetchOnWindowFocus: false}
   )

src/app/modules/process/user-approved/users-list/table/UsersTable.tsx

@@ -4,7 +4,7 @@ import {CustomHeaderColumn} from './columns/CustomHeaderColumn'
 import {CustomRow} from './columns/CustomRow'
 import {useQueryResponseData, useQueryResponseLoading} from '../core/QueryResponseProvider'
 import {usersColumns} from './columns/_columns'
-import {User} from '../core/_models'
+import {User} from '../../../core/_models'
 import {UsersListLoading} from '../components/loading/UsersListLoading'
 import {UsersListPagination} from '../components/pagination/UsersListPagination'
 import {KTCardBody} from '../../../../../../_digifi/helpers'

src/app/modules/process/user-pending/users-list/core/QueryResponseProvider.tsx

@@ -11,8 +11,8 @@ import {
   stringifyRequestQuery,
   WithChildren,
 } from '../../../../../../_digifi/helpers'
-import {getStartedUsers} from './_requests'
-import {User} from './_models'
+import {getPendingUsers} from '../../../core/_requests'
+import {User} from '../../../core/_models'
 import {useQueryRequest} from './QueryRequestProvider'
 
 const QueryResponseContext = createResponseContext<User>(initialQueryResponse)
@@ -34,7 +34,7 @@ const QueryResponseProvider: FC<WithChildren> = ({children}) => {
   } = useQuery(
     `${QUERIES.USERS_LIST}-${query}`,
     () => {
-      return getStartedUsers(query)
+      return getPendingUsers(query)
     },
     {cacheTime: 0, keepPreviousData: true, refetchOnWindowFocus: false}
   )

src/app/modules/process/user-pending/users-list/table/UsersTable.tsx

@@ -4,7 +4,7 @@ import {CustomHeaderColumn} from './columns/CustomHeaderColumn'
 import {CustomRow} from './columns/CustomRow'
 import {useQueryResponseData, useQueryResponseLoading} from '../core/QueryResponseProvider'
 import {usersColumns} from './columns/_columns'
-import {User} from '../core/_models'
+import {User} from '../../../core/_models'
 import {UsersListLoading} from '../components/loading/UsersListLoading'
 import {UsersListPagination} from '../components/pagination/UsersListPagination'
 import {KTCardBody} from '../../../../../../_digifi/helpers'

src/app/modules/process/user-ready/users-list/core/QueryResponseProvider.tsx

@@ -11,8 +11,8 @@ import {
   stringifyRequestQuery,
   WithChildren,
 } from '../../../../../../_digifi/helpers'
-import {getStartedUsers} from './_requests'
-import {User} from './_models'
+import {getReadyUsers} from '../../../core/_requests'
+import {User} from '../../../core/_models'
 import {useQueryRequest} from './QueryRequestProvider'
 
 const QueryResponseContext = createResponseContext<User>(initialQueryResponse)
@@ -34,7 +34,7 @@ const QueryResponseProvider: FC<WithChildren> = ({children}) => {
   } = useQuery(
     `${QUERIES.USERS_LIST}-${query}`,
     () => {
-      return getStartedUsers(query)
+      return getReadyUsers(query)
     },
     {cacheTime: 0, keepPreviousData: true, refetchOnWindowFocus: false}
   )

src/app/modules/process/user-ready/users-list/table/UsersTable.tsx

@@ -4,7 +4,7 @@ import {CustomHeaderColumn} from './columns/CustomHeaderColumn'
 import {CustomRow} from './columns/CustomRow'
 import {useQueryResponseData, useQueryResponseLoading} from '../core/QueryResponseProvider'
 import {usersColumns} from './columns/_columns'
-import {User} from '../core/_models'
+import {User} from '../../../core/_models'
 import {UsersListLoading} from '../components/loading/UsersListLoading'
 import {UsersListPagination} from '../components/pagination/UsersListPagination'
 import {KTCardBody} from '../../../../../../_digifi/helpers'

src/app/modules/process/user-rejected/users-list/core/QueryResponseProvider.tsx

@@ -11,8 +11,8 @@ import {
   stringifyRequestQuery,
   WithChildren,
 } from '../../../../../../_digifi/helpers'
-import {getStartedUsers} from './_requests'
-import {User} from './_models'
+import {getRejectedUsers} from '../../../core/_requests'
+import {User} from '../../../core/_models'
 import {useQueryRequest} from './QueryRequestProvider'
 
 const QueryResponseContext = createResponseContext<User>(initialQueryResponse)
@@ -34,7 +34,7 @@ const QueryResponseProvider: FC<WithChildren> = ({children}) => {
   } = useQuery(
     `${QUERIES.USERS_LIST}-${query}`,
     () => {
-      return getStartedUsers(query)
+      return getRejectedUsers(query)
     },
     {cacheTime: 0, keepPreviousData: true, refetchOnWindowFocus: false}
   )

src/app/modules/process/user-rejected/users-list/table/UsersTable.tsx

@@ -4,7 +4,7 @@ import {CustomHeaderColumn} from './columns/CustomHeaderColumn'
 import {CustomRow} from './columns/CustomRow'
 import {useQueryResponseData, useQueryResponseLoading} from '../core/QueryResponseProvider'
 import {usersColumns} from './columns/_columns'
-import {User} from '../core/_models'
+import {User} from '../../../core/_models'
 import {UsersListLoading} from '../components/loading/UsersListLoading'
 import {UsersListPagination} from '../components/pagination/UsersListPagination'
 import {KTCardBody} from '../../../../../../_digifi/helpers'

src/app/modules/process/user-started/users-list/core/QueryResponseProvider.tsx

@@ -11,8 +11,8 @@ import {
   stringifyRequestQuery,
   WithChildren,
 } from '../../../../../../_digifi/helpers'
-import {getStartedUsers} from './_requests'
-import {User} from './_models'
+import {getStartedUsers} from '../../../core/_requests'
+import {User} from '../../../core/_models'
 import {useQueryRequest} from './QueryRequestProvider'
 
 const QueryResponseContext = createResponseContext<User>(initialQueryResponse)

src/app/modules/process/user-started/users-list/table/UsersTable.tsx

@@ -4,7 +4,7 @@ import {CustomHeaderColumn} from './columns/CustomHeaderColumn'
 import {CustomRow} from './columns/CustomRow'
 import {useQueryResponseData, useQueryResponseLoading} from '../core/QueryResponseProvider'
 import {usersColumns} from './columns/_columns'
-import {User} from '../core/_models'
+import {User} from '../../../core/_models'
 import {UsersListLoading} from '../components/loading/UsersListLoading'
 import {UsersListPagination} from '../components/pagination/UsersListPagination'
 import {KTCardBody} from '../../../../../../_digifi/helpers'

src/app/pages/dashboard/DashboardWrapper.tsx

@@ -1,130 +1,121 @@
-import {FC} from 'react'
-import {useIntl} from 'react-intl'
-import {toAbsoluteUrl} from '../../../_digifi/helpers'
-import {PageTitle} from '../../../_digifi/layout/core'
+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,
   ListsWidget26,
   EngageWidget10,
-} from '../../../_digifi/partials/widgets'
-import { ToolbarWrapper } from '../../../_digifi/layout/components/toolbar'
-import { Content } from '../../../_digifi/layout/components/content'
+} 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 */}
-
-    {/* 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'>
-      <div className='col-xxl-4'>
-        <ListsWidget3 className='card-xxl-stretch mb-xl-3' />
-      </div>
-      <div className='col-xl-8'>
-        <TablesWidget10 className='card-xxl-stretch mb-5 mb-xl-8' />
-      </div>
-    </div>
-    {/* end::Row */}
-
-    {/* begin::Row */}
-    <div className='row gy-5 g-xl-8'>
-      <div className='col-xl-4'>
-        <ListsWidget2 className='card-xl-stretch mb-xl-8' />
-      </div>
-      <div className='col-xl-4'>
-        <ListsWidget6 className='card-xl-stretch mb-xl-8' />
-      </div>
-      <div className='col-xl-4'>
-        <ListsWidget4 className='card-xl-stretch mb-5 mb-xl-8' items={5} />
-        {/* partials/widgets/lists/_widget-4', 'class' => 'card-xl-stretch mb-5 mb-xl-8', 'items' => '5' */}
-      </div>
-    </div>
-    {/* end::Row */}
-
-    <div className='row g-5 gx-xxl-8'>
-      <div className='col-xxl-4'>
-        <MixedWidget8
-          className='card-xxl-stretch mb-xl-3'
-          chartColor='success'
-          chartHeight='150px'
-        />
-      </div>
-      <div className='col-xxl-8'>
-        <TablesWidget5 className='card-xxl-stretch mb-5 mb-xxl-8' />
-      </div>
-    </div>
-    </Content>
-  </>
-)
-
-const DashboardWrapper: FC = () => {
-  const intl = useIntl()
   return (
     <>
-      <PageTitle breadcrumbs={[]}>{intl.formatMessage({id: 'MENU.DASHBOARD'})}</PageTitle>
-      <DashboardPage />
+      <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>
     </>
   )
 }
 
-export {DashboardWrapper}
+const DashboardWrapper: FC = () => {
+  const intl = useIntl();
+  return (
+    <>
+      <PageTitle breadcrumbs={[]}>
+        {intl.formatMessage({ id: 'MENU.DASHBOARD' })}
+      </PageTitle>
+      <DashboardPage />
+    </>
+  );
+};
+
+export { DashboardWrapper };

src/app/pages/dashboard/model.ts

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