Frontend Release to Main [4.63]

package.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "https://json.schemastore.org/package.json",
   "name": "hgnreactapp",
   "version": "0.1.0",
   "license": "GPL-2.0",
@@ -105,6 +106,7 @@
     "react-toastify": "^5.3.1",
     "react-tooltip": "^4.5.1",
     "react-use-websocket": "^3.0.0",
+    "react-window": "^1.8.11",
     "reactjs-popup": "^2.0.5",
     "reactstrap": "^8.10.1",
     "read-excel-file": "^5.5.3",
@@ -201,4 +203,4 @@
     ],
     "**/*.{css,scss,sass}": "stylelint"
   }
-}
+}

public/index.css

@@ -1,4 +1,325 @@
 /* public/index.css */
+
+/* Global Dark Mode Styles */
+body.dark-mode,
+body.bm-dashboard-dark {
+  background-color: #1b2a41 !important;
+  color: #ffffff !important;
+}
+
+body.dark-mode #root,
+body.bm-dashboard-dark #root {
+  background-color: #1b2a41 !important;
+  color: #ffffff !important;
+}
+
+/* Enhanced text visibility for dark mode */
+body.dark-mode *,
+body.bm-dashboard-dark * {
+  color: #ffffff !important;
+}
+
+body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, 
+body.dark-mode h4, body.dark-mode h5, body.dark-mode h6,
+body.bm-dashboard-dark h1, body.bm-dashboard-dark h2, body.bm-dashboard-dark h3,
+body.bm-dashboard-dark h4, body.bm-dashboard-dark h5, body.bm-dashboard-dark h6 {
+  color: #ffffff !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+body.dark-mode p, body.dark-mode span, body.dark-mode div,
+body.dark-mode label, body.dark-mode a, body.dark-mode li,
+body.bm-dashboard-dark p, body.bm-dashboard-dark span, body.bm-dashboard-dark div,
+body.bm-dashboard-dark label, body.bm-dashboard-dark a, body.bm-dashboard-dark li {
+  color: #ffffff !important;
+}
+
+body.dark-mode .text-muted,
+body.bm-dashboard-dark .text-muted {
+  color: #b8c5d1 !important;
+}
+
+body.dark-mode .text-secondary,
+body.bm-dashboard-dark .text-secondary {
+  color: #d1d8e0 !important;
+}
+
+body.dark-mode .text-primary,
+body.bm-dashboard-dark .text-primary {
+  color: #66b3ff !important;
+}
+
+body.dark-mode .text-success,
+body.bm-dashboard-dark .text-success {
+  color: #66ff99 !important;
+}
+
+body.dark-mode .text-warning,
+body.bm-dashboard-dark .text-warning {
+  color: #ffcc66 !important;
+}
+
+body.dark-mode .text-danger,
+body.bm-dashboard-dark .text-danger {
+  color: #ff6666 !important;
+}
+
+body.dark-mode .text-info,
+body.bm-dashboard-dark .text-info {
+  color: #66ffff !important;
+}
+
+/* Dark mode for common elements */
+body.dark-mode .container,
+body.dark-mode .container-fluid,
+body.bm-dashboard-dark .container,
+body.bm-dashboard-dark .container-fluid {
+  background-color: #1b2a41;
+  color: #ffffff;
+}
+
+body.dark-mode .card,
+body.bm-dashboard-dark .card {
+  background-color: #2e5061;
+  border-color: #3a506b;
+  color: #ffffff;
+}
+
+body.dark-mode .card-body,
+body.bm-dashboard-dark .card-body {
+  color: #ffffff;
+}
+
+body.dark-mode .card-title,
+body.bm-dashboard-dark .card-title {
+  color: #ffffff !important;
+}
+
+body.dark-mode .card-text,
+body.bm-dashboard-dark .card-text {
+  color: #ffffff !important;
+}
+
+body.dark-mode .card-header,
+body.bm-dashboard-dark .card-header {
+  background-color: #3a506b;
+  border-color: #4a6072;
+  color: #ffffff !important;
+}
+
+body.dark-mode .form-control,
+body.bm-dashboard-dark .form-control {
+  background-color: #2e5061;
+  border-color: #3a506b;
+  color: #ffffff !important;
+}
+
+body.dark-mode .form-control::placeholder,
+body.bm-dashboard-dark .form-control::placeholder {
+  color: #b8c5d1 !important;
+}
+
+body.dark-mode .form-control:focus,
+body.bm-dashboard-dark .form-control:focus {
+  background-color: #2e5061;
+  border-color: #4a6072;
+  color: #ffffff !important;
+  box-shadow: 0 0 0 0.2rem rgba(74, 96, 114, 0.25);
+}
+
+body.dark-mode .form-label,
+body.bm-dashboard-dark .form-label {
+  color: #ffffff !important;
+}
+
+body.dark-mode .btn-primary,
+body.bm-dashboard-dark .btn-primary {
+  background-color: #3a506b;
+  border-color: #3a506b;
+  color: #ffffff !important;
+}
+
+body.dark-mode .btn-primary:hover,
+body.bm-dashboard-dark .btn-primary:hover {
+  background-color: #4a6072;
+  border-color: #4a6072;
+  color: #ffffff !important;
+}
+
+body.dark-mode .btn-secondary,
+body.bm-dashboard-dark .btn-secondary {
+  background-color: #2e5061;
+  border-color: #2e5061;
+  color: #ffffff !important;
+}
+
+body.dark-mode .btn-secondary:hover,
+body.bm-dashboard-dark .btn-secondary:hover {
+  background-color: #3a506b;
+  border-color: #3a506b;
+  color: #ffffff !important;
+}
+
+body.dark-mode .btn,
+body.bm-dashboard-dark .btn {
+  color: #ffffff !important;
+}
+
+body.dark-mode .table,
+body.bm-dashboard-dark .table {
+  color: #ffffff !important;
+}
+
+body.dark-mode .table th,
+body.dark-mode .table td,
+body.bm-dashboard-dark .table th,
+body.bm-dashboard-dark .table td {
+  color: #ffffff !important;
+  border-color: #3a506b;
+}
+
+body.dark-mode .table-striped > tbody > tr:nth-of-type(odd),
+body.bm-dashboard-dark .table-striped > tbody > tr:nth-of-type(odd) {
+  background-color: rgba(46, 80, 97, 0.5);
+  color: #ffffff !important;
+}
+
+body.dark-mode .modal-content,
+body.bm-dashboard-dark .modal-content {
+  background-color: #2e5061;
+  color: #ffffff !important;
+}
+
+body.dark-mode .modal-header,
+body.bm-dashboard-dark .modal-header {
+  background-color: #3a506b;
+  border-color: #4a6072;
+  color: #ffffff !important;
+}
+
+body.dark-mode .modal-title,
+body.bm-dashboard-dark .modal-title {
+  color: #ffffff !important;
+}
+
+body.dark-mode .modal-body,
+body.bm-dashboard-dark .modal-body {
+  color: #ffffff !important;
+}
+
+body.dark-mode .modal-footer,
+body.bm-dashboard-dark .modal-footer {
+  background-color: #3a506b;
+  border-color: #4a6072;
+  color: #ffffff !important;
+}
+
+body.dark-mode .nav-tabs .nav-link,
+body.bm-dashboard-dark .nav-tabs .nav-link {
+  background-color: #2e5061;
+  border-color: #3a506b;
+  color: #ffffff !important;
+}
+
+body.dark-mode .nav-tabs .nav-link.active,
+body.bm-dashboard-dark .nav-tabs .nav-link.active {
+  background-color: #3a506b;
+  border-color: #4a6072;
+  color: #ffffff !important;
+}
+
+/* Navigation and menu items */
+body.dark-mode .nav-link,
+body.bm-dashboard-dark .nav-link {
+  color: #ffffff !important;
+}
+
+body.dark-mode .navbar,
+body.bm-dashboard-dark .navbar {
+  background-color: #1b2a41 !important;
+}
+
+body.dark-mode .navbar-brand,
+body.bm-dashboard-dark .navbar-brand {
+  color: #ffffff !important;
+}
+
+body.dark-mode .dropdown-menu,
+body.bm-dashboard-dark .dropdown-menu {
+  background-color: #2e5061;
+  border-color: #3a506b;
+}
+
+body.dark-mode .dropdown-item,
+body.bm-dashboard-dark .dropdown-item {
+  color: #ffffff !important;
+}
+
+body.dark-mode .dropdown-item:hover,
+body.bm-dashboard-dark .dropdown-item:hover {
+  background-color: #3a506b;
+  color: #ffffff !important;
+}
+
+/* Alert components */
+body.dark-mode .alert,
+body.bm-dashboard-dark .alert {
+  color: #ffffff !important;
+}
+
+body.dark-mode .alert-primary,
+body.bm-dashboard-dark .alert-primary {
+  background-color: #3a506b;
+  border-color: #4a6072;
+  color: #ffffff !important;
+}
+
+body.dark-mode .alert-secondary,
+body.bm-dashboard-dark .alert-secondary {
+  background-color: #2e5061;
+  border-color: #3a506b;
+  color: #ffffff !important;
+}
+
+/* List groups */
+body.dark-mode .list-group-item,
+body.bm-dashboard-dark .list-group-item {
+  background-color: #2e5061;
+  border-color: #3a506b;
+  color: #ffffff !important;
+}
+
+/* Breadcrumbs */
+body.dark-mode .breadcrumb,
+body.bm-dashboard-dark .breadcrumb {
+  background-color: #2e5061;
+}
+
+body.dark-mode .breadcrumb-item,
+body.bm-dashboard-dark .breadcrumb-item {
+  color: #ffffff !important;
+}
+
+body.dark-mode .breadcrumb-item.active,
+body.bm-dashboard-dark .breadcrumb-item.active {
+  color: #b8c5d1 !important;
+}
+
+/* Pagination */
+body.dark-mode .page-link,
+body.bm-dashboard-dark .page-link {
+  background-color: #2e5061;
+  border-color: #3a506b;
+  color: #ffffff !important;
+}
+
+body.dark-mode .page-item.active .page-link,
+body.bm-dashboard-dark .page-item.active .page-link {
+  background-color: #3a506b;
+  border-color: #4a6072;
+  color: #ffffff !important;
+}
+
 /* Fix the position of the header at the top */
 .top {
     position: fixed;

src/actions/__tests__/authActions.js.test.js

@@ -13,7 +13,7 @@ import {
   setCurrentUser, // Import setCurrentUser action
   setHeaderData, // Import setHeaderData action
 } from '../authActions'; // Import actions from authActions
-import { SET_CURRENT_USER, SET_HEADER_DATA } from '../../constants/auth'; // Import constants
+import { SET_CURRENT_USER, SET_HEADER_DATA, STOP_FORCE_LOGOUT } from '../../constants/auth'; // Import constants
 
 
 const middlewares = [thunk]; // Define middlewares
@@ -35,7 +35,10 @@ describe('authActions', () => {
     httpService.post.mockResolvedValue({ data: { token } }); // Mock the httpService post method
     jwtDecode.mockReturnValue(decodedToken); // Mock the jwtDecode function
 
-    const expectedActions = [{ type: SET_CURRENT_USER, payload: decodedToken }]; // Define expected actions
+    const expectedActions = [
+      { type: STOP_FORCE_LOGOUT }, // Ensure any existing timers are cleared
+      { type: SET_CURRENT_USER, payload: decodedToken },
+    ]; // Define expected actions
 
     await store.dispatch(loginUser(credentials)); // Dispatch the loginUser action
     expect(store.getActions()).toEqual(expectedActions); // Assert the actions
@@ -68,7 +71,10 @@ describe('authActions', () => {
 
   it('creates SET_CURRENT_USER with null when logoutUser is called', () => {
     const store = mockStore({}); // Create a mock store
-    const expectedActions = [{ type: SET_CURRENT_USER, payload: null }]; // Define expected actions
+    const expectedActions = [
+      { type: STOP_FORCE_LOGOUT }, // Clear any active force-logout timer
+      { type: SET_CURRENT_USER, payload: null },
+    ]; // Define expected actions
 
     store.dispatch(logoutUser()); // Dispatch the logoutUser action
     expect(store.getActions()).toEqual(expectedActions); // Assert the actions