customer API added

src/_digifi/helpers/crud-helper/consts.ts

@@ -6,6 +6,7 @@ const QUERIES = {
   PENDING_LIST: 'pending-list',
   APPROVED_LIST: 'approved-list',
   REJECTED_LIST: 'rejected-list',
+  CUSTOMERS_LIST: 'customers-list',
   EMPLOYERS_LIST: 'employers-list',
   SIGNATORY_LIST: 'signatory-list',
 }

src/app/modules/apps/user-management/UsersPage.tsx

@@ -4,7 +4,7 @@ import {UsersListWrapper} from './users-list/UsersList'
 
 const usersBreadcrumbs: Array<PageLink> = [
   {
-    title: 'User Management',
+    title: 'Customer Management',
     path: '/tools/user-management/users',
     isSeparator: false,
     isActive: false,
@@ -25,7 +25,7 @@ const UsersPage = () => {
           path='users'
           element={
             <>
-              <PageTitle breadcrumbs={usersBreadcrumbs}>Users list</PageTitle>
+              <PageTitle breadcrumbs={usersBreadcrumbs}>Customer list</PageTitle>
               <UsersListWrapper />
             </>
           }

src/app/modules/apps/user-management/users-list/core/QueryResponseProvider.tsx

@@ -11,7 +11,7 @@ import {
   stringifyRequestQuery,
   WithChildren,
 } from '../../../../../../_digifi/helpers'
-import {getStartedUsers} from './_requests'
+import {getCustomerList} from './_requests'
 import {User} from './_models'
 import {useQueryRequest} from './QueryRequestProvider'
 
@@ -32,9 +32,9 @@ const QueryResponseProvider: FC<WithChildren> = ({children}) => {
     refetch,
     data: response,
   } = useQuery(
-    `${QUERIES.USERS_LIST}-${query}`,
+    `${QUERIES.CUSTOMERS_LIST}-${query}`,
     () => {
-      return getStartedUsers(query)
+      return getCustomerList(query)
     },
     {cacheTime: 0, keepPreviousData: true, refetchOnWindowFocus: false}
   )

src/app/modules/apps/user-management/users-list/core/_models.ts

@@ -29,6 +29,7 @@ export type User = {
   status?: string
   added?: string
   updated?: string
+  bvn?: string
 }
 
 export type UsersQueryResponse = Response<Array<User>>

src/app/modules/apps/user-management/users-list/core/_requests.ts

@@ -13,9 +13,9 @@ const NEW_USER_ENDPOINT = import.meta.env.VITE_APP_USER_ENDPOINT
 //     .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
+const getCustomerList = (query: string): Promise<UsersQueryResponse> => { // FUNCTION TO GET USERS THAT HAVE STARTED LOAN APPLICATION
   return axios
-    .get(`${NEW_USER_ENDPOINT}/loan/started`)
+    .get(`${NEW_USER_ENDPOINT}/customers`)
     .then((d: AxiosResponse<UsersQueryResponse>) => d.data);
 };
 
@@ -50,7 +50,7 @@ const deleteSelectedUsers = (userIds: Array<ID>): Promise<void> => {
 };
 
 export {
-  getStartedUsers,
+  getCustomerList,
   deleteUser,
   deleteSelectedUsers,
   getUserById,

src/app/modules/apps/user-management/users-list/table/columns/AgentCell.tsx

@@ -1,11 +0,0 @@
-import {FC} from 'react'
-
-type Props = {
-  agent?: string
-}
-
-const AgentCell: FC<Props> = ({agent}) => (
-  <> {agent && <div className='badge badge-light-success fw-bolder'>{agent}</div>}</>
-)
-
-export {AgentCell}

src/app/modules/apps/user-management/users-list/table/columns/Status.tsx

@@ -0,0 +1,11 @@
+import {FC} from 'react'
+
+type Props = {
+  status?: string
+}
+
+const Status: FC<Props> = ({status}) => (
+  <> {status && <div className='badge badge-light-success fw-bolder'>{status}</div>}</>
+)
+
+export {Status}

src/app/modules/apps/user-management/users-list/table/columns/_columns.tsx

@@ -1,7 +1,7 @@
 import {Column} from 'react-table'
 import {UserInfoCell} from './UserInfoCell'
 import { PaymentMonthCell } from './UserLastLoginCell'
-import {AgentCell} from './AgentCell'
+import {Status} from './Status'
 import {UserActionsCell} from './UserActionsCell'
 import {UserSelectionCell} from './UserSelectionCell'
 import {UserCustomHeader} from './UserCustomHeader'
@@ -21,22 +21,22 @@ const usersColumns: ReadonlyArray<Column<User>> = [
     Cell: ({...props}) => <UserInfoCell user={props.data[props.row.index]} />,
   },
   {
-    Header: (props) => <UserCustomHeader tableProps={props} title='Amount' className='min-w-125px' />,
-    accessor: 'loan_amount',
+    Header: (props) => <UserCustomHeader tableProps={props} title='BVN' className='min-w-125px' />,
+    accessor: 'bvn',
   },
+  // {
+  //   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='Payment Terms' className='min-w-125px' />
+      <UserCustomHeader tableProps={props} title='Status' 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} />,
+    id: 'status',
+    Cell: ({...props}) => <Status status={props.data[props.row.index].status} />,
   },
   {
     Header: (props) => (

src/app/modules/process/approve-reject-page/ApproveRejectPage.tsx

@@ -2,7 +2,8 @@ import React, { useEffect, useState } from 'react'
 import {useLocation, useNavigate} from 'react-router-dom'
 import { Content } from '../../../../_digifi/layout/components/content'
 import { ToolbarWrapper } from '../../../../_digifi/layout/components/toolbar'
-import { UsersListLoading } from '../user-started/components/loading/UsersListLoading'
+import { CustomLoading, UsersListLoading } from '../user-started/components/loading/UsersListLoading'
+import { getVerifiedLoanDetailsByUID } from '../core/_requests'
 
 export default function ApproveRejectPage() {
     const {state:{selectedUser}} = useLocation()
@@ -10,6 +11,8 @@ export default function ApproveRejectPage() {
 
     const [requestStatus, setRequestStatus] = useState<any>({loading:false, status:false, data:null})
 
+    const [loanDetails, setLoanDetails] = useState<any>({loading:true, data:null})
+
     const handleSubmit = ():any => {
         setRequestStatus({loading:true, status:false, data:null})
         setTimeout(()=>{
@@ -19,59 +22,109 @@ export default function ApproveRejectPage() {
 
     useEffect(()=>{
         if(!selectedUser){
-            navigate('/', {replace:true})
+            return navigate('/', {replace:true})
         }
+        getVerifiedLoanDetailsByUID(selectedUser?.uid).then(res => {
+            setLoanDetails({loading:false, data:res?.data})
+        }).catch(err => {
+            console.log(err)
+            setLoanDetails({loading:false, data:null})
+        })
     },[])
 
   return (
     <>
         {/* <ToolbarWrapper />  */}
         <Content>
-            <div className='w-100'>
-                <h3 className='py-3 py-xl-5 card-title text-gray-800 fw-bold'>Processing: {selectedUser?.uid}</h3>
+            {loanDetails.loading ?
+            <div className='position-relative w-100 vh-100'>
+                <CustomLoading />
             </div>
-            {/* begin::Row */}
-            <div className="row g-5 g-xl-10 mb-5 mb-xl-10">
-            {/* begin::Col */}
-            <div className="col-xl-6 mb-md-5 mb-xl-10">
-                <div className="card card-flash flex flex-col justify-content-between p-4 h-md-50 mb-5 mb-xl-10 bg-secondary">
-                    <h3 className='card-title text-gray-800 fw-bold'>Process Loan</h3>
-                    <div className='w-100 d-flex justify-content-between'>
-                        <button 
-                            className='btn btn-light btn-active-light-secondary text-success btn-lg'
-                            onClick={()=>navigate('/loan/pages/process/verified', {replace:true})}
-                        >
-                            Return
-                        </button>
-                        <button 
-                            className='btn btn-light btn-active-light-secondary text-danger btn-lg'
-                            onClick={handleSubmit}
-                        >
-                            Reject
-                        </button>
-                        <button 
-                            className='btn btn-light btn-active-light-secondary text-primary btn-lg'
-                            onClick={handleSubmit}
-                        >
-                            Approve
-                        </button>
+            :
+            <>
+                <div className='w-100'>
+                    <h3 className='py-3 py-xl-5 card-title text-gray-800 fw-bold'>Processing: {selectedUser?.uid}</h3>
+                </div>
+                {/* begin::Row */}
+                <div className="row g-5 g-xl-10 mb-5 mb-xl-10">
+                {/* begin::Col */}
+                <div className="col-xl-6 mb-md-5 mb-xl-10">
+                    <div className="card card-flash flex flex-col justify-content-between p-4 h-md-50 mb-5 mb-xl-10 bg-secondary">
+                        <h3 className='card-title text-gray-800 fw-bold'>Process Loan</h3>
+                        <div className='w-100 d-flex justify-content-between'>
+                            <button 
+                                className='btn btn-light btn-active-light-secondary text-success btn-lg'
+                                onClick={()=>navigate('/loan/pages/process/verified', {replace:true})}
+                            >
+                                Return
+                            </button>
+                            <button 
+                                className='btn btn-light btn-active-light-secondary text-danger btn-lg'
+                                onClick={handleSubmit}
+                            >
+                                Reject
+                            </button>
+                            <button 
+                                className='btn btn-light btn-active-light-secondary text-primary btn-lg'
+                                onClick={handleSubmit}
+                            >
+                                Approve
+                            </button>
+                        </div>
+                    </div>
+                    <div className="card card-flash flex flex-col p-4 h-md-50 mb-5 mb-xl-10 bg-secondary overflow-scroll">
+                        <h3 className='card-title text-gray-800 fw-bold mb-5'>Verification details</h3>
+                        <div className='w-100'>
+                            {loanDetails?.data?.verification.length > 0 ?
+                            <table className='w-100'>
+                                {loanDetails?.data?.verification?.map((item:any) => (
+                                    <tbody key={item.uid || item.id}>
+                                        {Object.keys(item).map(key => (
+                                            <tr>
+                                                <th className='text-uppercase py-3'>{key}</th>
+                                                <td>{item[key]}</td>
+                                            </tr>
+                                        ))}
+                                    </tbody>
+                                ))}
+                            </table>
+                            :
+                            null
+                        }
+                        </div>
                     </div>
                 </div>
-                <div className="card card-flash flex flex-col justify-content-between p-4 h-md-50 mb-5 mb-xl-10 bg-secondary">
-                    <h3 className='card-title text-gray-800 fw-bold'>Verification details</h3>
-                </div>
-            </div>
-            {/* end::Col */}
+                {/* end::Col */}
 
-            {/* begin::Col */}
-            <div className="col-xl-6">
-                <div className="card card-flash flex flex-col justify-content-between p-4 h-md-100 bg-secondary">
-                    <h3 className='card-title text-gray-800 fw-bold'>Loan Details</h3>
+                {/* begin::Col */}
+                <div className="col-xl-6">
+                    <div className="card card-flash flex flex-col p-4 h-md-100 bg-secondary">
+                        <h3 className='card-title text-gray-800 fw-bold mb-5'>Loan Details</h3>
+                        <div className='w-100'>
+                            {loanDetails?.data?.application.length > 0 ?
+                            <table className='w-100'>
+                                {loanDetails?.data?.application?.map((item:any) => (
+                                    <tbody key={item.uid || item.id}>
+                                        {Object.keys(item).map(key => (
+                                            <tr>
+                                                <th className='text-uppercase py-3'>{key}</th>
+                                                <td className='flex text-break'>{item[key]}</td>
+                                            </tr>
+                                        ))}
+                                    </tbody>
+                                ))}
+                            </table>
+                            :
+                            null
+                        }
+                        </div>
+                    </div>
                 </div>
-            </div>
-            {/* end::Col */}
-            </div>
-            {/* end::Row */}
+                {/* end::Col */}
+                </div>
+                {/* end::Row */}
+            </>
+            }
         </Content>
         {requestStatus.loading && <UsersListLoading />}
     </>

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

@@ -33,8 +33,57 @@ export type User = {
   employer_name?: string
 }
 
+export type VerifiedLoanDetails = {
+  application_uid?: string
+  application?: Array<{[index: string]: string}>
+  // application?: [
+  //     {
+  //         "id": "21",
+  //         "uid": "006915e9-cb0d-42e9-b4af-c047da51e2ac",
+  //         "customer_uid": "9cb678e0-0697-4cc9-9bf0-3f40a3c989fb",
+  //         "loan_amount": "2220",
+  //         "payment_month": "18",
+  //         "sales_agent": "866969",
+  //         "gender": null,
+  //         "marital_status": "single",
+  //         "email": "ameye+update@chiefsoft.com",
+  //         "address": "4201 Defoors Farm Trail",
+  //         "state": "abia",
+  //         "country": "NG",
+  //         "loan_detail": "{\"customer_uid\":\"9cb678e0-0697-4cc9-9bf0-3f40a3c989fb\",\"loan_amount\":\"2220\",\"payment_month\":\"18\",\"sales_agent\":\"866969\",\"gender\":\"female\",\"address\":\"4201 Defoors Farm Trail\",\"marital_status\":\"single\",\"state\":\"abia\",\"email\":\"ameye+update@chiefsoft.com\",\"country\":\"NG\",\"employer_uid\":\"3a9ec95a-090c-4c98-bc01-e96d76b93952\",\"employment\":\"[object Object]\",\"loan_reference\":\"[object Object],[object Object]\",\"disbursement\":\"[object Object]\"}",
+  //         "status": "4",
+  //         "added": "2024-07-10 21:28:13.404726",
+  //         "updated": "2024-07-10 21:28:13.404726",
+  //         "employer_uid": "3a9ec95a-090c-4c98-bc01-e96d76b93952"
+  //     }
+  // ],
+  verification?: Array<{[index: string]: string}>
+  // "verification": [
+  //     {
+  //         "id": "56",
+  //         "uid": "e041279c-875d-4973-b042-48efec05fecf",
+  //         "employer_uid": "3a9ec95a-090c-4c98-bc01-e96d76b93952",
+  //         "status": "1",
+  //         "added": "2024-07-11 16:03:25.343553",
+  //         "updated": "2024-07-11 16:03:25.343553",
+  //         "username": "ameye+update@chiefsoft.com",
+  //         "password": "5769407ab4409037161a51692c6bb617",
+  //         "signatory_uid": "db444b87-ec0f-483b-a8cf-eea9e8466f10",
+  //         "application_uid": "006915e9-cb0d-42e9-b4af-c047da51e2ac",
+  //         "education": "b.sc",
+  //         "grade": "Test 001",
+  //         "applicant_date": "2024-07-10 00:00:00",
+  //         "ippis_number": "",
+  //         "employers_name": "bshshsjss",
+  //         "designation": "jdjdjddk"
+  //     }
+  // ]
+}
+
 export type UsersQueryResponse = Response<Array<User>>
 
+export type VerifiedLoanDetailsResponse = Response<VerifiedLoanDetails>
+
 export const initialUser: User = {
   avatar: 'avatars/300-6.jpg',
   position: 'Art Director',

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

@@ -1,7 +1,7 @@
 import axios, { AxiosResponse } from "axios";
 import { ID, Response } from "../../../../_digifi/helpers"
-import { User, UsersQueryResponse } from "./_models";
-import { postAuxEnd } from "../../auth/core/AxiosCallHelper";
+import { User, UsersQueryResponse, VerifiedLoanDetailsResponse } from "./_models";
+import { postAuxEnd, getAuxEnd } from "../../auth/core/AxiosCallHelper";
 
 const API_URL = import.meta.env.VITE_APP_THEME_API_URL;
 const USER_URL = `${API_URL}/user`;
@@ -54,6 +54,10 @@ const employersVerify = (uid: ID): Promise<UsersQueryResponse> => { // FUNCTION
     return postAuxEnd('/employers/verify', {application_uid:uid})
 };
 
+const getVerifiedLoanDetailsByUID = (uid: string): Promise<VerifiedLoanDetailsResponse> => { // FUNCTION TO GET VERIFIED LOAN DETAILS IN ORDER TO PROCESS
+  return getAuxEnd(`/loan/process/${uid}`)
+};
+
 const getUserById = (id: ID): Promise<User | undefined> => {
   return axios
     .get(`${USER_URL}/${id}`)
@@ -92,6 +96,8 @@ export {
   getVerifiedUsers,
   getApprovedUsers,
   employersVerify,
+  getVerifiedLoanDetailsByUID,
+
   deleteUser,
   deleteSelectedUsers,
   getUserById,

src/app/modules/process/user-started/components/loading/UsersListLoading.tsx

@@ -15,4 +15,21 @@ const UsersListLoading = () => {
   return <div style={{...styles, position: 'absolute', textAlign: 'center'}}>Processing...</div>
 }
 
-export {UsersListLoading}
+const CustomLoading = () => {
+  const styles = {
+    borderRadius: '0.475rem',
+    boxShadow: '0 0 50px 0 rgb(82 63 105 / 15%)',
+    backgroundColor: '#fff',
+    color: '#7e8299',
+    fontWeight: '500',
+    margin: '0',
+    width: 'auto',
+    padding: '1rem 2rem',
+    top: 'calc(50% - 2rem)',
+    left: 'calc(50% - 4rem)',
+  }
+
+  return <div style={{...styles, position: 'absolute', textAlign: 'center'}}>Loading...</div>
+}
+
+export {UsersListLoading, CustomLoading}