remove extra backoffice menu

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

@@ -1,18 +1,23 @@
-import clsx from 'clsx'
+import clsx from 'clsx';
-import {KTIcon, toAbsoluteUrl} from '../../../helpers'
+import { KTIcon, toAbsoluteUrl } from '../../../helpers';
-import {HeaderNotificationsMenu, HeaderUserMenu, Search, ThemeModeSwitcher} from '../../../partials'
+import {
-import {useLayout} from '../../core'
+  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'
+  'btn btn-icon btn-custom btn-icon-muted btn-active-light btn-active-color-primary w-35px h-35px';
-const userAvatarClass = 'symbol-35px'
+const userAvatarClass = 'symbol-35px';
-const btnIconClass = 'fs-2'
+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,42 @@ 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-attach="parent"
-          data-kt-menu-placement='bottom-end'
+          data-kt-menu-placement="bottom-end"
         >
-          <img src={toAbsoluteUrl('media/avatars/300-3.jpg')} alt='' />
+          <img
+            src={toAbsoluteUrl('media/avatars/300-3.jpg')}
+            alt=""
+            style={{ cursor: 'auto' }}
+          />
         </div>
-        <HeaderUserMenu />
+        {/* <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'
+            className="btn btn-icon btn-active-color-primary w-35px h-35px"
-            id='kt_app_header_menu_toggle'
+            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

@@ -57,7 +57,7 @@ export default function RecentBVNList({
   },[itemsPerPage])
 
   return (
-    <div className="w-full">
+    <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 && (
@@ -86,20 +86,21 @@ export default function RecentBVNList({
 
       {/* show prev and next button if data exist */}
       {(data.length > 0 && data.length > itemsPerPage) && (
-        <div className="mt-2 mt-sm-5 w-full d-flex gap-4 justify-content-center align-items-center">
+        <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 rounded-circle d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
+          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"
           }`}
-          style={{width:'30px', height:'30px'}}
+          disabled={currentPage == 0}
+          // style={{width:'30px', height:'30px'}}
         >
-          &lt;
+          &lt; Previous
         </button>
 
-        {data.length && data.map((item, index)=>{
+        {/* {data.length && data.map((item, index)=>{
           item = item
           if(index%itemsPerPage == 0 && index >= currentPage && index <= currentPage+itemsPerPage){
             return (
@@ -111,24 +112,26 @@ export default function RecentBVNList({
                     ? "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 rounded-circle d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
+          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"
           }`}
-          style={{width:'30px', height:'30px'}}
+          disabled={currentPage + numberOfSelection >= data.length}
+          // style={{width:'30px', height:'30px'}}
         >
-          &gt;
+          Next &gt;
         </button>
       </div>
       )}

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

@@ -57,7 +57,7 @@ export default function RecentLoanAppList({
   },[itemsPerPage])
 
   return (
-    <div className="w-full">
+    <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 && (
@@ -86,20 +86,21 @@ export default function RecentLoanAppList({
 
       {/* show prev and next button if data exist */}
       {(data.length > 0 && data.length > itemsPerPage) && (
-        <div className="mt-2 mt-sm-5 w-full d-flex gap-4 justify-content-center align-items-center">
+        <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 rounded-circle d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
+          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"
           }`}
-          style={{width:'30px', height:'30px'}}
+          disabled={currentPage == 0}
+          // style={{width:'30px', height:'30px'}}
         >
-          &lt;
+          &lt; Previous
         </button>
 
-        {data.length && data.map((item, index)=>{
+        {/* {data.length && data.map((item, index)=>{
           item = item
           if(index%itemsPerPage == 0 && index >= currentPage && index <= currentPage+itemsPerPage){
             return (
@@ -111,24 +112,26 @@ export default function RecentLoanAppList({
                     ? "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 rounded-circle d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
+          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"
           }`}
-          style={{width:'30px', height:'30px'}}
+          disabled={currentPage + numberOfSelection >= data.length}
+          // style={{width:'30px', height:'30px'}}
         >
-          &gt;
+          Next &gt;
         </button>
       </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/widgets/lists/ListsWidget3.tsx

@@ -17,9 +17,9 @@ const ListsWidget3: React.FC<Props> = ({dashData, 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 */}
-          {/* begin::Menu */}
+        {/* <div className='card-toolbar'>
-          {/* <button
+          <button
             type='button'
             className='btn btn-sm btn-icon btn-color-primary btn-active-light-primary'
             data-kt-menu-trigger='click'
@@ -27,43 +27,43 @@ const ListsWidget3: React.FC<Props> = ({dashData, className}) => {
             data-kt-menu-flip='top-end'
           >
             <KTIcon iconName='category' className='fs-2' />
-          </button> */}
+          </button>
-          {/* <Dropdown1 /> */}
+          <Dropdown1 />
-          {/* end::Menu */}
+        </div> */}
-        </div>
+        {/* end::Menu */}
       </div>
       {/* end::Header */}
       {/* begin::Body */}
-      <div className='card-body pt-2'>
+      <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={5}
+        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'></span>
+                  <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'>
+                  {/* <div className='form-check form-check-custom form-check-solid mx-5'>
                     <input className='form-check-input' type='checkbox' value='' />
-                  </div>
+                  </div> */}
                   {/* end::Checkbox */}
                   {/* begin::Description */}
                   <div className='flex-grow-1'>
-                    <a href='#' className='text-gray-800 text-hover-primary fw-bold fs-6'>
+                    <span className='text-gray-800 fw-bold fs-6'>
                       {item?.bvn}
-                    </a>
+                    </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'>New</span>
+                  <span className='badge badge-light-primary fs-8 fw-bold'>status: {item?.status}</span>
                 </div>
               ))}
             </>

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

@@ -1,10 +1,10 @@
 
 import { FC } from 'react'
 import {KTIcon, toAbsoluteUrl} from '../../../helpers'
-import { DashDataProps, RecentApplicationsProps } from '../../../../app/pages/dashboard/model'
+import { DashDataProps } from '../../../../app/pages/dashboard/model'
 import { NewDateTimeFormatter } from '../../../lib/NewDateTimeFormatter'
-import RecentLoanAppList from '../../../layout/components/paginatedListing/RecentLoanAppList'
+import { Link } from 'react-router-dom'
-
+import { AmountTo2DP } from '../../../lib/AmountFormatter'
 
 type Props = {
   className: string
@@ -15,11 +15,12 @@ const TablesWidget10: FC<Props> = ({className, dashData}) => {
   return (
     <div className={`card ${className}`}>
       {/* begin::Header */}
-      <div className='card-header border-0 pt-5'>
+      <div className='card-header border-0'>
-        <h3 className='card-title align-items-start flex-column'>
+      <h3 className='card-title fw-bold text-gray-900'>Recent Loan Application</h3>
-          <span className='card-label fw-bold fs-3 mb-1'>Recent Loan Application</span>
+        {/* <h3 className='card-title align-items-start flex-column'>
-          {/* <span className='text-muted mt-1 fw-semibold fs-7'>Over 500 members</span> */}
+          <span className='card-label fw-bold fs-3'>Recent Loan Application</span>
-        </h3>
+          <span className='text-muted mt-1 fw-semibold fs-7'>Over 500 members</span>
+        </h3> */}
         {/* <div
           className='card-toolbar'
           data-bs-toggle='tooltip'
@@ -42,124 +43,124 @@ const TablesWidget10: FC<Props> = ({className, dashData}) => {
       {dashData?.loading ?
       null
       : dashData?.data?.recent_applications ?
-      <RecentLoanAppList
+      <>
-        data={dashData?.data?.recent_applications}
+        <div className='card-body py-0'>
-        itemsPerPage={5}
+          {/* begin::Table container */}
-      >
+          <div className='table-responsive'>
-        {(data:RecentApplicationsProps)=>(
+            {/* begin::Table */}
-          <>
+            <table className='table table-row-dashed table-row-gray-300 align-middle gs-0 gy-4'>
-            <div className='card-body py-3'>
+              {/* begin::Table head */}
-              {/* begin::Table container */}
+              <thead>
-              <div className='table-responsive'>
+                <tr className='fw-bold text-muted'>
-                {/* begin::Table */}
+                  <th className='w-25px'>
-                <table className='table table-row-dashed table-row-gray-300 align-middle gs-0 gy-4'>
+                    <div className='form-check form-check-sm form-check-custom form-check-solid'>
-                  {/* begin::Table head */}
+                      <input
-                  <thead>
+                        className='form-check-input'
-                    <tr className='fw-bold text-muted'>
+                        type='checkbox'
-                      <th className='w-25px'>
+                        value='1'
-                        <div className='form-check form-check-sm form-check-custom form-check-solid'>
+                        data-kt-check='true'
-                          <input
+                        data-kt-check-target='.widget-9-check'
-                            className='form-check-input'
+                      />
-                            type='checkbox'
+                    </div>
-                            value='1'
+                  </th>
-                            data-kt-check='true'
+                  <th className='min-w-150px'>Authors</th>
-                            data-kt-check-target='.widget-9-check'
+                  <th className='min-w-140px'>Amount (NGN)</th>
-                          />
+                  <th className='min-w-120px'>Progress</th>
-                        </div>
+                  <th className='min-w-100px text-end'>Actions</th>
-                      </th>
+                </tr>
-                      <th className='min-w-150px'>Authors</th>
+              </thead>
-                      <th className='min-w-140px'>Amount</th>
+              {/* end::Table head */}
-                      <th className='min-w-120px'>Progress</th>
+              {/* begin::Table body */}
-                      <th className='min-w-100px text-end'>Actions</th>
+              <tbody>
-                    </tr>
+                {dashData?.data?.recent_applications && dashData?.data?.recent_applications.length ?
-                  </thead>
+                  dashData?.data?.recent_applications.map((item, index:any) => {
-                  {/* end::Table head */}
+                    if(index < 6){
-                  {/* begin::Table body */}
+                      return (
-                  <tbody>
+                        <tr key={item?.uid}>
-                    {data && data.length ?
+                          <td>
-                      data.map(item => (
+                            <div className='form-check form-check-sm form-check-custom form-check-solid'>
-                      <tr key={item?.uid}>
+                              <input className='form-check-input widget-9-check' type='checkbox' value='1' />
-                        <td>
-                          <div className='form-check form-check-sm form-check-custom form-check-solid'>
-                            <input className='form-check-input widget-9-check' type='checkbox' value='1' />
-                          </div>
-                        </td>
-                        <td>
-                          <div className='d-flex align-items-center'>
-                            <div className='symbol symbol-45px me-5'>
-                              <img src={toAbsoluteUrl('media/avatars/300-14.jpg')} alt='' />
                             </div>
-                            <div className='d-flex justify-content-start flex-column'>
+                          </td>
-                              <a href='#' className='text-gray-900 fw-bold text-hover-primary fs-6'>
+                          <td>
-                                {item?.firstname} {item?.lastname}
+                            <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>
-                              <span className='text-muted fw-semibold text-muted d-block fs-7'>
-                                {NewDateTimeFormatter(item?.added)}
-                              </span>
                             </div>
-                          </div>
+                          </td>
-                        </td>
+                        </tr>
-                        <td>
+                      )
-                          <span className='text-gray-900 fw-bold text-hover-primary d-block fs-6'>
-                            {item.loan_amount}
-                          </span>
-                          <span className='text-muted fw-semibold text-muted d-block fs-7'>
-                            {item?.sales_agent? `Agent: ${item?.sales_agent}` : ``}
-                          </span>
-                        </td>
-                        <td className='text-end'>
-                          <div className='d-flex flex-column w-100 me-2'>
-                            <div className='d-flex flex-stack mb-2'>
-                              <span className='text-muted me-2 fs-7 fw-semibold'>50%</span>
-                            </div>
-                            <div className='progress h-6px w-100'>
-                              <div
-                                className='progress-bar bg-primary'
-                                role='progressbar'
-                                style={{width: '50%'}}
-                              ></div>
-                            </div>
-                          </div>
-                        </td>
-                        <td>
-                          <div className='d-flex justify-content-end flex-shrink-0'>
-                            <a
-                              href='#'
-                              className='btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1'
-                            >
-                              <KTIcon iconName='switch' className='fs-3' />
-                            </a>
-                            <a
-                              href='#'
-                              className='btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1'
-                            >
-                              <KTIcon iconName='pencil' className='fs-3' />
-                            </a>
-                            <a
-                              href='#'
-                              className='btn btn-icon btn-bg-light btn-active-color-primary btn-sm'
-                            >
-                              <KTIcon iconName='trash' className='fs-3' />
-                            </a>
-                          </div>
-                        </td>
-                      </tr>
-                      ))
-                    :
-                    <tr>
-                      <td colSpan={5}>No data found!</td>
-                    </tr>
                     }
-                  </tbody>
+                })
-                  {/* end::Table body */}
+                :
-                </table>
+                <tr>
-                {/* end::Table */}
+                  <td colSpan={5}>No data found!</td>
-              </div>
+                </tr>
-              {/* end::Table container */}
+                }
-            </div>
+              </tbody>
-          </>
+              {/* end::Table body */}
-        )}
+            </table>
-      </RecentLoanAppList>
+            {/* 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>
+      </>
       :
       null
       }