Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| ea90bd6fc5 | |||
| c970467f16 | |||
| 63090f0b74 | |||
| afa81eacd8 | |||
| eea90187e1 |
@@ -1,5 +1,10 @@
|
|||||||
const QUERIES = {
|
const QUERIES = {
|
||||||
USERS_LIST: 'users-list',
|
USERS_LIST: 'users-list',
|
||||||
|
STARTED_LIST: 'started-list',
|
||||||
|
READY_LIST: 'ready-list',
|
||||||
|
PENDING_LIST: 'pending-list',
|
||||||
|
APPROVED_LIST: 'approved-list',
|
||||||
|
REJECTED_LIST: 'rejected-list',
|
||||||
EMPLOYERS_LIST: 'employers-list',
|
EMPLOYERS_LIST: 'employers-list',
|
||||||
SIGNATORY_LIST: 'signatory-list',
|
SIGNATORY_LIST: 'signatory-list',
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { FC } from 'react';
|
import { FC, useEffect } from 'react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import { useAuth } from '../../../../app/modules/auth';
|
import { useAuth } from '../../../../app/modules/auth';
|
||||||
import { Languages } from './Languages';
|
import { Languages } from './Languages';
|
||||||
@@ -6,6 +6,42 @@ import { toAbsoluteUrl } from '../../../helpers';
|
|||||||
|
|
||||||
const HeaderUserMenu: FC = () => {
|
const HeaderUserMenu: FC = () => {
|
||||||
const { currentUser, logout } = useAuth();
|
const { currentUser, logout } = useAuth();
|
||||||
|
|
||||||
|
// Listen for user activity and trigger logout
|
||||||
|
useEffect(() => {
|
||||||
|
let timeout: number;
|
||||||
|
const inactiveTime: number = 7 * 60 * 1000; //default inactive period (milliseconds)
|
||||||
|
// Logout user after inactiveTime minutes of inactivity
|
||||||
|
const resetTimeout = () => {
|
||||||
|
clearTimeout(timeout);
|
||||||
|
// Set logout timeout
|
||||||
|
timeout = window.setTimeout(() => {
|
||||||
|
logout();
|
||||||
|
}, inactiveTime);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUserActivity: any = () => {
|
||||||
|
resetTimeout(); // reset session on user activity
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener('mousemove', handleUserActivity);
|
||||||
|
document.addEventListener('keydown', handleUserActivity);
|
||||||
|
document.addEventListener('click', handleUserActivity);
|
||||||
|
document.addEventListener('focus', handleUserActivity);
|
||||||
|
|
||||||
|
// Initialize timeout
|
||||||
|
resetTimeout();
|
||||||
|
|
||||||
|
// Remove event listeners on unmount
|
||||||
|
return () => {
|
||||||
|
clearTimeout(timeout);
|
||||||
|
document.removeEventListener('mousemove', handleUserActivity);
|
||||||
|
document.removeEventListener('keydown', handleUserActivity);
|
||||||
|
document.removeEventListener('click', handleUserActivity);
|
||||||
|
document.removeEventListener('focus', handleUserActivity);
|
||||||
|
};
|
||||||
|
}, [logout]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<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"
|
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"
|
||||||
|
|||||||
@@ -30,6 +30,7 @@ export type User = {
|
|||||||
status?: string
|
status?: string
|
||||||
added?: string
|
added?: string
|
||||||
updated?: string
|
updated?: string
|
||||||
|
employer_name?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
export type UsersQueryResponse = Response<Array<User>>
|
export type UsersQueryResponse = Response<Array<User>>
|
||||||
|
|||||||
@@ -32,7 +32,7 @@ const QueryResponseProvider: FC<WithChildren> = ({ children }) => {
|
|||||||
refetch,
|
refetch,
|
||||||
data: response,
|
data: response,
|
||||||
} = useQuery(
|
} = useQuery(
|
||||||
`${QUERIES.USERS_LIST}-${query}`,
|
`${QUERIES.APPROVED_LIST}-${query}`,
|
||||||
() => {
|
() => {
|
||||||
return getApprovedUsers(query);
|
return getApprovedUsers(query);
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -32,7 +32,7 @@ const QueryResponseProvider: FC<WithChildren> = ({ children }) => {
|
|||||||
refetch,
|
refetch,
|
||||||
data: response,
|
data: response,
|
||||||
} = useQuery(
|
} = useQuery(
|
||||||
`${QUERIES.USERS_LIST}-${query}`,
|
`${QUERIES.PENDING_LIST}-${query}`,
|
||||||
() => {
|
() => {
|
||||||
return getPendingUsers(query);
|
return getPendingUsers(query);
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ import { QueryRequestProvider } from "./core/QueryRequestProvider";
|
|||||||
import { QueryResponseProvider } from "./core/QueryResponseProvider";
|
import { QueryResponseProvider } from "./core/QueryResponseProvider";
|
||||||
import { UsersListHeader } from "./components/header/UsersListHeader";
|
import { UsersListHeader } from "./components/header/UsersListHeader";
|
||||||
import { UsersTable } from "./table/UsersTable";
|
import { UsersTable } from "./table/UsersTable";
|
||||||
import { UserEditModal } from "./user-edit-modal/UserEditModal";
|
import { EditLoanModal } from "./edit-loan-modal/EditLoanModal";
|
||||||
import { KTCard } from "../../../../_digifi/helpers";
|
import { KTCard } from "../../../../_digifi/helpers";
|
||||||
import { ToolbarWrapper } from "../../../../_digifi/layout/components/toolbar";
|
import { ToolbarWrapper } from "../../../../_digifi/layout/components/toolbar";
|
||||||
import { Content } from "../../../../_digifi/layout/components/content";
|
import { Content } from "../../../../_digifi/layout/components/content";
|
||||||
@@ -16,7 +16,7 @@ const UsersList = () => {
|
|||||||
<UsersListHeader />
|
<UsersListHeader />
|
||||||
<UsersTable />
|
<UsersTable />
|
||||||
</KTCard>
|
</KTCard>
|
||||||
{itemIdForUpdate !== undefined && <UserEditModal />}
|
{itemIdForUpdate !== undefined && <EditLoanModal />}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -32,7 +32,7 @@ const QueryResponseProvider: FC<WithChildren> = ({ children }) => {
|
|||||||
refetch,
|
refetch,
|
||||||
data: response,
|
data: response,
|
||||||
} = useQuery(
|
} = useQuery(
|
||||||
`${QUERIES.USERS_LIST}-${query}`,
|
`${QUERIES.READY_LIST}-${query}`,
|
||||||
() => {
|
() => {
|
||||||
return getReadyUsers(query);
|
return getReadyUsers(query);
|
||||||
},
|
},
|
||||||
|
|||||||
+2
-2
@@ -2,7 +2,7 @@ import {useEffect} from 'react'
|
|||||||
import {UserEditModalHeader} from './UserEditModalHeader'
|
import {UserEditModalHeader} from './UserEditModalHeader'
|
||||||
import {UserEditModalFormWrapper} from './UserEditModalFormWrapper'
|
import {UserEditModalFormWrapper} from './UserEditModalFormWrapper'
|
||||||
|
|
||||||
const UserEditModal = () => {
|
const EditLoanModal = () => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
document.body.classList.add('modal-open')
|
document.body.classList.add('modal-open')
|
||||||
return () => {
|
return () => {
|
||||||
@@ -41,4 +41,4 @@ const UserEditModal = () => {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export {UserEditModal}
|
export {EditLoanModal}
|
||||||
+1
-1
@@ -12,7 +12,7 @@ const UserEditModalFormWrapper = () => {
|
|||||||
data: user,
|
data: user,
|
||||||
error,
|
error,
|
||||||
} = useQuery(
|
} = useQuery(
|
||||||
`${QUERIES.USERS_LIST}-user-${itemIdForUpdate}`,
|
`${QUERIES.READY_LIST}-user-${itemIdForUpdate}`,
|
||||||
() => {
|
() => {
|
||||||
return getUserById(itemIdForUpdate);
|
return getUserById(itemIdForUpdate);
|
||||||
},
|
},
|
||||||
+1
-1
@@ -7,7 +7,7 @@ const UserEditModalHeader = () => {
|
|||||||
return (
|
return (
|
||||||
<div className="modal-header">
|
<div className="modal-header">
|
||||||
{/* begin::Modal title */}
|
{/* begin::Modal title */}
|
||||||
<h2 className="fw-bolder">Add User</h2>
|
<h2 className="fw-bolder">Edit Loan</h2>
|
||||||
{/* end::Modal title */}
|
{/* end::Modal title */}
|
||||||
|
|
||||||
{/* begin::Close */}
|
{/* begin::Close */}
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import {FC} from 'react'
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
employer_name?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const EmployerCell: FC<Props> = ({employer_name}) => (
|
||||||
|
<div className='badge badge-light fw-bolder'>{employer_name}</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
export {EmployerCell}
|
||||||
@@ -44,7 +44,7 @@ const UserActionsCell: FC<Props> = ({ id }) => {
|
|||||||
</a>
|
</a>
|
||||||
{/* begin::Menu */}
|
{/* begin::Menu */}
|
||||||
<div
|
<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"
|
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"
|
data-kt-menu="true"
|
||||||
>
|
>
|
||||||
{/* begin::Menu item */}
|
{/* begin::Menu item */}
|
||||||
@@ -62,7 +62,7 @@ const UserActionsCell: FC<Props> = ({ id }) => {
|
|||||||
data-kt-users-table-filter="delete_row"
|
data-kt-users-table-filter="delete_row"
|
||||||
onClick={async () => await deleteItem.mutateAsync()}
|
onClick={async () => await deleteItem.mutateAsync()}
|
||||||
>
|
>
|
||||||
Delete
|
Resend Verification
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
{/* end::Menu item */}
|
{/* end::Menu item */}
|
||||||
|
|||||||
@@ -8,6 +8,7 @@ import {UserCustomHeader} from './UserCustomHeader'
|
|||||||
import {UserSelectionHeader} from './UserSelectionHeader'
|
import {UserSelectionHeader} from './UserSelectionHeader'
|
||||||
import {User} from '../../../core/_models'
|
import {User} from '../../../core/_models'
|
||||||
import { AddedCell } from './AddedCell'
|
import { AddedCell } from './AddedCell'
|
||||||
|
import { EmployerCell } from './EmployerCell'
|
||||||
|
|
||||||
const usersColumns: ReadonlyArray<Column<User>> = [
|
const usersColumns: ReadonlyArray<Column<User>> = [
|
||||||
{
|
{
|
||||||
@@ -20,6 +21,13 @@ const usersColumns: ReadonlyArray<Column<User>> = [
|
|||||||
id: 'firstname',
|
id: 'firstname',
|
||||||
Cell: ({...props}) => <UserInfoCell user={props.data[props.row.index]} />,
|
Cell: ({...props}) => <UserInfoCell user={props.data[props.row.index]} />,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
Header: (props) => (
|
||||||
|
<UserCustomHeader tableProps={props} title='Employer' className='min-w-125px' />
|
||||||
|
),
|
||||||
|
id: 'employer_name',
|
||||||
|
Cell: ({...props}) => <EmployerCell employer_name={props.data[props.row.index].employer_name} />,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
Header: (props) => <UserCustomHeader tableProps={props} title='Amount' className='min-w-125px' />,
|
Header: (props) => <UserCustomHeader tableProps={props} title='Amount' className='min-w-125px' />,
|
||||||
accessor: 'loan_amount',
|
accessor: 'loan_amount',
|
||||||
|
|||||||
@@ -32,7 +32,7 @@ const QueryResponseProvider: FC<WithChildren> = ({children}) => {
|
|||||||
refetch,
|
refetch,
|
||||||
data: response,
|
data: response,
|
||||||
} = useQuery(
|
} = useQuery(
|
||||||
`${QUERIES.USERS_LIST}-${query}`,
|
`${QUERIES.REJECTED_LIST}-${query}`,
|
||||||
() => {
|
() => {
|
||||||
return getRejectedUsers(query)
|
return getRejectedUsers(query)
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -32,7 +32,7 @@ const QueryResponseProvider: FC<WithChildren> = ({ children }) => {
|
|||||||
refetch,
|
refetch,
|
||||||
data: response,
|
data: response,
|
||||||
} = useQuery(
|
} = useQuery(
|
||||||
`${QUERIES.USERS_LIST}-${query}`,
|
`${QUERIES.STARTED_LIST}-${query}`,
|
||||||
() => {
|
() => {
|
||||||
return getStartedUsers(query);
|
return getStartedUsers(query);
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user