Back office loan list items:Amount/Filter

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

@@ -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,7 +86,7 @@ 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 d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
@@ -94,6 +94,7 @@ export default function RecentBVNList({
               ? "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
@@ -106,11 +107,12 @@ export default function RecentBVNList({
               <button
                 key={index}
                 onClick={handleNext}
-                className={`text-sm md:text-lg d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
+                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}
@@ -126,9 +128,10 @@ export default function RecentBVNList({
               ? "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;
+          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,7 +86,7 @@ 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 d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
@@ -94,6 +94,7 @@ export default function RecentLoanAppList({
               ? "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
@@ -111,6 +112,7 @@ 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}
@@ -126,6 +128,7 @@ export default function RecentLoanAppList({
               ? "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;

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

@@ -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 */}
-          {/* <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'
@@ -27,43 +27,43 @@ const ListsWidget3: React.FC<Props> = ({dashData, 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'>
+      <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'>
-        <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'
@@ -42,124 +43,124 @@ const TablesWidget10: FC<Props> = ({className, dashData}) => {
       {dashData?.loading ?
       null
       : dashData?.data?.recent_applications ?
-      <RecentLoanAppList
-        data={dashData?.data?.recent_applications}
-        itemsPerPage={5}
-      >
-        {(data:RecentApplicationsProps)=>(
-          <>
-            <div className='card-body py-3'>
-              {/* begin::Table container */}
-              <div className='table-responsive'>
-                {/* begin::Table */}
-                <table className='table table-row-dashed table-row-gray-300 align-middle gs-0 gy-4'>
-                  {/* begin::Table head */}
-                  <thead>
-                    <tr className='fw-bold text-muted'>
-                      <th className='w-25px'>
-                        <div className='form-check form-check-sm form-check-custom form-check-solid'>
-                          <input
-                            className='form-check-input'
-                            type='checkbox'
-                            value='1'
-                            data-kt-check='true'
-                            data-kt-check-target='.widget-9-check'
-                          />
-                        </div>
-                      </th>
-                      <th className='min-w-150px'>Authors</th>
-                      <th className='min-w-140px'>Amount</th>
-                      <th className='min-w-120px'>Progress</th>
-                      <th className='min-w-100px text-end'>Actions</th>
-                    </tr>
-                  </thead>
-                  {/* end::Table head */}
-                  {/* begin::Table body */}
-                  <tbody>
-                    {data && data.length ?
-                      data.map(item => (
-                      <tr key={item?.uid}>
-                        <td>
-                          <div className='form-check form-check-sm form-check-custom form-check-solid'>
-                            <input className='form-check-input widget-9-check' type='checkbox' value='1' />
-                          </div>
-                        </td>
-                        <td>
-                          <div className='d-flex align-items-center'>
-                            <div className='symbol symbol-45px me-5'>
-                              <img src={toAbsoluteUrl('media/avatars/300-14.jpg')} alt='' />
+      <>
+        <div 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>
+                  </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>
-                            <div className='d-flex justify-content-start flex-column'>
-                              <a href='#' className='text-gray-900 fw-bold text-hover-primary fs-6'>
-                                {item?.firstname} {item?.lastname}
+                          </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>
-                              <span className='text-muted fw-semibold text-muted d-block fs-7'>
-                                {NewDateTimeFormatter(item?.added)}
-                              </span>
                             </div>
-                          </div>
-                        </td>
-                        <td>
-                          <span className='text-gray-900 fw-bold text-hover-primary d-block fs-6'>
-                            {item.loan_amount}
-                          </span>
-                          <span className='text-muted fw-semibold text-muted d-block fs-7'>
-                            {item?.sales_agent? `Agent: ${item?.sales_agent}` : ``}
-                          </span>
-                        </td>
-                        <td className='text-end'>
-                          <div className='d-flex flex-column w-100 me-2'>
-                            <div className='d-flex flex-stack mb-2'>
-                              <span className='text-muted me-2 fs-7 fw-semibold'>50%</span>
-                            </div>
-                            <div className='progress h-6px w-100'>
-                              <div
-                                className='progress-bar bg-primary'
-                                role='progressbar'
-                                style={{width: '50%'}}
-                              ></div>
-                            </div>
-                          </div>
-                        </td>
-                        <td>
-                          <div className='d-flex justify-content-end flex-shrink-0'>
-                            <a
-                              href='#'
-                              className='btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1'
-                            >
-                              <KTIcon iconName='switch' className='fs-3' />
-                            </a>
-                            <a
-                              href='#'
-                              className='btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1'
-                            >
-                              <KTIcon iconName='pencil' className='fs-3' />
-                            </a>
-                            <a
-                              href='#'
-                              className='btn btn-icon btn-bg-light btn-active-color-primary btn-sm'
-                            >
-                              <KTIcon iconName='trash' className='fs-3' />
-                            </a>
-                          </div>
-                        </td>
-                      </tr>
-                      ))
-                    :
-                    <tr>
-                      <td colSpan={5}>No data found!</td>
-                    </tr>
+                          </td>
+                        </tr>
+                      )
                     }
-                  </tbody>
-                  {/* end::Table body */}
-                </table>
-                {/* end::Table */}
-              </div>
-              {/* end::Table container */}
-            </div>
-          </>
-        )}
-      </RecentLoanAppList>
+                })
+                :
+                <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>
+      </>
       :
       null
       }

src/app/modules/process/components/UserApprovedList.tsx

@@ -1,37 +1,5 @@
-import { KTCard } from "../../../../_digifi/helpers"
-import { Content } from "../../../../_digifi/layout/components/content"
-import { ToolbarWrapper } from "../../../../_digifi/layout/components/toolbar"
-import { UsersListHeader } from "../user-approved/users-list/components/header/UsersListHeader"
-import { ListViewProvider, useListView } from "../user-approved/users-list/core/ListViewProvider"
-import { QueryRequestProvider } from "../user-approved/users-list/core/QueryRequestProvider"
-import { QueryResponseProvider } from "../user-approved/users-list/core/QueryResponseProvider"
-import { UsersTable } from "../user-approved/users-list/table/UsersTable"
-import { UserEditModal } from "../user-approved/users-list/user-edit-modal/UserEditModal"
+import { UsersListWrapper } from "../user-approved/UsersList";
 
-const UsersList = () => {
-  const {itemIdForUpdate} = useListView()
-  return (
-    <>
-      <KTCard>
-        <UsersListHeader />
-        <UsersTable />
-      </KTCard>
-      {itemIdForUpdate !== undefined && <UserEditModal />}
-    </>
-  )
-}
+const UserApprovedList = () => <UsersListWrapper />;
 
-const UserApprovedList = () => (
-  <QueryRequestProvider>
-    <QueryResponseProvider>
-      <ListViewProvider>
-        <ToolbarWrapper />
-        <Content>
-          <UsersList />
-        </Content>
-      </ListViewProvider>
-    </QueryResponseProvider>
-  </QueryRequestProvider>
-)
-
-export {UserApprovedList}
+export { UserApprovedList };

src/app/modules/process/components/UserPendingList.tsx

@@ -1,37 +1,5 @@
-import { KTCard } from "../../../../_digifi/helpers"
-import { Content } from "../../../../_digifi/layout/components/content"
-import { ToolbarWrapper } from "../../../../_digifi/layout/components/toolbar"
-import { UsersListHeader } from "../user-pending/users-list/components/header/UsersListHeader"
-import { ListViewProvider, useListView } from "../user-pending/users-list/core/ListViewProvider"
-import { QueryRequestProvider } from "../user-pending/users-list/core/QueryRequestProvider"
-import { QueryResponseProvider } from "../user-pending/users-list/core/QueryResponseProvider"
-import { UsersTable } from "../user-pending/users-list/table/UsersTable"
-import { UserEditModal } from "../user-pending/users-list/user-edit-modal/UserEditModal"
+import { UsersListWrapper } from "../user-pending/UsersList";
 
-const UsersList = () => {
-  const {itemIdForUpdate} = useListView()
-  return (
-    <>
-      <KTCard>
-        <UsersListHeader />
-        <UsersTable />
-      </KTCard>
-      {itemIdForUpdate !== undefined && <UserEditModal />}
-    </>
-  )
-}
+const UserPendingList = () => <UsersListWrapper />;
 
-const UserPendingList = () => (
-  <QueryRequestProvider>
-    <QueryResponseProvider>
-      <ListViewProvider>
-        <ToolbarWrapper />
-        <Content>
-          <UsersList />
-        </Content>
-      </ListViewProvider>
-    </QueryResponseProvider>
-  </QueryRequestProvider>
-)
-
-export {UserPendingList}
+export { UserPendingList };

src/app/modules/process/components/UserReadyList.tsx

@@ -1,37 +1,5 @@
-import { KTCard } from "../../../../_digifi/helpers"
-import { Content } from "../../../../_digifi/layout/components/content"
-import { ToolbarWrapper } from "../../../../_digifi/layout/components/toolbar"
-import { UsersListHeader } from "../user-ready/users-list/components/header/UsersListHeader"
-import { ListViewProvider, useListView } from "../user-ready/users-list/core/ListViewProvider"
-import { QueryRequestProvider } from "../user-ready/users-list/core/QueryRequestProvider"
-import { QueryResponseProvider } from "../user-ready/users-list/core/QueryResponseProvider"
-import { UsersTable } from "../user-ready/users-list/table/UsersTable"
-import { UserEditModal } from "../user-ready/users-list/user-edit-modal/UserEditModal"
+import { UsersListWrapper } from "../user-ready/UsersList";
 
-const UsersList = () => {
-  const {itemIdForUpdate} = useListView()
-  return (
-    <>
-      <KTCard>
-        <UsersListHeader />
-        <UsersTable />
-      </KTCard>
-      {itemIdForUpdate !== undefined && <UserEditModal />}
-    </>
-  )
-}
+const UserReadyList = () => <UsersListWrapper />;
 
-const UserReadyList = () => (
-  <QueryRequestProvider>
-    <QueryResponseProvider>
-      <ListViewProvider>
-        <ToolbarWrapper />
-        <Content>
-          <UsersList />
-        </Content>
-      </ListViewProvider>
-    </QueryResponseProvider>
-  </QueryRequestProvider>
-)
-
-export {UserReadyList}
+export { UserReadyList };

src/app/modules/process/components/UserRejectedList.tsx

@@ -1,37 +1,5 @@
-import { KTCard } from "../../../../_digifi/helpers"
-import { Content } from "../../../../_digifi/layout/components/content"
-import { ToolbarWrapper } from "../../../../_digifi/layout/components/toolbar"
-import { UsersListHeader } from "../user-rejected/users-list/components/header/UsersListHeader"
-import { ListViewProvider, useListView } from "../user-rejected/users-list/core/ListViewProvider"
-import { QueryRequestProvider } from "../user-rejected/users-list/core/QueryRequestProvider"
-import { QueryResponseProvider } from "../user-rejected/users-list/core/QueryResponseProvider"
-import { UsersTable } from "../user-rejected/users-list/table/UsersTable"
-import { UserEditModal } from "../user-rejected/users-list/user-edit-modal/UserEditModal"
+import { UsersListWrapper } from "../user-rejected/UsersList";
 
-const UsersList = () => {
-  const {itemIdForUpdate} = useListView()
-  return (
-    <>
-      <KTCard>
-        <UsersListHeader />
-        <UsersTable />
-      </KTCard>
-      {itemIdForUpdate !== undefined && <UserEditModal />}
-    </>
-  )
-}
+const UserRejectedList = () => <UsersListWrapper />;
 
-const UserRejectedList = () => (
-  <QueryRequestProvider>
-    <QueryResponseProvider>
-      <ListViewProvider>
-        <ToolbarWrapper />
-        <Content>
-          <UsersList />
-        </Content>
-      </ListViewProvider>
-    </QueryResponseProvider>
-  </QueryRequestProvider>
-)
-
-export {UserRejectedList}
+export { UserRejectedList };

src/app/modules/process/components/UserStartedList.tsx

@@ -1,37 +1,5 @@
-import { KTCard } from "../../../../_digifi/helpers"
-import { Content } from "../../../../_digifi/layout/components/content"
-import { ToolbarWrapper } from "../../../../_digifi/layout/components/toolbar"
-import { UsersListHeader } from "../user-started/users-list/components/header/UsersListHeader"
-import { ListViewProvider, useListView } from "../user-started/users-list/core/ListViewProvider"
-import { QueryRequestProvider } from "../user-started/users-list/core/QueryRequestProvider"
-import { QueryResponseProvider } from "../user-started/users-list/core/QueryResponseProvider"
-import { UsersTable } from "../user-started/users-list/table/UsersTable"
-import { UserEditModal } from "../user-started/users-list/user-edit-modal/UserEditModal"
+import { UsersListWrapper } from "../user-started/UsersList";
 
-const UsersList = () => {
-  const {itemIdForUpdate} = useListView()
-  return (
-    <>
-      <KTCard>
-        <UsersListHeader />
-        <UsersTable />
-      </KTCard>
-      {itemIdForUpdate !== undefined && <UserEditModal />}
-    </>
-  )
-}
+const UserStartedList = () => <UsersListWrapper />;
 
-const UserStartedList = () => (
-  <QueryRequestProvider>
-    <QueryResponseProvider>
-      <ListViewProvider>
-        <ToolbarWrapper />
-        <Content>
-          <UsersList />
-        </Content>
-      </ListViewProvider>
-    </QueryResponseProvider>
-  </QueryRequestProvider>
-)
-
-export {UserStartedList}
+export { UserStartedList };

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

@@ -1,4 +1,5 @@
-import {ID, Response} from '../../../../../../_digifi/helpers'
+import { ID, Response } from "../../../../_digifi/helpers"
+
 export type User = {
   id?: ID
   name?: string

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

@@ -1,5 +1,5 @@
 import axios, { AxiosResponse } from "axios";
-import { ID, Response } from "../../../../../../_digifi/helpers";
+import { ID, Response } from "../../../../_digifi/helpers"
 import { User, UsersQueryResponse } from "./_models";
 
 const API_URL = import.meta.env.VITE_APP_THEME_API_URL;
@@ -19,6 +19,30 @@ const getStartedUsers = (query: string): Promise<UsersQueryResponse> => { // FUN
     .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}`)
@@ -51,6 +75,10 @@ const deleteSelectedUsers = (userIds: Array<ID>): Promise<void> => {
 
 export {
   getStartedUsers,
+  getRejectedUsers,
+  getPendingUsers,
+  getReadyUsers,
+  getApprovedUsers,
   deleteUser,
   deleteSelectedUsers,
   getUserById,

src/app/modules/process/user-approved/UsersList.tsx

@@ -0,0 +1,37 @@
+import { ListViewProvider, useListView } from "./core/ListViewProvider";
+import { QueryRequestProvider } from "./core/QueryRequestProvider";
+import { QueryResponseProvider } from "./core/QueryResponseProvider";
+import { UsersListHeader } from "./components/header/UsersListHeader";
+import { UsersTable } from "./table/UsersTable";
+import { UserEditModal } from "./user-edit-modal/UserEditModal";
+import { KTCard } from "../../../../_digifi/helpers";
+import { ToolbarWrapper } from "../../../../_digifi/layout/components/toolbar";
+import { Content } from "../../../../_digifi/layout/components/content";
+
+const UsersList = () => {
+  const { itemIdForUpdate } = useListView();
+  return (
+    <>
+      <KTCard>
+        <UsersListHeader />
+        <UsersTable />
+      </KTCard>
+      {itemIdForUpdate !== undefined && <UserEditModal />}
+    </>
+  );
+};
+
+const UsersListWrapper = () => (
+  <QueryRequestProvider>
+    <QueryResponseProvider>
+      <ListViewProvider>
+        <ToolbarWrapper />
+        <Content>
+          <UsersList />
+        </Content>
+      </ListViewProvider>
+    </QueryResponseProvider>
+  </QueryRequestProvider>
+);
+
+export { UsersListWrapper };

src/app/modules/process/user-approved/UsersPage.tsx

@@ -1,39 +0,0 @@
-import {Route, Routes, Outlet, Navigate} from 'react-router-dom'
-import {PageLink, PageTitle} from '../../../../_digifi/layout/core'
-import {UsersListWrapper} from './users-list/UsersList'
-
-const usersBreadcrumbs: Array<PageLink> = [
-  {
-    title: 'User Management',
-    path: '/apps/user-management/users',
-    isSeparator: false,
-    isActive: false,
-  },
-  {
-    title: '',
-    path: '',
-    isSeparator: true,
-    isActive: false,
-  },
-]
-
-const UsersPage = () => {
-  return (
-    <Routes>
-      <Route element={<Outlet />}>
-        <Route
-          path='users'
-          element={
-            <>
-              <PageTitle breadcrumbs={usersBreadcrumbs}>Users list</PageTitle>
-              <UsersListWrapper />
-            </>
-          }
-        />
-      </Route>
-      <Route index element={<Navigate to='/apps/user-management/users' />} />
-    </Routes>
-  )
-}
-
-export default UsersPage

src/app/modules/process/user-approved/components/header/UserListToolbar.tsx

@@ -1,15 +1,18 @@
-import {KTIcon} from '../../../../../../../_digifi/helpers'
-import {useListView} from '../../core/ListViewProvider'
-import {UsersListFilter} from './UsersListFilter'
+import { KTIcon } from "../../../../../../_digifi/helpers";
+import { useListView } from "../../core/ListViewProvider";
+import { UsersListFilter } from "./UsersListFilter";
 
 const UsersListToolbar = () => {
-  const {setItemIdForUpdate} = useListView()
+  const { setItemIdForUpdate } = useListView();
   const openAddUserModal = () => {
-    setItemIdForUpdate(null)
-  }
+    setItemIdForUpdate(null);
+  };
 
   return (
-    <div className='d-flex justify-content-end' data-kt-user-table-toolbar='base'>
+    <div
+      className="d-flex justify-content-end"
+      data-kt-user-table-toolbar="base"
+    >
       <UsersListFilter />
 
       {/* begin::Export */}
@@ -26,7 +29,7 @@ const UsersListToolbar = () => {
       </button> */}
       {/* end::Add user */}
     </div>
-  )
-}
+  );
+};
 
-export {UsersListToolbar}
+export { UsersListToolbar };

src/app/modules/process/user-approved/components/header/UsersListFilter.tsx

@@ -0,0 +1,136 @@
+import { useEffect, useState } from "react";
+import { MenuComponent } from "../../../../../../_digifi/assets/ts/components";
+import { initialQueryState, KTIcon } from "../../../../../../_digifi/helpers";
+import { useQueryRequest } from "../../core/QueryRequestProvider";
+import { useQueryResponse } from "../../core/QueryResponseProvider";
+
+const UsersListFilter = () => {
+  const { updateState } = useQueryRequest();
+  const { isLoading } = useQueryResponse();
+  const [role, setRole] = useState<string | undefined>();
+  const [lastLogin, setLastLogin] = useState<string | undefined>();
+
+  useEffect(() => {
+    MenuComponent.reinitialization();
+  }, []);
+
+  const resetData = () => {
+    updateState({ filter: undefined, ...initialQueryState });
+  };
+
+  const filterData = () => {
+    updateState({
+      filter: { role, last_login: lastLogin },
+      ...initialQueryState,
+    });
+  };
+
+  return (
+    <>
+      {/* begin::Filter Button */}
+      <button
+        disabled={isLoading}
+        type="button"
+        className="btn btn-light-primary me-3"
+        data-kt-menu-trigger="click"
+        data-kt-menu-placement="bottom-end"
+      >
+        <KTIcon iconName="filter" className="fs-2" />
+        Filter
+      </button>
+      {/* end::Filter Button */}
+      {/* begin::SubMenu */}
+      <div
+        className="menu menu-sub menu-sub-dropdown w-300px w-md-325px"
+        data-kt-menu="true"
+      >
+        {/* begin::Header */}
+        <div className="px-7 py-5">
+          <div className="fs-5 text-gray-900 fw-bolder">Filter Options</div>
+        </div>
+        {/* end::Header */}
+
+        {/* begin::Separator */}
+        <div className="separator border-gray-200"></div>
+        {/* end::Separator */}
+
+        {/* begin::Content */}
+        <div className="px-7 py-5" data-kt-user-table-filter="form">
+          {/* begin::Input group */}
+          <div className="mb-10">
+            <label className="form-label fs-6 fw-bold">Role:</label>
+            <select
+              className="form-select form-select-solid fw-bolder"
+              data-kt-select2="true"
+              data-placeholder="Select option"
+              data-allow-clear="true"
+              data-kt-user-table-filter="role"
+              data-hide-search="true"
+              onChange={(e) => setRole(e.target.value)}
+              value={role}
+            >
+              <option value=""></option>
+              <option value="Administrator">Administrator</option>
+              <option value="Analyst">Analyst</option>
+              <option value="Developer">Developer</option>
+              <option value="Support">Support</option>
+              <option value="Trial">Trial</option>
+            </select>
+          </div>
+          {/* end::Input group */}
+
+          {/* begin::Input group */}
+          <div className="mb-10">
+            <label className="form-label fs-6 fw-bold">Last login:</label>
+            <select
+              className="form-select form-select-solid fw-bolder"
+              data-kt-select2="true"
+              data-placeholder="Select option"
+              data-allow-clear="true"
+              data-kt-user-table-filter="two-step"
+              data-hide-search="true"
+              onChange={(e) => setLastLogin(e.target.value)}
+              value={lastLogin}
+            >
+              <option value=""></option>
+              <option value="Yesterday">Yesterday</option>
+              <option value="20 mins ago">20 mins ago</option>
+              <option value="5 hours ago">5 hours ago</option>
+              <option value="2 days ago">2 days ago</option>
+            </select>
+          </div>
+          {/* end::Input group */}
+
+          {/* begin::Actions */}
+          <div className="d-flex justify-content-end">
+            <button
+              type="button"
+              disabled={isLoading}
+              onClick={filterData}
+              className="btn btn-light btn-active-light-primary fw-bold me-2 px-6"
+              data-kt-menu-dismiss="true"
+              data-kt-user-table-filter="reset"
+            >
+              Reset
+            </button>
+            <button
+              disabled={isLoading}
+              type="button"
+              onClick={resetData}
+              className="btn btn-primary fw-bold px-6"
+              data-kt-menu-dismiss="true"
+              data-kt-user-table-filter="filter"
+            >
+              Apply
+            </button>
+          </div>
+          {/* end::Actions */}
+        </div>
+        {/* end::Content */}
+      </div>
+      {/* end::SubMenu */}
+    </>
+  );
+};
+
+export { UsersListFilter };

src/app/modules/process/user-approved/components/header/UsersListGrouping.tsx

@@ -0,0 +1,38 @@
+import { useQueryClient, useMutation } from "react-query";
+import { QUERIES } from "../../../../../../_digifi/helpers";
+import { useListView } from "../../core/ListViewProvider";
+import { useQueryResponse } from "../../core/QueryResponseProvider";
+import { deleteSelectedUsers } from "../../../core/_requests";
+
+const UsersListGrouping = () => {
+  const { selected, clearSelected } = useListView();
+  const queryClient = useQueryClient();
+  const { query } = useQueryResponse();
+
+  const deleteSelectedItems = useMutation(() => deleteSelectedUsers(selected), {
+    // 💡 response of the mutation is passed to onSuccess
+    onSuccess: () => {
+      // ✅ update detail view directly
+      queryClient.invalidateQueries([`${QUERIES.USERS_LIST}-${query}`]);
+      clearSelected();
+    },
+  });
+
+  return (
+    <div className="d-flex justify-content-end align-items-center">
+      <div className="fw-bolder me-5">
+        <span className="me-2">{selected.length}</span> Selected
+      </div>
+
+      <button
+        type="button"
+        className="btn btn-danger"
+        onClick={async () => await deleteSelectedItems.mutateAsync()}
+      >
+        Delete Selected
+      </button>
+    </div>
+  );
+};
+
+export { UsersListGrouping };

src/app/modules/process/user-approved/components/header/UsersListSearchComponent.tsx

@@ -0,0 +1,49 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import { useEffect, useState } from "react";
+import {
+  initialQueryState,
+  KTIcon,
+  useDebounce,
+} from "../../../../../../_digifi/helpers";
+import { useQueryRequest } from "../../core/QueryRequestProvider";
+
+const UsersListSearchComponent = () => {
+  const { updateState } = useQueryRequest();
+  const [searchTerm, setSearchTerm] = useState<string>("");
+  // Debounce search term so that it only gives us latest value ...
+  // ... if searchTerm has not been updated within last 500ms.
+  // The goal is to only have the API call fire when user stops typing ...
+  // ... so that we aren't hitting our API rapidly.
+  const debouncedSearchTerm = useDebounce(searchTerm, 150);
+  // Effect for API call
+  useEffect(
+    () => {
+      if (debouncedSearchTerm !== undefined && searchTerm !== undefined) {
+        updateState({ search: debouncedSearchTerm, ...initialQueryState });
+      }
+    },
+    [debouncedSearchTerm] // Only call effect if debounced search term changes
+    // More details about useDebounce: https://usehooks.com/useDebounce/
+  );
+
+  return (
+    <div className="card-title">
+      {/* begin::Search */}
+      <div className="d-flex align-items-center position-relative my-1">
+        <KTIcon iconName="magnifier" className="fs-1 position-absolute ms-6" />
+        <input
+          type="text"
+          data-kt-user-table-filter="search"
+          className="form-control form-control-solid w-250px ps-14"
+          placeholder="Search user"
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+        />
+      </div>
+      {/* end::Search */}
+    </div>
+  );
+};
+
+export { UsersListSearchComponent };

src/app/modules/process/user-approved/components/pagination/UsersListPagination.tsx

@@ -0,0 +1,179 @@
+import clsx from "clsx";
+import {
+  useQueryResponseLoading,
+  useQueryResponsePagination,
+} from "../../core/QueryResponseProvider";
+import { useQueryRequest } from "../../core/QueryRequestProvider";
+import { PaginationState } from "../../../../../../_digifi/helpers";
+import { useMemo } from "react";
+
+const mappedLabel = (label: string): string => {
+  if (label === "« Previous") {
+    return "Previous";
+  }
+
+  if (label === "Next »") {
+    return "Next";
+  }
+
+  return label;
+};
+
+const UsersListPagination = () => {
+  const pagination = useQueryResponsePagination();
+  const isLoading = useQueryResponseLoading();
+  const { updateState } = useQueryRequest();
+  const updatePage = (page: number | undefined | null) => {
+    if (!page || isLoading || pagination.page === page) {
+      return;
+    }
+
+    updateState({ page, items_per_page: pagination.items_per_page || 10 });
+  };
+
+  const PAGINATION_PAGES_COUNT = 5;
+  const sliceLinks = (pagination?: PaginationState) => {
+    if (!pagination?.links?.length) {
+      return [];
+    }
+
+    const scopedLinks = [...pagination.links];
+
+    let pageLinks: Array<{
+      label: string;
+      active: boolean;
+      url: string | null;
+      page: number | null;
+    }> = [];
+    const previousLink: {
+      label: string;
+      active: boolean;
+      url: string | null;
+      page: number | null;
+    } = scopedLinks.shift()!;
+    const nextLink: {
+      label: string;
+      active: boolean;
+      url: string | null;
+      page: number | null;
+    } = scopedLinks.pop()!;
+
+    const halfOfPagesCount = Math.floor(PAGINATION_PAGES_COUNT / 2);
+
+    pageLinks.push(previousLink);
+
+    if (
+      pagination.page <= Math.round(PAGINATION_PAGES_COUNT / 2) ||
+      scopedLinks.length <= PAGINATION_PAGES_COUNT
+    ) {
+      pageLinks = [
+        ...pageLinks,
+        ...scopedLinks.slice(0, PAGINATION_PAGES_COUNT),
+      ];
+    }
+
+    if (
+      pagination.page > scopedLinks.length - halfOfPagesCount &&
+      scopedLinks.length > PAGINATION_PAGES_COUNT
+    ) {
+      pageLinks = [
+        ...pageLinks,
+        ...scopedLinks.slice(
+          scopedLinks.length - PAGINATION_PAGES_COUNT,
+          scopedLinks.length
+        ),
+      ];
+    }
+
+    if (
+      !(
+        pagination.page <= Math.round(PAGINATION_PAGES_COUNT / 2) ||
+        scopedLinks.length <= PAGINATION_PAGES_COUNT
+      ) &&
+      !(pagination.page > scopedLinks.length - halfOfPagesCount)
+    ) {
+      pageLinks = [
+        ...pageLinks,
+        ...scopedLinks.slice(
+          pagination.page - 1 - halfOfPagesCount,
+          pagination.page + halfOfPagesCount
+        ),
+      ];
+    }
+
+    pageLinks.push(nextLink);
+
+    return pageLinks;
+  };
+
+  const paginationLinks = useMemo(() => sliceLinks(pagination), [pagination]);
+
+  return (
+    <div className="row">
+      <div className="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start"></div>
+      <div className="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end">
+        <div id="kt_table_users_paginate">
+          <ul className="pagination">
+            <li
+              className={clsx("page-item", {
+                disabled: isLoading || pagination.page === 1,
+              })}
+            >
+              <a
+                onClick={() => updatePage(1)}
+                style={{ cursor: "pointer" }}
+                className="page-link"
+              >
+                First
+              </a>
+            </li>
+            {paginationLinks
+              ?.map((link) => {
+                return { ...link, label: mappedLabel(link.label) };
+              })
+              .map((link) => (
+                <li
+                  key={link.label}
+                  className={clsx("page-item", {
+                    active: pagination.page === link.page,
+                    disabled: isLoading,
+                    previous: link.label === "Previous",
+                    next: link.label === "Next",
+                  })}
+                >
+                  <a
+                    className={clsx("page-link", {
+                      "page-text":
+                        link.label === "Previous" || link.label === "Next",
+                      "me-5": link.label === "Previous",
+                    })}
+                    onClick={() => updatePage(link.page)}
+                    style={{ cursor: "pointer" }}
+                  >
+                    {mappedLabel(link.label)}
+                  </a>
+                </li>
+              ))}
+            <li
+              className={clsx("page-item", {
+                disabled:
+                  isLoading ||
+                  pagination.page === (pagination.links?.length || 3) - 2,
+              })}
+            >
+              <a
+                onClick={() => updatePage((pagination.links?.length || 3) - 2)}
+                style={{ cursor: "pointer" }}
+                className="page-link"
+              >
+                Last
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { UsersListPagination };

src/app/modules/process/user-approved/core/ListViewProvider.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable react-refresh/only-export-components */
+import { FC, useState, createContext, useContext, useMemo } from "react";
+import {
+  ID,
+  calculatedGroupingIsDisabled,
+  calculateIsAllDataSelected,
+  groupingOnSelect,
+  initialListView,
+  ListViewContextProps,
+  groupingOnSelectAll,
+  WithChildren,
+} from "../../../../../_digifi/helpers";
+import {
+  useQueryResponse,
+  useQueryResponseData,
+} from "./QueryResponseProvider";
+
+const ListViewContext = createContext<ListViewContextProps>(initialListView);
+
+const ListViewProvider: FC<WithChildren> = ({ children }) => {
+  const [selected, setSelected] = useState<Array<ID>>(initialListView.selected);
+  const [itemIdForUpdate, setItemIdForUpdate] = useState<ID>(
+    initialListView.itemIdForUpdate
+  );
+  const { isLoading } = useQueryResponse();
+  const data = useQueryResponseData();
+  const disabled = useMemo(
+    () => calculatedGroupingIsDisabled(isLoading, data),
+    [isLoading, data]
+  );
+  const isAllSelected = useMemo(
+    () => calculateIsAllDataSelected(data, selected),
+    [data, selected]
+  );
+
+  return (
+    <ListViewContext.Provider
+      value={{
+        selected,
+        itemIdForUpdate,
+        setItemIdForUpdate,
+        disabled,
+        isAllSelected,
+        onSelect: (id: ID) => {
+          groupingOnSelect(id, selected, setSelected);
+        },
+        onSelectAll: () => {
+          groupingOnSelectAll(isAllSelected, setSelected, data);
+        },
+        clearSelected: () => {
+          setSelected([]);
+        },
+      }}
+    >
+      {children}
+    </ListViewContext.Provider>
+  );
+};
+
+const useListView = () => useContext(ListViewContext);
+
+export { ListViewProvider, useListView };

src/app/modules/process/user-approved/core/QueryRequestProvider.tsx

@@ -0,0 +1,29 @@
+/* eslint-disable react-refresh/only-export-components */
+import { FC, useState, createContext, useContext } from "react";
+import {
+  QueryState,
+  QueryRequestContextProps,
+  initialQueryRequest,
+  WithChildren,
+} from "../../../../../_digifi/helpers";
+
+const QueryRequestContext =
+  createContext<QueryRequestContextProps>(initialQueryRequest);
+
+const QueryRequestProvider: FC<WithChildren> = ({ children }) => {
+  const [state, setState] = useState<QueryState>(initialQueryRequest.state);
+
+  const updateState = (updates: Partial<QueryState>) => {
+    const updatedState = { ...state, ...updates } as QueryState;
+    setState(updatedState);
+  };
+
+  return (
+    <QueryRequestContext.Provider value={{ state, updateState }}>
+      {children}
+    </QueryRequestContext.Provider>
+  );
+};
+
+const useQueryRequest = () => useContext(QueryRequestContext);
+export { QueryRequestProvider, useQueryRequest };

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

@@ -0,0 +1,87 @@
+/* eslint-disable react-refresh/only-export-components */
+/* eslint-disable react-hooks/exhaustive-deps */
+import { FC, useContext, useState, useEffect, useMemo } from "react";
+import { useQuery } from "react-query";
+import {
+  createResponseContext,
+  initialQueryResponse,
+  initialQueryState,
+  PaginationState,
+  QUERIES,
+  stringifyRequestQuery,
+  WithChildren,
+} from "../../../../../_digifi/helpers";
+import { getApprovedUsers } from "../../core/_requests";
+import { User } from "../../core/_models";
+import { useQueryRequest } from "./QueryRequestProvider";
+
+const QueryResponseContext = createResponseContext<User>(initialQueryResponse);
+const QueryResponseProvider: FC<WithChildren> = ({ children }) => {
+  const { state } = useQueryRequest();
+  const [query, setQuery] = useState<string>(stringifyRequestQuery(state));
+  const updatedQuery = useMemo(() => stringifyRequestQuery(state), [state]);
+
+  useEffect(() => {
+    if (query !== updatedQuery) {
+      setQuery(updatedQuery);
+    }
+  }, [updatedQuery]);
+
+  const {
+    isFetching,
+    refetch,
+    data: response,
+  } = useQuery(
+    `${QUERIES.USERS_LIST}-${query}`,
+    () => {
+      return getApprovedUsers(query);
+    },
+    { cacheTime: 0, keepPreviousData: true, refetchOnWindowFocus: false }
+  );
+
+  return (
+    <QueryResponseContext.Provider
+      value={{ isLoading: isFetching, refetch, response, query }}
+    >
+      {children}
+    </QueryResponseContext.Provider>
+  );
+};
+
+const useQueryResponse = () => useContext(QueryResponseContext);
+
+const useQueryResponseData = () => {
+  const { response } = useQueryResponse();
+  if (!response) {
+    return [];
+  }
+
+  return response?.records || [];
+};
+
+const useQueryResponsePagination = () => {
+  const defaultPaginationState: PaginationState = {
+    links: [],
+    ...initialQueryState,
+  };
+
+  const { response } = useQueryResponse();
+  if (!response || !response.payload || !response.payload.pagination) {
+    return defaultPaginationState;
+  }
+
+  return response.payload.pagination;
+};
+
+const useQueryResponseLoading = (): boolean => {
+  const { isLoading } = useQueryResponse();
+  return isLoading;
+};
+
+export {
+  QueryResponseProvider,
+  useQueryResponse,
+  useQueryResponseData,
+  useQueryResponsePagination,
+  useQueryResponseLoading,
+};

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

@@ -0,0 +1,66 @@
+import { useMemo } from "react";
+import { useTable, ColumnInstance, Row } from "react-table";
+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 { UsersListLoading } from "../components/loading/UsersListLoading";
+import { UsersListPagination } from "../components/pagination/UsersListPagination";
+import { KTCardBody } from "../../../../../_digifi/helpers";
+
+const UsersTable = () => {
+  const users = useQueryResponseData();
+  // console.log('users', users)
+  const isLoading = useQueryResponseLoading();
+  const data = useMemo(() => users, [users]);
+  const columns = useMemo(() => usersColumns, []);
+  const { getTableProps, getTableBodyProps, headers, rows, prepareRow } =
+    useTable({
+      columns,
+      data,
+    });
+
+  return (
+    <KTCardBody className="py-4">
+      <div className="table-responsive">
+        <table
+          id="kt_table_users"
+          className="table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer"
+          {...getTableProps()}
+        >
+          <thead>
+            <tr className="text-start text-muted fw-bolder fs-7 text-uppercase gs-0">
+              {headers.map((column: ColumnInstance<User>) => (
+                <CustomHeaderColumn key={column.id} column={column} />
+              ))}
+            </tr>
+          </thead>
+          <tbody className="text-gray-600 fw-bold" {...getTableBodyProps()}>
+            {rows.length > 0 ? (
+              rows.map((row: Row<User>, i) => {
+                prepareRow(row);
+                return <CustomRow row={row} key={`row-${i}-${row.id}`} />;
+              })
+            ) : (
+              <tr>
+                <td colSpan={7}>
+                  <div className="d-flex text-center w-100 align-content-center justify-content-center">
+                    No matching records found
+                  </div>
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+      <UsersListPagination />
+      {isLoading && <UsersListLoading />}
+    </KTCardBody>
+  );
+};
+
+export { UsersTable };

src/app/modules/process/user-approved/table/columns/AddedCell.tsx

@@ -0,0 +1,14 @@
+import { FC } from "react";
+import { NewDateTimeFormatter } from "../../../../../../_digifi/lib/NewDateTimeFormatter";
+
+type Props = {
+  added?: string;
+};
+
+const AddedCell: FC<Props> = ({ added }) => (
+  <div className="badge badge-light fw-bolder">
+    {NewDateTimeFormatter(added)}
+  </div>
+);
+
+export { AddedCell };

src/app/modules/process/user-approved/table/columns/CustomHeaderColumn.tsx

@@ -1,6 +1,6 @@
 import {FC} from 'react'
 import {ColumnInstance} from 'react-table'
-import {User} from '../../core/_models'
+import {User} from '../../../core/_models'
 
 type Props = {
   column: ColumnInstance<User>

src/app/modules/process/user-approved/table/columns/CustomRow.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx'
 import {FC} from 'react'
 import {Row} from 'react-table'
-import {User} from '../../core/_models'
+import {User} from '../../../core/_models'
 
 type Props = {
   row: Row<User>

src/app/modules/process/user-approved/table/columns/UserActionsCell.tsx

@@ -0,0 +1,75 @@
+import { FC, useEffect } from "react";
+import { useMutation, useQueryClient } from "react-query";
+import { MenuComponent } from "../../../../../../_digifi/assets/ts/components";
+import { ID, KTIcon, QUERIES } from "../../../../../../_digifi/helpers";
+import { useListView } from "../../core/ListViewProvider";
+import { useQueryResponse } from "../../core/QueryResponseProvider";
+import { deleteUser } from "../../../core/_requests";
+
+type Props = {
+  id: ID;
+};
+
+const UserActionsCell: FC<Props> = ({ id }) => {
+  const { setItemIdForUpdate } = useListView();
+  const { query } = useQueryResponse();
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    MenuComponent.reinitialization();
+  }, []);
+
+  const openEditModal = () => {
+    setItemIdForUpdate(id);
+  };
+
+  const deleteItem = useMutation(() => deleteUser(id), {
+    // 💡 response of the mutation is passed to onSuccess
+    onSuccess: () => {
+      // ✅ update detail view directly
+      queryClient.invalidateQueries([`${QUERIES.USERS_LIST}-${query}`]);
+    },
+  });
+
+  return (
+    <>
+      <a
+        href="#"
+        className="btn btn-light btn-active-light-primary btn-sm"
+        data-kt-menu-trigger="click"
+        data-kt-menu-placement="bottom-end"
+      >
+        Actions
+        <KTIcon iconName="down" className="fs-5 m-0" />
+      </a>
+      {/* begin::Menu */}
+      <div
+        className="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-125px py-4"
+        data-kt-menu="true"
+      >
+        {/* begin::Menu item */}
+        <div className="menu-item px-3">
+          <a className="menu-link px-3" onClick={openEditModal}>
+            Edit
+          </a>
+        </div>
+        {/* end::Menu item */}
+
+        {/* begin::Menu item */}
+        <div className="menu-item px-3">
+          <a
+            className="menu-link px-3"
+            data-kt-users-table-filter="delete_row"
+            onClick={async () => await deleteItem.mutateAsync()}
+          >
+            Delete
+          </a>
+        </div>
+        {/* end::Menu item */}
+      </div>
+      {/* end::Menu */}
+    </>
+  );
+};
+
+export { UserActionsCell };

src/app/modules/process/user-approved/table/columns/UserCustomHeader.tsx

@@ -0,0 +1,61 @@
+import clsx from "clsx";
+import { FC, PropsWithChildren, useMemo } from "react";
+import { HeaderProps } from "react-table";
+import { initialQueryState } from "../../../../../../_digifi/helpers";
+import { useQueryRequest } from "../../core/QueryRequestProvider";
+import { User } from "../../../core/_models";
+
+type Props = {
+  className?: string;
+  title?: string;
+  tableProps: PropsWithChildren<HeaderProps<User>>;
+};
+const UserCustomHeader: FC<Props> = ({ className, title, tableProps }) => {
+  const id = tableProps.column.id;
+  const { state, updateState } = useQueryRequest();
+
+  const isSelectedForSorting = useMemo(() => {
+    return state.sort && state.sort === id;
+  }, [state, id]);
+  const order: "asc" | "desc" | undefined = useMemo(() => state.order, [state]);
+
+  const sortColumn = () => {
+    // avoid sorting for these columns
+    if (id === "actions" || id === "selection") {
+      return;
+    }
+
+    if (!isSelectedForSorting) {
+      // enable sort asc
+      updateState({ sort: id, order: "asc", ...initialQueryState });
+      return;
+    }
+
+    if (isSelectedForSorting && order !== undefined) {
+      if (order === "asc") {
+        // enable sort desc
+        updateState({ sort: id, order: "desc", ...initialQueryState });
+        return;
+      }
+
+      // disable sort
+      updateState({ sort: undefined, order: undefined, ...initialQueryState });
+    }
+  };
+
+  return (
+    <th
+      {...tableProps.column.getHeaderProps()}
+      className={clsx(
+        className,
+        isSelectedForSorting && order !== undefined && `table-sort-${order}`
+      )}
+      style={{ cursor: "pointer" }}
+      onClick={sortColumn}
+    >
+      {title}
+    </th>
+  );
+};
+
+export { UserCustomHeader };

src/app/modules/process/user-approved/table/columns/UserInfoCell.tsx

@@ -0,0 +1,46 @@
+import clsx from "clsx";
+import { FC } from "react";
+import { toAbsoluteUrl } from "../../../../../../_digifi/helpers";
+import { User } from "../../../core/_models";
+
+type Props = {
+  user: User;
+};
+
+const UserInfoCell: FC<Props> = ({ user }) => (
+  <div className="d-flex align-items-center">
+    {/* begin:: Avatar */}
+    <div className="symbol symbol-circle symbol-50px overflow-hidden me-3">
+      <a href="#">
+        {user.avatar ? (
+          <div className="symbol-label">
+            <img
+              src={toAbsoluteUrl(`media/${user.avatar}`)}
+              alt={user.name}
+              className="w-100"
+            />
+          </div>
+        ) : (
+          <div
+            className={clsx(
+              "symbol-label fs-3",
+              `bg-light-${user.initials?.state}`,
+              `text-${user.initials?.state}`
+            )}
+          >
+            {user.firstname?.substring(0, 1).toUpperCase()}{" "}
+            {user.lastname?.substring(0, 1).toUpperCase()}
+          </div>
+        )}
+      </a>
+    </div>
+    <div className="d-flex flex-column">
+      <a href="#" className="text-gray-800 text-hover-primary mb-1">
+        {user.firstname} {user.lastname}
+      </a>
+      <span>{user.email}</span>
+    </div>
+  </div>
+);
+
+export { UserInfoCell };

src/app/modules/process/user-approved/table/columns/UserSelectionCell.tsx

@@ -0,0 +1,26 @@
+import { FC, useMemo } from "react";
+import { ID } from "../../../../../../_digifi/helpers";
+import { useListView } from "../../core/ListViewProvider";
+
+type Props = {
+  id: ID;
+};
+
+const UserSelectionCell: FC<Props> = ({ id }) => {
+  const { selected, onSelect } = useListView();
+  const isSelected = useMemo(() => selected.includes(id), [id, selected]);
+  return (
+    <div className="form-check form-check-custom form-check-solid">
+      <input
+        className="form-check-input"
+        type="checkbox"
+        data-kt-check={isSelected}
+        data-kt-check-target="#kt_table_users .form-check-input"
+        checked={isSelected}
+        onChange={() => onSelect(id)}
+      />
+    </div>
+  );
+};
+
+export { UserSelectionCell };

src/app/modules/process/user-approved/table/columns/UserSelectionHeader.tsx

@@ -1,7 +1,7 @@
 import {FC, PropsWithChildren} from 'react'
 import {HeaderProps} from 'react-table'
 import {useListView} from '../../core/ListViewProvider'
-import {User} from '../../core/_models'
+import {User} from '../../../core/_models'
 
 type Props = {
   tableProps: PropsWithChildren<HeaderProps<User>>

src/app/modules/process/user-approved/table/columns/_columns.tsx

@@ -6,7 +6,7 @@ import {UserActionsCell} from './UserActionsCell'
 import {UserSelectionCell} from './UserSelectionCell'
 import {UserCustomHeader} from './UserCustomHeader'
 import {UserSelectionHeader} from './UserSelectionHeader'
-import {User} from '../../core/_models'
+import {User} from '../../../core/_models'
 import { AddedCell } from './AddedCell'
 
 const usersColumns: ReadonlyArray<Column<User>> = [

src/app/modules/process/user-approved/user-edit-modal/UserEditModalForm.tsx

@@ -0,0 +1,433 @@
+import { FC, useState } from "react";
+import * as Yup from "yup";
+import { useFormik } from "formik";
+import { isNotEmpty, toAbsoluteUrl } from "../../../../../_digifi/helpers";
+import { initialUser, User } from "../../core/_models";
+import clsx from "clsx";
+import { useListView } from "../core/ListViewProvider";
+import { UsersListLoading } from "../components/loading/UsersListLoading";
+import { createUser, updateUser } from "../../core/_requests";
+import { useQueryResponse } from "../core/QueryResponseProvider";
+
+type Props = {
+  isUserLoading: boolean;
+  user: User;
+};
+
+const editUserSchema = Yup.object().shape({
+  email: Yup.string()
+    .email("Wrong email format")
+    .min(3, "Minimum 3 symbols")
+    .max(50, "Maximum 50 symbols")
+    .required("Email is required"),
+  name: Yup.string()
+    .min(3, "Minimum 3 symbols")
+    .max(50, "Maximum 50 symbols")
+    .required("Name is required"),
+});
+
+const UserEditModalForm: FC<Props> = ({ user, isUserLoading }) => {
+  const { setItemIdForUpdate } = useListView();
+  const { refetch } = useQueryResponse();
+
+  const [userForEdit] = useState<User>({
+    ...user,
+    avatar: user.avatar || initialUser.avatar,
+    role: user.role || initialUser.role,
+    position: user.position || initialUser.position,
+    name: user.name || initialUser.name,
+    email: user.email || initialUser.email,
+  });
+
+  const cancel = (withRefresh?: boolean) => {
+    if (withRefresh) {
+      refetch();
+    }
+    setItemIdForUpdate(undefined);
+  };
+
+  const blankImg = toAbsoluteUrl("media/svg/avatars/blank.svg");
+  const userAvatarImg = toAbsoluteUrl(`media/${userForEdit.avatar}`);
+
+  const formik = useFormik({
+    initialValues: userForEdit,
+    validationSchema: editUserSchema,
+    onSubmit: async (values, { setSubmitting }) => {
+      setSubmitting(true);
+      try {
+        if (isNotEmpty(values.id)) {
+          await updateUser(values);
+        } else {
+          await createUser(values);
+        }
+      } catch (ex) {
+        console.error(ex);
+      } finally {
+        setSubmitting(true);
+        cancel(true);
+      }
+    },
+  });
+
+  return (
+    <>
+      <form
+        id="kt_modal_add_user_form"
+        className="form"
+        onSubmit={formik.handleSubmit}
+        noValidate
+      >
+        {/* begin::Scroll */}
+        <div
+          className="d-flex flex-column scroll-y me-n7 pe-7"
+          id="kt_modal_add_user_scroll"
+          data-kt-scroll="true"
+          data-kt-scroll-activate="{default: false, lg: true}"
+          data-kt-scroll-max-height="auto"
+          data-kt-scroll-dependencies="#kt_modal_add_user_header"
+          data-kt-scroll-wrappers="#kt_modal_add_user_scroll"
+          data-kt-scroll-offset="300px"
+        >
+          {/* begin::Input group */}
+          <div className="fv-row mb-7">
+            {/* begin::Label */}
+            <label className="d-block fw-bold fs-6 mb-5">Avatar</label>
+            {/* end::Label */}
+
+            {/* begin::Image input */}
+            <div
+              className="image-input image-input-outline"
+              data-kt-image-input="true"
+              style={{ backgroundImage: `url('${blankImg}')` }}
+            >
+              {/* begin::Preview existing avatar */}
+              <div
+                className="image-input-wrapper w-125px h-125px"
+                style={{ backgroundImage: `url('${userAvatarImg}')` }}
+              ></div>
+              {/* end::Preview existing avatar */}
+
+              {/* begin::Label */}
+              {/* <label
+              className='btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow'
+              data-kt-image-input-action='change'
+              data-bs-toggle='tooltip'
+              title='Change avatar'
+            >
+              <i className='bi bi-pencil-fill fs-7'></i>
+
+              <input type='file' name='avatar' accept='.png, .jpg, .jpeg' />
+              <input type='hidden' name='avatar_remove' />
+            </label> */}
+              {/* end::Label */}
+
+              {/* begin::Cancel */}
+              {/* <span
+              className='btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow'
+              data-kt-image-input-action='cancel'
+              data-bs-toggle='tooltip'
+              title='Cancel avatar'
+            >
+              <i className='bi bi-x fs-2'></i>
+            </span> */}
+              {/* end::Cancel */}
+
+              {/* begin::Remove */}
+              {/* <span
+              className='btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow'
+              data-kt-image-input-action='remove'
+              data-bs-toggle='tooltip'
+              title='Remove avatar'
+            >
+              <i className='bi bi-x fs-2'></i>
+            </span> */}
+              {/* end::Remove */}
+            </div>
+            {/* end::Image input */}
+
+            {/* begin::Hint */}
+            {/* <div className='form-text'>Allowed file types: png, jpg, jpeg.</div> */}
+            {/* end::Hint */}
+          </div>
+          {/* end::Input group */}
+
+          {/* begin::Input group */}
+          <div className="fv-row mb-7">
+            {/* begin::Label */}
+            <label className="required fw-bold fs-6 mb-2">Full Name</label>
+            {/* end::Label */}
+
+            {/* begin::Input */}
+            <input
+              placeholder="Full name"
+              {...formik.getFieldProps("name")}
+              type="text"
+              name="name"
+              className={clsx(
+                "form-control form-control-solid mb-3 mb-lg-0",
+                { "is-invalid": formik.touched.name && formik.errors.name },
+                {
+                  "is-valid": formik.touched.name && !formik.errors.name,
+                }
+              )}
+              autoComplete="off"
+              disabled={formik.isSubmitting || isUserLoading}
+            />
+            {formik.touched.name && formik.errors.name && (
+              <div className="fv-plugins-message-container">
+                <div className="fv-help-block">
+                  <span role="alert">{formik.errors.name}</span>
+                </div>
+              </div>
+            )}
+            {/* end::Input */}
+          </div>
+          {/* end::Input group */}
+
+          {/* begin::Input group */}
+          <div className="fv-row mb-7">
+            {/* begin::Label */}
+            <label className="required fw-bold fs-6 mb-2">Email</label>
+            {/* end::Label */}
+
+            {/* begin::Input */}
+            <input
+              placeholder="Email"
+              {...formik.getFieldProps("email")}
+              className={clsx(
+                "form-control form-control-solid mb-3 mb-lg-0",
+                { "is-invalid": formik.touched.email && formik.errors.email },
+                {
+                  "is-valid": formik.touched.email && !formik.errors.email,
+                }
+              )}
+              type="email"
+              name="email"
+              autoComplete="off"
+              disabled={formik.isSubmitting || isUserLoading}
+            />
+            {/* end::Input */}
+            {formik.touched.email && formik.errors.email && (
+              <div className="fv-plugins-message-container">
+                <span role="alert">{formik.errors.email}</span>
+              </div>
+            )}
+          </div>
+          {/* end::Input group */}
+
+          {/* begin::Input group */}
+          <div className="mb-7">
+            {/* begin::Label */}
+            <label className="required fw-bold fs-6 mb-5">Role</label>
+            {/* end::Label */}
+            {/* begin::Roles */}
+            {/* begin::Input row */}
+            <div className="d-flex fv-row">
+              {/* begin::Radio */}
+              <div className="form-check form-check-custom form-check-solid">
+                {/* begin::Input */}
+                <input
+                  className="form-check-input me-3"
+                  {...formik.getFieldProps("role")}
+                  name="role"
+                  type="radio"
+                  value="Administrator"
+                  id="kt_modal_update_role_option_0"
+                  checked={formik.values.role === "Administrator"}
+                  disabled={formik.isSubmitting || isUserLoading}
+                />
+
+                {/* end::Input */}
+                {/* begin::Label */}
+                <label
+                  className="form-check-label"
+                  htmlFor="kt_modal_update_role_option_0"
+                >
+                  <div className="fw-bolder text-gray-800">Administrator</div>
+                  <div className="text-gray-600">
+                    Best for business owners and company administrators
+                  </div>
+                </label>
+                {/* end::Label */}
+              </div>
+              {/* end::Radio */}
+            </div>
+            {/* end::Input row */}
+            <div className="separator separator-dashed my-5"></div>
+            {/* begin::Input row */}
+            <div className="d-flex fv-row">
+              {/* begin::Radio */}
+              <div className="form-check form-check-custom form-check-solid">
+                {/* begin::Input */}
+                <input
+                  className="form-check-input me-3"
+                  {...formik.getFieldProps("role")}
+                  name="role"
+                  type="radio"
+                  value="Developer"
+                  id="kt_modal_update_role_option_1"
+                  checked={formik.values.role === "Developer"}
+                  disabled={formik.isSubmitting || isUserLoading}
+                />
+                {/* end::Input */}
+                {/* begin::Label */}
+                <label
+                  className="form-check-label"
+                  htmlFor="kt_modal_update_role_option_1"
+                >
+                  <div className="fw-bolder text-gray-800">Developer</div>
+                  <div className="text-gray-600">
+                    Best for developers or people primarily using the API
+                  </div>
+                </label>
+                {/* end::Label */}
+              </div>
+              {/* end::Radio */}
+            </div>
+            {/* end::Input row */}
+            <div className="separator separator-dashed my-5"></div>
+            {/* begin::Input row */}
+            <div className="d-flex fv-row">
+              {/* begin::Radio */}
+              <div className="form-check form-check-custom form-check-solid">
+                {/* begin::Input */}
+                <input
+                  className="form-check-input me-3"
+                  {...formik.getFieldProps("role")}
+                  name="role"
+                  type="radio"
+                  value="Analyst"
+                  id="kt_modal_update_role_option_2"
+                  checked={formik.values.role === "Analyst"}
+                  disabled={formik.isSubmitting || isUserLoading}
+                />
+
+                {/* end::Input */}
+                {/* begin::Label */}
+                <label
+                  className="form-check-label"
+                  htmlFor="kt_modal_update_role_option_2"
+                >
+                  <div className="fw-bolder text-gray-800">Analyst</div>
+                  <div className="text-gray-600">
+                    Best for people who need full access to analytics data, but
+                    don't need to update business settings
+                  </div>
+                </label>
+                {/* end::Label */}
+              </div>
+              {/* end::Radio */}
+            </div>
+            {/* end::Input row */}
+            <div className="separator separator-dashed my-5"></div>
+            {/* begin::Input row */}
+            <div className="d-flex fv-row">
+              {/* begin::Radio */}
+              <div className="form-check form-check-custom form-check-solid">
+                {/* begin::Input */}
+                <input
+                  className="form-check-input me-3"
+                  {...formik.getFieldProps("role")}
+                  name="role"
+                  type="radio"
+                  value="Support"
+                  id="kt_modal_update_role_option_3"
+                  checked={formik.values.role === "Support"}
+                  disabled={formik.isSubmitting || isUserLoading}
+                />
+                {/* end::Input */}
+                {/* begin::Label */}
+                <label
+                  className="form-check-label"
+                  htmlFor="kt_modal_update_role_option_3"
+                >
+                  <div className="fw-bolder text-gray-800">Support</div>
+                  <div className="text-gray-600">
+                    Best for employees who regularly refund payments and respond
+                    to disputes
+                  </div>
+                </label>
+                {/* end::Label */}
+              </div>
+              {/* end::Radio */}
+            </div>
+            {/* end::Input row */}
+            <div className="separator separator-dashed my-5"></div>
+            {/* begin::Input row */}
+            <div className="d-flex fv-row">
+              {/* begin::Radio */}
+              <div className="form-check form-check-custom form-check-solid">
+                {/* begin::Input */}
+                <input
+                  className="form-check-input me-3"
+                  {...formik.getFieldProps("role")}
+                  name="role"
+                  type="radio"
+                  id="kt_modal_update_role_option_4"
+                  value="Trial"
+                  checked={formik.values.role === "Trial"}
+                  disabled={formik.isSubmitting || isUserLoading}
+                />
+                {/* end::Input */}
+                {/* begin::Label */}
+                <label
+                  className="form-check-label"
+                  htmlFor="kt_modal_update_role_option_4"
+                >
+                  <div className="fw-bolder text-gray-800">Trial</div>
+                  <div className="text-gray-600">
+                    Best for people who need to preview content data, but don't
+                    need to make any updates
+                  </div>
+                </label>
+                {/* end::Label */}
+              </div>
+              {/* end::Radio */}
+            </div>
+            {/* end::Input row */}
+            {/* end::Roles */}
+          </div>
+          {/* end::Input group */}
+        </div>
+        {/* end::Scroll */}
+
+        {/* begin::Actions */}
+        <div className="text-center pt-15">
+          <button
+            type="reset"
+            onClick={() => cancel()}
+            className="btn btn-light me-3"
+            data-kt-users-modal-action="cancel"
+            disabled={formik.isSubmitting || isUserLoading}
+          >
+            Discard
+          </button>
+
+          <button
+            type="submit"
+            className="btn btn-primary"
+            data-kt-users-modal-action="submit"
+            disabled={
+              isUserLoading ||
+              formik.isSubmitting ||
+              !formik.isValid ||
+              !formik.touched
+            }
+          >
+            <span className="indicator-label">Submit</span>
+            {(formik.isSubmitting || isUserLoading) && (
+              <span className="indicator-progress">
+                Please wait...{" "}
+                <span className="spinner-border spinner-border-sm align-middle ms-2"></span>
+              </span>
+            )}
+          </button>
+        </div>
+        {/* end::Actions */}
+      </form>
+      {(formik.isSubmitting || isUserLoading) && <UsersListLoading />}
+    </>
+  );
+};
+
+export { UserEditModalForm };

src/app/modules/process/user-approved/user-edit-modal/UserEditModalFormWrapper.tsx

@@ -0,0 +1,42 @@
+import { useQuery } from "react-query";
+import { UserEditModalForm } from "./UserEditModalForm";
+import { isNotEmpty, QUERIES } from "../../../../../_digifi/helpers";
+import { useListView } from "../core/ListViewProvider";
+import { getUserById } from "../../core/_requests";
+
+const UserEditModalFormWrapper = () => {
+  const { itemIdForUpdate, setItemIdForUpdate } = useListView();
+  const enabledQuery: boolean = isNotEmpty(itemIdForUpdate);
+  const {
+    isLoading,
+    data: user,
+    error,
+  } = useQuery(
+    `${QUERIES.USERS_LIST}-user-${itemIdForUpdate}`,
+    () => {
+      return getUserById(itemIdForUpdate);
+    },
+    {
+      cacheTime: 0,
+      enabled: enabledQuery,
+      onError: (err) => {
+        setItemIdForUpdate(undefined);
+        console.error(err);
+      },
+    }
+  );
+
+  if (!itemIdForUpdate) {
+    return (
+      <UserEditModalForm isUserLoading={isLoading} user={{ id: undefined }} />
+    );
+  }
+
+  if (!isLoading && !error && user) {
+    return <UserEditModalForm isUserLoading={isLoading} user={user} />;
+  }
+
+  return null;
+};
+
+export { UserEditModalFormWrapper };

src/app/modules/process/user-approved/user-edit-modal/UserEditModalHeader.tsx

@@ -0,0 +1,27 @@
+import { KTIcon } from "../../../../../_digifi/helpers";
+import { useListView } from "../core/ListViewProvider";
+
+const UserEditModalHeader = () => {
+  const { setItemIdForUpdate } = useListView();
+
+  return (
+    <div className="modal-header">
+      {/* begin::Modal title */}
+      <h2 className="fw-bolder">Add User</h2>
+      {/* end::Modal title */}
+
+      {/* begin::Close */}
+      <div
+        className="btn btn-icon btn-sm btn-active-icon-primary"
+        data-kt-users-modal-action="close"
+        onClick={() => setItemIdForUpdate(undefined)}
+        style={{ cursor: "pointer" }}
+      >
+        <KTIcon iconName="cross" className="fs-1" />
+      </div>
+      {/* end::Close */}
+    </div>
+  );
+};
+
+export { UserEditModalHeader };

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

@@ -1,37 +0,0 @@
-import {ListViewProvider, useListView} from './core/ListViewProvider'
-import {QueryRequestProvider} from './core/QueryRequestProvider'
-import {QueryResponseProvider} from './core/QueryResponseProvider'
-import {UsersListHeader} from './components/header/UsersListHeader'
-import {UsersTable} from './table/UsersTable'
-import {UserEditModal} from './user-edit-modal/UserEditModal'
-import {KTCard} from '../../../../../_digifi/helpers'
-import { ToolbarWrapper } from '../../../../../_digifi/layout/components/toolbar'
-import { Content } from '../../../../../_digifi/layout/components/content'
-
-const UsersList = () => {
-  const {itemIdForUpdate} = useListView()
-  return (
-    <>
-      <KTCard>
-        <UsersListHeader />
-        <UsersTable />
-      </KTCard>
-      {itemIdForUpdate !== undefined && <UserEditModal />}
-    </>
-  )
-}
-
-const UsersListWrapper = () => (
-  <QueryRequestProvider>
-    <QueryResponseProvider>
-      <ListViewProvider>
-        <ToolbarWrapper />
-        <Content>
-          <UsersList />
-        </Content>
-      </ListViewProvider>
-    </QueryResponseProvider>
-  </QueryRequestProvider>
-)
-
-export {UsersListWrapper}

src/app/modules/process/user-approved/users-list/components/header/UsersListFilter.tsx

@@ -1,133 +0,0 @@
-import {useEffect, useState} from 'react'
-import {MenuComponent} from '../../../../../../../_digifi/assets/ts/components'
-import {initialQueryState, KTIcon} from '../../../../../../../_digifi/helpers'
-import {useQueryRequest} from '../../core/QueryRequestProvider'
-import {useQueryResponse} from '../../core/QueryResponseProvider'
-
-const UsersListFilter = () => {
-  const {updateState} = useQueryRequest()
-  const {isLoading} = useQueryResponse()
-  const [role, setRole] = useState<string | undefined>()
-  const [lastLogin, setLastLogin] = useState<string | undefined>()
-
-  useEffect(() => {
-    MenuComponent.reinitialization()
-  }, [])
-
-  const resetData = () => {
-    updateState({filter: undefined, ...initialQueryState})
-  }
-
-  const filterData = () => {
-    updateState({
-      filter: {role, last_login: lastLogin},
-      ...initialQueryState,
-    })
-  }
-
-  return (
-    <>
-      {/* begin::Filter Button */}
-      <button
-        disabled={isLoading}
-        type='button'
-        className='btn btn-light-primary me-3'
-        data-kt-menu-trigger='click'
-        data-kt-menu-placement='bottom-end'
-      >
-        <KTIcon iconName='filter' className='fs-2' />
-        Filter
-      </button>
-      {/* end::Filter Button */}
-      {/* begin::SubMenu */}
-      <div className='menu menu-sub menu-sub-dropdown w-300px w-md-325px' data-kt-menu='true'>
-        {/* begin::Header */}
-        <div className='px-7 py-5'>
-          <div className='fs-5 text-gray-900 fw-bolder'>Filter Options</div>
-        </div>
-        {/* end::Header */}
-
-        {/* begin::Separator */}
-        <div className='separator border-gray-200'></div>
-        {/* end::Separator */}
-
-        {/* begin::Content */}
-        <div className='px-7 py-5' data-kt-user-table-filter='form'>
-          {/* begin::Input group */}
-          <div className='mb-10'>
-            <label className='form-label fs-6 fw-bold'>Role:</label>
-            <select
-              className='form-select form-select-solid fw-bolder'
-              data-kt-select2='true'
-              data-placeholder='Select option'
-              data-allow-clear='true'
-              data-kt-user-table-filter='role'
-              data-hide-search='true'
-              onChange={(e) => setRole(e.target.value)}
-              value={role}
-            >
-              <option value=''></option>
-              <option value='Administrator'>Administrator</option>
-              <option value='Analyst'>Analyst</option>
-              <option value='Developer'>Developer</option>
-              <option value='Support'>Support</option>
-              <option value='Trial'>Trial</option>
-            </select>
-          </div>
-          {/* end::Input group */}
-
-          {/* begin::Input group */}
-          <div className='mb-10'>
-            <label className='form-label fs-6 fw-bold'>Last login:</label>
-            <select
-              className='form-select form-select-solid fw-bolder'
-              data-kt-select2='true'
-              data-placeholder='Select option'
-              data-allow-clear='true'
-              data-kt-user-table-filter='two-step'
-              data-hide-search='true'
-              onChange={(e) => setLastLogin(e.target.value)}
-              value={lastLogin}
-            >
-              <option value=''></option>
-              <option value='Yesterday'>Yesterday</option>
-              <option value='20 mins ago'>20 mins ago</option>
-              <option value='5 hours ago'>5 hours ago</option>
-              <option value='2 days ago'>2 days ago</option>
-            </select>
-          </div>
-          {/* end::Input group */}
-
-          {/* begin::Actions */}
-          <div className='d-flex justify-content-end'>
-            <button
-              type='button'
-              disabled={isLoading}
-              onClick={filterData}
-              className='btn btn-light btn-active-light-primary fw-bold me-2 px-6'
-              data-kt-menu-dismiss='true'
-              data-kt-user-table-filter='reset'
-            >
-              Reset
-            </button>
-            <button
-              disabled={isLoading}
-              type='button'
-              onClick={resetData}
-              className='btn btn-primary fw-bold px-6'
-              data-kt-menu-dismiss='true'
-              data-kt-user-table-filter='filter'
-            >
-              Apply
-            </button>
-          </div>
-          {/* end::Actions */}
-        </div>
-        {/* end::Content */}
-      </div>
-      {/* end::SubMenu */}
-    </>
-  )
-}
-
-export {UsersListFilter}

src/app/modules/process/user-approved/users-list/components/header/UsersListGrouping.tsx

@@ -1,38 +0,0 @@
-import {useQueryClient, useMutation} from 'react-query'
-import {QUERIES} from '../../../../../../../_digifi/helpers'
-import {useListView} from '../../core/ListViewProvider'
-import {useQueryResponse} from '../../core/QueryResponseProvider'
-import {deleteSelectedUsers} from '../../core/_requests'
-
-const UsersListGrouping = () => {
-  const {selected, clearSelected} = useListView()
-  const queryClient = useQueryClient()
-  const {query} = useQueryResponse()
-
-  const deleteSelectedItems = useMutation(() => deleteSelectedUsers(selected), {
-    // 💡 response of the mutation is passed to onSuccess
-    onSuccess: () => {
-      // ✅ update detail view directly
-      queryClient.invalidateQueries([`${QUERIES.USERS_LIST}-${query}`])
-      clearSelected()
-    },
-  })
-
-  return (
-    <div className='d-flex justify-content-end align-items-center'>
-      <div className='fw-bolder me-5'>
-        <span className='me-2'>{selected.length}</span> Selected
-      </div>
-
-      <button
-        type='button'
-        className='btn btn-danger'
-        onClick={async () => await deleteSelectedItems.mutateAsync()}
-      >
-        Delete Selected
-      </button>
-    </div>
-  )
-}
-
-export {UsersListGrouping}

src/app/modules/process/user-approved/users-list/components/header/UsersListSearchComponent.tsx

@@ -1,45 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-
-import {useEffect, useState} from 'react'
-import {initialQueryState, KTIcon, useDebounce} from '../../../../../../../_digifi/helpers'
-import {useQueryRequest} from '../../core/QueryRequestProvider'
-
-const UsersListSearchComponent = () => {
-  const {updateState} = useQueryRequest()
-  const [searchTerm, setSearchTerm] = useState<string>('')
-  // Debounce search term so that it only gives us latest value ...
-  // ... if searchTerm has not been updated within last 500ms.
-  // The goal is to only have the API call fire when user stops typing ...
-  // ... so that we aren't hitting our API rapidly.
-  const debouncedSearchTerm = useDebounce(searchTerm, 150)
-  // Effect for API call
-  useEffect(
-    () => {
-      if (debouncedSearchTerm !== undefined && searchTerm !== undefined) {
-        updateState({search: debouncedSearchTerm, ...initialQueryState})
-      }
-    },
-    [debouncedSearchTerm] // Only call effect if debounced search term changes
-    // More details about useDebounce: https://usehooks.com/useDebounce/
-  )
-
-  return (
-    <div className='card-title'>
-      {/* begin::Search */}
-      <div className='d-flex align-items-center position-relative my-1'>
-        <KTIcon iconName='magnifier' className='fs-1 position-absolute ms-6' />
-        <input
-          type='text'
-          data-kt-user-table-filter='search'
-          className='form-control form-control-solid w-250px ps-14'
-          placeholder='Search user'
-          value={searchTerm}
-          onChange={(e) => setSearchTerm(e.target.value)}
-        />
-      </div>
-      {/* end::Search */}
-    </div>
-  )
-}
-
-export {UsersListSearchComponent}

src/app/modules/process/user-approved/users-list/core/_models.ts

@@ -1,42 +0,0 @@
-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/user-approved/users-list/core/_requests.ts

@@ -1,59 +0,0 @@
-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 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,
-  deleteUser,
-  deleteSelectedUsers,
-  getUserById,
-  createUser,
-  updateUser,
-};

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

@@ -1,62 +0,0 @@
-import {useMemo} from 'react'
-import {useTable, ColumnInstance, Row} from 'react-table'
-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 {UsersListLoading} from '../components/loading/UsersListLoading'
-import {UsersListPagination} from '../components/pagination/UsersListPagination'
-import {KTCardBody} from '../../../../../../_digifi/helpers'
-
-const UsersTable = () => {
-  const users = useQueryResponseData()
-  // console.log('users', users)
-  const isLoading = useQueryResponseLoading()
-  const data = useMemo(() => users, [users])
-  const columns = useMemo(() => usersColumns, [])
-  const {getTableProps, getTableBodyProps, headers, rows, prepareRow} = useTable({
-    columns,
-    data,
-  })
-
-  return (
-    <KTCardBody className='py-4'>
-      <div className='table-responsive'>
-        <table
-          id='kt_table_users'
-          className='table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer'
-          {...getTableProps()}
-        >
-          <thead>
-            <tr className='text-start text-muted fw-bolder fs-7 text-uppercase gs-0'>
-              {headers.map((column: ColumnInstance<User>) => (
-                <CustomHeaderColumn key={column.id} column={column} />
-              ))}
-            </tr>
-          </thead>
-          <tbody className='text-gray-600 fw-bold' {...getTableBodyProps()}>
-            {rows.length > 0 ? (
-              rows.map((row: Row<User>, i) => {
-                prepareRow(row)
-                return <CustomRow row={row} key={`row-${i}-${row.id}`} />
-              })
-            ) : (
-              <tr>
-                <td colSpan={7}>
-                  <div className='d-flex text-center w-100 align-content-center justify-content-center'>
-                    No matching records found
-                  </div>
-                </td>
-              </tr>
-            )}
-          </tbody>
-        </table>
-      </div>
-      <UsersListPagination />
-      {isLoading && <UsersListLoading />}
-    </KTCardBody>
-  )
-}
-
-export {UsersTable}

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

@@ -1,76 +0,0 @@
-
-import {FC, useEffect} from 'react'
-import {useMutation, useQueryClient} from 'react-query'
-import {MenuComponent} from '../../../../../../../_digifi/assets/ts/components'
-import {ID, KTIcon, QUERIES} from '../../../../../../../_digifi/helpers'
-import {useListView} from '../../core/ListViewProvider'
-import {useQueryResponse} from '../../core/QueryResponseProvider'
-import {deleteUser} from '../../core/_requests'
-
-type Props = {
-  id: ID
-}
-
-const UserActionsCell: FC<Props> = ({id}) => {
-  const {setItemIdForUpdate} = useListView()
-  const {query} = useQueryResponse()
-  const queryClient = useQueryClient()
-
-  useEffect(() => {
-    MenuComponent.reinitialization()
-  }, [])
-
-  const openEditModal = () => {
-    setItemIdForUpdate(id)
-  }
-
-  const deleteItem = useMutation(() => deleteUser(id), {
-    // 💡 response of the mutation is passed to onSuccess
-    onSuccess: () => {
-      // ✅ update detail view directly
-      queryClient.invalidateQueries([`${QUERIES.USERS_LIST}-${query}`])
-    },
-  })
-
-  return (
-    <>
-      <a
-        href='#'
-        className='btn btn-light btn-active-light-primary btn-sm'
-        data-kt-menu-trigger='click'
-        data-kt-menu-placement='bottom-end'
-      >
-        Actions
-        <KTIcon iconName='down' className='fs-5 m-0' />
-      </a>
-      {/* begin::Menu */}
-      <div
-        className='menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-125px py-4'
-        data-kt-menu='true'
-      >
-        {/* begin::Menu item */}
-        <div className='menu-item px-3'>
-          <a className='menu-link px-3' onClick={openEditModal}>
-            Edit
-          </a>
-        </div>
-        {/* end::Menu item */}
-
-        {/* begin::Menu item */}
-        <div className='menu-item px-3'>
-          <a
-            className='menu-link px-3'
-            data-kt-users-table-filter='delete_row'
-            onClick={async () => await deleteItem.mutateAsync()}
-          >
-            Delete
-          </a>
-        </div>
-        {/* end::Menu item */}
-      </div>
-      {/* end::Menu */}
-    </>
-  )
-}
-
-export {UserActionsCell}

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

@@ -1,61 +0,0 @@
-import clsx from 'clsx'
-import {FC, PropsWithChildren, useMemo} from 'react'
-import {HeaderProps} from 'react-table'
-import {initialQueryState} from '../../../../../../../_digifi/helpers'
-import {useQueryRequest} from '../../core/QueryRequestProvider'
-import {User} from '../../core/_models'
-
-type Props = {
-  className?: string
-  title?: string
-  tableProps: PropsWithChildren<HeaderProps<User>>
-}
-const UserCustomHeader: FC<Props> = ({className, title, tableProps}) => {
-  const id = tableProps.column.id
-  const {state, updateState} = useQueryRequest()
-
-  const isSelectedForSorting = useMemo(() => {
-    return state.sort && state.sort === id
-  }, [state, id])
-  const order: 'asc' | 'desc' | undefined = useMemo(() => state.order, [state])
-
-  const sortColumn = () => {
-    // avoid sorting for these columns
-    if (id === 'actions' || id === 'selection') {
-      return
-    }
-
-    if (!isSelectedForSorting) {
-      // enable sort asc
-      updateState({sort: id, order: 'asc', ...initialQueryState})
-      return
-    }
-
-    if (isSelectedForSorting && order !== undefined) {
-      if (order === 'asc') {
-        // enable sort desc
-        updateState({sort: id, order: 'desc', ...initialQueryState})
-        return
-      }
-
-      // disable sort
-      updateState({sort: undefined, order: undefined, ...initialQueryState})
-    }
-  }
-
-  return (
-    <th
-      {...tableProps.column.getHeaderProps()}
-      className={clsx(
-        className,
-        isSelectedForSorting && order !== undefined && `table-sort-${order}`
-      )}
-      style={{cursor: 'pointer'}}
-      onClick={sortColumn}
-    >
-      {title}
-    </th>
-  )
-}
-
-export {UserCustomHeader}

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

@@ -1,42 +0,0 @@
-
-import clsx from 'clsx'
-import {FC} from 'react'
-import {toAbsoluteUrl} from '../../../../../../../_digifi/helpers'
-import {User} from '../../core/_models'
-
-type Props = {
-  user: User
-}
-
-const UserInfoCell: FC<Props> = ({user}) => (
-  <div className='d-flex align-items-center'>
-    {/* begin:: Avatar */}
-    <div className='symbol symbol-circle symbol-50px overflow-hidden me-3'>
-      <a href='#'>
-        {user.avatar ? (
-          <div className='symbol-label'>
-            <img src={toAbsoluteUrl(`media/${user.avatar}`)} alt={user.name} className='w-100' />
-          </div>
-        ) : (
-          <div
-            className={clsx(
-              'symbol-label fs-3',
-              `bg-light-${user.initials?.state}`,
-              `text-${user.initials?.state}`
-            )}
-          >
-            {user.firstname?.substring(0,1).toUpperCase()} {user.lastname?.substring(0,1).toUpperCase()}
-          </div>
-        )}
-      </a>
-    </div>
-    <div className='d-flex flex-column'>
-      <a href='#' className='text-gray-800 text-hover-primary mb-1'>
-      {user.firstname} {user.lastname}
-      </a>
-      <span>{user.email}</span>
-    </div>
-  </div>
-)
-
-export {UserInfoCell}

src/app/modules/process/user-pending/UsersList.tsx

@@ -0,0 +1,40 @@
+import {
+  ListViewProvider,
+  useListView,
+} from "./core/ListViewProvider";
+import { QueryRequestProvider } from "./core/QueryRequestProvider";
+import { QueryResponseProvider } from "./core/QueryResponseProvider";
+import { UsersListHeader } from "./components/header/UsersListHeader";
+import { UsersTable } from "./table/UsersTable";
+import { UserEditModal } from "./user-edit-modal/UserEditModal";
+import { KTCard } from "../../../../_digifi/helpers";
+import { ToolbarWrapper } from "../../../../_digifi/layout/components/toolbar";
+import { Content } from "../../../../_digifi/layout/components/content";
+
+const UsersList = () => {
+  const { itemIdForUpdate } = useListView();
+  return (
+    <>
+      <KTCard>
+        <UsersListHeader />
+        <UsersTable />
+      </KTCard>
+      {itemIdForUpdate !== undefined && <UserEditModal />}
+    </>
+  );
+};
+
+const UsersListWrapper = () => (
+  <QueryRequestProvider>
+    <QueryResponseProvider>
+      <ListViewProvider>
+        <ToolbarWrapper />
+        <Content>
+          <UsersList />
+        </Content>
+      </ListViewProvider>
+    </QueryResponseProvider>
+  </QueryRequestProvider>
+);
+
+export { UsersListWrapper };

src/app/modules/process/user-pending/UsersPage.tsx

@@ -1,39 +0,0 @@
-import {Route, Routes, Outlet, Navigate} from 'react-router-dom'
-import {PageLink, PageTitle} from '../../../../_digifi/layout/core'
-import {UsersListWrapper} from './users-list/UsersList'
-
-const usersBreadcrumbs: Array<PageLink> = [
-  {
-    title: 'User Management',
-    path: '/apps/user-management/users',
-    isSeparator: false,
-    isActive: false,
-  },
-  {
-    title: '',
-    path: '',
-    isSeparator: true,
-    isActive: false,
-  },
-]
-
-const UsersPage = () => {
-  return (
-    <Routes>
-      <Route element={<Outlet />}>
-        <Route
-          path='users'
-          element={
-            <>
-              <PageTitle breadcrumbs={usersBreadcrumbs}>Users list</PageTitle>
-              <UsersListWrapper />
-            </>
-          }
-        />
-      </Route>
-      <Route index element={<Navigate to='/apps/user-management/users' />} />
-    </Routes>
-  )
-}
-
-export default UsersPage

src/app/modules/process/user-pending/components/header/UserListToolbar.tsx

@@ -1,16 +1,19 @@
-import {KTIcon} from '../../../../../../../_digifi/helpers'
-import {useListView} from '../../core/ListViewProvider'
-import {UsersListFilter} from './UsersListFilter'
+import { KTIcon } from '../../../../../../_digifi/helpers';
+import { useListView } from '../../core/ListViewProvider';
+import { UsersListFilter } from './UsersListFilter';
 
 const UsersListToolbar = () => {
-  const {setItemIdForUpdate} = useListView()
+  const { setItemIdForUpdate } = useListView();
   const openAddUserModal = () => {
-    setItemIdForUpdate(null)
-  }
+    setItemIdForUpdate(null);
+  };
 
   return (
-    <div className='d-flex justify-content-end' data-kt-user-table-toolbar='base'>
-      <UsersListFilter />
+    <div
+      className="d-flex justify-content-end"
+      data-kt-user-table-toolbar="base"
+    >
+      {/* <UsersListFilter /> */}
 
       {/* begin::Export */}
       {/* <button type='button' className='btn btn-light-primary me-3'>
@@ -26,7 +29,7 @@ const UsersListToolbar = () => {
       </button> */}
       {/* end::Add user */}
     </div>
-  )
-}
+  );
+};
 
-export {UsersListToolbar}
+export { UsersListToolbar };

src/app/modules/process/user-pending/components/header/UsersListFilter.tsx

@@ -0,0 +1,136 @@
+import { useEffect, useState } from "react";
+import { MenuComponent } from "../../../../../../_digifi/assets/ts/components";
+import { initialQueryState, KTIcon } from "../../../../../../_digifi/helpers";
+import { useQueryRequest } from "../../core/QueryRequestProvider";
+import { useQueryResponse } from "../../core/QueryResponseProvider";
+
+const UsersListFilter = () => {
+  const { updateState } = useQueryRequest();
+  const { isLoading } = useQueryResponse();
+  const [role, setRole] = useState<string | undefined>();
+  const [lastLogin, setLastLogin] = useState<string | undefined>();
+
+  useEffect(() => {
+    MenuComponent.reinitialization();
+  }, []);
+
+  const resetData = () => {
+    updateState({ filter: undefined, ...initialQueryState });
+  };
+
+  const filterData = () => {
+    updateState({
+      filter: { role, last_login: lastLogin },
+      ...initialQueryState,
+    });
+  };
+
+  return (
+    <>
+      {/* begin::Filter Button */}
+      <button
+        disabled={isLoading}
+        type="button"
+        className="btn btn-light-primary me-3"
+        data-kt-menu-trigger="click"
+        data-kt-menu-placement="bottom-end"
+      >
+        <KTIcon iconName="filter" className="fs-2" />
+        Filter
+      </button>
+      {/* end::Filter Button */}
+      {/* begin::SubMenu */}
+      <div
+        className="menu menu-sub menu-sub-dropdown w-300px w-md-325px"
+        data-kt-menu="true"
+      >
+        {/* begin::Header */}
+        <div className="px-7 py-5">
+          <div className="fs-5 text-gray-900 fw-bolder">Filter Options</div>
+        </div>
+        {/* end::Header */}
+
+        {/* begin::Separator */}
+        <div className="separator border-gray-200"></div>
+        {/* end::Separator */}
+
+        {/* begin::Content */}
+        <div className="px-7 py-5" data-kt-user-table-filter="form">
+          {/* begin::Input group */}
+          <div className="mb-10">
+            <label className="form-label fs-6 fw-bold">Role:</label>
+            <select
+              className="form-select form-select-solid fw-bolder"
+              data-kt-select2="true"
+              data-placeholder="Select option"
+              data-allow-clear="true"
+              data-kt-user-table-filter="role"
+              data-hide-search="true"
+              onChange={(e) => setRole(e.target.value)}
+              value={role}
+            >
+              <option value=""></option>
+              <option value="Administrator">Administrator</option>
+              <option value="Analyst">Analyst</option>
+              <option value="Developer">Developer</option>
+              <option value="Support">Support</option>
+              <option value="Trial">Trial</option>
+            </select>
+          </div>
+          {/* end::Input group */}
+
+          {/* begin::Input group */}
+          <div className="mb-10">
+            <label className="form-label fs-6 fw-bold">Last login:</label>
+            <select
+              className="form-select form-select-solid fw-bolder"
+              data-kt-select2="true"
+              data-placeholder="Select option"
+              data-allow-clear="true"
+              data-kt-user-table-filter="two-step"
+              data-hide-search="true"
+              onChange={(e) => setLastLogin(e.target.value)}
+              value={lastLogin}
+            >
+              <option value=""></option>
+              <option value="Yesterday">Yesterday</option>
+              <option value="20 mins ago">20 mins ago</option>
+              <option value="5 hours ago">5 hours ago</option>
+              <option value="2 days ago">2 days ago</option>
+            </select>
+          </div>
+          {/* end::Input group */}
+
+          {/* begin::Actions */}
+          <div className="d-flex justify-content-end">
+            <button
+              type="button"
+              disabled={isLoading}
+              onClick={filterData}
+              className="btn btn-light btn-active-light-primary fw-bold me-2 px-6"
+              data-kt-menu-dismiss="true"
+              data-kt-user-table-filter="reset"
+            >
+              Reset
+            </button>
+            <button
+              disabled={isLoading}
+              type="button"
+              onClick={resetData}
+              className="btn btn-primary fw-bold px-6"
+              data-kt-menu-dismiss="true"
+              data-kt-user-table-filter="filter"
+            >
+              Apply
+            </button>
+          </div>
+          {/* end::Actions */}
+        </div>
+        {/* end::Content */}
+      </div>
+      {/* end::SubMenu */}
+    </>
+  );
+};
+
+export { UsersListFilter };

src/app/modules/process/user-pending/components/header/UsersListGrouping.tsx

@@ -0,0 +1,38 @@
+import { useQueryClient, useMutation } from "react-query";
+import { QUERIES } from "../../../../../../_digifi/helpers";
+import { useListView } from "../../core/ListViewProvider";
+import { useQueryResponse } from "../../core/QueryResponseProvider";
+import { deleteSelectedUsers } from "../../../core/_requests";
+
+const UsersListGrouping = () => {
+  const { selected, clearSelected } = useListView();
+  const queryClient = useQueryClient();
+  const { query } = useQueryResponse();
+
+  const deleteSelectedItems = useMutation(() => deleteSelectedUsers(selected), {
+    // 💡 response of the mutation is passed to onSuccess
+    onSuccess: () => {
+      // ✅ update detail view directly
+      queryClient.invalidateQueries([`${QUERIES.USERS_LIST}-${query}`]);
+      clearSelected();
+    },
+  });
+
+  return (
+    <div className="d-flex justify-content-end align-items-center">
+      <div className="fw-bolder me-5">
+        <span className="me-2">{selected.length}</span> Selected
+      </div>
+
+      <button
+        type="button"
+        className="btn btn-danger"
+        onClick={async () => await deleteSelectedItems.mutateAsync()}
+      >
+        Delete Selected
+      </button>
+    </div>
+  );
+};
+
+export { UsersListGrouping };

src/app/modules/process/user-pending/components/header/UsersListSearchComponent.tsx

@@ -0,0 +1,49 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import { useEffect, useState } from "react";
+import {
+  initialQueryState,
+  KTIcon,
+  useDebounce,
+} from "../../../../../../_digifi/helpers";
+import { useQueryRequest } from "../../core/QueryRequestProvider";
+
+const UsersListSearchComponent = () => {
+  const { updateState } = useQueryRequest();
+  const [searchTerm, setSearchTerm] = useState<string>("");
+  // Debounce search term so that it only gives us latest value ...
+  // ... if searchTerm has not been updated within last 500ms.
+  // The goal is to only have the API call fire when user stops typing ...
+  // ... so that we aren't hitting our API rapidly.
+  const debouncedSearchTerm = useDebounce(searchTerm, 150);
+  // Effect for API call
+  useEffect(
+    () => {
+      if (debouncedSearchTerm !== undefined && searchTerm !== undefined) {
+        updateState({ search: debouncedSearchTerm, ...initialQueryState });
+      }
+    },
+    [debouncedSearchTerm] // Only call effect if debounced search term changes
+    // More details about useDebounce: https://usehooks.com/useDebounce/
+  );
+
+  return (
+    <div className="card-title">
+      {/* begin::Search */}
+      <div className="d-flex align-items-center position-relative my-1">
+        <KTIcon iconName="magnifier" className="fs-1 position-absolute ms-6" />
+        <input
+          type="text"
+          data-kt-user-table-filter="search"
+          className="form-control form-control-solid w-250px ps-14"
+          placeholder="Search user"
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+        />
+      </div>
+      {/* end::Search */}
+    </div>
+  );
+};
+
+export { UsersListSearchComponent };

src/app/modules/process/user-pending/components/pagination/UsersListPagination.tsx

@@ -0,0 +1,179 @@
+import clsx from "clsx";
+import {
+  useQueryResponseLoading,
+  useQueryResponsePagination,
+} from "../../core/QueryResponseProvider";
+import { useQueryRequest } from "../../core/QueryRequestProvider";
+import { PaginationState } from "../../../../../../_digifi/helpers";
+import { useMemo } from "react";
+
+const mappedLabel = (label: string): string => {
+  if (label === "« Previous") {
+    return "Previous";
+  }
+
+  if (label === "Next »") {
+    return "Next";
+  }
+
+  return label;
+};
+
+const UsersListPagination = () => {
+  const pagination = useQueryResponsePagination();
+  const isLoading = useQueryResponseLoading();
+  const { updateState } = useQueryRequest();
+  const updatePage = (page: number | undefined | null) => {
+    if (!page || isLoading || pagination.page === page) {
+      return;
+    }
+
+    updateState({ page, items_per_page: pagination.items_per_page || 10 });
+  };
+
+  const PAGINATION_PAGES_COUNT = 5;
+  const sliceLinks = (pagination?: PaginationState) => {
+    if (!pagination?.links?.length) {
+      return [];
+    }
+
+    const scopedLinks = [...pagination.links];
+
+    let pageLinks: Array<{
+      label: string;
+      active: boolean;
+      url: string | null;
+      page: number | null;
+    }> = [];
+    const previousLink: {
+      label: string;
+      active: boolean;
+      url: string | null;
+      page: number | null;
+    } = scopedLinks.shift()!;
+    const nextLink: {
+      label: string;
+      active: boolean;
+      url: string | null;
+      page: number | null;
+    } = scopedLinks.pop()!;
+
+    const halfOfPagesCount = Math.floor(PAGINATION_PAGES_COUNT / 2);
+
+    pageLinks.push(previousLink);
+
+    if (
+      pagination.page <= Math.round(PAGINATION_PAGES_COUNT / 2) ||
+      scopedLinks.length <= PAGINATION_PAGES_COUNT
+    ) {
+      pageLinks = [
+        ...pageLinks,
+        ...scopedLinks.slice(0, PAGINATION_PAGES_COUNT),
+      ];
+    }
+
+    if (
+      pagination.page > scopedLinks.length - halfOfPagesCount &&
+      scopedLinks.length > PAGINATION_PAGES_COUNT
+    ) {
+      pageLinks = [
+        ...pageLinks,
+        ...scopedLinks.slice(
+          scopedLinks.length - PAGINATION_PAGES_COUNT,
+          scopedLinks.length
+        ),
+      ];
+    }
+
+    if (
+      !(
+        pagination.page <= Math.round(PAGINATION_PAGES_COUNT / 2) ||
+        scopedLinks.length <= PAGINATION_PAGES_COUNT
+      ) &&
+      !(pagination.page > scopedLinks.length - halfOfPagesCount)
+    ) {
+      pageLinks = [
+        ...pageLinks,
+        ...scopedLinks.slice(
+          pagination.page - 1 - halfOfPagesCount,
+          pagination.page + halfOfPagesCount
+        ),
+      ];
+    }
+
+    pageLinks.push(nextLink);
+
+    return pageLinks;
+  };
+
+  const paginationLinks = useMemo(() => sliceLinks(pagination), [pagination]);
+
+  return (
+    <div className="row">
+      <div className="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start"></div>
+      <div className="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end">
+        <div id="kt_table_users_paginate">
+          <ul className="pagination">
+            <li
+              className={clsx("page-item", {
+                disabled: isLoading || pagination.page === 1,
+              })}
+            >
+              <a
+                onClick={() => updatePage(1)}
+                style={{ cursor: "pointer" }}
+                className="page-link"
+              >
+                First
+              </a>
+            </li>
+            {paginationLinks
+              ?.map((link) => {
+                return { ...link, label: mappedLabel(link.label) };
+              })
+              .map((link) => (
+                <li
+                  key={link.label}
+                  className={clsx("page-item", {
+                    active: pagination.page === link.page,
+                    disabled: isLoading,
+                    previous: link.label === "Previous",
+                    next: link.label === "Next",
+                  })}
+                >
+                  <a
+                    className={clsx("page-link", {
+                      "page-text":
+                        link.label === "Previous" || link.label === "Next",
+                      "me-5": link.label === "Previous",
+                    })}
+                    onClick={() => updatePage(link.page)}
+                    style={{ cursor: "pointer" }}
+                  >
+                    {mappedLabel(link.label)}
+                  </a>
+                </li>
+              ))}
+            <li
+              className={clsx("page-item", {
+                disabled:
+                  isLoading ||
+                  pagination.page === (pagination.links?.length || 3) - 2,
+              })}
+            >
+              <a
+                onClick={() => updatePage((pagination.links?.length || 3) - 2)}
+                style={{ cursor: "pointer" }}
+                className="page-link"
+              >
+                Last
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { UsersListPagination };

src/app/modules/process/user-pending/core/ListViewProvider.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable react-refresh/only-export-components */
+import { FC, useState, createContext, useContext, useMemo } from "react";
+import {
+  ID,
+  calculatedGroupingIsDisabled,
+  calculateIsAllDataSelected,
+  groupingOnSelect,
+  initialListView,
+  ListViewContextProps,
+  groupingOnSelectAll,
+  WithChildren,
+} from "../../../../../_digifi/helpers";
+import {
+  useQueryResponse,
+  useQueryResponseData,
+} from "./QueryResponseProvider";
+
+const ListViewContext = createContext<ListViewContextProps>(initialListView);
+
+const ListViewProvider: FC<WithChildren> = ({ children }) => {
+  const [selected, setSelected] = useState<Array<ID>>(initialListView.selected);
+  const [itemIdForUpdate, setItemIdForUpdate] = useState<ID>(
+    initialListView.itemIdForUpdate
+  );
+  const { isLoading } = useQueryResponse();
+  const data = useQueryResponseData();
+  const disabled = useMemo(
+    () => calculatedGroupingIsDisabled(isLoading, data),
+    [isLoading, data]
+  );
+  const isAllSelected = useMemo(
+    () => calculateIsAllDataSelected(data, selected),
+    [data, selected]
+  );
+
+  return (
+    <ListViewContext.Provider
+      value={{
+        selected,
+        itemIdForUpdate,
+        setItemIdForUpdate,
+        disabled,
+        isAllSelected,
+        onSelect: (id: ID) => {
+          groupingOnSelect(id, selected, setSelected);
+        },
+        onSelectAll: () => {
+          groupingOnSelectAll(isAllSelected, setSelected, data);
+        },
+        clearSelected: () => {
+          setSelected([]);
+        },
+      }}
+    >
+      {children}
+    </ListViewContext.Provider>
+  );
+};
+
+const useListView = () => useContext(ListViewContext);
+
+export { ListViewProvider, useListView };

src/app/modules/process/user-pending/core/QueryRequestProvider.tsx

@@ -0,0 +1,29 @@
+/* eslint-disable react-refresh/only-export-components */
+import { FC, useState, createContext, useContext } from "react";
+import {
+  QueryState,
+  QueryRequestContextProps,
+  initialQueryRequest,
+  WithChildren,
+} from "../../../../../_digifi/helpers";
+
+const QueryRequestContext =
+  createContext<QueryRequestContextProps>(initialQueryRequest);
+
+const QueryRequestProvider: FC<WithChildren> = ({ children }) => {
+  const [state, setState] = useState<QueryState>(initialQueryRequest.state);
+
+  const updateState = (updates: Partial<QueryState>) => {
+    const updatedState = { ...state, ...updates } as QueryState;
+    setState(updatedState);
+  };
+
+  return (
+    <QueryRequestContext.Provider value={{ state, updateState }}>
+      {children}
+    </QueryRequestContext.Provider>
+  );
+};
+
+const useQueryRequest = () => useContext(QueryRequestContext);
+export { QueryRequestProvider, useQueryRequest };

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

@@ -1,7 +1,7 @@
 /* eslint-disable react-refresh/only-export-components */
 /* eslint-disable react-hooks/exhaustive-deps */
-import {FC, useContext, useState, useEffect, useMemo} from 'react'
-import {useQuery} from 'react-query'
+import { FC, useContext, useState, useEffect, useMemo } from "react";
+import { useQuery } from "react-query";
 import {
   createResponseContext,
   initialQueryResponse,
@@ -10,22 +10,22 @@ import {
   QUERIES,
   stringifyRequestQuery,
   WithChildren,
-} from '../../../../../../_digifi/helpers'
-import {getStartedUsers} from './_requests'
-import {User} from './_models'
-import {useQueryRequest} from './QueryRequestProvider'
+} from "../../../../../_digifi/helpers";
+import { getPendingUsers } from "../../core/_requests";
+import { User } from "../../core/_models";
+import { useQueryRequest } from "./QueryRequestProvider";
 
-const QueryResponseContext = createResponseContext<User>(initialQueryResponse)
-const QueryResponseProvider: FC<WithChildren> = ({children}) => {
-  const {state} = useQueryRequest()
-  const [query, setQuery] = useState<string>(stringifyRequestQuery(state))
-  const updatedQuery = useMemo(() => stringifyRequestQuery(state), [state])
+const QueryResponseContext = createResponseContext<User>(initialQueryResponse);
+const QueryResponseProvider: FC<WithChildren> = ({ children }) => {
+  const { state } = useQueryRequest();
+  const [query, setQuery] = useState<string>(stringifyRequestQuery(state));
+  const updatedQuery = useMemo(() => stringifyRequestQuery(state), [state]);
 
   useEffect(() => {
     if (query !== updatedQuery) {
-      setQuery(updatedQuery)
+      setQuery(updatedQuery);
     }
-  }, [updatedQuery])
+  }, [updatedQuery]);
 
   const {
     isFetching,
@@ -34,47 +34,49 @@ const QueryResponseProvider: FC<WithChildren> = ({children}) => {
   } = useQuery(
     `${QUERIES.USERS_LIST}-${query}`,
     () => {
-      return getStartedUsers(query)
+      return getPendingUsers(query);
     },
-    {cacheTime: 0, keepPreviousData: true, refetchOnWindowFocus: false}
-  )
+    { cacheTime: 0, keepPreviousData: true, refetchOnWindowFocus: false }
+  );
 
   return (
-    <QueryResponseContext.Provider value={{isLoading: isFetching, refetch, response, query}}>
+    <QueryResponseContext.Provider
+      value={{ isLoading: isFetching, refetch, response, query }}
+    >
       {children}
     </QueryResponseContext.Provider>
-  )
-}
+  );
+};
 
-const useQueryResponse = () => useContext(QueryResponseContext)
+const useQueryResponse = () => useContext(QueryResponseContext);
 
 const useQueryResponseData = () => {
-  const {response} = useQueryResponse()
+  const { response } = useQueryResponse();
   if (!response) {
-    return []
+    return [];
   }
 
-  return response?.records || []
-}
+  return response?.records || [];
+};
 
 const useQueryResponsePagination = () => {
   const defaultPaginationState: PaginationState = {
     links: [],
     ...initialQueryState,
-  }
+  };
 
-  const {response} = useQueryResponse()
+  const { response } = useQueryResponse();
   if (!response || !response.payload || !response.payload.pagination) {
-    return defaultPaginationState
+    return defaultPaginationState;
   }
 
-  return response.payload.pagination
-}
+  return response.payload.pagination;
+};
 
 const useQueryResponseLoading = (): boolean => {
-  const {isLoading} = useQueryResponse()
-  return isLoading
-}
+  const { isLoading } = useQueryResponse();
+  return isLoading;
+};
 
 export {
   QueryResponseProvider,
@@ -82,4 +84,4 @@ export {
   useQueryResponseData,
   useQueryResponsePagination,
   useQueryResponseLoading,
-}
+};

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

@@ -0,0 +1,66 @@
+import { useMemo } from "react";
+import { useTable, ColumnInstance, Row } from "react-table";
+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 { UsersListLoading } from "../components/loading/UsersListLoading";
+import { UsersListPagination } from "../components/pagination/UsersListPagination";
+import { KTCardBody } from "../../../../../_digifi/helpers";
+
+const UsersTable = () => {
+  const users = useQueryResponseData();
+  // console.log('users', users)
+  const isLoading = useQueryResponseLoading();
+  const data = useMemo(() => users, [users]);
+  const columns = useMemo(() => usersColumns, []);
+  const { getTableProps, getTableBodyProps, headers, rows, prepareRow } =
+    useTable({
+      columns,
+      data,
+    });
+
+  return (
+    <KTCardBody className="py-4">
+      <div className="table-responsive">
+        <table
+          id="kt_table_users"
+          className="table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer"
+          {...getTableProps()}
+        >
+          <thead>
+            <tr className="text-start text-muted fw-bolder fs-7 text-uppercase gs-0">
+              {headers.map((column: ColumnInstance<User>) => (
+                <CustomHeaderColumn key={column.id} column={column} />
+              ))}
+            </tr>
+          </thead>
+          <tbody className="text-gray-600 fw-bold" {...getTableBodyProps()}>
+            {rows.length > 0 ? (
+              rows.map((row: Row<User>, i) => {
+                prepareRow(row);
+                return <CustomRow row={row} key={`row-${i}-${row.id}`} />;
+              })
+            ) : (
+              <tr>
+                <td colSpan={7}>
+                  <div className="d-flex text-center w-100 align-content-center justify-content-center">
+                    No matching records found
+                  </div>
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+      <UsersListPagination />
+      {isLoading && <UsersListLoading />}
+    </KTCardBody>
+  );
+};
+
+export { UsersTable };

src/app/modules/process/user-pending/table/columns/AddedCell.tsx

@@ -0,0 +1,14 @@
+import { FC } from "react";
+import { NewDateTimeFormatter } from "../../../../../../_digifi/lib/NewDateTimeFormatter";
+
+type Props = {
+  added?: string;
+};
+
+const AddedCell: FC<Props> = ({ added }) => (
+  <div className="badge badge-light fw-bolder">
+    {NewDateTimeFormatter(added)}
+  </div>
+);
+
+export { AddedCell };

src/app/modules/process/user-pending/table/columns/CustomHeaderColumn.tsx

@@ -1,6 +1,6 @@
 import {FC} from 'react'
 import {ColumnInstance} from 'react-table'
-import {User} from '../../core/_models'
+import {User} from '../../../core/_models'
 
 type Props = {
   column: ColumnInstance<User>

src/app/modules/process/user-pending/table/columns/CustomRow.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx'
 import {FC} from 'react'
 import {Row} from 'react-table'
-import {User} from '../../core/_models'
+import {User} from '../../../core/_models'
 
 type Props = {
   row: Row<User>

src/app/modules/process/user-pending/table/columns/UserActionsCell.tsx

@@ -0,0 +1,76 @@
+import { FC, useEffect } from "react";
+import { useMutation, useQueryClient } from "react-query";
+import { MenuComponent } from "../../../../../../_digifi/assets/ts/components";
+import { ID, KTIcon, QUERIES } from "../../../../../../_digifi/helpers";
+import { useListView } from "../../core/ListViewProvider";
+import { useQueryResponse } from "../../core/QueryResponseProvider";
+import { deleteUser } from "../../../core/_requests";
+
+
+type Props = {
+  id: ID;
+};
+
+const UserActionsCell: FC<Props> = ({ id }) => {
+  const { setItemIdForUpdate } = useListView();
+  const { query } = useQueryResponse();
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    MenuComponent.reinitialization();
+  }, []);
+
+  const openEditModal = () => {
+    setItemIdForUpdate(id);
+  };
+
+  const deleteItem = useMutation(() => deleteUser(id), {
+    // 💡 response of the mutation is passed to onSuccess
+    onSuccess: () => {
+      // ✅ update detail view directly
+      queryClient.invalidateQueries([`${QUERIES.USERS_LIST}-${query}`]);
+    },
+  });
+
+  return (
+    <>
+      <a
+        href="#"
+        className="btn btn-light btn-active-light-primary btn-sm"
+        data-kt-menu-trigger="click"
+        data-kt-menu-placement="bottom-end"
+      >
+        Actions
+        <KTIcon iconName="down" className="fs-5 m-0" />
+      </a>
+      {/* begin::Menu */}
+      <div
+        className="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-175px py-4"
+        data-kt-menu="true"
+      >
+        {/* begin::Menu item */}
+        <div className="menu-item px-3">
+          <a className="menu-link px-3" onClick={openEditModal}>
+            Cancel Application
+          </a>
+        </div>
+        {/* end::Menu item */}
+
+        {/* begin::Menu item */}
+        <div className="menu-item px-3">
+          <a
+            className="menu-link px-3"
+            data-kt-users-table-filter="delete_row"
+            onClick={async () => await deleteItem.mutateAsync()}
+          >
+            Start Processing
+          </a>
+        </div>
+        {/* end::Menu item */}
+      </div>
+      {/* end::Menu */}
+    </>
+  );
+};
+
+export { UserActionsCell };

src/app/modules/process/user-pending/table/columns/UserCustomHeader.tsx

@@ -0,0 +1,61 @@
+import clsx from "clsx";
+import { FC, PropsWithChildren, useMemo } from "react";
+import { HeaderProps } from "react-table";
+import { initialQueryState } from "../../../../../../_digifi/helpers";
+import { useQueryRequest } from "../../core/QueryRequestProvider";
+import { User } from "../../../core/_models";
+
+type Props = {
+  className?: string;
+  title?: string;
+  tableProps: PropsWithChildren<HeaderProps<User>>;
+};
+const UserCustomHeader: FC<Props> = ({ className, title, tableProps }) => {
+  const id = tableProps.column.id;
+  const { state, updateState } = useQueryRequest();
+
+  const isSelectedForSorting = useMemo(() => {
+    return state.sort && state.sort === id;
+  }, [state, id]);
+  const order: "asc" | "desc" | undefined = useMemo(() => state.order, [state]);
+
+  const sortColumn = () => {
+    // avoid sorting for these columns
+    if (id === "actions" || id === "selection") {
+      return;
+    }
+
+    if (!isSelectedForSorting) {
+      // enable sort asc
+      updateState({ sort: id, order: "asc", ...initialQueryState });
+      return;
+    }
+
+    if (isSelectedForSorting && order !== undefined) {
+      if (order === "asc") {
+        // enable sort desc
+        updateState({ sort: id, order: "desc", ...initialQueryState });
+        return;
+      }
+
+      // disable sort
+      updateState({ sort: undefined, order: undefined, ...initialQueryState });
+    }
+  };
+
+  return (
+    <th
+      {...tableProps.column.getHeaderProps()}
+      className={clsx(
+        className,
+        isSelectedForSorting && order !== undefined && `table-sort-${order}`
+      )}
+      style={{ cursor: "pointer" }}
+      onClick={sortColumn}
+    >
+      {title}
+    </th>
+  );
+};
+
+export { UserCustomHeader };

src/app/modules/process/user-pending/table/columns/UserInfoCell.tsx

@@ -0,0 +1,46 @@
+import clsx from "clsx";
+import { FC } from "react";
+import { toAbsoluteUrl } from "../../../../../../_digifi/helpers";
+import { User } from "../../../core/_models";
+
+type Props = {
+  user: User;
+};
+
+const UserInfoCell: FC<Props> = ({ user }) => (
+  <div className="d-flex align-items-center">
+    {/* begin:: Avatar */}
+    <div className="symbol symbol-circle symbol-50px overflow-hidden me-3">
+      <a href="#">
+        {user.avatar ? (
+          <div className="symbol-label">
+            <img
+              src={toAbsoluteUrl(`media/${user.avatar}`)}
+              alt={user.name}
+              className="w-100"
+            />
+          </div>
+        ) : (
+          <div
+            className={clsx(
+              "symbol-label fs-3",
+              `bg-light-${user.initials?.state}`,
+              `text-${user.initials?.state}`
+            )}
+          >
+            {user.firstname?.substring(0, 1).toUpperCase()}{" "}
+            {user.lastname?.substring(0, 1).toUpperCase()}
+          </div>
+        )}
+      </a>
+    </div>
+    <div className="d-flex flex-column">
+      <a href="#" className="text-gray-800 text-hover-primary mb-1">
+        {user.firstname} {user.lastname}
+      </a>
+      <span>{user.email}</span>
+    </div>
+  </div>
+);
+
+export { UserInfoCell };

src/app/modules/process/user-pending/table/columns/UserSelectionCell.tsx

@@ -0,0 +1,26 @@
+import { FC, useMemo } from "react";
+import { ID } from "../../../../../../_digifi/helpers";
+import { useListView } from "../../core/ListViewProvider";
+
+type Props = {
+  id: ID;
+};
+
+const UserSelectionCell: FC<Props> = ({ id }) => {
+  const { selected, onSelect } = useListView();
+  const isSelected = useMemo(() => selected.includes(id), [id, selected]);
+  return (
+    <div className="form-check form-check-custom form-check-solid">
+      <input
+        className="form-check-input"
+        type="checkbox"
+        data-kt-check={isSelected}
+        data-kt-check-target="#kt_table_users .form-check-input"
+        checked={isSelected}
+        onChange={() => onSelect(id)}
+      />
+    </div>
+  );
+};
+
+export { UserSelectionCell };

src/app/modules/process/user-pending/table/columns/UserSelectionHeader.tsx

@@ -1,7 +1,7 @@
 import {FC, PropsWithChildren} from 'react'
 import {HeaderProps} from 'react-table'
 import {useListView} from '../../core/ListViewProvider'
-import {User} from '../../core/_models'
+import {User} from '../../../core/_models'
 
 type Props = {
   tableProps: PropsWithChildren<HeaderProps<User>>

src/app/modules/process/user-pending/table/columns/_columns.tsx

@@ -0,0 +1,103 @@
+import { Column } from 'react-table';
+import { UserInfoCell } from './UserInfoCell';
+import { PaymentMonthCell } from './UserLastLoginCell';
+import { AgentCell } from './AgentCell';
+import { UserActionsCell } from './UserActionsCell';
+import { UserSelectionCell } from './UserSelectionCell';
+import { UserCustomHeader } from './UserCustomHeader';
+import { UserSelectionHeader } from './UserSelectionHeader';
+import { User } from '../../../core/_models';
+import { AddedCell } from './AddedCell';
+
+const formatNumberWithCommas = (number: string): string => {
+  return number.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+};
+
+const usersColumns: ReadonlyArray<Column<User>> = [
+  {
+    Header: (props) => <UserSelectionHeader tableProps={props} />,
+    id: 'selection',
+    Cell: ({ ...props }) => (
+      <UserSelectionCell id={props.data[props.row.index].uid} />
+    ),
+  },
+  {
+    Header: (props) => (
+      <UserCustomHeader
+        tableProps={props}
+        title="Name"
+        className="min-w-125px"
+      />
+    ),
+    id: 'firstname',
+    Cell: ({ ...props }) => <UserInfoCell user={props.data[props.row.index]} />,
+  },
+  {
+    Header: (props) => (
+      <UserCustomHeader
+        tableProps={props}
+        title="Amount"
+        className="min-w-125px"
+      />
+    ),
+    accessor: 'loan_amount',
+    Cell: ({ row, data }) =>
+      formatNumberWithCommas(data[row.index].loan_amount || '0'),
+  },
+  {
+    Header: (props) => (
+      <UserCustomHeader
+        tableProps={props}
+        title="Payment Terms"
+        className="min-w-125px"
+      />
+    ),
+    id: 'payment_month',
+    Cell: ({ ...props }) => (
+      <PaymentMonthCell
+        payment_month={props.data[props.row.index].payment_month}
+      />
+    ),
+  },
+  {
+    Header: (props) => (
+      <UserCustomHeader
+        tableProps={props}
+        title="Agent"
+        className="min-w-125px"
+      />
+    ),
+    id: 'sales_agent',
+    Cell: ({ ...props }) => (
+      <AgentCell agent={props.data[props.row.index].sales_agent} />
+    ),
+  },
+  {
+    Header: (props) => (
+      <UserCustomHeader
+        tableProps={props}
+        title="Added"
+        className="min-w-125px"
+      />
+    ),
+    id: 'added',
+    Cell: ({ ...props }) => (
+      <AddedCell added={props.data[props.row.index].added} />
+    ),
+  },
+  {
+    Header: (props) => (
+      <UserCustomHeader
+        tableProps={props}
+        title="Actions"
+        className="text-end min-w-100px"
+      />
+    ),
+    id: 'actions',
+    Cell: ({ ...props }) => (
+      <UserActionsCell id={props.data[props.row.index].uid} />
+    ),
+  },
+];
+
+export { usersColumns };

src/app/modules/process/user-pending/user-edit-modal/UserEditModalForm.tsx

@@ -0,0 +1,433 @@
+import { FC, useState } from "react";
+import * as Yup from "yup";
+import { useFormik } from "formik";
+import { isNotEmpty, toAbsoluteUrl } from "../../../../../_digifi/helpers";
+import { initialUser, User } from "../../core/_models";
+import clsx from "clsx";
+import { useListView } from "../core/ListViewProvider";
+import { UsersListLoading } from "../components/loading/UsersListLoading";
+import { createUser, updateUser } from "../../core/_requests";
+import { useQueryResponse } from "../core/QueryResponseProvider";
+
+type Props = {
+  isUserLoading: boolean;
+  user: User;
+};
+
+const editUserSchema = Yup.object().shape({
+  email: Yup.string()
+    .email("Wrong email format")
+    .min(3, "Minimum 3 symbols")
+    .max(50, "Maximum 50 symbols")
+    .required("Email is required"),
+  name: Yup.string()
+    .min(3, "Minimum 3 symbols")
+    .max(50, "Maximum 50 symbols")
+    .required("Name is required"),
+});
+
+const UserEditModalForm: FC<Props> = ({ user, isUserLoading }) => {
+  const { setItemIdForUpdate } = useListView();
+  const { refetch } = useQueryResponse();
+
+  const [userForEdit] = useState<User>({
+    ...user,
+    avatar: user.avatar || initialUser.avatar,
+    role: user.role || initialUser.role,
+    position: user.position || initialUser.position,
+    name: user.name || initialUser.name,
+    email: user.email || initialUser.email,
+  });
+
+  const cancel = (withRefresh?: boolean) => {
+    if (withRefresh) {
+      refetch();
+    }
+    setItemIdForUpdate(undefined);
+  };
+
+  const blankImg = toAbsoluteUrl("media/svg/avatars/blank.svg");
+  const userAvatarImg = toAbsoluteUrl(`media/${userForEdit.avatar}`);
+
+  const formik = useFormik({
+    initialValues: userForEdit,
+    validationSchema: editUserSchema,
+    onSubmit: async (values, { setSubmitting }) => {
+      setSubmitting(true);
+      try {
+        if (isNotEmpty(values.id)) {
+          await updateUser(values);
+        } else {
+          await createUser(values);
+        }
+      } catch (ex) {
+        console.error(ex);
+      } finally {
+        setSubmitting(true);
+        cancel(true);
+      }
+    },
+  });
+
+  return (
+    <>
+      <form
+        id="kt_modal_add_user_form"
+        className="form"
+        onSubmit={formik.handleSubmit}
+        noValidate
+      >
+        {/* begin::Scroll */}
+        <div
+          className="d-flex flex-column scroll-y me-n7 pe-7"
+          id="kt_modal_add_user_scroll"
+          data-kt-scroll="true"
+          data-kt-scroll-activate="{default: false, lg: true}"
+          data-kt-scroll-max-height="auto"
+          data-kt-scroll-dependencies="#kt_modal_add_user_header"
+          data-kt-scroll-wrappers="#kt_modal_add_user_scroll"
+          data-kt-scroll-offset="300px"
+        >
+          {/* begin::Input group */}
+          <div className="fv-row mb-7">
+            {/* begin::Label */}
+            <label className="d-block fw-bold fs-6 mb-5">Avatar</label>
+            {/* end::Label */}
+
+            {/* begin::Image input */}
+            <div
+              className="image-input image-input-outline"
+              data-kt-image-input="true"
+              style={{ backgroundImage: `url('${blankImg}')` }}
+            >
+              {/* begin::Preview existing avatar */}
+              <div
+                className="image-input-wrapper w-125px h-125px"
+                style={{ backgroundImage: `url('${userAvatarImg}')` }}
+              ></div>
+              {/* end::Preview existing avatar */}
+
+              {/* begin::Label */}
+              {/* <label
+              className='btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow'
+              data-kt-image-input-action='change'
+              data-bs-toggle='tooltip'
+              title='Change avatar'
+            >
+              <i className='bi bi-pencil-fill fs-7'></i>
+
+              <input type='file' name='avatar' accept='.png, .jpg, .jpeg' />
+              <input type='hidden' name='avatar_remove' />
+            </label> */}
+              {/* end::Label */}
+
+              {/* begin::Cancel */}
+              {/* <span
+              className='btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow'
+              data-kt-image-input-action='cancel'
+              data-bs-toggle='tooltip'
+              title='Cancel avatar'
+            >
+              <i className='bi bi-x fs-2'></i>
+            </span> */}
+              {/* end::Cancel */}
+
+              {/* begin::Remove */}
+              {/* <span
+              className='btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow'
+              data-kt-image-input-action='remove'
+              data-bs-toggle='tooltip'
+              title='Remove avatar'
+            >
+              <i className='bi bi-x fs-2'></i>
+            </span> */}
+              {/* end::Remove */}
+            </div>
+            {/* end::Image input */}
+
+            {/* begin::Hint */}
+            {/* <div className='form-text'>Allowed file types: png, jpg, jpeg.</div> */}
+            {/* end::Hint */}
+          </div>
+          {/* end::Input group */}
+
+          {/* begin::Input group */}
+          <div className="fv-row mb-7">
+            {/* begin::Label */}
+            <label className="required fw-bold fs-6 mb-2">Full Name</label>
+            {/* end::Label */}
+
+            {/* begin::Input */}
+            <input
+              placeholder="Full name"
+              {...formik.getFieldProps("name")}
+              type="text"
+              name="name"
+              className={clsx(
+                "form-control form-control-solid mb-3 mb-lg-0",
+                { "is-invalid": formik.touched.name && formik.errors.name },
+                {
+                  "is-valid": formik.touched.name && !formik.errors.name,
+                }
+              )}
+              autoComplete="off"
+              disabled={formik.isSubmitting || isUserLoading}
+            />
+            {formik.touched.name && formik.errors.name && (
+              <div className="fv-plugins-message-container">
+                <div className="fv-help-block">
+                  <span role="alert">{formik.errors.name}</span>
+                </div>
+              </div>
+            )}
+            {/* end::Input */}
+          </div>
+          {/* end::Input group */}
+
+          {/* begin::Input group */}
+          <div className="fv-row mb-7">
+            {/* begin::Label */}
+            <label className="required fw-bold fs-6 mb-2">Email</label>
+            {/* end::Label */}
+
+            {/* begin::Input */}
+            <input
+              placeholder="Email"
+              {...formik.getFieldProps("email")}
+              className={clsx(
+                "form-control form-control-solid mb-3 mb-lg-0",
+                { "is-invalid": formik.touched.email && formik.errors.email },
+                {
+                  "is-valid": formik.touched.email && !formik.errors.email,
+                }
+              )}
+              type="email"
+              name="email"
+              autoComplete="off"
+              disabled={formik.isSubmitting || isUserLoading}
+            />
+            {/* end::Input */}
+            {formik.touched.email && formik.errors.email && (
+              <div className="fv-plugins-message-container">
+                <span role="alert">{formik.errors.email}</span>
+              </div>
+            )}
+          </div>
+          {/* end::Input group */}
+
+          {/* begin::Input group */}
+          <div className="mb-7">
+            {/* begin::Label */}
+            <label className="required fw-bold fs-6 mb-5">Role</label>
+            {/* end::Label */}
+            {/* begin::Roles */}
+            {/* begin::Input row */}
+            <div className="d-flex fv-row">
+              {/* begin::Radio */}
+              <div className="form-check form-check-custom form-check-solid">
+                {/* begin::Input */}
+                <input
+                  className="form-check-input me-3"
+                  {...formik.getFieldProps("role")}
+                  name="role"
+                  type="radio"
+                  value="Administrator"
+                  id="kt_modal_update_role_option_0"
+                  checked={formik.values.role === "Administrator"}
+                  disabled={formik.isSubmitting || isUserLoading}
+                />
+
+                {/* end::Input */}
+                {/* begin::Label */}
+                <label
+                  className="form-check-label"
+                  htmlFor="kt_modal_update_role_option_0"
+                >
+                  <div className="fw-bolder text-gray-800">Administrator</div>
+                  <div className="text-gray-600">
+                    Best for business owners and company administrators
+                  </div>
+                </label>
+                {/* end::Label */}
+              </div>
+              {/* end::Radio */}
+            </div>
+            {/* end::Input row */}
+            <div className="separator separator-dashed my-5"></div>
+            {/* begin::Input row */}
+            <div className="d-flex fv-row">
+              {/* begin::Radio */}
+              <div className="form-check form-check-custom form-check-solid">
+                {/* begin::Input */}
+                <input
+                  className="form-check-input me-3"
+                  {...formik.getFieldProps("role")}
+                  name="role"
+                  type="radio"
+                  value="Developer"
+                  id="kt_modal_update_role_option_1"
+                  checked={formik.values.role === "Developer"}
+                  disabled={formik.isSubmitting || isUserLoading}
+                />
+                {/* end::Input */}
+                {/* begin::Label */}
+                <label
+                  className="form-check-label"
+                  htmlFor="kt_modal_update_role_option_1"
+                >
+                  <div className="fw-bolder text-gray-800">Developer</div>
+                  <div className="text-gray-600">
+                    Best for developers or people primarily using the API
+                  </div>
+                </label>
+                {/* end::Label */}
+              </div>
+              {/* end::Radio */}
+            </div>
+            {/* end::Input row */}
+            <div className="separator separator-dashed my-5"></div>
+            {/* begin::Input row */}
+            <div className="d-flex fv-row">
+              {/* begin::Radio */}
+              <div className="form-check form-check-custom form-check-solid">
+                {/* begin::Input */}
+                <input
+                  className="form-check-input me-3"
+                  {...formik.getFieldProps("role")}
+                  name="role"
+                  type="radio"
+                  value="Analyst"
+                  id="kt_modal_update_role_option_2"
+                  checked={formik.values.role === "Analyst"}
+                  disabled={formik.isSubmitting || isUserLoading}
+                />
+
+                {/* end::Input */}
+                {/* begin::Label */}
+                <label
+                  className="form-check-label"
+                  htmlFor="kt_modal_update_role_option_2"
+                >
+                  <div className="fw-bolder text-gray-800">Analyst</div>
+                  <div className="text-gray-600">
+                    Best for people who need full access to analytics data, but
+                    don't need to update business settings
+                  </div>
+                </label>
+                {/* end::Label */}
+              </div>
+              {/* end::Radio */}
+            </div>
+            {/* end::Input row */}
+            <div className="separator separator-dashed my-5"></div>
+            {/* begin::Input row */}
+            <div className="d-flex fv-row">
+              {/* begin::Radio */}
+              <div className="form-check form-check-custom form-check-solid">
+                {/* begin::Input */}
+                <input
+                  className="form-check-input me-3"
+                  {...formik.getFieldProps("role")}
+                  name="role"
+                  type="radio"
+                  value="Support"
+                  id="kt_modal_update_role_option_3"
+                  checked={formik.values.role === "Support"}
+                  disabled={formik.isSubmitting || isUserLoading}
+                />
+                {/* end::Input */}
+                {/* begin::Label */}
+                <label
+                  className="form-check-label"
+                  htmlFor="kt_modal_update_role_option_3"
+                >
+                  <div className="fw-bolder text-gray-800">Support</div>
+                  <div className="text-gray-600">
+                    Best for employees who regularly refund payments and respond
+                    to disputes
+                  </div>
+                </label>
+                {/* end::Label */}
+              </div>
+              {/* end::Radio */}
+            </div>
+            {/* end::Input row */}
+            <div className="separator separator-dashed my-5"></div>
+            {/* begin::Input row */}
+            <div className="d-flex fv-row">
+              {/* begin::Radio */}
+              <div className="form-check form-check-custom form-check-solid">
+                {/* begin::Input */}
+                <input
+                  className="form-check-input me-3"
+                  {...formik.getFieldProps("role")}
+                  name="role"
+                  type="radio"
+                  id="kt_modal_update_role_option_4"
+                  value="Trial"
+                  checked={formik.values.role === "Trial"}
+                  disabled={formik.isSubmitting || isUserLoading}
+                />
+                {/* end::Input */}
+                {/* begin::Label */}
+                <label
+                  className="form-check-label"
+                  htmlFor="kt_modal_update_role_option_4"
+                >
+                  <div className="fw-bolder text-gray-800">Trial</div>
+                  <div className="text-gray-600">
+                    Best for people who need to preview content data, but don't
+                    need to make any updates
+                  </div>
+                </label>
+                {/* end::Label */}
+              </div>
+              {/* end::Radio */}
+            </div>
+            {/* end::Input row */}
+            {/* end::Roles */}
+          </div>
+          {/* end::Input group */}
+        </div>
+        {/* end::Scroll */}
+
+        {/* begin::Actions */}
+        <div className="text-center pt-15">
+          <button
+            type="reset"
+            onClick={() => cancel()}
+            className="btn btn-light me-3"
+            data-kt-users-modal-action="cancel"
+            disabled={formik.isSubmitting || isUserLoading}
+          >
+            Discard
+          </button>
+
+          <button
+            type="submit"
+            className="btn btn-primary"
+            data-kt-users-modal-action="submit"
+            disabled={
+              isUserLoading ||
+              formik.isSubmitting ||
+              !formik.isValid ||
+              !formik.touched
+            }
+          >
+            <span className="indicator-label">Submit</span>
+            {(formik.isSubmitting || isUserLoading) && (
+              <span className="indicator-progress">
+                Please wait...{" "}
+                <span className="spinner-border spinner-border-sm align-middle ms-2"></span>
+              </span>
+            )}
+          </button>
+        </div>
+        {/* end::Actions */}
+      </form>
+      {(formik.isSubmitting || isUserLoading) && <UsersListLoading />}
+    </>
+  );
+};
+
+export { UserEditModalForm };

src/app/modules/process/user-pending/user-edit-modal/UserEditModalFormWrapper.tsx

@@ -0,0 +1,42 @@
+import { useQuery } from "react-query";
+import { UserEditModalForm } from "./UserEditModalForm";
+import { isNotEmpty, QUERIES } from "../../../../../_digifi/helpers";
+import { useListView } from "../core/ListViewProvider";
+import { getUserById } from "../../core/_requests";
+
+const UserEditModalFormWrapper = () => {
+  const { itemIdForUpdate, setItemIdForUpdate } = useListView();
+  const enabledQuery: boolean = isNotEmpty(itemIdForUpdate);
+  const {
+    isLoading,
+    data: user,
+    error,
+  } = useQuery(
+    `${QUERIES.USERS_LIST}-user-${itemIdForUpdate}`,
+    () => {
+      return getUserById(itemIdForUpdate);
+    },
+    {
+      cacheTime: 0,
+      enabled: enabledQuery,
+      onError: (err) => {
+        setItemIdForUpdate(undefined);
+        console.error(err);
+      },
+    }
+  );
+
+  if (!itemIdForUpdate) {
+    return (
+      <UserEditModalForm isUserLoading={isLoading} user={{ id: undefined }} />
+    );
+  }
+
+  if (!isLoading && !error && user) {
+    return <UserEditModalForm isUserLoading={isLoading} user={user} />;
+  }
+
+  return null;
+};
+
+export { UserEditModalFormWrapper };

src/app/modules/process/user-pending/user-edit-modal/UserEditModalHeader.tsx

@@ -0,0 +1,27 @@
+import { KTIcon } from "../../../../../_digifi/helpers";
+import { useListView } from "../core/ListViewProvider";
+
+const UserEditModalHeader = () => {
+  const { setItemIdForUpdate } = useListView();
+
+  return (
+    <div className="modal-header">
+      {/* begin::Modal title */}
+      <h2 className="fw-bolder">Add User</h2>
+      {/* end::Modal title */}
+
+      {/* begin::Close */}
+      <div
+        className="btn btn-icon btn-sm btn-active-icon-primary"
+        data-kt-users-modal-action="close"
+        onClick={() => setItemIdForUpdate(undefined)}
+        style={{ cursor: "pointer" }}
+      >
+        <KTIcon iconName="cross" className="fs-1" />
+      </div>
+      {/* end::Close */}
+    </div>
+  );
+};
+
+export { UserEditModalHeader };

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

@@ -1,37 +0,0 @@
-import {ListViewProvider, useListView} from './core/ListViewProvider'
-import {QueryRequestProvider} from './core/QueryRequestProvider'
-import {QueryResponseProvider} from './core/QueryResponseProvider'
-import {UsersListHeader} from './components/header/UsersListHeader'
-import {UsersTable} from './table/UsersTable'
-import {UserEditModal} from './user-edit-modal/UserEditModal'
-import {KTCard} from '../../../../../_digifi/helpers'
-import { ToolbarWrapper } from '../../../../../_digifi/layout/components/toolbar'
-import { Content } from '../../../../../_digifi/layout/components/content'
-
-const UsersList = () => {
-  const {itemIdForUpdate} = useListView()
-  return (
-    <>
-      <KTCard>
-        <UsersListHeader />
-        <UsersTable />
-      </KTCard>
-      {itemIdForUpdate !== undefined && <UserEditModal />}
-    </>
-  )
-}
-
-const UsersListWrapper = () => (
-  <QueryRequestProvider>
-    <QueryResponseProvider>
-      <ListViewProvider>
-        <ToolbarWrapper />
-        <Content>
-          <UsersList />
-        </Content>
-      </ListViewProvider>
-    </QueryResponseProvider>
-  </QueryRequestProvider>
-)
-
-export {UsersListWrapper}

src/app/modules/process/user-pending/users-list/components/header/UsersListFilter.tsx

@@ -1,133 +0,0 @@
-import {useEffect, useState} from 'react'
-import {MenuComponent} from '../../../../../../../_digifi/assets/ts/components'
-import {initialQueryState, KTIcon} from '../../../../../../../_digifi/helpers'
-import {useQueryRequest} from '../../core/QueryRequestProvider'
-import {useQueryResponse} from '../../core/QueryResponseProvider'
-
-const UsersListFilter = () => {
-  const {updateState} = useQueryRequest()
-  const {isLoading} = useQueryResponse()
-  const [role, setRole] = useState<string | undefined>()
-  const [lastLogin, setLastLogin] = useState<string | undefined>()
-
-  useEffect(() => {
-    MenuComponent.reinitialization()
-  }, [])
-
-  const resetData = () => {
-    updateState({filter: undefined, ...initialQueryState})
-  }
-
-  const filterData = () => {
-    updateState({
-      filter: {role, last_login: lastLogin},
-      ...initialQueryState,
-    })
-  }
-
-  return (
-    <>
-      {/* begin::Filter Button */}
-      <button
-        disabled={isLoading}
-        type='button'
-        className='btn btn-light-primary me-3'
-        data-kt-menu-trigger='click'
-        data-kt-menu-placement='bottom-end'
-      >
-        <KTIcon iconName='filter' className='fs-2' />
-        Filter
-      </button>
-      {/* end::Filter Button */}
-      {/* begin::SubMenu */}
-      <div className='menu menu-sub menu-sub-dropdown w-300px w-md-325px' data-kt-menu='true'>
-        {/* begin::Header */}
-        <div className='px-7 py-5'>
-          <div className='fs-5 text-gray-900 fw-bolder'>Filter Options</div>
-        </div>
-        {/* end::Header */}
-
-        {/* begin::Separator */}
-        <div className='separator border-gray-200'></div>
-        {/* end::Separator */}
-
-        {/* begin::Content */}
-        <div className='px-7 py-5' data-kt-user-table-filter='form'>
-          {/* begin::Input group */}
-          <div className='mb-10'>
-            <label className='form-label fs-6 fw-bold'>Role:</label>
-            <select
-              className='form-select form-select-solid fw-bolder'
-              data-kt-select2='true'
-              data-placeholder='Select option'
-              data-allow-clear='true'
-              data-kt-user-table-filter='role'
-              data-hide-search='true'
-              onChange={(e) => setRole(e.target.value)}
-              value={role}
-            >
-              <option value=''></option>
-              <option value='Administrator'>Administrator</option>
-              <option value='Analyst'>Analyst</option>
-              <option value='Developer'>Developer</option>
-              <option value='Support'>Support</option>
-              <option value='Trial'>Trial</option>
-            </select>
-          </div>
-          {/* end::Input group */}
-
-          {/* begin::Input group */}
-          <div className='mb-10'>
-            <label className='form-label fs-6 fw-bold'>Last login:</label>
-            <select
-              className='form-select form-select-solid fw-bolder'
-              data-kt-select2='true'
-              data-placeholder='Select option'
-              data-allow-clear='true'
-              data-kt-user-table-filter='two-step'
-              data-hide-search='true'
-              onChange={(e) => setLastLogin(e.target.value)}
-              value={lastLogin}
-            >
-              <option value=''></option>
-              <option value='Yesterday'>Yesterday</option>
-              <option value='20 mins ago'>20 mins ago</option>
-              <option value='5 hours ago'>5 hours ago</option>
-              <option value='2 days ago'>2 days ago</option>
-            </select>
-          </div>
-          {/* end::Input group */}
-
-          {/* begin::Actions */}
-          <div className='d-flex justify-content-end'>
-            <button
-              type='button'
-              disabled={isLoading}
-              onClick={filterData}
-              className='btn btn-light btn-active-light-primary fw-bold me-2 px-6'
-              data-kt-menu-dismiss='true'
-              data-kt-user-table-filter='reset'
-            >
-              Reset
-            </button>
-            <button
-              disabled={isLoading}
-              type='button'
-              onClick={resetData}
-              className='btn btn-primary fw-bold px-6'
-              data-kt-menu-dismiss='true'
-              data-kt-user-table-filter='filter'
-            >
-              Apply
-            </button>
-          </div>
-          {/* end::Actions */}
-        </div>
-        {/* end::Content */}
-      </div>
-      {/* end::SubMenu */}
-    </>
-  )
-}
-
-export {UsersListFilter}

src/app/modules/process/user-pending/users-list/components/header/UsersListSearchComponent.tsx

@@ -1,45 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-
-import {useEffect, useState} from 'react'
-import {initialQueryState, KTIcon, useDebounce} from '../../../../../../../_digifi/helpers'
-import {useQueryRequest} from '../../core/QueryRequestProvider'
-
-const UsersListSearchComponent = () => {
-  const {updateState} = useQueryRequest()
-  const [searchTerm, setSearchTerm] = useState<string>('')
-  // Debounce search term so that it only gives us latest value ...
-  // ... if searchTerm has not been updated within last 500ms.
-  // The goal is to only have the API call fire when user stops typing ...
-  // ... so that we aren't hitting our API rapidly.
-  const debouncedSearchTerm = useDebounce(searchTerm, 150)
-  // Effect for API call
-  useEffect(
-    () => {
-      if (debouncedSearchTerm !== undefined && searchTerm !== undefined) {
-        updateState({search: debouncedSearchTerm, ...initialQueryState})
-      }
-    },
-    [debouncedSearchTerm] // Only call effect if debounced search term changes
-    // More details about useDebounce: https://usehooks.com/useDebounce/
-  )
-
-  return (
-    <div className='card-title'>
-      {/* begin::Search */}
-      <div className='d-flex align-items-center position-relative my-1'>
-        <KTIcon iconName='magnifier' className='fs-1 position-absolute ms-6' />
-        <input
-          type='text'
-          data-kt-user-table-filter='search'
-          className='form-control form-control-solid w-250px ps-14'
-          placeholder='Search user'
-          value={searchTerm}
-          onChange={(e) => setSearchTerm(e.target.value)}
-        />
-      </div>
-      {/* end::Search */}
-    </div>
-  )
-}
-
-export {UsersListSearchComponent}

src/app/modules/process/user-pending/users-list/components/pagination/UsersListPagination.tsx

@@ -1,156 +0,0 @@
-
-import clsx from 'clsx'
-import {useQueryResponseLoading, useQueryResponsePagination} from '../../core/QueryResponseProvider'
-import {useQueryRequest} from '../../core/QueryRequestProvider'
-import {PaginationState} from '../../../../../../../_digifi/helpers'
-import {useMemo} from 'react'
-
-const mappedLabel = (label: string): string => {
-  if (label === '« Previous') {
-    return 'Previous'
-  }
-
-  if (label === 'Next »') {
-    return 'Next'
-  }
-
-  return label
-}
-
-const UsersListPagination = () => {
-  const pagination = useQueryResponsePagination()
-  const isLoading = useQueryResponseLoading()
-  const {updateState} = useQueryRequest()
-  const updatePage = (page: number | undefined | null) => {
-    if (!page || isLoading || pagination.page === page) {
-      return
-    }
-
-    updateState({page, items_per_page: pagination.items_per_page || 10})
-  }
-
-  const PAGINATION_PAGES_COUNT = 5
-  const sliceLinks = (pagination?: PaginationState) => {
-    if (!pagination?.links?.length) {
-      return []
-    }
-
-    const scopedLinks = [...pagination.links]
-
-    let pageLinks: Array<{
-      label: string
-      active: boolean
-      url: string | null
-      page: number | null
-    }> = []
-    const previousLink: {label: string; active: boolean; url: string | null; page: number | null} =
-      scopedLinks.shift()!
-    const nextLink: {label: string; active: boolean; url: string | null; page: number | null} =
-      scopedLinks.pop()!
-
-    const halfOfPagesCount = Math.floor(PAGINATION_PAGES_COUNT / 2)
-
-    pageLinks.push(previousLink)
-
-    if (
-      pagination.page <= Math.round(PAGINATION_PAGES_COUNT / 2) ||
-      scopedLinks.length <= PAGINATION_PAGES_COUNT
-    ) {
-      pageLinks = [...pageLinks, ...scopedLinks.slice(0, PAGINATION_PAGES_COUNT)]
-    }
-
-    if (
-      pagination.page > scopedLinks.length - halfOfPagesCount &&
-      scopedLinks.length > PAGINATION_PAGES_COUNT
-    ) {
-      pageLinks = [
-        ...pageLinks,
-        ...scopedLinks.slice(scopedLinks.length - PAGINATION_PAGES_COUNT, scopedLinks.length),
-      ]
-    }
-
-    if (
-      !(
-        pagination.page <= Math.round(PAGINATION_PAGES_COUNT / 2) ||
-        scopedLinks.length <= PAGINATION_PAGES_COUNT
-      ) &&
-      !(pagination.page > scopedLinks.length - halfOfPagesCount)
-    ) {
-      pageLinks = [
-        ...pageLinks,
-        ...scopedLinks.slice(
-          pagination.page - 1 - halfOfPagesCount,
-          pagination.page + halfOfPagesCount
-        ),
-      ]
-    }
-
-    pageLinks.push(nextLink)
-
-    return pageLinks
-  }
-
-  const paginationLinks = useMemo(() => sliceLinks(pagination), [pagination])
-
-  return (
-    <div className='row'>
-      <div className='col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start'></div>
-      <div className='col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end'>
-        <div id='kt_table_users_paginate'>
-          <ul className='pagination'>
-            <li
-              className={clsx('page-item', {
-                disabled: isLoading || pagination.page === 1,
-              })}
-            >
-              <a onClick={() => updatePage(1)} style={{cursor: 'pointer'}} className='page-link'>
-                First
-              </a>
-            </li>
-            {paginationLinks
-              ?.map((link) => {
-                return {...link, label: mappedLabel(link.label)}
-              })
-              .map((link) => (
-                <li
-                  key={link.label}
-                  className={clsx('page-item', {
-                    active: pagination.page === link.page,
-                    disabled: isLoading,
-                    previous: link.label === 'Previous',
-                    next: link.label === 'Next',
-                  })}
-                >
-                  <a
-                    className={clsx('page-link', {
-                      'page-text': link.label === 'Previous' || link.label === 'Next',
-                      'me-5': link.label === 'Previous',
-                    })}
-                    onClick={() => updatePage(link.page)}
-                    style={{cursor: 'pointer'}}
-                  >
-                    {mappedLabel(link.label)}
-                  </a>
-                </li>
-              ))}
-            <li
-              className={clsx('page-item', {
-                disabled: isLoading || pagination.page === (pagination.links?.length || 3) - 2,
-              })}
-            >
-              <a
-                onClick={() => updatePage((pagination.links?.length || 3) - 2)}
-                style={{cursor: 'pointer'}}
-                className='page-link'
-              >
-                Last
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export {UsersListPagination}

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

@@ -1,51 +0,0 @@
-/* eslint-disable react-refresh/only-export-components */
-import {FC, useState, createContext, useContext, useMemo} from 'react'
-import {
-  ID,
-  calculatedGroupingIsDisabled,
-  calculateIsAllDataSelected,
-  groupingOnSelect,
-  initialListView,
-  ListViewContextProps,
-  groupingOnSelectAll,
-  WithChildren,
-} from '../../../../../../_digifi/helpers'
-import {useQueryResponse, useQueryResponseData} from './QueryResponseProvider'
-
-const ListViewContext = createContext<ListViewContextProps>(initialListView)
-
-const ListViewProvider: FC<WithChildren> = ({children}) => {
-  const [selected, setSelected] = useState<Array<ID>>(initialListView.selected)
-  const [itemIdForUpdate, setItemIdForUpdate] = useState<ID>(initialListView.itemIdForUpdate)
-  const {isLoading} = useQueryResponse()
-  const data = useQueryResponseData()
-  const disabled = useMemo(() => calculatedGroupingIsDisabled(isLoading, data), [isLoading, data])
-  const isAllSelected = useMemo(() => calculateIsAllDataSelected(data, selected), [data, selected])
-
-  return (
-    <ListViewContext.Provider
-      value={{
-        selected,
-        itemIdForUpdate,
-        setItemIdForUpdate,
-        disabled,
-        isAllSelected,
-        onSelect: (id: ID) => {
-          groupingOnSelect(id, selected, setSelected)
-        },
-        onSelectAll: () => {
-          groupingOnSelectAll(isAllSelected, setSelected, data)
-        },
-        clearSelected: () => {
-          setSelected([])
-        },
-      }}
-    >
-      {children}
-    </ListViewContext.Provider>
-  )
-}
-
-const useListView = () => useContext(ListViewContext)
-
-export {ListViewProvider, useListView}

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

@@ -1,28 +0,0 @@
-/* eslint-disable react-refresh/only-export-components */
-import {FC, useState, createContext, useContext} from 'react'
-import {
-  QueryState,
-  QueryRequestContextProps,
-  initialQueryRequest,
-  WithChildren,
-} from '../../../../../../_digifi/helpers'
-
-const QueryRequestContext = createContext<QueryRequestContextProps>(initialQueryRequest)
-
-const QueryRequestProvider: FC<WithChildren> = ({children}) => {
-  const [state, setState] = useState<QueryState>(initialQueryRequest.state)
-
-  const updateState = (updates: Partial<QueryState>) => {
-    const updatedState = {...state, ...updates} as QueryState
-    setState(updatedState)
-  }
-
-  return (
-    <QueryRequestContext.Provider value={{state, updateState}}>
-      {children}
-    </QueryRequestContext.Provider>
-  )
-}
-
-const useQueryRequest = () => useContext(QueryRequestContext)
-export {QueryRequestProvider, useQueryRequest}

src/app/modules/process/user-pending/users-list/core/_models.ts

@@ -1,42 +0,0 @@
-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/user-pending/users-list/core/_requests.ts

@@ -1,59 +0,0 @@
-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 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,
-  deleteUser,
-  deleteSelectedUsers,
-  getUserById,
-  createUser,
-  updateUser,
-};

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

@@ -1,12 +0,0 @@
-import {FC} from 'react'
-import { NewDateTimeFormatter } from '../../../../../../../_digifi/lib/NewDateTimeFormatter'
-
-type Props = {
-  added?: string
-}
-
-const AddedCell: FC<Props> = ({added}) => (
-  <div className='badge badge-light fw-bolder'>{NewDateTimeFormatter((added))}</div>
-)
-
-export {AddedCell}

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

@@ -1,76 +0,0 @@
-
-import {FC, useEffect} from 'react'
-import {useMutation, useQueryClient} from 'react-query'
-import {MenuComponent} from '../../../../../../../_digifi/assets/ts/components'
-import {ID, KTIcon, QUERIES} from '../../../../../../../_digifi/helpers'
-import {useListView} from '../../core/ListViewProvider'
-import {useQueryResponse} from '../../core/QueryResponseProvider'
-import {deleteUser} from '../../core/_requests'
-
-type Props = {
-  id: ID
-}
-
-const UserActionsCell: FC<Props> = ({id}) => {
-  const {setItemIdForUpdate} = useListView()
-  const {query} = useQueryResponse()
-  const queryClient = useQueryClient()
-
-  useEffect(() => {
-    MenuComponent.reinitialization()
-  }, [])
-
-  const openEditModal = () => {
-    setItemIdForUpdate(id)
-  }
-
-  const deleteItem = useMutation(() => deleteUser(id), {
-    // 💡 response of the mutation is passed to onSuccess
-    onSuccess: () => {
-      // ✅ update detail view directly
-      queryClient.invalidateQueries([`${QUERIES.USERS_LIST}-${query}`])
-    },
-  })
-
-  return (
-    <>
-      <a
-        href='#'
-        className='btn btn-light btn-active-light-primary btn-sm'
-        data-kt-menu-trigger='click'
-        data-kt-menu-placement='bottom-end'
-      >
-        Actions
-        <KTIcon iconName='down' className='fs-5 m-0' />
-      </a>
-      {/* begin::Menu */}
-      <div
-        className='menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-125px py-4'
-        data-kt-menu='true'
-      >
-        {/* begin::Menu item */}
-        <div className='menu-item px-3'>
-          <a className='menu-link px-3' onClick={openEditModal}>
-            Edit
-          </a>
-        </div>
-        {/* end::Menu item */}
-
-        {/* begin::Menu item */}
-        <div className='menu-item px-3'>
-          <a
-            className='menu-link px-3'
-            data-kt-users-table-filter='delete_row'
-            onClick={async () => await deleteItem.mutateAsync()}
-          >
-            Delete
-          </a>
-        </div>
-        {/* end::Menu item */}
-      </div>
-      {/* end::Menu */}
-    </>
-  )
-}
-
-export {UserActionsCell}

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

@@ -1,42 +0,0 @@
-
-import clsx from 'clsx'
-import {FC} from 'react'
-import {toAbsoluteUrl} from '../../../../../../../_digifi/helpers'
-import {User} from '../../core/_models'
-
-type Props = {
-  user: User
-}
-
-const UserInfoCell: FC<Props> = ({user}) => (
-  <div className='d-flex align-items-center'>
-    {/* begin:: Avatar */}
-    <div className='symbol symbol-circle symbol-50px overflow-hidden me-3'>
-      <a href='#'>
-        {user.avatar ? (
-          <div className='symbol-label'>
-            <img src={toAbsoluteUrl(`media/${user.avatar}`)} alt={user.name} className='w-100' />
-          </div>
-        ) : (
-          <div
-            className={clsx(
-              'symbol-label fs-3',
-              `bg-light-${user.initials?.state}`,
-              `text-${user.initials?.state}`
-            )}
-          >
-            {user.firstname?.substring(0,1).toUpperCase()} {user.lastname?.substring(0,1).toUpperCase()}
-          </div>
-        )}
-      </a>
-    </div>
-    <div className='d-flex flex-column'>
-      <a href='#' className='text-gray-800 text-hover-primary mb-1'>
-      {user.firstname} {user.lastname}
-      </a>
-      <span>{user.email}</span>
-    </div>
-  </div>
-)
-
-export {UserInfoCell}

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

@@ -1,26 +0,0 @@
-import {FC, useMemo} from 'react'
-import {ID} from '../../../../../../../_digifi/helpers'
-import {useListView} from '../../core/ListViewProvider'
-
-type Props = {
-  id: ID
-}
-
-const UserSelectionCell: FC<Props> = ({id}) => {
-  const {selected, onSelect} = useListView()
-  const isSelected = useMemo(() => selected.includes(id), [id, selected])
-  return (
-    <div className='form-check form-check-custom form-check-solid'>
-      <input
-        className='form-check-input'
-        type='checkbox'
-        data-kt-check={isSelected}
-        data-kt-check-target='#kt_table_users .form-check-input'
-        checked={isSelected}
-        onChange={() => onSelect(id)}
-      />
-    </div>
-  )
-}
-
-export {UserSelectionCell}

src/app/modules/process/user-pending/users-list/user-edit-modal/UserEditModalForm.tsx

@@ -1,407 +0,0 @@
-import {FC, useState} from 'react'
-import * as Yup from 'yup'
-import {useFormik} from 'formik'
-import {isNotEmpty, toAbsoluteUrl} from '../../../../../../_digifi/helpers'
-import {initialUser, User} from '../core/_models'
-import clsx from 'clsx'
-import {useListView} from '../core/ListViewProvider'
-import {UsersListLoading} from '../components/loading/UsersListLoading'
-import {createUser, updateUser} from '../core/_requests'
-import {useQueryResponse} from '../core/QueryResponseProvider'
-
-type Props = {
-  isUserLoading: boolean
-  user: User
-}
-
-const editUserSchema = Yup.object().shape({
-  email: Yup.string()
-    .email('Wrong email format')
-    .min(3, 'Minimum 3 symbols')
-    .max(50, 'Maximum 50 symbols')
-    .required('Email is required'),
-  name: Yup.string()
-    .min(3, 'Minimum 3 symbols')
-    .max(50, 'Maximum 50 symbols')
-    .required('Name is required'),
-})
-
-const UserEditModalForm: FC<Props> = ({user, isUserLoading}) => {
-  const {setItemIdForUpdate} = useListView()
-  const {refetch} = useQueryResponse()
-
-  const [userForEdit] = useState<User>({
-    ...user,
-    avatar: user.avatar || initialUser.avatar,
-    role: user.role || initialUser.role,
-    position: user.position || initialUser.position,
-    name: user.name || initialUser.name,
-    email: user.email || initialUser.email,
-  })
-
-  const cancel = (withRefresh?: boolean) => {
-    if (withRefresh) {
-      refetch()
-    }
-    setItemIdForUpdate(undefined)
-  }
-
-  const blankImg = toAbsoluteUrl('media/svg/avatars/blank.svg')
-  const userAvatarImg = toAbsoluteUrl(`media/${userForEdit.avatar}`)
-
-  const formik = useFormik({
-    initialValues: userForEdit,
-    validationSchema: editUserSchema,
-    onSubmit: async (values, {setSubmitting}) => {
-      setSubmitting(true)
-      try {
-        if (isNotEmpty(values.id)) {
-          await updateUser(values)
-        } else {
-          await createUser(values)
-        }
-      } catch (ex) {
-        console.error(ex)
-      } finally {
-        setSubmitting(true)
-        cancel(true)
-      }
-    },
-  })
-
-  return (
-    <>
-      <form id='kt_modal_add_user_form' className='form' onSubmit={formik.handleSubmit} noValidate>
-        {/* begin::Scroll */}
-        <div
-          className='d-flex flex-column scroll-y me-n7 pe-7'
-          id='kt_modal_add_user_scroll'
-          data-kt-scroll='true'
-          data-kt-scroll-activate='{default: false, lg: true}'
-          data-kt-scroll-max-height='auto'
-          data-kt-scroll-dependencies='#kt_modal_add_user_header'
-          data-kt-scroll-wrappers='#kt_modal_add_user_scroll'
-          data-kt-scroll-offset='300px'
-        >
-          {/* begin::Input group */}
-          <div className='fv-row mb-7'>
-            {/* begin::Label */}
-            <label className='d-block fw-bold fs-6 mb-5'>Avatar</label>
-            {/* end::Label */}
-
-            {/* begin::Image input */}
-            <div
-              className='image-input image-input-outline'
-              data-kt-image-input='true'
-              style={{backgroundImage: `url('${blankImg}')`}}
-            >
-              {/* begin::Preview existing avatar */}
-              <div
-                className='image-input-wrapper w-125px h-125px'
-                style={{backgroundImage: `url('${userAvatarImg}')`}}
-              ></div>
-              {/* end::Preview existing avatar */}
-
-              {/* begin::Label */}
-              {/* <label
-              className='btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow'
-              data-kt-image-input-action='change'
-              data-bs-toggle='tooltip'
-              title='Change avatar'
-            >
-              <i className='bi bi-pencil-fill fs-7'></i>
-
-              <input type='file' name='avatar' accept='.png, .jpg, .jpeg' />
-              <input type='hidden' name='avatar_remove' />
-            </label> */}
-              {/* end::Label */}
-
-              {/* begin::Cancel */}
-              {/* <span
-              className='btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow'
-              data-kt-image-input-action='cancel'
-              data-bs-toggle='tooltip'
-              title='Cancel avatar'
-            >
-              <i className='bi bi-x fs-2'></i>
-            </span> */}
-              {/* end::Cancel */}
-
-              {/* begin::Remove */}
-              {/* <span
-              className='btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow'
-              data-kt-image-input-action='remove'
-              data-bs-toggle='tooltip'
-              title='Remove avatar'
-            >
-              <i className='bi bi-x fs-2'></i>
-            </span> */}
-              {/* end::Remove */}
-            </div>
-            {/* end::Image input */}
-
-            {/* begin::Hint */}
-            {/* <div className='form-text'>Allowed file types: png, jpg, jpeg.</div> */}
-            {/* end::Hint */}
-          </div>
-          {/* end::Input group */}
-
-          {/* begin::Input group */}
-          <div className='fv-row mb-7'>
-            {/* begin::Label */}
-            <label className='required fw-bold fs-6 mb-2'>Full Name</label>
-            {/* end::Label */}
-
-            {/* begin::Input */}
-            <input
-              placeholder='Full name'
-              {...formik.getFieldProps('name')}
-              type='text'
-              name='name'
-              className={clsx(
-                'form-control form-control-solid mb-3 mb-lg-0',
-                {'is-invalid': formik.touched.name && formik.errors.name},
-                {
-                  'is-valid': formik.touched.name && !formik.errors.name,
-                }
-              )}
-              autoComplete='off'
-              disabled={formik.isSubmitting || isUserLoading}
-            />
-            {formik.touched.name && formik.errors.name && (
-              <div className='fv-plugins-message-container'>
-                <div className='fv-help-block'>
-                  <span role='alert'>{formik.errors.name}</span>
-                </div>
-              </div>
-            )}
-            {/* end::Input */}
-          </div>
-          {/* end::Input group */}
-
-          {/* begin::Input group */}
-          <div className='fv-row mb-7'>
-            {/* begin::Label */}
-            <label className='required fw-bold fs-6 mb-2'>Email</label>
-            {/* end::Label */}
-
-            {/* begin::Input */}
-            <input
-              placeholder='Email'
-              {...formik.getFieldProps('email')}
-              className={clsx(
-                'form-control form-control-solid mb-3 mb-lg-0',
-                {'is-invalid': formik.touched.email && formik.errors.email},
-                {
-                  'is-valid': formik.touched.email && !formik.errors.email,
-                }
-              )}
-              type='email'
-              name='email'
-              autoComplete='off'
-              disabled={formik.isSubmitting || isUserLoading}
-            />
-            {/* end::Input */}
-            {formik.touched.email && formik.errors.email && (
-              <div className='fv-plugins-message-container'>
-                <span role='alert'>{formik.errors.email}</span>
-              </div>
-            )}
-          </div>
-          {/* end::Input group */}
-
-          {/* begin::Input group */}
-          <div className='mb-7'>
-            {/* begin::Label */}
-            <label className='required fw-bold fs-6 mb-5'>Role</label>
-            {/* end::Label */}
-            {/* begin::Roles */}
-            {/* begin::Input row */}
-            <div className='d-flex fv-row'>
-              {/* begin::Radio */}
-              <div className='form-check form-check-custom form-check-solid'>
-                {/* begin::Input */}
-                <input
-                  className='form-check-input me-3'
-                  {...formik.getFieldProps('role')}
-                  name='role'
-                  type='radio'
-                  value='Administrator'
-                  id='kt_modal_update_role_option_0'
-                  checked={formik.values.role === 'Administrator'}
-                  disabled={formik.isSubmitting || isUserLoading}
-                />
-
-                {/* end::Input */}
-                {/* begin::Label */}
-                <label className='form-check-label' htmlFor='kt_modal_update_role_option_0'>
-                  <div className='fw-bolder text-gray-800'>Administrator</div>
-                  <div className='text-gray-600'>
-                    Best for business owners and company administrators
-                  </div>
-                </label>
-                {/* end::Label */}
-              </div>
-              {/* end::Radio */}
-            </div>
-            {/* end::Input row */}
-            <div className='separator separator-dashed my-5'></div>
-            {/* begin::Input row */}
-            <div className='d-flex fv-row'>
-              {/* begin::Radio */}
-              <div className='form-check form-check-custom form-check-solid'>
-                {/* begin::Input */}
-                <input
-                  className='form-check-input me-3'
-                  {...formik.getFieldProps('role')}
-                  name='role'
-                  type='radio'
-                  value='Developer'
-                  id='kt_modal_update_role_option_1'
-                  checked={formik.values.role === 'Developer'}
-                  disabled={formik.isSubmitting || isUserLoading}
-                />
-                {/* end::Input */}
-                {/* begin::Label */}
-                <label className='form-check-label' htmlFor='kt_modal_update_role_option_1'>
-                  <div className='fw-bolder text-gray-800'>Developer</div>
-                  <div className='text-gray-600'>
-                    Best for developers or people primarily using the API
-                  </div>
-                </label>
-                {/* end::Label */}
-              </div>
-              {/* end::Radio */}
-            </div>
-            {/* end::Input row */}
-            <div className='separator separator-dashed my-5'></div>
-            {/* begin::Input row */}
-            <div className='d-flex fv-row'>
-              {/* begin::Radio */}
-              <div className='form-check form-check-custom form-check-solid'>
-                {/* begin::Input */}
-                <input
-                  className='form-check-input me-3'
-                  {...formik.getFieldProps('role')}
-                  name='role'
-                  type='radio'
-                  value='Analyst'
-                  id='kt_modal_update_role_option_2'
-                  checked={formik.values.role === 'Analyst'}
-                  disabled={formik.isSubmitting || isUserLoading}
-                />
-
-                {/* end::Input */}
-                {/* begin::Label */}
-                <label className='form-check-label' htmlFor='kt_modal_update_role_option_2'>
-                  <div className='fw-bolder text-gray-800'>Analyst</div>
-                  <div className='text-gray-600'>
-                    Best for people who need full access to analytics data, but don't need to update
-                    business settings
-                  </div>
-                </label>
-                {/* end::Label */}
-              </div>
-              {/* end::Radio */}
-            </div>
-            {/* end::Input row */}
-            <div className='separator separator-dashed my-5'></div>
-            {/* begin::Input row */}
-            <div className='d-flex fv-row'>
-              {/* begin::Radio */}
-              <div className='form-check form-check-custom form-check-solid'>
-                {/* begin::Input */}
-                <input
-                  className='form-check-input me-3'
-                  {...formik.getFieldProps('role')}
-                  name='role'
-                  type='radio'
-                  value='Support'
-                  id='kt_modal_update_role_option_3'
-                  checked={formik.values.role === 'Support'}
-                  disabled={formik.isSubmitting || isUserLoading}
-                />
-                {/* end::Input */}
-                {/* begin::Label */}
-                <label className='form-check-label' htmlFor='kt_modal_update_role_option_3'>
-                  <div className='fw-bolder text-gray-800'>Support</div>
-                  <div className='text-gray-600'>
-                    Best for employees who regularly refund payments and respond to disputes
-                  </div>
-                </label>
-                {/* end::Label */}
-              </div>
-              {/* end::Radio */}
-            </div>
-            {/* end::Input row */}
-            <div className='separator separator-dashed my-5'></div>
-            {/* begin::Input row */}
-            <div className='d-flex fv-row'>
-              {/* begin::Radio */}
-              <div className='form-check form-check-custom form-check-solid'>
-                {/* begin::Input */}
-                <input
-                  className='form-check-input me-3'
-                  {...formik.getFieldProps('role')}
-                  name='role'
-                  type='radio'
-                  id='kt_modal_update_role_option_4'
-                  value='Trial'
-                  checked={formik.values.role === 'Trial'}
-                  disabled={formik.isSubmitting || isUserLoading}
-                />
-                {/* end::Input */}
-                {/* begin::Label */}
-                <label className='form-check-label' htmlFor='kt_modal_update_role_option_4'>
-                  <div className='fw-bolder text-gray-800'>Trial</div>
-                  <div className='text-gray-600'>
-                    Best for people who need to preview content data, but don't need to make any
-                    updates
-                  </div>
-                </label>
-                {/* end::Label */}
-              </div>
-              {/* end::Radio */}
-            </div>
-            {/* end::Input row */}
-            {/* end::Roles */}
-          </div>
-          {/* end::Input group */}
-        </div>
-        {/* end::Scroll */}
-
-        {/* begin::Actions */}
-        <div className='text-center pt-15'>
-          <button
-            type='reset'
-            onClick={() => cancel()}
-            className='btn btn-light me-3'
-            data-kt-users-modal-action='cancel'
-            disabled={formik.isSubmitting || isUserLoading}
-          >
-            Discard
-          </button>
-
-          <button
-            type='submit'
-            className='btn btn-primary'
-            data-kt-users-modal-action='submit'
-            disabled={isUserLoading || formik.isSubmitting || !formik.isValid || !formik.touched}
-          >
-            <span className='indicator-label'>Submit</span>
-            {(formik.isSubmitting || isUserLoading) && (
-              <span className='indicator-progress'>
-                Please wait...{' '}
-                <span className='spinner-border spinner-border-sm align-middle ms-2'></span>
-              </span>
-            )}
-          </button>
-        </div>
-        {/* end::Actions */}
-      </form>
-      {(formik.isSubmitting || isUserLoading) && <UsersListLoading />}
-    </>
-  )
-}
-
-export {UserEditModalForm}

src/app/modules/process/user-pending/users-list/user-edit-modal/UserEditModalFormWrapper.tsx

@@ -1,40 +0,0 @@
-import {useQuery} from 'react-query'
-import {UserEditModalForm} from './UserEditModalForm'
-import {isNotEmpty, QUERIES} from '../../../../../../_digifi/helpers'
-import {useListView} from '../core/ListViewProvider'
-import {getUserById} from '../core/_requests'
-
-const UserEditModalFormWrapper = () => {
-  const {itemIdForUpdate, setItemIdForUpdate} = useListView()
-  const enabledQuery: boolean = isNotEmpty(itemIdForUpdate)
-  const {
-    isLoading,
-    data: user,
-    error,
-  } = useQuery(
-    `${QUERIES.USERS_LIST}-user-${itemIdForUpdate}`,
-    () => {
-      return getUserById(itemIdForUpdate)
-    },
-    {
-      cacheTime: 0,
-      enabled: enabledQuery,
-      onError: (err) => {
-        setItemIdForUpdate(undefined)
-        console.error(err)
-      },
-    }
-  )
-
-  if (!itemIdForUpdate) {
-    return <UserEditModalForm isUserLoading={isLoading} user={{id: undefined}} />
-  }
-
-  if (!isLoading && !error && user) {
-    return <UserEditModalForm isUserLoading={isLoading} user={user} />
-  }
-
-  return null
-}
-
-export {UserEditModalFormWrapper}

src/app/modules/process/user-pending/users-list/user-edit-modal/UserEditModalHeader.tsx

@@ -1,27 +0,0 @@
-import {KTIcon} from '../../../../../../_digifi/helpers'
-import {useListView} from '../core/ListViewProvider'
-
-const UserEditModalHeader = () => {
-  const {setItemIdForUpdate} = useListView()
-
-  return (
-    <div className='modal-header'>
-      {/* begin::Modal title */}
-      <h2 className='fw-bolder'>Add User</h2>
-      {/* end::Modal title */}
-
-      {/* begin::Close */}
-      <div
-        className='btn btn-icon btn-sm btn-active-icon-primary'
-        data-kt-users-modal-action='close'
-        onClick={() => setItemIdForUpdate(undefined)}
-        style={{cursor: 'pointer'}}
-      >
-        <KTIcon iconName='cross' className='fs-1' />
-      </div>
-      {/* end::Close */}
-    </div>
-  )
-}
-
-export {UserEditModalHeader}

src/app/modules/process/user-ready/UsersList.tsx

@@ -0,0 +1,37 @@
+import { ListViewProvider, useListView } from "./core/ListViewProvider";
+import { QueryRequestProvider } from "./core/QueryRequestProvider";
+import { QueryResponseProvider } from "./core/QueryResponseProvider";
+import { UsersListHeader } from "./components/header/UsersListHeader";
+import { UsersTable } from "./table/UsersTable";
+import { UserEditModal } from "./user-edit-modal/UserEditModal";
+import { KTCard } from "../../../../_digifi/helpers";
+import { ToolbarWrapper } from "../../../../_digifi/layout/components/toolbar";
+import { Content } from "../../../../_digifi/layout/components/content";
+
+const UsersList = () => {
+  const { itemIdForUpdate } = useListView();
+  return (
+    <>
+      <KTCard>
+        <UsersListHeader />
+        <UsersTable />
+      </KTCard>
+      {itemIdForUpdate !== undefined && <UserEditModal />}
+    </>
+  );
+};
+
+const UsersListWrapper = () => (
+  <QueryRequestProvider>
+    <QueryResponseProvider>
+      <ListViewProvider>
+        <ToolbarWrapper />
+        <Content>
+          <UsersList />
+        </Content>
+      </ListViewProvider>
+    </QueryResponseProvider>
+  </QueryRequestProvider>
+);
+
+export { UsersListWrapper };

src/app/modules/process/user-ready/UsersPage.tsx

@@ -1,39 +0,0 @@
-import {Route, Routes, Outlet, Navigate} from 'react-router-dom'
-import {PageLink, PageTitle} from '../../../../_digifi/layout/core'
-import {UsersListWrapper} from './users-list/UsersList'
-
-const usersBreadcrumbs: Array<PageLink> = [
-  {
-    title: 'User Management',
-    path: '/apps/user-management/users',
-    isSeparator: false,
-    isActive: false,
-  },
-  {
-    title: '',
-    path: '',
-    isSeparator: true,
-    isActive: false,
-  },
-]
-
-const UsersPage = () => {
-  return (
-    <Routes>
-      <Route element={<Outlet />}>
-        <Route
-          path='users'
-          element={
-            <>
-              <PageTitle breadcrumbs={usersBreadcrumbs}>Users list</PageTitle>
-              <UsersListWrapper />
-            </>
-          }
-        />
-      </Route>
-      <Route index element={<Navigate to='/apps/user-management/users' />} />
-    </Routes>
-  )
-}
-
-export default UsersPage

src/app/modules/process/user-ready/components/header/UserListToolbar.tsx

@@ -1,15 +1,18 @@
-import {KTIcon} from '../../../../../../../_digifi/helpers'
-import {useListView} from '../../core/ListViewProvider'
-import {UsersListFilter} from './UsersListFilter'
+import { KTIcon } from "../../../../../../_digifi/helpers";
+import { useListView } from "../../core/ListViewProvider";
+import { UsersListFilter } from "./UsersListFilter";
 
 const UsersListToolbar = () => {
-  const {setItemIdForUpdate} = useListView()
+  const { setItemIdForUpdate } = useListView();
   const openAddUserModal = () => {
-    setItemIdForUpdate(null)
-  }
+    setItemIdForUpdate(null);
+  };
 
   return (
-    <div className='d-flex justify-content-end' data-kt-user-table-toolbar='base'>
+    <div
+      className="d-flex justify-content-end"
+      data-kt-user-table-toolbar="base"
+    >
       <UsersListFilter />
 
       {/* begin::Export */}
@@ -26,7 +29,7 @@ const UsersListToolbar = () => {
       </button> */}
       {/* end::Add user */}
     </div>
-  )
-}
+  );
+};
 
-export {UsersListToolbar}
+export { UsersListToolbar };

src/app/modules/process/user-ready/components/header/UsersListFilter.tsx

@@ -0,0 +1,136 @@
+import { useEffect, useState } from "react";
+import { MenuComponent } from "../../../../../../_digifi/assets/ts/components";
+import { initialQueryState, KTIcon } from "../../../../../../_digifi/helpers";
+import { useQueryRequest } from "../../core/QueryRequestProvider";
+import { useQueryResponse } from "../../core/QueryResponseProvider";
+
+const UsersListFilter = () => {
+  const { updateState } = useQueryRequest();
+  const { isLoading } = useQueryResponse();
+  const [role, setRole] = useState<string | undefined>();
+  const [lastLogin, setLastLogin] = useState<string | undefined>();
+
+  useEffect(() => {
+    MenuComponent.reinitialization();
+  }, []);
+
+  const resetData = () => {
+    updateState({ filter: undefined, ...initialQueryState });
+  };
+
+  const filterData = () => {
+    updateState({
+      filter: { role, last_login: lastLogin },
+      ...initialQueryState,
+    });
+  };
+
+  return (
+    <>
+      {/* begin::Filter Button */}
+      <button
+        disabled={isLoading}
+        type="button"
+        className="btn btn-light-primary me-3"
+        data-kt-menu-trigger="click"
+        data-kt-menu-placement="bottom-end"
+      >
+        <KTIcon iconName="filter" className="fs-2" />
+        Filter
+      </button>
+      {/* end::Filter Button */}
+      {/* begin::SubMenu */}
+      <div
+        className="menu menu-sub menu-sub-dropdown w-300px w-md-325px"
+        data-kt-menu="true"
+      >
+        {/* begin::Header */}
+        <div className="px-7 py-5">
+          <div className="fs-5 text-gray-900 fw-bolder">Filter Options</div>
+        </div>
+        {/* end::Header */}
+
+        {/* begin::Separator */}
+        <div className="separator border-gray-200"></div>
+        {/* end::Separator */}
+
+        {/* begin::Content */}
+        <div className="px-7 py-5" data-kt-user-table-filter="form">
+          {/* begin::Input group */}
+          <div className="mb-10">
+            <label className="form-label fs-6 fw-bold">Role:</label>
+            <select
+              className="form-select form-select-solid fw-bolder"
+              data-kt-select2="true"
+              data-placeholder="Select option"
+              data-allow-clear="true"
+              data-kt-user-table-filter="role"
+              data-hide-search="true"
+              onChange={(e) => setRole(e.target.value)}
+              value={role}
+            >
+              <option value=""></option>
+              <option value="Administrator">Administrator</option>
+              <option value="Analyst">Analyst</option>
+              <option value="Developer">Developer</option>
+              <option value="Support">Support</option>
+              <option value="Trial">Trial</option>
+            </select>
+          </div>
+          {/* end::Input group */}
+
+          {/* begin::Input group */}
+          <div className="mb-10">
+            <label className="form-label fs-6 fw-bold">Last login:</label>
+            <select
+              className="form-select form-select-solid fw-bolder"
+              data-kt-select2="true"
+              data-placeholder="Select option"
+              data-allow-clear="true"
+              data-kt-user-table-filter="two-step"
+              data-hide-search="true"
+              onChange={(e) => setLastLogin(e.target.value)}
+              value={lastLogin}
+            >
+              <option value=""></option>
+              <option value="Yesterday">Yesterday</option>
+              <option value="20 mins ago">20 mins ago</option>
+              <option value="5 hours ago">5 hours ago</option>
+              <option value="2 days ago">2 days ago</option>
+            </select>
+          </div>
+          {/* end::Input group */}
+
+          {/* begin::Actions */}
+          <div className="d-flex justify-content-end">
+            <button
+              type="button"
+              disabled={isLoading}
+              onClick={filterData}
+              className="btn btn-light btn-active-light-primary fw-bold me-2 px-6"
+              data-kt-menu-dismiss="true"
+              data-kt-user-table-filter="reset"
+            >
+              Reset
+            </button>
+            <button
+              disabled={isLoading}
+              type="button"
+              onClick={resetData}
+              className="btn btn-primary fw-bold px-6"
+              data-kt-menu-dismiss="true"
+              data-kt-user-table-filter="filter"
+            >
+              Apply
+            </button>
+          </div>
+          {/* end::Actions */}
+        </div>
+        {/* end::Content */}
+      </div>
+      {/* end::SubMenu */}
+    </>
+  );
+};
+
+export { UsersListFilter };