[MDS-6469] Upcoming Reports (#3722)

* Add support for fetching, storing, and displaying upcoming mine reports.

* rejigger reports redux actions start

* add date sorting

* Add support for upcoming reports table, component refactoring, and improved date sorting

* Refactor reports API and frontend components to consolidate upcoming reports handling. Remove `MineUpcomingReportListResource`, update endpoints to use filters, and migrate legacy action creators to slice-based thunks.

* Refactor reports handling: remove legacy action creators, consolidate tests, update components with new slice-based thunks, and enhance UI with badges and reminders.

* Refactor reports handling: remove legacy action creators, consolidate tests, update components with new slice-based thunks, and enhance UI with badges and reminders.

* Add tests for upcoming and pending mine reports with status and date range filters.

* Remove legacy report action creators, update selectors, replace positional parameters with object-based ones, and consolidate reducers into `reportSlice`.

* Remove legacy `mineReportActions` and `reportReducer`, update tests, and refactor components for consistency with `reportSlice`.

* Update ReportManagement snapshot tests for layout changes and new upcoming reports UI elements

* Update `Reports.spec.tsx` to revise table header validations and align with updated UI labels

* Removed redundant styles

---------

Co-authored-by: mat <matbusby@gmail.com>

Author: matbusby-fw

services/common/src/components/common/ResponsivePagination.js

@@ -0,0 +1,51 @@
+/**
+ * @constant Pagination is used on the MineHomePage and ContactHomePage.js, this file was created to DRY up the pagination logic.
+ */
+import React, { FC } from "react";
+import MediaQuery from "react-responsive";
+import { Pagination } from "antd";
+
+interface ResponsivePaginationProps {
+  onPageChange: (page: number, pageSize: number) => void;
+  currentPage: number;
+  pageTotal: number;
+  itemsPerPage: number;
+}
+
+const ResponsivePagination: FC<ResponsivePaginationProps> = ({
+  onPageChange,
+  currentPage = 1,
+  pageTotal,
+  itemsPerPage,
+}) => (
+  <div>
+    <MediaQuery maxWidth={500}>
+      <Pagination
+        size="small"
+        showSizeChanger
+        onShowSizeChange={onPageChange}
+        onChange={onPageChange}
+        defaultCurrent={currentPage}
+        current={currentPage}
+        total={pageTotal}
+        pageSizeOptions={["10", "25", "50", "75", "100"]}
+        pageSize={itemsPerPage}
+      />
+    </MediaQuery>
+    <MediaQuery minWidth={501}>
+      <Pagination
+        showSizeChanger
+        onShowSizeChange={onPageChange}
+        onChange={onPageChange}
+        defaultCurrent={currentPage}
+        current={currentPage}
+        total={pageTotal}
+        pageSizeOptions={["10", "25", "50", "75", "100"]}
+        pageSize={itemsPerPage}
+        showTotal={(total) => `${total} Results`}
+      />
+    </MediaQuery>
+  </div>
+);
+
+export default ResponsivePagination;

services/common/src/components/common/ResponsivePagination.tsx

@@ -291,6 +291,8 @@ export const MINE_REPORT_DEFINITION = "/mines/reports/definitions";
 export const MINE_REPORT_DUE_DATE_TYPES = "/mines/reports/due-date-types";
 export const MINE_REPORTS = (mineGuid, params?) =>
   `/mines/${mineGuid}/reports?${queryString.stringify(params)}`;
+export const MINE_UPCOMING_REPORTS = (mineGuid, params?) =>
+  `/mines/${mineGuid}/reports?${queryString.stringify({ ...params, upcoming: true })}`;
 export const MINE_REPORT = (mineGuid, mineReportGuid) =>
   `/mines/${mineGuid}/reports/${mineReportGuid}`;
 export const MINE_REPORT_STATS = (mineGuid: string) => `/mines/${mineGuid}/reports/stats`;

services/common/src/constants/API.ts

@@ -140,15 +140,6 @@ export const REMOVE_MINE_INCIDENT_DOCUMENT = "REMOVE_MINE_INCIDENT_DOCUMENT";
 // Work Information
 export const STORE_MINE_WORK_INFORMATIONS = "STORE_MINE_WORK_INFORMATIONS";
 
-// Reports
-export const STORE_REPORTS = "STORE_REPORTS";
-export const STORE_MINE_REPORTS = "STORE_MINE_REPORTS";
-export const CLEAR_MINE_REPORTS = "CLEAR_MINE_REPORTS";
-export const STORE_MINE_REPORT = "STORE_MINE_REPORT";
-export const STORE_MINE_REPORT_COMMENTS = "STORE_MINE_REPORT_COMMENTS";
-export const STORE_MINE_REPORT_STATUS_OPTIONS = "STORE_MINE_REPORT_STATUS_OPTIONS";
-export const STORE_MINE_REPORT_CATEGORY_OPTIONS = "STORE_MINE_REPORT_CATEGORY_OPTIONS";
-
 // notice of work
 export const STORE_NOTICE_OF_WORK_APPLICATIONS = "STORE_NOTICE_OF_WORK_APPLICATIONS";
 export const STORE_NOTICE_OF_WORK_APPLICATION = "STORE_NOTICE_OF_WORK_APPLICATION";

services/common/src/constants/actionTypes.ts

@@ -46,9 +46,6 @@ export const INCIDENTS = "INCIDENTS";
 // Work Information
 export const MINE_WORK_INFORMATIONS = "MINE_WORK_INFORMATIONS";
 
-// Reports
-export const REPORTS = "REPORTS";
-
 // Notices of Work
 export const NOTICE_OF_WORK = "NOTICE_OF_WORK";
 

services/common/src/constants/reducerTypes.ts

@@ -3,7 +3,7 @@ import { showLoading, hideLoading } from "react-redux-loading-bar";
 import { ENVIRONMENT } from "@mds/common/constants/environment";
 import { request, success, error } from "../actions/genericActions";
 import { NetworkReducerTypes } from "@mds/common/constants/networkReducerTypes";
-import * as mineReportActions from "../actions/mineReportActions";
+import { storeMineReportComments } from "@mds/common/redux/slices/reportSlice";
 import * as API from "@mds/common/constants/API";
 import { createRequestHeader } from "../utils/RequestHeaders";
 import CustomAxios from "../customAxios";
@@ -18,7 +18,7 @@ export const fetchMineReportComments = (mineGuid, mineReportGuid) => (dispatch)
     )
     .then((response) => {
       dispatch(success(NetworkReducerTypes.GET_MINE_REPORT_COMMENTS));
-      dispatch(mineReportActions.storeMineReportComments(response.data));
+      dispatch(storeMineReportComments(response.data));
       return response;
     })
     .catch(() => dispatch(error(NetworkReducerTypes.GET_MINE_REPORT_COMMENTS)))

services/common/src/redux/actionCreators/reportActionCreator.ts

@@ -14,7 +14,6 @@ import orgbookReducerObject from "./reducers/orgbookReducer";
 import partiesReducerObject from "./reducers/partiesReducer";
 import permitReducerObject from "./reducers/permitReducer";
 import projectReducerObject from "./reducers/projectReducer";
-import reportReducerObject from "./reducers/reportReducer";
 import searchReducerObject from "./reducers/searchReducer";
 import securitiesReducerObject from "./reducers/securitiesReducer";
 import staticContentReducerObject from "./reducers/staticContentReducer";
@@ -32,7 +31,6 @@ export const documentViewerReducer = documentViewerReducerObject;
 export const noticeOfWorkReducer = noticeOfWorkReducerObject;
 export const partiesReducer = partiesReducerObject;
 export const permitReducer = permitReducerObject;
-export const reportReducer = reportReducerObject;
 export const searchReducer = searchReducerObject;
 export const staticContentReducer = staticContentReducerObject;
 export const varianceReducer = varianceReducerObject;