completed session timeout for Admin: component to change timeout and …

…session management hook

package.json

@@ -20,6 +20,7 @@
     "@mui/x-data-grid": "^7.11.0",
     "@mui/x-date-pickers": "^7.11.1",
     "@pdfme/generator": "^1.2.6",
+    "@testing-library/react-hooks": "^8.0.1",
     "bootstrap": "^5.3.3",
     "customize-cra": "^1.0.0",
     "dayjs": "^1.11.11",
@@ -50,7 +51,7 @@
     "react-router-dom": "^6.26.0",
     "react-scripts": "5.0.1",
     "react-toastify": "^9.0.3",
-    "react-tooltip": "^5.27.1",
+    "react-tooltip": "^5.28.0",
     "redux": "^4.1.1",
     "redux-thunk": "^2.3.0",
     "sanitize-html": "^2.13.0",

src/GraphQl/Mutations/mutations.ts

@@ -646,6 +646,12 @@ export const UPDATE_COMMUNITY = gql`
   }
 `;
 
+export const UPDATE_SESSION_TIMEOUT = gql`
+  mutation updateSessionTimeout($timeout: Int!) {
+    updateSessionTimeout(timeout: $timeout)
+  }
+`;
+
 export const RESET_COMMUNITY = gql`
   mutation resetCommunity {
     resetCommunity

src/GraphQl/Queries/Queries.ts

@@ -777,6 +777,14 @@ export const GET_COMMUNITY_DATA = gql`
   }
 `;
 
+export const GET_COMMUNITY_SESSION_TIMEOUT_DATA = gql`
+  query getCommunityData {
+    getCommunityData {
+      timeout
+    }
+  }
+`;
+
 // get the list of Action Item Categories
 export { ACTION_ITEM_CATEGORY_LIST } from './ActionItemCategoryQueries';
 

src/components/ProfileDropdown/ProfileDropdown.tsx

@@ -7,6 +7,7 @@ import styles from './ProfileDropdown.module.css';
 import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
 import { useMutation } from '@apollo/client';
 import { useTranslation } from 'react-i18next';
+import useSession from 'utils/useSession';
 
 /**
  * Renders a profile dropdown menu for the user.
@@ -24,6 +25,7 @@ const profileDropdown = (): JSX.Element => {
   const { t: tCommon } = useTranslation('common');
   const [revokeRefreshToken] = useMutation(REVOKE_REFRESH_TOKEN);
   const { getItem } = useLocalStorage();
+  const { endSession } = useSession();
   const superAdmin = getItem('SuperAdmin');
   const adminFor = getItem('AdminFor');
   const userRole = superAdmin
@@ -45,6 +47,7 @@ const profileDropdown = (): JSX.Element => {
       console.error('Error revoking refresh token:', error);
     }
     localStorage.clear();
+    endSession();
     navigate('/');
   };
   const MAX_NAME_LENGTH = 20;

src/components/UpdateSession/UpdateSession.css

@@ -0,0 +1,96 @@
+/* Card styles */
+.update-timeout-card {
+  width: 700px;
+  background: #ffffff;
+  border: none;
+  border-radius: 16px;
+  filter: drop-shadow(0px 4px 15.3px rgba(0, 0, 0, 0.08));
+  padding: 20px;
+}
+
+.update-timeout-card-header {
+  background: none;
+  padding: 16px;
+  border-bottom: none;
+}
+
+.update-timeout-card-title {
+  font-family: 'Lato', sans-serif;
+  font-weight: 600;
+  font-size: 24px;
+  color: #000000;
+}
+
+.update-timeout-card-body {
+  padding: 20px;
+}
+
+.update-timeout-current {
+  font-family: 'Lato', sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  color: #000000;
+  margin-bottom: 20px; /* Increased margin to create more space */
+}
+
+.update-timeout-label {
+  font-family: 'Lato', sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  color: #000000;
+  margin-bottom: 10px; /* Keep the same margin to maintain spacing with the slider */
+}
+
+.update-timeout-labels-container {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+}
+
+.update-timeout-value {
+  color: #14ae5c;
+  font-weight: bold;
+}
+
+.update-timeout-slider-labels {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.9rem;
+  color: #757575;
+}
+
+.update-timeout-button-container {
+  display: flex;
+  justify-content: right;
+  margin-top: 20px;
+}
+
+.update-timeout-button {
+  width: 112px;
+  height: 36px;
+  background: #31bb6b;
+  border-radius: 6px;
+  font-family: 'Lato', sans-serif;
+  font-weight: 500;
+  font-size: 16px;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  box-shadow: none;
+}
+
+.update-timeout-button:hover {
+  background-color: #28a745;
+  border-color: #28a745;
+  box-shadow: none;
+}
+
+.update-timeout-button:active {
+  transform: scale(0.98);
+}
+
+.update-timeout-slider-container {
+  position: relative;
+}