Repository: bcgov/mds
Pull request #3467: [FIX] Remaining Core-Web typescript issues
Author: login: taraepp
Created: 2025-03-18T19:21:01Z | Merged: 2025-03-19T23:21:05Z

## Objective 
- make those errors go away!
- noticed an issue with NoD modal, cleared that up. (Check this out yourself: go to core test/local, open up a NoD in the modal, and type in any of the text fields for the contacts. You lose focus after typing 1 character and then have to give focus again). Then there's a minor one is that the modal close button (on the bottom) doesn't work

_Why are you making this change? Provide a short explanation and/or screenshots_
The styling on this actions button looks a bit different now. 🤷‍♀️ 
![image](https://github.com/user-attachments/assets/4357b8d3-fe70-473c-b9cb-ff29986bd7aa)



Diff:
diff --git a/services/common/src/interfaces/noticeOfDeparture/NoDContact.interface.ts b/services/common/src/interfaces/noticeOfDeparture/NoDContact.interface.ts
index a160490e4e..017081b2c3 100644
--- a/services/common/src/interfaces/noticeOfDeparture/NoDContact.interface.ts
+++ b/services/common/src/interfaces/noticeOfDeparture/NoDContact.interface.ts
@@ -3,4 +3,6 @@ export interface INoDContactInterface {
   last_name: string;
   phone_number: string;
   email: string;
+  is_primary: boolean;
+  nod_contact_guid?: string;
 }
diff --git a/services/common/src/interfaces/noticeOfDeparture/NoDDocument.interface.ts b/services/common/src/interfaces/noticeOfDeparture/NoDDocument.interface.ts
index ae6cbcffe0..832e8a6250 100644
--- a/services/common/src/interfaces/noticeOfDeparture/NoDDocument.interface.ts
+++ b/services/common/src/interfaces/noticeOfDeparture/NoDDocument.interface.ts
@@ -1,9 +1,8 @@
-import { NoDTypeSaveEnum } from "@mds/common/constants/enums";
 import { IDocument } from "../document/document.interface";
 
 export interface INoDDocument extends IDocument {
   create_timestamp: string;
   create_user: string;
-  document_type: NoDTypeSaveEnum;
+  document_type: string;
   upload_date?: string;
 }
diff --git a/services/common/src/interfaces/noticeOfDeparture/noticeOfDeparture.interface.ts b/services/common/src/interfaces/noticeOfDeparture/noticeOfDeparture.interface.ts
index 1000aa8ae3..243ffada23 100644
--- a/services/common/src/interfaces/noticeOfDeparture/noticeOfDeparture.interface.ts
+++ b/services/common/src/interfaces/noticeOfDeparture/noticeOfDeparture.interface.ts
@@ -1,5 +1,4 @@
-import { IMine } from "@mds/common/interfaces/mine.interface";
-import { INoDPermit, INoDDocument } from "@mds/common/interfaces";
+import { INoDPermit, INoDDocument, INoDContactInterface } from "@mds/common/interfaces";
 import { NoDStatusDisplayEnum, NodStatusSaveEnum, NoDTypeSaveEnum } from "@mds/common/constants/enums";
 
 export interface INoticeOfDeparture {
@@ -10,13 +9,14 @@ export interface INoticeOfDeparture {
   nod_type: NoDTypeSaveEnum;
   nod_status: NoDStatusDisplayEnum | NodStatusSaveEnum;
   create_timestamp: string;
-  mine: IMine;
+  mine: {
+    mine_guid: string;
+    mine_no: string;
+    mine_name: string;
+  };
   documents: INoDDocument[];
   permit: Partial<INoDPermit>;
   submission_timestamp: string;
   update_timestamp: string;
-  mine_manager_name: string;
-
-  // TODO: This needs a type.
-  nod_contacts?: any[];
+  nod_contacts?: INoDContactInterface[];
 }
diff --git a/services/common/src/tests/mocks/dataMocks.tsx b/services/common/src/tests/mocks/dataMocks.tsx
index 33e642bf3d..1120d83873 100644
--- a/services/common/src/tests/mocks/dataMocks.tsx
+++ b/services/common/src/tests/mocks/dataMocks.tsx
@@ -7308,7 +7308,7 @@ export const MINE_ALERTS = {
     {
       mine_alert_guid: "3a31287c-82a3-46f0-a973-7a8a399718ad",
       start_date: "2022-10-27",
-      end_date: "2022-10-31",
+      end_date: "2052-10-31",
       contact_name: "mock name",
       contact_phone: "337-588-3109",
       message: "Mine under construction",
@@ -9407,12 +9407,11 @@ export const NOTICES_OF_DEPARTURE: { records: INoticeOfDeparture[] } = {
       },
       nod_status: NodStatusSaveEnum.pending_review,
       nod_type: NoDTypeSaveEnum.potentially_substantial,
-      mine_manager_name: "Maaanager",
     },
   ],
 };
 
-export const NOTICE_OF_DEPARTURE_DETAILS = {
+export const NOTICE_OF_DEPARTURE_DETAILS: INoticeOfDeparture = {
   nod_guid: "56c75a01-248f-4e2c-961a-131790205682",
   nod_title: "Test with checklist 1",
   nod_description: "Checklist description",
@@ -9427,8 +9426,8 @@ export const NOTICE_OF_DEPARTURE_DETAILS = {
     current_permittee: "Richardson-Weiss",
     permit_prefix: "C",
   },
-  nod_status: "pending_review",
-  nod_type: "potentially_substantial",
+  nod_status: NodStatusSaveEnum.pending_review,
+  nod_type: NoDTypeSaveEnum.potentially_substantial,
   documents: [
     {
       document_type: "checklist",
@@ -9438,8 +9437,15 @@ export const NOTICE_OF_DEPARTURE_DETAILS = {
       document_manager_guid: "8e1e0182-fef4-4f93-b76a-d2b65b6f3908",
       document_name: "Excel_Comments_Template.xlsx",
       upload_date: null,
+      create_user: "create-user"
     },
   ],
+  nod_no: "NOD-123",
+  mine: {
+    mine_guid: "8e9ca839-a28e-427e-997e-9ef23d9d97cd",
+    mine_no: "BLAH9091",
+    mine_name: "mine3"
+  }
 };
 
 export const PROJECT_DECISION_PACKAGE = {
diff --git a/services/core-web/src/components/mine/MineAlert.tsx b/services/core-web/src/components/mine/MineAlert.tsx
index 94fd25e0f6..2dd6b6e85e 100644
--- a/services/core-web/src/components/mine/MineAlert.tsx
+++ b/services/core-web/src/components/mine/MineAlert.tsx
@@ -1,11 +1,7 @@
-import React, { Component } from "react";
-import { Action, bindActionCreators, Dispatch } from "redux";
-import { connect } from "react-redux";
-import { getFormValues, getFormSyncErrors } from "@mds/common/components/forms/form";
-import { Alert, Button, Col, Row, Menu, Dropdown, Popconfirm } from "antd";
+import React, { FC, useEffect, useState } from "react";
+import { Alert, Col, Row, Modal } from "antd";
 import { openModal, closeModal } from "@mds/common/redux/actions/modalActions";
-import { formatDate } from "@common/utils/helpers";
-import { DownOutlined } from "@ant-design/icons";
+import { formatDate } from "@mds/common/redux/utils/helpers";
 import moment from "moment";
 import { getMineAlerts } from "@/selectors/mineAlertSelectors";
 import {
@@ -14,321 +10,248 @@ import {
   fetchMineAlertsByMine,
   deleteMineAlert,
 } from "@/actionCreators/mineAlertActionCreator";
-import * as FORM from "@/constants/forms";
 import * as ModalContent from "@/constants/modalContent";
 import { modalConfig } from "@/components/modalContent/config";
-import { IMineAlert } from "@mds/common/interfaces";
+import { IMine, IMineAlert } from "@mds/common/interfaces";
+import { useAppDispatch, useAppSelector } from "@mds/common/redux/rootState";
+import { ActionMenuButton, IHeaderAction } from "@mds/common/components/common/ActionMenu";
+
 
 interface MineAlertProps {
-  closeModal: () => void;
-  openModal: (arg: unknown) => void;
-  createMineAlert: (arg1: string, arg2: IMineAlert) => Promise<IMineAlert>;
-  updateMineAlert: (arg1: string, arg2: string, arg3: IMineAlert) => Promise<IMineAlert>;
-  deleteMineAlert: (arg1: string, arg2: string) => Promise<void>;
-  fetchMineAlertsByMine: (arg: string) => Promise<IMineAlert>;
-  mineAlerts: any;
-  mine: any;
+  mine: IMine;
 }
 
-interface MineAlertState {
-  loaded: boolean;
-  activeMineAlert: any;
-  pastMineAlerts: any[];
-}
+const MineAlert: FC<MineAlertProps> = ({ mine }) => {
+  const dispatch = useAppDispatch();
+  const [activeMineAlert, setActiveMineAlert] = useState<IMineAlert>();
+  const [pastMineAlerts, setPastMineAlerts] = useState<IMineAlert[]>([]);
+  const mineAlerts = useAppSelector(getMineAlerts);
+  const [loaded, setLoaded] = useState(mineAlerts.length > 0);
 
-export class MineAlert extends Component<MineAlertProps, MineAlertState> {
-  constructor(props: MineAlertProps) {
-    super(props);
-    this.state = {
-      loaded: false,
-      activeMineAlert: {},
-      pastMineAlerts: [],
-    };
-  }
 
-  componentDidMount() {
-    this.fetchAlerts();
-  }
+  const fetchAlerts = async () => {
+    setLoaded(false);
+    await dispatch(fetchMineAlertsByMine(mine.mine_guid));
+    setLoaded(true);
+  };
+
+  const remainingDays = (endDate: string) => {
+    const today = moment().startOf("day");
+    const end = moment(endDate).startOf("day");
+    return end.diff(today, "days");
+  };
 
-  handleCreateMineAlert = (values: IMineAlert) => {
-    this.props
-      .createMineAlert(this.props.mine.mine_guid, values)
+  useEffect(() => {
+    if (mineAlerts?.length > 0) {
+      const newActive = mineAlerts.filter((alert) => {
+        return alert.is_active && (alert.end_date == null || remainingDays(alert.end_date) >= 0)
+      })?.[0];
+      setActiveMineAlert(newActive);
+      const pastAlerts = mineAlerts.filter((alert) => {
+        return !alert.is_active || (alert.end_date && remainingDays(alert.end_date) < 0);
+      });
+      setPastMineAlerts(pastAlerts);
+    }
+
+  }, [mineAlerts])
+
+  useEffect(() => {
+    if (!loaded) {
+      fetchAlerts();
+    }
+  }, []);
+
+  const handleCreateMineAlert = (values: IMineAlert) => {
+    dispatch(createMineAlert(mine.mine_guid, values))
       .then(() => {
-        this.fetchAlerts();
+        fetchAlerts();
       })
       .finally(() => {
-        this.props.closeModal();
+        dispatch(closeModal());
       });
   };
 
-  handleUpdateMineAlert = (values: IMineAlert) => {
-    this.props
-      .updateMineAlert(this.props.mine.mine_guid, values.mine_alert_guid, values)
+  const handleUpdateMineAlert = (values: IMineAlert) => {
+    dispatch(updateMineAlert(mine.mine_guid, values.mine_alert_guid, values))
       .then(() => {
-        this.fetchAlerts();
-        this.props.closeModal();
+        fetchAlerts();
+        dispatch(closeModal());
       });
   };
 
-  handleRemoveAlert = (mineAlertGuid: string) => {
-    this.props
-      .deleteMineAlert(this.props.mine.mine_guid, mineAlertGuid)
-      .then(() => this.fetchAlerts());
+  const handleRemoveAlert = (mineAlertGuid: string) => {
+    dispatch(deleteMineAlert(mine.mine_guid, mineAlertGuid))
+      .then(() => fetchAlerts());
+  };
+
+  const removeConfirmWrapper = (mineAlert: IMineAlert) => {
+    const endDate = mineAlert.end_date ? ` - ${formatDate(activeMineAlert.end_date)}` : "";
+    const title = `Are you sure you want to delete alarm? ${formatDate(
+      mineAlert.start_date
+    )}${endDate}`;
+    return Modal.confirm({
+      title,
+      onOk: () => handleRemoveAlert(activeMineAlert.mine_alert_guid),
+      okText: "Delete",
+    })
   };
 
-  submitCreateMineAlarmForm = () => (values: IMineAlert) => {
+  const submitCreateMineAlarmForm = () => (values: IMineAlert) => {
     const payload = {
       ...values,
       start_date: moment(values.start_date).toISOString(),
       end_date: values.end_date ? moment(values.end_date).toISOString() : null,
     };
-    return this.handleCreateMineAlert(payload);
+    return handleCreateMineAlert(payload);
   };
 
-  submitUpdateMineAlarmForm = (mineAlertGuid: string) => (values: IMineAlert) => {
+  const submitUpdateMineAlarmForm = (mineAlertGuid: string) => (values: IMineAlert) => {
     const payload = {
       ...values,
       start_date: moment(values.start_date).toISOString(),
       end_date: values.end_date ? moment(values.end_date).toISOString() : null,
     };
     if (mineAlertGuid) {
-      return this.handleUpdateMineAlert(payload);
+      return handleUpdateMineAlert(payload);
     }
     return null;
   };
 
-  openCreateMineAlertModal = (activeMineAlert: any, mineAlerts: any) => {
-    return this.props.openModal({
+  const openCreateMineAlertModal = (activeMineAlert: IMineAlert, mineAlerts: IMineAlert[]) => {
+    dispatch(openModal({
       props: {
         title: ModalContent.CREATE_MINE_ALERT_RECORD,
         text: ModalContent.CREATE_MINE_ALERT_TEXT,
-        mineAlertGuid: this.state.activeMineAlert?.mine_alert_guid,
-        closeModal: this.props.closeModal,
-        onSubmit: this.submitCreateMineAlarmForm(),
+        mineAlertGuid: activeMineAlert?.mine_alert_guid,
+        closeModal: () => dispatch(closeModal()),
+        onSubmit: submitCreateMineAlarmForm(),
         activeMineAlert,
         mineAlerts,
       },
       content: modalConfig.ADD_MINE_ALERT,
-    });
+    }));
   };
 
-  openUpdateMineAlertModal = (activeMineAlert: any, mineAlerts: any) => {
-    return this.props.openModal({
+  const openUpdateMineAlertModal = (activeMineAlert: IMineAlert, mineAlerts: IMineAlert[]) => {
+    return dispatch(openModal({
       props: {
         title: ModalContent.EDIT_MINE_ALERT_RECORD,
         text: ModalContent.EDIT_MINE_ALERT_TEXT,
-        initialValues: this.state.activeMineAlert,
-        mineAlertGuid: this.state.activeMineAlert?.mine_alert_guid,
-        closeModal: this.props.closeModal,
-        onSubmit: this.submitUpdateMineAlarmForm(this.state.activeMineAlert?.mine_alert_guid),
+        initialValues: activeMineAlert,
+        mineAlertGuid: activeMineAlert?.mine_alert_guid,
+        closeModal: () => dispatch(closeModal()),
+        onSubmit: submitUpdateMineAlarmForm(activeMineAlert?.mine_alert_guid),
         activeMineAlert,
         mineAlerts,
       },
       content: modalConfig.ADD_MINE_ALERT,
-    });
+    }));
   };
 
-  openviewPastMineAlertModal = () => {
-    return this.props.openModal({
+  const openviewPastMineAlertModal = () => {
+    return dispatch(openModal({
       props: {
         title: ModalContent.PAST_MINE_ALERT_RECORD,
-        mineAlerts: this.state.pastMineAlerts,
-        closeModal: this.props.closeModal,
+        mineAlerts: pastMineAlerts,
+        closeModal: () => dispatch(closeModal()),
       },
       content: modalConfig.VIEW_PAST_MINE_ALERTS,
-    });
+    }));
   };
 
-  remainingDays = (endDate: Date) => {
-    const today = moment().startOf("day");
-    const end = moment(endDate).startOf("day");
-    return end.diff(today, "days");
-  };
-
-  async fetchAlerts(): Promise<void> {
-    await this.props.fetchMineAlertsByMine(this.props.mine.mine_guid);
-    this.setState({
-      activeMineAlert: this.props.mineAlerts?.filter(
-        (alert: { is_active: boolean; end_date: Date | null }) => {
-          return (
-            alert.is_active && (alert.end_date == null || this.remainingDays(alert.end_date) >= 0)
-          );
-        }
-      )?.[0],
-    });
-    this.setState({
-      pastMineAlerts: this.props.mineAlerts?.filter(
-        (alert: { is_active: boolean; end_date: Date | null }) => {
-          return !alert.is_active || (alert.end_date && this.remainingDays(alert.end_date) < 0);
-        }
-      ),
-    });
-    this.setState({ loaded: true });
-  }
-
-  render() {
-    const menu: any = (
-      <Menu>
-        <Menu.Item key="create">
-          <button
-            type="button"
-            className="full add-permit-dropdown-button"
-            onClick={() =>
-              this.openCreateMineAlertModal(this.state.activeMineAlert, this.state.pastMineAlerts)
-            }
-          >
-            Create New Alert
-          </button>
-        </Menu.Item>
-        {this.state.activeMineAlert && (
-          <Menu.Item key="edit">
-            <button
-              type="button"
-              className="full add-permit-dropdown-button"
-              onClick={() =>
-                this.openUpdateMineAlertModal(this.state.activeMineAlert, this.state.pastMineAlerts)
-              }
-            >
-              Edit Active Alert
-            </button>
-          </Menu.Item>
-        )}
-        {this.state.activeMineAlert && (
-          <Menu.Item key="remove">
-            <Popconfirm
-              title={`Are you sure you want to delete alarm? ${formatDate(
-                this.state.activeMineAlert?.start_date
-              )} ${this.state.activeMineAlert.end_date
-                ? `-  ${formatDate(this.state.activeMineAlert?.end_date)}`
-                : ""
-                }`}
-              onConfirm={() => this.handleRemoveAlert(this.state.activeMineAlert?.mine_alert_guid)}
-              okText="Delete"
-              cancelText="Cancel"
-            >
-              <button
-                type="button"
-                className="full add-permit-dropdown-button"
-                disabled={!this.state.activeMineAlert}
-              >
-                Remove Alert
-              </button>
-            </Popconfirm>
-          </Menu.Item>
-        )}
-        <Menu.Item key="history">
-          <button
-            type="button"
-            className="full add-permit-dropdown-button"
-            onClick={() => this.openviewPastMineAlertModal()}
-          >
-            View Alert History
-          </button>
-        </Menu.Item>
-      </Menu>
-    );
-
-    return (
-      <div>
-        {this.state.loaded && !this.state.activeMineAlert && (
-          <Alert
-            message=""
-            description={
-              <Row>
-                <Col xs={24} md={18}>
-                  <p>
-                    <b>There are no active staff alerts for this mine.</b>
-                  </p>
-                </Col>
-                <Col xs={24} md={6}>
-                  <div className="right center-mobile">
-                    {/* @ts-ignore */}
-                    <Dropdown overlay={menu} placement="bottomLeft">
-                      {/* @ts-ignore */}
-                      <Button type="secondary" className="ant-btn-alert-info-ghost">
-                        Actions
-                        <DownOutlined className="padding-sm--left" />
-                      </Button>
-                    </Dropdown>
-                  </div>
-                </Col>
-              </Row>
-            }
-            type="info"
-            showIcon
-            style={{ backgroundColor: "#F4F0F0", border: "1.5px solid #525252" }}
-            className="ant-alert-info ant-alert-info-custom-with-black-icon"
-          />
-        )}
-        {this.state.loaded && this.state.activeMineAlert && (
-          <Alert
-            message=""
-            description={
-              <Row>
-                <Col xs={24} md={18}>
-                  <p>
-                    {this.state.activeMineAlert.end_date ? (
-                      <b>
-                        {`Active Alert: ${formatDate(
-                          this.state.activeMineAlert.start_date
-                        )} - ${formatDate(this.state.activeMineAlert.end_date)}`}
-                      </b>
-                    ) : (
-                      <b>{`Active Alert: ${formatDate(this.state.activeMineAlert.start_date)}`}</b>
-                    )}
-                  </p>
-                  <p>
-                    {this.state.activeMineAlert.message}
-                    <br />
-                    For more information contact: {this.state.activeMineAlert.contact_name} -{" "}
-                    {this.state.activeMineAlert.contact_phone}
-                  </p>
-                </Col>
-                <Col xs={24} md={6}>
-                  <div className="right center-mobile">
-                    {/* @ts-ignore */}
-                    <Dropdown
-                      className="full-height full-mobile"
-                      overlay={menu}
-                      placement="bottomLeft"
-                    >
-                      {/* @ts-ignore */}
-                      <Button type="secondary" className="ant-btn-alert-warning-ghost">
-                        Actions
-                        <DownOutlined className="padding-sm--left" />
-                      </Button>
-                    </Dropdown>
-                  </div>
-                </Col>
-              </Row>
-            }
-            type="warning"
-            showIcon
-            style={{ backgroundColor: "#FFF2F0", border: "1.5px solid #FF0000" }}
-            className="ant-alert-warning ant-alert-warning-custom-with-red-icon"
-          />
-        )}
-      </div>
-    );
-  }
-}
-const mapStateToProps = (state: any) => ({
-  mineAlerts: getMineAlerts(state),
-  formValues: getFormValues(FORM.ADD_EDIT_MINE_ALERT)(state),
-  formErrors: getFormSyncErrors(FORM.ADD_EDIT_MINE_ALERT)(state),
-});
-
-const mapDispatchToProps = (dispatch: Dispatch<Action>) =>
-  bindActionCreators(
+  const menuActions: IHeaderAction[] = [
     {
-      openModal,
-      closeModal,
-      fetchMineAlertsByMine,
-      updateMineAlert,
-      deleteMineAlert,
-      createMineAlert,
+      key: "create",
+      label: "Create New Alert",
+      clickFunction: () => openCreateMineAlertModal(activeMineAlert, pastMineAlerts)
+    },
+    activeMineAlert && {
+      key: "edit",
+      label: "Edit Active Alert",
+      clickFunction: () => openUpdateMineAlertModal(activeMineAlert, pastMineAlerts)
     },
-    dispatch
+    activeMineAlert && {
+      key: "remove",
+      label: "Remove Alert",
+      clickFunction: () => removeConfirmWrapper(activeMineAlert)
+    },
+    {
+      key: "history",
+      label: "View Alert History",
+      clickFunction: () => openviewPastMineAlertModal()
+    }
+  ].filter(Boolean);
+
+  const dropdownMenu = <ActionMenuButton
+    actions={menuActions}
+    buttonProps={{ style: { backgroundColor: "transparent" } }}
+  />;
+
+  return (
+    <div>
+      {loaded && !activeMineAlert && (
+        <Alert
+          message=""
+          description={
+            <Row>
+              <Col xs={24} md={18}>
+                <p>
+                  <b>There are no active staff alerts for this mine.</b>
+                </p>
+              </Col>
+              <Col xs={24} md={6}>
+                <div className="right center-mobile">
+                  {dropdownMenu}
+                </div>
+              </Col>
+            </Row>
+          }
+          type="info"
+          showIcon
+          style={{ backgroundColor: "#F4F0F0", border: "1.5px solid #525252" }}
+          className="ant-alert-info ant-alert-info-custom-with-black-icon"
+        />
+      )}
+      {loaded && activeMineAlert && (
+        <Alert
+          message=""
+          description={
+            <Row>
+              <Col xs={24} md={18}>
+                <p>
+                  {activeMineAlert.end_date ? (
+                    <b>
+                      {`Active Alert: ${formatDate(
+                        activeMineAlert.start_date
+                      )} - ${formatDate(activeMineAlert.end_date)}`}
+                    </b>
+                  ) : (
+                    <b>{`Active Alert: ${formatDate(activeMineAlert.start_date)}`}</b>
+                  )}
+                </p>
+                <p>
+                  {activeMineAlert.message}
+                  <br />
+                  For more information contact: {activeMineAlert.contact_name} -{" "}
+                  {activeMineAlert.contact_phone}
+                </p>
+              </Col>
+              <Col xs={24} md={6}>
+                <div className="right center-mobile">
+                  {dropdownMenu}
+                </div>
+              </Col>
+            </Row>
+          }
+          type="warning"
+          showIcon
+          style={{ backgroundColor: "#FFF2F0", border: "1.5px solid #FF0000" }}
+          className="ant-alert-warning ant-alert-warning-custom-with-red-icon"
+        />
+      )}
+    </div>
   );
+};
+
 
-export default connect(mapStateToProps, mapDispatchToProps)(MineAlert);
+export default MineAlert;
diff --git a/services/core-web/src/components/mine/NoticeOfDeparture/MineNoticeOfDeparture.tsx b/services/core-web/src/components/mine/NoticeOfDeparture/MineNoticeOfDeparture.tsx
index d8d50ea04a..5de4b0cd80 100644
--- a/services/core-web/src/components/mine/NoticeOfDeparture/MineNoticeOfDeparture.tsx
+++ b/services/core-web/src/components/mine/NoticeOfDeparture/MineNoticeOfDeparture.tsx
@@ -57,18 +57,17 @@ export const MineNoticeOfDeparture: React.FC<IMineNoticeOfDepartureProps & Props
     if (event) {
       event.preventDefault();
     }
-    const detailedNoticeOfDeparture = await props.fetchDetailedNoticeOfDeparture(
+    await props.fetchDetailedNoticeOfDeparture(
       selectedNoticeOfDeparture.nod_guid
     );
+
     const title = props.userRoles.includes(USER_ROLES[Permission.EDIT_PERMITS])
       ? "Edit Notice of Departure"
       : "View Notice of Departure";
     props.openModal({
       props: {
-        noticeOfDeparture: detailedNoticeOfDeparture.data,
         title,
         clearOnSubmit: true,
-        mine,
       },
       width: "50vw",
       content: modalConfig.NOTICE_OF_DEPARTURE_MODAL,
diff --git a/services/core-web/src/components/mine/Permit/MinePermitInfo.tsx b/services/core-web/src/components/mine/Permit/MinePermitInfo.tsx
index 6c441ef16f..52ac580897 100644
--- a/services/core-web/src/components/mine/Permit/MinePermitInfo.tsx
+++ b/services/core-web/src/components/mine/Permit/MinePermitInfo.tsx
@@ -1,6 +1,4 @@
 import React, { FC, useEffect, useState, useRef } from "react";
-import { bindActionCreators } from "redux";
-import { ConnectedProps, connect } from "react-redux";
 import { Divider, Tabs } from "antd";
 import {
   fetchPermits,
@@ -20,7 +18,7 @@ import {
 } from "@mds/common/redux/actionCreators/mineActionCreator";
 import { openModal, closeModal } from "@mds/common/redux/actions/modalActions";
 import { getPermits } from "@mds/common/redux/selectors/permitSelectors";
-import { getMines, getMineGuid } from "@mds/common/redux/selectors/mineSelectors";
+import { getMineGuid, getMineById } from "@mds/common/redux/selectors/mineSelectors";
 import AuthorizationWrapper from "@/components/common/wrappers/AuthorizationWrapper";
 import ExplosivesPermit from "@/components/mine/ExplosivesPermit/ExplosivesPermit";
 import * as Permission from "@/constants/permissions";
@@ -30,11 +28,12 @@ import * as ModalContent from "@/constants/modalContent";
 import { modalConfig } from "@/components/modalContent/config";
 import { getExplosivesPermits } from "@mds/common/redux/selectors/explosivesPermitSelectors";
 import { getUserAccessData } from "@mds/common/redux/selectors/authenticationSelectors";
-import { IPermit, IMine, IExplosivesPermit } from "@mds/common/interfaces";
-import { ActionCreator } from "@mds/common/interfaces/actionCreator";
+import { IPermit } from "@mds/common/interfaces";
 import { useFeatureFlag } from "@mds/common/providers/featureFlags/useFeatureFlag";
 import { DigitalPermitCredential } from "@/components/mine/DigitalPermitCredential/DigitalPermitCredential";
 import { Feature } from "@mds/common/utils/featureFlag";
+import { useAppDispatch, useAppSelector } from "@mds/common/redux/rootState";
+import { useParams } from "react-router-dom";
 /**
  * @class  MinePermitInfo - contains all permit information
  */
@@ -42,31 +41,16 @@ import { Feature } from "@mds/common/utils/featureFlag";
 const amalgamatedPermit = "ALG";
 const originalPermit = "OGP";
 
-interface MinePermitInfoProps {
-  match: any;
-  mines: IMine[];
-  mineGuid: string;
-  permits?: IPermit[];
-  fetchPartyRelationships: (arg1: any) => any;
-  openModal: (arg1: any) => void;
-  closeModal: () => void;
-  createPermit: ActionCreator<typeof createPermit>;
-  fetchPermits: ActionCreator<typeof fetchPermits>;
-  updatePermit: ActionCreator<typeof updatePermit>;
-  updatePermitAmendment: ActionCreator<typeof updatePermitAmendment>;
-  createPermitAmendment: ActionCreator<typeof createPermitAmendment>;
-  createPermitAmendmentVC: ActionCreator<typeof createPermitAmendmentVC>;
-  removePermitAmendmentDocument: ActionCreator<typeof removePermitAmendmentDocument>;
-  fetchMineRecordById: (arg1: string) => Promise<any>;
-  deletePermit: ActionCreator<typeof deletePermit>;
-  deletePermitAmendment: ActionCreator<typeof deletePermitAmendment>;
-  userRoles: string[];
-  createMineTypes: (arg1: string, arg2: any) => Promise<any>;
-  explosivesPermits: IExplosivesPermit[];
-}
-
-export const MinePermitInfo: FC<MinePermitInfoProps> = (props) => {
-  const mine = props.mines[props.mineGuid];
+
+export const MinePermitInfo: FC = () => {
+  const mineGuid = useAppSelector(getMineGuid);
+  const mine = useAppSelector(getMineById(mineGuid));
+  const permits = useAppSelector(getPermits);
+  const explosivesPermits = useAppSelector(getExplosivesPermits);
+  const userRoles = useAppSelector(getUserAccessData);
+  const { id } = useParams<{ id: string }>();
+  const dispatch = useAppDispatch();
+
   const [expandedRowKeys, setExpandedRowKeys] = useState([]);
   const [modifiedPermits, setModifiedPermits] = useState(false);
   const [modifiedPermitGuid, setModifiedPermitGuid] = useState(null);
@@ -75,20 +59,19 @@ export const MinePermitInfo: FC<MinePermitInfoProps> = (props) => {
   const { isFeatureEnabled } = useFeatureFlag();
 
   const handleFetchData = () => {
-    const { id } = props.match.params;
-    return props.fetchMineRecordById(id).then(() => {
-      props.fetchPermits(id);
-      props.fetchPartyRelationships({
+    return dispatch(fetchMineRecordById(id)).then(() => {
+      dispatch(fetchPermits(id));
+      dispatch(fetchPartyRelationships({
         mine_guid: id,
         relationships: "party",
         include_permit_contacts: "true",
-      });
+      }));
       setIsLoaded(true);
     });
   };
 
   const closePermitModal = () => {
-    props.closeModal();
+    dispatch(closeModal());
     handleFetchData();
   };
 
@@ -100,10 +83,10 @@ export const MinePermitInfo: FC<MinePermitInfoProps> = (props) => {
     const payload = { ...values, permit_no };
     setModifiedPermits(true);
 
-    return props.createPermit(props.mineGuid, payload).then((data) => {
+    return dispatch(createPermit(mineGuid, payload)).then((data) => {
       if (data) {
         const siteProperties = { ...values.site_properties, permit_guid: data.data.permit_guid };
-        props.createMineTypes(props.mineGuid, [siteProperties]).then(closePermitModal);
+        dispatch(createMineTypes(mineGuid, [siteProperties])).then(closePermitModal);
       }
     });
   };
@@ -111,69 +94,65 @@ export const MinePermitInfo: FC<MinePermitInfoProps> = (props) => {
   const handleEditPermit = (values) => {
     // we do not need to provide site_properties on status update as it will fail if the site_properties are empty
     delete values.site_properties;
-    return props.updatePermit(props.mineGuid, values.permit_guid, values).then(closePermitModal);
+    return dispatch(updatePermit(mineGuid, values.permit_guid, values)).then(closePermitModal);
   };
 
   const handleEditSiteProperties = (values) => {
-    return props.updatePermit(props.mineGuid, values.permit_guid, values).then(closePermitModal);
+    return dispatch(updatePermit(mineGuid, values.permit_guid, values)).then(closePermitModal);
   };
 
   const handleDeletePermit = (permitGuid) =>
-    props.deletePermit(props.mineGuid, permitGuid).then(() => closePermitModal());
+    dispatch(deletePermit(mineGuid, permitGuid)).then(() => closePermitModal());
 
   // Amendment Handlers
   const handleEditPermitAmendment = (values) =>
-    props
-      .updatePermitAmendment(
-        props.mineGuid,
-        values.permit_guid,
-        values.permit_amendment_guid,
-        values
-      )
+    dispatch(updatePermitAmendment(
+      mineGuid,
+      values.permit_guid,
+      values.permit_amendment_guid,
+      values
+    ))
       .then(closePermitModal);
 
   const handleAddPermitAmendment = (values) => {
     setModifiedPermits(true);
     setModifiedPermitGuid(values.permit_guid);
-    return props
-      .createPermitAmendment(props.mineGuid, values.permit_guid, values)
+    return dispatch(createPermitAmendment(mineGuid, values.permit_guid, values))
       .then(closePermitModal);
   };
 
   const handleAddAmalgamatedPermit = (values) => {
     setModifiedPermits(true);
     setModifiedPermitGuid(values.permit_guid);
-    return props
-      .createPermitAmendment(props.mineGuid, values.permit_guid, {
-        ...values,
-        permit_amendment_type_code: amalgamatedPermit,
-      })
+    return dispatch(createPermitAmendment(mineGuid, values.permit_guid, {
+      ...values,
+      permit_amendment_type_code: amalgamatedPermit,
+    }))
       .then(closePermitModal);
   };
 
   const handlePermitAmendmentIssueVC = (event, permit_amendment, permit) => {
     event.preventDefault();
-    return props.createPermitAmendmentVC(
-      props.mineGuid,
+    return dispatch(createPermitAmendmentVC(
+      mineGuid,
       permit.permitGuid,
       permit_amendment.permit_amendment_guid
-    );
+    ));
   };
 
   const handleRemovePermitAmendmentDocument = (permitGuid, permitAmendmentGuid, documentGuid) =>
-    props
-      .removePermitAmendmentDocument(props.mineGuid, permitGuid, permitAmendmentGuid, documentGuid)
+    dispatch(
+      removePermitAmendmentDocument(mineGuid, permitGuid, permitAmendmentGuid, documentGuid))
       .then(() => {
-        props.fetchPermits(props.mineGuid);
+        dispatch(fetchPermits(mineGuid));
       });
 
   const handleDeletePermitAmendment = (record) =>
-    props
-      .deletePermitAmendment(
-        props.mineGuid,
-        record.permit.permit_guid,
-        record.permit_amendment_guid
-      )
+    dispatch(deletePermitAmendment(
+      mineGuid,
+      record.permit.permit_guid,
+      record.permit_amendment_guid
+    ))
       .then(() => closePermitModal());
 
   const onExpand = (expanded, record) =>
@@ -189,53 +168,53 @@ export const MinePermitInfo: FC<MinePermitInfoProps> = (props) => {
     return ref.current;
   };
 
-  const prevPermits = usePrevPermits(props.permits);
+  const prevPermits = usePrevPermits(permits);
 
   const openAddPermitModal = (event, onSubmit, title) => {
     event.preventDefault();
-    props.openModal({
+    dispatch(openModal({
       props: {
         initialValues: {
-          mine_guid: props.mineGuid,
+          mine_guid: mineGuid,
         },
         onSubmit,
         title,
-        mine_guid: props.mineGuid,
+        mine_guid: mineGuid,
       },
       width: "50vw",
       content: modalConfig.ADD_PERMIT,
-    });
+    }));
   };
 
   const openViewConditionModal = (event, conditions, amendmentNumber, permitNo) => {
     event.preventDefault();
-    return props.openModal({
+    return dispatch(openModal({
       props: {
         title: `${permitNo} - Permit Conditions for Amendment #${amendmentNumber}`,
-        closeModal: props.closeModal,
+        closeModal: () => dispatch(closeModal()),
         conditions,
       },
       width: "50vw",
       isViewOnly: true,
       content: modalConfig.VIEW_ALL_CONDITION_MODAL,
-    });
+    }));
   };
 
   const openEditPermitModal = (event, permit) => {
     event.preventDefault();
-    props.openModal({
+    dispatch(openModal({
       props: {
         initialValues: permit,
         onSubmit: handleEditPermit,
         title: `Edit Permit Status for ${permit.permit_no}`,
       },
       content: modalConfig.EDIT_PERMIT,
-    });
+    }));
   };
 
   const openEditSitePropertiesModal = (event, permit) => {
     event.preventDefault();
-    props.openModal({
+    dispatch(openModal({
       props: {
         initialValues: permit,
         permit,
@@ -243,7 +222,7 @@ export const MinePermitInfo: FC<MinePermitInfoProps> = (props) => {
         title: `Edit Site Properties for ${permit.permit_no}`,
       },
       content: modalConfig.EDIT_SITE_PROPERTIES_MODAL,
-    });
+    }));
   };
 
   // Amendment Modals
@@ -254,10 +233,10 @@ export const MinePermitInfo: FC<MinePermitInfoProps> = (props) => {
       permit.permit_amendments.some(
         (amendment) => amendment.vc_credential_exch_state === "credential_acked"
       );
-    props.openModal({
+    dispatch(openModal({
       props: {
         initialValues: {
-          mine_guid: props.mineGuid,
+          mine_guid: mineGuid,
           permit_guid: permit.permit_guid,
           permit_amendment_type_code: type,
           amendments: permit.permit_amendments,
@@ -265,37 +244,37 @@ export const MinePermitInfo: FC<MinePermitInfoProps> = (props) => {
         },
         onSubmit,
         title,
-        mine_guid: props.mineGuid,
+        mine_guid: mineGuid,
         amendments: permit.permit_amendments,
         show_vc_warning: show_vc_warning,
       },
       width: "50vw",
       content: modalConfig.PERMIT_AMENDMENT,
-    });
+    }));
   };
 
   const openAddHistoricalAmendmentModal = (event, onSubmit, title, permit, type) => {
     event.preventDefault();
-    props.openModal({
+    dispatch(openModal({
       props: {
         initialValues: {
-          mine_guid: props.mineGuid,
+          mine_guid: mineGuid,
           permit_guid: permit.permit_guid,
           permit_amendment_type_code: type,
           amendments: permit.permit_amendments,
           is_historical_amendment: true,
-          userRoles: props.userRoles,
+          userRoles: userRoles,
           permit_prefix: permit.permit_prefix,
         },
         onSubmit,
         title,
         is_historical_amendment: true,
-        mine_guid: props.mineGuid,
+        mine_guid: mineGuid,
         amendments: permit.permit_amendments,
       },
       width: "50vw",
       content: modalConfig.PERMIT_AMENDMENT,
-    });
+    }));
   };
 
   const openEditAmendmentModal = (event, permit_amendment, permit) => {
@@ -303,12 +282,12 @@ export const MinePermitInfo: FC<MinePermitInfoProps> = (props) => {
     const originalPermitAmendment = permit.permit_amendments.filter(
       (x) => x.permit_amendment_type_code === originalPermit
     )[0];
-    props.openModal({
+    dispatch(openModal({
       props: {
         initialValues: {
           ...permit_amendment,
           amendments: permit.permit_amendments,
-          userRoles: props.userRoles,
+          userRoles: userRoles,
           is_historical_amendment:
             originalPermitAmendment &&
             originalPermitAmendment.issue_date > permit_amendment.issue_date,
@@ -319,14 +298,14 @@ export const MinePermitInfo: FC<MinePermitInfoProps> = (props) => {
           permit_amendment.permit_amendment_type_code === originalPermit
             ? `Edit Initial Permit for ${permit.permit_no}`
             : `Edit Permit Amendment for ${permit.permit_no}`,
-        mine_guid: props.mineGuid,
-        isMajorMine: props.mines[props.mineGuid].major_mine_ind,
+        mine_guid: mineGuid,
+        isMajorMine: mine.major_mine_ind,
         permit_guid: permit.permit_guid,
         handleRemovePermitAmendmentDocument: handleRemovePermitAmendmentDocument,
       },
       width: "50vw",
       content: modalConfig.PERMIT_AMENDMENT,
-    });
+    }));
   };
 
   const openAddAmalgamatedPermitModal = (event, permit) =>
@@ -357,7 +336,7 @@ export const MinePermitInfo: FC<MinePermitInfoProps> = (props) => {
     );
 
   useEffect(() => {
-    if (props.permits.length === 0 || !props.mineGuid) {
+    if (permits.length === 0 || !mineGuid) {
       handleFetchData();
     } else {
       setIsLoaded(true);
@@ -365,12 +344,12 @@ export const MinePermitInfo: FC<MinePermitInfoProps> = (props) => {
   }, []);
 
   useEffect(() => {
-    if (modifiedPermits && props.permits !== prevPermits) {
+    if (modifiedPermits && permits !== prevPermits) {
       const currentPermits = prevPermits
-        ?.filter((p) => p.mine_guid === props.mineGuid)
+        ?.filter((p) => p.mine_guid === mineGuid)
         .map((x) => x.permit_guid);
-      const nextPermits = props.permits
-        ?.filter((p) => p.mine_guid === props.mineGuid)
+      const nextPermits = permits
+        ?.filter((p) => p.mine_guid === mineGuid)
         .map((x) => x.permit_guid);
 
       setExpandedRowKeys(
@@ -380,7 +359,67 @@ export const MinePermitInfo: FC<MinePermitInfoProps> = (props) => {
       );
       setModifiedPermitGuid(null);
     }
-  }, [props.permits]);
+  }, [permits]);
+
+  const tabItems = [
+    {
+      key: "permits",
+      label: `Mines Act Permits (${permits?.length | 0})`,
+      children: <>
+        <br />
+        <div>
+          <div className="inline-flex between">
+            <h4 className="uppercase">Mines Act Permits</h4>
+            <AuthorizationWrapper permission={Permission.EDIT_PERMITS}>
+              <AddButton
+                onClick={(event) =>
+                  openAddPermitModal(
+                    event,
+                    handleAddPermit,
+                    `${ModalContent.ADD_PERMIT} to ${mine.mine_name}`
+                  )
+                }
+              >
+                Add a New Permit
+              </AddButton>
+            </AuthorizationWrapper>
+          </div>
+        </div>
+        <MinePermitTable
+          isLoaded={isLoaded}
+          permits={permits}
+          openEditPermitModal={openEditPermitModal}
+          openEditAmendmentModal={openEditAmendmentModal}
+          openEditSitePropertiesModal={openEditSitePropertiesModal}
+          openAddPermitAmendmentModal={openAddPermitAmendmentModal}
+          openAddPermitHistoricalAmendmentModal={openAddPermitHistoricalAmendmentModal}
+          openAddAmalgamatedPermitModal={openAddAmalgamatedPermitModal}
+          handlePermitAmendmentIssueVC={handlePermitAmendmentIssueVC}
+          expandedRowKeys={expandedRowKeys}
+          onExpand={onExpand}
+          handleDeletePermit={handleDeletePermit}
+          handleDeletePermitAmendment={handleDeletePermitAmendment}
+          openViewConditionModal={openViewConditionModal}
+        />
+      </>
+    },
+    {
+      key: "esups",
+      label: `Explosives Storage & Use Permits (${explosivesPermits.filter(({ application_status }) => application_status === "APP")
+        .length
+        })`,
+      children: <ExplosivesPermit isPermitTab />
+    },
+    isFeatureEnabled(Feature.VC_ANONCREDS_CORE) && {
+      key: "digital-permit-credentials",
+      label: `Digital Permit Credentials (${permits.filter(
+        ({ current_permittee_digital_wallet_connection_state }) =>
+          !!current_permittee_digital_wallet_connection_state
+      ).length
+        })`,
+      children: <DigitalPermitCredential />
+    }
+  ].filter(Boolean);
 
   return (
     <div className="tab__content">
@@ -388,99 +427,9 @@ export const MinePermitInfo: FC<MinePermitInfoProps> = (props) => {
         <h2>Permits</h2>
         <Divider />
       </div>
-      {/* @ts-ignore */}
-      <Tabs type="card" style={{ textAlign: "left !important" }}>
-        <Tabs.TabPane tab={`Mines Act Permits (${props.permits?.length | 0})`} key="1">
-          <>
-            <br />
-            <div>
-              <div className="inline-flex between">
-                <h4 className="uppercase">Mines Act Permits</h4>
-                <AuthorizationWrapper permission={Permission.EDIT_PERMITS}>
-                  <AddButton
-                    onClick={(event) =>
-                      openAddPermitModal(
-                        event,
-                        handleAddPermit,
-                        `${ModalContent.ADD_PERMIT} to ${mine.mine_name}`
-                      )
-                    }
-                  >
-                    Add a New Permit
-                  </AddButton>
-                </AuthorizationWrapper>
-              </div>
-            </div>
-            <MinePermitTable
-              isLoaded={isLoaded}
-              permits={props.permits}
-              openEditPermitModal={openEditPermitModal}
-              openEditAmendmentModal={openEditAmendmentModal}
-              openEditSitePropertiesModal={openEditSitePropertiesModal}
-              openAddPermitAmendmentModal={openAddPermitAmendmentModal}
-              openAddPermitHistoricalAmendmentModal={openAddPermitHistoricalAmendmentModal}
-              openAddAmalgamatedPermitModal={openAddAmalgamatedPermitModal}
-              handlePermitAmendmentIssueVC={handlePermitAmendmentIssueVC}
-              expandedRowKeys={expandedRowKeys}
-              onExpand={onExpand}
-              handleDeletePermit={handleDeletePermit}
-              handleDeletePermitAmendment={handleDeletePermitAmendment}
-              openViewConditionModal={openViewConditionModal}
-            />
-          </>
-        </Tabs.TabPane>
-        <Tabs.TabPane
-          tab={`Explosives Storage & Use Permits (${props.explosivesPermits.filter(({ application_status }) => application_status === "APP")
-            .length
-            })`}
-          key="2"
-        >
-          <ExplosivesPermit isPermitTab />
-        </Tabs.TabPane>
-        {isFeatureEnabled(Feature.VC_ANONCREDS_CORE) && (
-          <Tabs.TabPane
-            tab={`Digital Permit Credentials (${props.permits.filter(
-              ({ current_permittee_digital_wallet_connection_state }) =>
-                !!current_permittee_digital_wallet_connection_state
-            ).length
-              })`}
-            key="3"
-          >
-            <DigitalPermitCredential />
-          </Tabs.TabPane>
-        )}
-      </Tabs>
+      <Tabs type="card" items={tabItems} />
     </div>
   );
 };
 
-const mapStateToProps = (state) => ({
-  permits: getPermits(state),
-  mines: getMines(state),
-  mineGuid: getMineGuid(state),
-  userRoles: getUserAccessData(state),
-  explosivesPermits: getExplosivesPermits(state),
-});
-
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators(
-    {
-      fetchPermits,
-      createPermit,
-      updatePermit,
-      updatePermitAmendment,
-      createPermitAmendment,
-      createPermitAmendmentVC,
-      removePermitAmendmentDocument,
-      fetchPartyRelationships,
-      fetchMineRecordById,
-      openModal,
-      closeModal,
-      deletePermit,
-      deletePermitAmendment,
-      createMineTypes,
-    },
-    dispatch
-  );
-
-  export default connect(mapStateToProps, mapDispatchToProps)(MinePermitInfo);
+export default MinePermitInfo;
diff --git a/services/core-web/src/components/modalContent/NoticeOfDepartureModal.tsx b/services/core-web/src/components/modalContent/NoticeOfDepartureModal.tsx
index bb7f1021b6..5704e5dc2f 100644
--- a/services/core-web/src/components/modalContent/NoticeOfDepartureModal.tsx
+++ b/services/core-web/src/components/modalContent/NoticeOfDepartureModal.tsx
@@ -1,7 +1,5 @@
 import React, { useEffect, useState } from "react";
 import { Button, Col, Popconfirm, Row, Form } from "antd";
-import { connect, useSelector } from "react-redux";
-import { bindActionCreators, compose } from "redux";
 import {
   EMPTY_FIELD,
   NOTICE_OF_DEPARTURE_DOCUMENT_TYPE,
@@ -9,7 +7,7 @@ import {
   NOTICE_OF_DEPARTURE_STATUS_VALUES,
   NOTICE_OF_DEPARTURE_TYPE,
 } from "@mds/common/constants/strings";
-import { formatDate, normalizePhone } from "@common/utils/helpers";
+import { formatDate, normalizePhone } from "@mds/common/redux/utils/helpers";
 import {
   addDocumentToNoticeOfDeparture,
   fetchDetailedNoticeOfDeparture,
@@ -17,7 +15,6 @@ import {
   removeFileFromDocumentManager,
   updateNoticeOfDeparture,
 } from "@mds/common/redux/actionCreators/noticeOfDepartureActionCreator";
-import { getNoticeOfDeparture } from "@mds/common/redux/selectors/noticeOfDepartureSelectors";
 import { Field, FieldArray, change, getFormValues } from "@mds/common/components/forms/form";
 import {
   email,
@@ -26,7 +23,7 @@ import {
   required,
   requiredList,
 } from "@mds/common/redux/utils/Validate";
-import { getUserAccessData } from "@mds/common/redux/selectors/authenticationSelectors";
+import { userHasRole } from "@mds/common/redux/selectors/authenticationSelectors";
 import CoreTable from "@mds/common/components/common/CoreTable";
 import {
   renderDateColumn,
@@ -38,27 +35,27 @@ import { NOTICE_OF_DEPARTURE_DOCUMENTS } from "@/constants/API";
 import { renderConfig } from "@/components/common/config";
 import FileUpload from "@/components/common/FileUpload";
 import { DOCUMENT, EXCEL } from "@/constants/fileTypes";
-import * as Permission from "@/constants/permissions";
 import { renderDocumentLinkColumn } from "../common/DocumentColumns";
 import FormWrapper from "@mds/common/components/forms/FormWrapper";
 import RenderSubmitButton from "@mds/common/components/forms/RenderSubmitButton";
 import RenderCancelButton from "@mds/common/components/forms/RenderCancelButton";
-import { ICreateNoD, IMine, INoDContactInterface, INoticeOfDeparture } from "@mds/common/interfaces";
+import { INoticeOfDeparture } from "@mds/common/interfaces";
 import { USER_ROLES } from "@mds/common/constants/environment";
+import { useAppDispatch, useAppSelector } from "@mds/common/redux/rootState";
+import { closeModal } from "@mds/common/redux/actions/modalActions";
+import { getNoticeOfDeparture } from "@mds/common/redux/selectors/noticeOfDepartureSelectors";
+import { getMatchingPartyRelationships } from "@mds/common/redux/selectors/partiesSelectors";
+import { MinePartyAppointmentTypeCodeEnum } from "@mds/common/constants/enums";
 
-interface RenderContactsProps {
-  fields: INoDContactInterface[];
-}
 
-export const renderContacts: React.FC<RenderContactsProps> = (props, disabled = false) => {
-  const { fields } = props;
+const NodContacts = ({ fields, disabled }) => {
   return (
     <div className="margin-large--bottom">
       {fields.length > 0 && (
         <p className="nod-modal-section-sub-header margin-large--top">Primary Contact</p>
       )}
-      {fields.map((contact, index) => (
-        <Row gutter={16} key={index}>
+      {fields.map((contact: string) => (
+        <Row gutter={16} key={contact}>
           <Col span={12}>
             <Field
               label="First Name"
@@ -113,32 +110,20 @@ export const renderContacts: React.FC<RenderContactsProps> = (props, disabled =
   );
 };
 
-interface NoticeOfDepartureModalProps {
-  initialValues: Partial<ICreateNoD>;
-  closeModal: () => void;
-  noticeOfDeparture: INoticeOfDeparture;
-  fetchDetailedNoticeOfDeparture: any;
-  fetchNoticesOfDeparture: any;
-  updateNoticeOfDeparture: any;
-  addDocumentToNoticeOfDeparture: any;
-  mine: IMine;
-  userRoles: string[];
-  change: (formName: string, field: string, value: any) => void;
-}
-
-const NoticeOfDepartureModal: React.FC<NoticeOfDepartureModalProps> = (props) => {
-  const [statusOptions, setStatusOptions] = React.useState([]);
+const NoticeOfDepartureModal: React.FC = () => {
+  const dispatch = useAppDispatch();
+  const [statusOptions, setStatusOptions] = useState([]);
   const [documentArray, setDocumentArray] = useState([]);
   const [uploadedFiles, setUploadedFiles] = useState([]);
   const [uploading, setUploading] = useState(false);
   const formName = FORM.NOTICE_OF_DEPARTURE_FORM;
-  const formValues = useSelector(getFormValues(formName));
-  const currentStatus = formValues?.nod_status
-
-  const { noticeOfDeparture, mine, change } = props;
-  const { nod_guid } = noticeOfDeparture;
-
-  const hasEditPermission = props.userRoles.includes(USER_ROLES[Permission.EDIT_PERMITS]);
+  const formValues = useAppSelector(getFormValues(formName)) as INoticeOfDeparture;
+  const noticeOfDeparture = useAppSelector(getNoticeOfDeparture)
+  const currentStatus = formValues?.nod_status;
+  const mineManagers = useAppSelector(getMatchingPartyRelationships(MinePartyAppointmentTypeCodeEnum.MMG));
+  const currentMineManager = mineManagers?.filter((m) => m.status === 'active')?.[0];
+  const { nod_guid, mine } = noticeOfDeparture;
+  const hasEditPermission = useAppSelector(userHasRole(USER_ROLES.role_edit_permits));
   const disabled = !hasEditPermission;
 
   const checklist = noticeOfDeparture.documents.filter(
@@ -162,14 +147,14 @@ const NoticeOfDepartureModal: React.FC<NoticeOfDepartureModalProps> = (props) =>
 
   const handleAddDocuments = (noticeOfDepartureGuid) => {
     documentArray.forEach((document) =>
-      props.addDocumentToNoticeOfDeparture(
-        { mineGuid: mine.mine_guid, noticeOfDepartureGuid },
+      dispatch(addDocumentToNoticeOfDeparture(
+        { noticeOfDepartureGuid },
         {
           document_type: document.document_type,
           document_name: document.document_name,
           document_manager_guid: document.document_manager_guid,
         }
-      )
+      ))
     );
   };
 
@@ -193,7 +178,7 @@ const NoticeOfDepartureModal: React.FC<NoticeOfDepartureModalProps> = (props) =>
   };
 
   useEffect(() => {
-    change(formName, "uploadedFiles", documentArray);
+    dispatch(change(formName, "uploadedFiles", documentArray));
   }, [documentArray]);
 
   const onRemoveFile = (_, fileItem) => {
@@ -225,16 +210,16 @@ const NoticeOfDepartureModal: React.FC<NoticeOfDepartureModalProps> = (props) =>
   const handleDeleteANoticeOfDepartureDocument = async (document) => {
     await removeFileFromDocumentManager(document);
 
-    await props.fetchDetailedNoticeOfDeparture(nod_guid);
+    await dispatch(fetchDetailedNoticeOfDeparture(nod_guid));
   };
 
   const updateNoticeOfDepartureSubmit = async (values) => {
-    await props.updateNoticeOfDeparture({ mineGuid: mine.mine_guid, nodGuid: nod_guid }, values);
+    await dispatch(updateNoticeOfDeparture({ nodGuid: nod_guid }, values));
     if (documentArray.length > 0) {
       await handleAddDocuments(nod_guid);
     }
-    await props.fetchNoticesOfDeparture(mine.mine_guid);
-    props.closeModal();
+    await dispatch(fetchNoticesOfDeparture(mine.mine_guid));
+    dispatch(closeModal());
   };
 
   const fileColumns = (isSortable: boolean) => {
@@ -276,8 +261,9 @@ const NoticeOfDepartureModal: React.FC<NoticeOfDepartureModalProps> = (props) =>
   return (
     <div>
       <FormWrapper
+        isModal
         name={FORM.NOTICE_OF_DEPARTURE_FORM}
-        initialValues={props.initialValues}
+        initialValues={noticeOfDeparture}
         reduxFormConfig={{
           touchOnBlur: false,
           forceUnregisterOnUnmount: true,
@@ -310,7 +296,7 @@ const NoticeOfDepartureModal: React.FC<NoticeOfDepartureModalProps> = (props) =>
           </div>
           <div className="inline-flex padding-sm">
             <p className="field-title margin-large--right">Mine Manager</p>
-            <p>{formatDate(noticeOfDeparture.mine_manager_name) || EMPTY_FIELD}</p>
+            <p>{currentMineManager?.party?.name || EMPTY_FIELD}</p>
           </div>
           <div className="inline-flex padding-sm">
             <p className="field-title margin-large--right">Submitted</p>
@@ -319,7 +305,8 @@ const NoticeOfDepartureModal: React.FC<NoticeOfDepartureModalProps> = (props) =>
         </div>
         <FieldArray
           name="nod_contacts"
-          component={(componentProps) => renderContacts(componentProps, disabled)}
+          component={NodContacts}
+          disabled={disabled}
         />
         <h4 className="nod-modal-section-header padding-md--top">Self-Assessment Form</h4>
         <CoreTable condition columns={fileColumns(false)} dataSource={checklist} />
@@ -389,7 +376,7 @@ const NoticeOfDepartureModal: React.FC<NoticeOfDepartureModalProps> = (props) =>
             <Button
               className="full-mobile nod-cancel-button"
               type="primary"
-              onClick={props.closeModal}
+              onClick={() => dispatch(closeModal())}
             >
               Close
             </Button>
@@ -405,24 +392,5 @@ const NoticeOfDepartureModal: React.FC<NoticeOfDepartureModalProps> = (props) =>
   );
 };
 
-const mapStateToProps = (state) => ({
-  noticeOfDeparture: getNoticeOfDeparture(state),
-  initialValues: getNoticeOfDeparture(state),
-  userRoles: getUserAccessData(state),
-});
-
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators(
-    {
-      fetchDetailedNoticeOfDeparture,
-      updateNoticeOfDeparture,
-      fetchNoticesOfDeparture,
-      addDocumentToNoticeOfDeparture,
-      change,
-    },
-    dispatch
-  );
 
-export default compose(
-  connect(mapStateToProps, mapDispatchToProps)
-)(NoticeOfDepartureModal as any) as React.FC<NoticeOfDepartureModalProps>;
\ No newline at end of file
+export default NoticeOfDepartureModal;
\ No newline at end of file
diff --git a/services/core-web/src/reducers/mineAlertReducer.ts b/services/core-web/src/reducers/mineAlertReducer.ts
index 3a9e2d0bcc..0b27c7348d 100644
--- a/services/core-web/src/reducers/mineAlertReducer.ts
+++ b/services/core-web/src/reducers/mineAlertReducer.ts
@@ -33,7 +33,7 @@ const mineAlertReducerObject = {
   [MINE_ALERTS]: mineAlertReducer,
 };
 
-export const getMineAlerts = (state: RootState): IMineAlertList => state[MINE_ALERTS].mineAlerts;
+export const getMineAlerts = (state: RootState): IMineAlert[] => state[MINE_ALERTS].mineAlerts;
 export const getGlobalMineAlerts = (state: RootState): IMineAlertList =>
   state[MINE_ALERTS].globalMineAlerts;
 
diff --git a/services/core-web/src/tests/components/mine/MineAlert.spec.tsx b/services/core-web/src/tests/components/mine/MineAlert.spec.tsx
index 0a00213b5b..56a311cab1 100644
--- a/services/core-web/src/tests/components/mine/MineAlert.spec.tsx
+++ b/services/core-web/src/tests/components/mine/MineAlert.spec.tsx
@@ -1,33 +1,23 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { MineAlert } from "@/components/mine/MineAlert";
-import * as MOCK from "@/tests/mocks/dataMocks";
+import { render } from "@testing-library/react";
+import { ReduxWrapper } from "@/tests/utils/ReduxWrapper";
+import MineAlert from "@/components/mine/MineAlert";
+import * as MOCK from "@mds/common/tests/mocks/dataMocks";
+import { MINE_ALERTS } from "@/constants/reducerTypes";
 
-const props: any = {};
-const dispatchProps: any = {};
-
-const setupDispatchProps = () => {
-  dispatchProps.createMineAlert = jest.fn();
-  dispatchProps.updateMineAlert = jest.fn();
-  dispatchProps.fetchMineAlertsByMine = jest.fn(() => Promise.resolve());
-  dispatchProps.deleteMineAlert = jest.fn();
-  dispatchProps.closeModal = jest.fn();
-  dispatchProps.openModal = jest.fn();
-};
-
-const setupProps = () => {
-  props.mine = MOCK.MINES.mines[MOCK.MINES.mineIds[0]];
-  props.mineAlerts = MOCK.MINE_ALERTS.records;
-};
-
-beforeEach(() => {
-  setupDispatchProps();
-  setupProps();
-});
+const initialState = {
+  [MINE_ALERTS]: {
+    mineAlerts: MOCK.MINE_ALERTS.records
+  }
+}
 
 describe("MineAlert", () => {
   it("renders dispatchProperly", () => {
-    const component = shallow(<MineAlert {...dispatchProps} {...props} />);
-    expect(component).toMatchSnapshot();
+    const { container } = render(
+      <ReduxWrapper initialState={initialState}>
+        <MineAlert mine={MOCK.MINES.mines[MOCK.MINES.mineIds[0]]} />
+      </ReduxWrapper>
+    )
+    expect(container).toMatchSnapshot();
   });
 });
diff --git a/services/core-web/src/tests/components/mine/Permit/MinePermitInfo.spec.tsx b/services/core-web/src/tests/components/mine/Permit/MinePermitInfo.spec.tsx
index 98ec0ca4f1..9c805c1240 100644
--- a/services/core-web/src/tests/components/mine/Permit/MinePermitInfo.spec.tsx
+++ b/services/core-web/src/tests/components/mine/Permit/MinePermitInfo.spec.tsx
@@ -3,15 +3,13 @@ import { render } from "@testing-library/react";
 import { MinePermitInfo } from "@/components/mine/Permit/MinePermitInfo";
 import * as MOCK from "@mds/common/tests/mocks/dataMocks";
 import { ReduxWrapper } from "@mds/common/tests/utils/ReduxWrapper";
-import { AUTHENTICATION, PERMITS, STATIC_CONTENT } from "@mds/common/constants/reducerTypes";
+import { AUTHENTICATION, MINES, PERMITS, STATIC_CONTENT } from "@mds/common/constants/reducerTypes";
 import { USER_ROLES } from "@mds/common/constants/environment";
 import { BrowserRouter } from "react-router-dom";
 
-const dispatchProps: any = {};
-const props: any = {};
-
 const initialState = {
   [PERMITS]: { permits: MOCK.PERMITS },
+  [MINES]: { ...MOCK.MINES, mineGuid: "8e9ca839-a28e-427e-997e-9ef23d9d97cd" },
   [AUTHENTICATION]: {
     userAccessData: [USER_ROLES.role_admin],
   },
@@ -22,34 +20,28 @@ const initialState = {
   },
 };
 
-const setupDispatchProps = () => {
-  dispatchProps.fetchPermits = jest.fn(() => Promise.resolve());
-  dispatchProps.fetchPermitStatusOptions = jest.fn();
-  dispatchProps.fetchMineRecordById = jest.fn(() => Promise.resolve());
-};
-
-const setupProps = () => {
-  props.mineGuid = "18145c75-49ad-0101-85f3-a43e45ae989a";
-  props.match = { params: { id: "18145c75-49ad-0101-85f3-a43e45ae989a" } };
-  props.mines = MOCK.MINES.mines;
-  props.explosivesPermits = [];
-  props.permits = MOCK.PERMITS;
-};
-
-beforeEach(() => {
-  setupDispatchProps();
-  setupProps();
-});
+function mockFunction() {
+  const original = jest.requireActual("react-router-dom");
+  return {
+    ...original,
+    useParams: jest.fn().mockReturnValue({
+      id: "8e9ca839-a28e-427e-997e-9ef23d9d97cd",
+    }),
+  };
+}
+jest.mock("react-router-dom", () => mockFunction());
 
 describe("MinePermitInfo", () => {
   it("renders properly", () => {
     const { container } = render(
       <ReduxWrapper initialState={initialState}>
         <BrowserRouter>
-          <MinePermitInfo {...dispatchProps} {...props} />
+          <MinePermitInfo />
         </BrowserRouter>
       </ReduxWrapper>
     );
+    const permitsTable = container.querySelector(".permits-table");
+    expect(permitsTable).toBeInTheDocument();
     expect(container.firstChild).toMatchSnapshot();
   });
 });
diff --git a/services/core-web/src/tests/components/mine/Permit/__snapshots__/MinePermitInfo.spec.tsx.snap b/services/core-web/src/tests/components/mine/Permit/__snapshots__/MinePermitInfo.spec.tsx.snap
index 756a3430b7..4aa7239e36 100644
--- a/services/core-web/src/tests/components/mine/Permit/__snapshots__/MinePermitInfo.spec.tsx.snap
+++ b/services/core-web/src/tests/components/mine/Permit/__snapshots__/MinePermitInfo.spec.tsx.snap
@@ -15,7 +15,6 @@ exports[`MinePermitInfo renders properly 1`] = `
   </div>
   <div
     class="ant-tabs ant-tabs-top ant-tabs-card"
-    style="text-align: left !important;"
   >
     <div
       class="ant-tabs-nav"
@@ -30,13 +29,13 @@ exports[`MinePermitInfo renders properly 1`] = `
         >
           <div
             class="ant-tabs-tab ant-tabs-tab-active"
-            data-node-key="1"
+            data-node-key="permits"
           >
             <div
-              aria-controls="rc-tabs-test-panel-1"
+              aria-controls="rc-tabs-test-panel-permits"
               aria-selected="true"
               class="ant-tabs-tab-btn"
-              id="rc-tabs-test-tab-1"
+              id="rc-tabs-test-tab-permits"
               role="tab"
               tabindex="0"
             >
@@ -45,13 +44,13 @@ exports[`MinePermitInfo renders properly 1`] = `
           </div>
           <div
             class="ant-tabs-tab"
-            data-node-key="2"
+            data-node-key="esups"
           >
             <div
-              aria-controls="rc-tabs-test-panel-2"
+              aria-controls="rc-tabs-test-panel-esups"
               aria-selected="false"
               class="ant-tabs-tab-btn"
-              id="rc-tabs-test-tab-2"
+              id="rc-tabs-test-tab-esups"
               role="tab"
               tabindex="0"
             >
@@ -60,13 +59,13 @@ exports[`MinePermitInfo renders properly 1`] = `
           </div>
           <div
             class="ant-tabs-tab"
-            data-node-key="3"
+            data-node-key="digital-permit-credentials"
           >
             <div
-              aria-controls="rc-tabs-test-panel-3"
+              aria-controls="rc-tabs-test-panel-digital-permit-credentials"
               aria-selected="false"
               class="ant-tabs-tab-btn"
-              id="rc-tabs-test-tab-3"
+              id="rc-tabs-test-tab-digital-permit-credentials"
               role="tab"
               tabindex="0"
             >
@@ -122,9 +121,9 @@ exports[`MinePermitInfo renders properly 1`] = `
       >
         <div
           aria-hidden="false"
-          aria-labelledby="rc-tabs-test-tab-1"
+          aria-labelledby="rc-tabs-test-tab-permits"
           class="ant-tabs-tabpane ant-tabs-tabpane-active"
-          id="rc-tabs-test-panel-1"
+          id="rc-tabs-test-panel-permits"
           role="tabpanel"
           tabindex="0"
         >
diff --git a/services/core-web/src/tests/components/mine/__snapshots__/MineAlert.spec.tsx.snap b/services/core-web/src/tests/components/mine/__snapshots__/MineAlert.spec.tsx.snap
index 93941963b8..ff93915826 100644
--- a/services/core-web/src/tests/components/mine/__snapshots__/MineAlert.spec.tsx.snap
+++ b/services/core-web/src/tests/components/mine/__snapshots__/MineAlert.spec.tsx.snap
@@ -1,3 +1,95 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`MineAlert renders dispatchProperly 1`] = `<div />`;
+exports[`MineAlert renders dispatchProperly 1`] = `
+<div>
+  <div>
+    <div
+      class="ant-alert ant-alert-info ant-alert-with-description ant-alert-info ant-alert-info-custom-with-black-icon"
+      data-show="true"
+      role="alert"
+      style="background-color: rgb(244, 240, 240); border: 1.5px solid #525252;"
+    >
+      <span
+        aria-label="info-circle"
+        class="anticon anticon-info-circle ant-alert-icon"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="info-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+          />
+          <path
+            d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
+          />
+        </svg>
+      </span>
+      <div
+        class="ant-alert-content"
+      >
+        <div
+          class="ant-alert-description"
+        >
+          <div
+            class="ant-row"
+          >
+            <div
+              class="ant-col ant-col-xs-24 ant-col-md-18"
+            >
+              <p>
+                <b>
+                  There are no active staff alerts for this mine.
+                </b>
+              </p>
+            </div>
+            <div
+              class="ant-col ant-col-xs-24 ant-col-md-6"
+            >
+              <div
+                class="right center-mobile"
+              >
+                <button
+                  class="ant-btn ant-btn-ghost ant-dropdown-trigger actions-dropdown-button"
+                  style="background-color: transparent;"
+                  type="button"
+                >
+                  <span>
+                    Action
+                  </span>
+                  <span
+                    aria-label="down"
+                    class="anticon anticon-down"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class=""
+                      data-icon="down"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/services/core-web/src/tests/components/mine/__snapshots__/MineHeader.spec.js.snap b/services/core-web/src/tests/components/mine/__snapshots__/MineHeader.spec.js.snap
index ae472c205a..1c17676344 100644
--- a/services/core-web/src/tests/components/mine/__snapshots__/MineHeader.spec.js.snap
+++ b/services/core-web/src/tests/components/mine/__snapshots__/MineHeader.spec.js.snap
@@ -7,7 +7,7 @@ exports[`MineHeader renders dispatchProperly 1`] = `
   <div
     className="dashboard__header--card__content"
   >
-    <Connect(MineAlert)
+    <MineAlert
       mine={
         Object {
           "major_mine_ind": true,
diff --git a/services/core-web/src/tests/components/modalContent/NoticeOfDepartureModal.spec.tsx b/services/core-web/src/tests/components/modalContent/NoticeOfDepartureModal.spec.tsx
index c9ce864a44..e57af9f8c3 100644
--- a/services/core-web/src/tests/components/modalContent/NoticeOfDepartureModal.spec.tsx
+++ b/services/core-web/src/tests/components/modalContent/NoticeOfDepartureModal.spec.tsx
@@ -1,40 +1,24 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { Provider } from "react-redux";
+import { ReduxWrapper } from "@/tests/utils/ReduxWrapper";
+import { render } from "@testing-library/react";
+import { NOTICES_OF_DEPARTURE } from "@mds/common/constants/reducerTypes";
+import { NOTICE_OF_DEPARTURE_DETAILS } from "@mds/common/tests/mocks/dataMocks";
 import NoticeOfDepartureModal from "@/components/modalContent/NoticeOfDepartureModal";
-import { MINE_RESPONSE, NOTICE_OF_DEPARTURE_DETAILS } from "@/tests/mocks/dataMocks";
-import { store } from "@/App";
 
-const dispatchProps: any = {};
-const props: any = {};
-
-const setupDispatchProps = () => {
-  dispatchProps.closeModal = jest.fn();
-};
-
-const setupProps = () => {
-  // eslint-disable-next-line prefer-destructuring
-  props.noticeOfDeparture = NOTICE_OF_DEPARTURE_DETAILS;
-  props.initialValues = NOTICE_OF_DEPARTURE_DETAILS;
-  // eslint-disable-next-line prefer-destructuring
-  props.mine = MINE_RESPONSE[0];
-  props.fetchDetailedNoticeOfDeparture = jest.fn();
-  props.pristine = false;
-  props.handleSubmit = jest.fn();
+const initialState = {
+  [NOTICES_OF_DEPARTURE]: {
+    noticeOfDeparture: NOTICE_OF_DEPARTURE_DETAILS
+  }
 };
 
-beforeEach(() => {
-  setupDispatchProps();
-  setupProps();
-});
 
 describe("NoticeOfDepartureModal", () => {
   it("renders properly", () => {
-    const component = shallow(
-      <Provider store={store}>
-        <NoticeOfDepartureModal {...dispatchProps} {...props} />
-      </Provider>
+    const { container } = render(
+      <ReduxWrapper initialState={initialState}>
+        <NoticeOfDepartureModal />
+      </ReduxWrapper>
     );
-    expect(component).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
   });
 });
diff --git a/services/core-web/src/tests/components/modalContent/__snapshots__/NoticeOfDepartureModal.spec.tsx.snap b/services/core-web/src/tests/components/modalContent/__snapshots__/NoticeOfDepartureModal.spec.tsx.snap
index c8d43d1ed6..b1547a0bc8 100644
--- a/services/core-web/src/tests/components/modalContent/__snapshots__/NoticeOfDepartureModal.spec.tsx.snap
+++ b/services/core-web/src/tests/components/modalContent/__snapshots__/NoticeOfDepartureModal.spec.tsx.snap
@@ -1,102 +1,589 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NoticeOfDepartureModal renders properly 1`] = `
-<ContextProvider
-  value={
-    Object {
-      "store": Object {
-        "@@observable": [Function],
-        "dispatch": [Function],
-        "getState": [Function],
-        "replaceReducer": [Function],
-        "subscribe": [Function],
-      },
-      "subscription": Subscription {
-        "handleChangeWrapper": [Function],
-        "listeners": Object {
-          "notify": [Function],
-        },
-        "onStateChange": [Function],
-        "parentSub": undefined,
-        "store": Object {
-          "@@observable": [Function],
-          "dispatch": [Function],
-          "getState": [Function],
-          "replaceReducer": [Function],
-          "subscribe": [Function],
-        },
-        "unsubscribe": null,
-      },
-    }
-  }
->
-  <Connect(NoticeOfDepartureModal)
-    closeModal={[MockFunction]}
-    fetchDetailedNoticeOfDeparture={[MockFunction]}
-    handleSubmit={[MockFunction]}
-    initialValues={
-      Object {
-        "create_timestamp": "2022-05-05T15:44:48.204164+00:00",
-        "documents": Array [
-          Object {
-            "create_timestamp": "2022-05-05T15:44:49.419460+00:00",
-            "document_manager_guid": "8e1e0182-fef4-4f93-b76a-d2b65b6f3908",
-            "document_name": "Excel_Comments_Template.xlsx",
-            "document_type": "checklist",
-            "mine_document_guid": "f678c3b6-8514-43fb-a147-a6caf5deeb50",
-            "mine_guid": "29050da9-5d9e-4a80-9f6d-1d06f02fc589",
-            "upload_date": null,
-          },
-        ],
-        "nod_description": "Checklist description",
-        "nod_guid": "56c75a01-248f-4e2c-961a-131790205682",
-        "nod_status": "pending_review",
-        "nod_title": "Test with checklist 1",
-        "nod_type": "potentially_substantial",
-        "permit": Object {
-          "current_permittee": "Richardson-Weiss",
-          "permit_guid": "b6cc4e58-993f-4045-8e3b-27b0935d5ef7",
-          "permit_id": 10,
-          "permit_no": "CX-6515762",
-          "permit_prefix": "C",
-          "permit_status_code": "O",
-        },
-        "submission_timestamp": "2022-05-05T15:44:48.205086",
-        "update_timestamp": "2022-05-05T15:44:48.205068+00:00",
-      }
-    }
-    noticeOfDeparture={
-      Object {
-        "create_timestamp": "2022-05-05T15:44:48.204164+00:00",
-        "documents": Array [
-          Object {
-            "create_timestamp": "2022-05-05T15:44:49.419460+00:00",
-            "document_manager_guid": "8e1e0182-fef4-4f93-b76a-d2b65b6f3908",
-            "document_name": "Excel_Comments_Template.xlsx",
-            "document_type": "checklist",
-            "mine_document_guid": "f678c3b6-8514-43fb-a147-a6caf5deeb50",
-            "mine_guid": "29050da9-5d9e-4a80-9f6d-1d06f02fc589",
-            "upload_date": null,
-          },
-        ],
-        "nod_description": "Checklist description",
-        "nod_guid": "56c75a01-248f-4e2c-961a-131790205682",
-        "nod_status": "pending_review",
-        "nod_title": "Test with checklist 1",
-        "nod_type": "potentially_substantial",
-        "permit": Object {
-          "current_permittee": "Richardson-Weiss",
-          "permit_guid": "b6cc4e58-993f-4045-8e3b-27b0935d5ef7",
-          "permit_id": 10,
-          "permit_no": "CX-6515762",
-          "permit_prefix": "C",
-          "permit_status_code": "O",
-        },
-        "submission_timestamp": "2022-05-05T15:44:48.205086",
-        "update_timestamp": "2022-05-05T15:44:48.205068+00:00",
-      }
-    }
-    pristine={false}
-  />
-</ContextProvider>
+<div>
+  <div>
+    <form
+      class="ant-form ant-form-vertical common-form common-form-NOTICE_OF_DEPARTURE_FORM form-edit"
+      id="NOTICE_OF_DEPARTURE_FORM"
+    >
+      <h4
+        class="nod-modal-section-header"
+      >
+        Basic Information
+      </h4>
+      <div
+        class="content--light-grey nod-section-padding"
+      >
+        <div
+          class="inline-flex padding-sm"
+        >
+          <p
+            class="field-title margin-large--right"
+          >
+            Departure Project Title
+          </p>
+          <p>
+            Test with checklist 1
+          </p>
+        </div>
+        <div
+          class="inline-flex padding-sm"
+        >
+          <p
+            class="field-title margin-large--right"
+          >
+            Departure Summary
+          </p>
+          <p>
+            Checklist description
+          </p>
+        </div>
+        <div
+          class="inline-flex padding-sm"
+        >
+          <p
+            class="field-title margin-large--right"
+          >
+            Permit #
+          </p>
+          <p>
+            CX-6515762
+          </p>
+        </div>
+        <div>
+          <div
+            class="inline-flex padding-sm"
+          >
+            <p
+              class="field-title margin-large--right"
+            >
+              NOD #
+            </p>
+            <p>
+              NOD-123
+            </p>
+          </div>
+          <div
+            class="inline-flex padding-sm"
+          >
+            <p
+              class="field-title margin-large--right"
+            >
+              Declared Type
+            </p>
+            <p>
+              Potentially Substantial
+            </p>
+          </div>
+        </div>
+        <div
+          class="inline-flex padding-sm"
+        >
+          <p
+            class="field-title margin-large--right"
+          >
+            Mine Manager
+          </p>
+          <p>
+            N/A
+          </p>
+        </div>
+        <div
+          class="inline-flex padding-sm"
+        >
+          <p
+            class="field-title margin-large--right"
+          >
+            Submitted
+          </p>
+          <p>
+            May 05 2022
+          </p>
+        </div>
+      </div>
+      <div
+        class="margin-large--bottom"
+      />
+      <h4
+        class="nod-modal-section-header padding-md--top"
+      >
+        Self-Assessment Form
+      </h4>
+      <div
+        class="ant-table-wrapper  core-table"
+      >
+        <div
+          class="ant-spin-nested-loading"
+        >
+          <div
+            class="ant-spin-container"
+          >
+            <div
+              class="ant-table"
+            >
+              <div
+                class="ant-table-container"
+              >
+                <div
+                  class="ant-table-content"
+                >
+                  <table
+                    style="table-layout: auto;"
+                  >
+                    <colgroup />
+                    <thead
+                      class="ant-table-thead"
+                    >
+                      <tr>
+                        <th
+                          class="ant-table-cell"
+                        >
+                          File Name
+                        </th>
+                        <th
+                          class="ant-table-cell"
+                        >
+                          Category
+                        </th>
+                        <th
+                          class="ant-table-cell"
+                        >
+                          Uploaded
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody
+                      class="ant-table-tbody"
+                    >
+                      <tr
+                        class="ant-table-row ant-table-row-level-0 fade-in"
+                      >
+                        <td
+                          class="ant-table-cell"
+                        >
+                          <div
+                            class="inline-flex flex-between file-name-container"
+                            title="File Name"
+                          >
+                            <div
+                              class="file-name-text"
+                            >
+                              <a
+                                role="link"
+                                tabindex="0"
+                              >
+                                Excel_Comments_Template.xlsx
+                              </a>
+                            </div>
+                            <span
+                              class="file-history-container"
+                            />
+                          </div>
+                        </td>
+                        <td
+                          class="ant-table-cell"
+                        >
+                          <div
+                            class="document_category-column"
+                            title="Category"
+                          >
+                            N/A
+                          </div>
+                        </td>
+                        <td
+                          class="ant-table-cell"
+                        >
+                          <div
+                            title="Uploaded"
+                          >
+                            May 05 2022
+                          </div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <h4
+        class="nod-modal-section-header padding-md--top"
+      >
+        Application Documentation
+      </h4>
+      <div
+        class="ant-table-wrapper  core-table"
+      >
+        <div
+          class="ant-spin-nested-loading"
+        >
+          <div
+            class="ant-spin-container"
+          >
+            <div
+              class="ant-table ant-table-empty"
+            >
+              <div
+                class="ant-table-container"
+              >
+                <div
+                  class="ant-table-content"
+                >
+                  <table
+                    style="table-layout: auto;"
+                  >
+                    <colgroup />
+                    <thead
+                      class="ant-table-thead"
+                    >
+                      <tr>
+                        <th
+                          aria-label="File Name"
+                          class="ant-table-cell ant-table-column-has-sorters"
+                          tabindex="0"
+                        >
+                          <div
+                            class="ant-table-column-sorters"
+                          >
+                            <span
+                              class="ant-table-column-title"
+                            >
+                              File Name
+                            </span>
+                            <span
+                              class="ant-table-column-sorter ant-table-column-sorter-full"
+                            >
+                              <span
+                                class="ant-table-column-sorter-inner"
+                              >
+                                <span
+                                  aria-label="caret-up"
+                                  class="anticon anticon-caret-up ant-table-column-sorter-up"
+                                  role="presentation"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    data-icon="caret-up"
+                                    fill="currentColor"
+                                    focusable="false"
+                                    height="1em"
+                                    viewBox="0 0 1024 1024"
+                                    width="1em"
+                                  >
+                                    <path
+                                      d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
+                                    />
+                                  </svg>
+                                </span>
+                                <span
+                                  aria-label="caret-down"
+                                  class="anticon anticon-caret-down ant-table-column-sorter-down"
+                                  role="presentation"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    data-icon="caret-down"
+                                    fill="currentColor"
+                                    focusable="false"
+                                    height="1em"
+                                    viewBox="0 0 1024 1024"
+                                    width="1em"
+                                  >
+                                    <path
+                                      d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                                    />
+                                  </svg>
+                                </span>
+                              </span>
+                            </span>
+                          </div>
+                        </th>
+                        <th
+                          aria-label="Category"
+                          class="ant-table-cell ant-table-column-has-sorters"
+                          tabindex="0"
+                        >
+                          <div
+                            class="ant-table-column-sorters"
+                          >
+                            <span
+                              class="ant-table-column-title"
+                            >
+                              Category
+                            </span>
+                            <span
+                              class="ant-table-column-sorter ant-table-column-sorter-full"
+                            >
+                              <span
+                                class="ant-table-column-sorter-inner"
+                              >
+                                <span
+                                  aria-label="caret-up"
+                                  class="anticon anticon-caret-up ant-table-column-sorter-up"
+                                  role="presentation"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    data-icon="caret-up"
+                                    fill="currentColor"
+                                    focusable="false"
+                                    height="1em"
+                                    viewBox="0 0 1024 1024"
+                                    width="1em"
+                                  >
+                                    <path
+                                      d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
+                                    />
+                                  </svg>
+                                </span>
+                                <span
+                                  aria-label="caret-down"
+                                  class="anticon anticon-caret-down ant-table-column-sorter-down"
+                                  role="presentation"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    data-icon="caret-down"
+                                    fill="currentColor"
+                                    focusable="false"
+                                    height="1em"
+                                    viewBox="0 0 1024 1024"
+                                    width="1em"
+                                  >
+                                    <path
+                                      d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                                    />
+                                  </svg>
+                                </span>
+                              </span>
+                            </span>
+                          </div>
+                        </th>
+                        <th
+                          aria-label="Uploaded"
+                          class="ant-table-cell ant-table-column-has-sorters"
+                          tabindex="0"
+                        >
+                          <div
+                            class="ant-table-column-sorters"
+                          >
+                            <span
+                              class="ant-table-column-title"
+                            >
+                              Uploaded
+                            </span>
+                            <span
+                              class="ant-table-column-sorter ant-table-column-sorter-full"
+                            >
+                              <span
+                                class="ant-table-column-sorter-inner"
+                              >
+                                <span
+                                  aria-label="caret-up"
+                                  class="anticon anticon-caret-up ant-table-column-sorter-up"
+                                  role="presentation"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    data-icon="caret-up"
+                                    fill="currentColor"
+                                    focusable="false"
+                                    height="1em"
+                                    viewBox="0 0 1024 1024"
+                                    width="1em"
+                                  >
+                                    <path
+                                      d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
+                                    />
+                                  </svg>
+                                </span>
+                                <span
+                                  aria-label="caret-down"
+                                  class="anticon anticon-caret-down ant-table-column-sorter-down"
+                                  role="presentation"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    data-icon="caret-down"
+                                    fill="currentColor"
+                                    focusable="false"
+                                    height="1em"
+                                    viewBox="0 0 1024 1024"
+                                    width="1em"
+                                  >
+                                    <path
+                                      d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                                    />
+                                  </svg>
+                                </span>
+                              </span>
+                            </span>
+                          </div>
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody
+                      class="ant-table-tbody"
+                    >
+                      <tr
+                        class="ant-table-placeholder"
+                      >
+                        <td
+                          class="ant-table-cell"
+                          colspan="3"
+                        >
+                          No Data Yet
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-row ant-row-space-between padding-md--top"
+        style="margin-left: -12px; margin-right: -12px;"
+      >
+        <div
+          class="ant-col ant-col-12"
+          style="padding-left: 12px; padding-right: 12px;"
+        >
+          <p
+            class="field-title"
+          >
+            Updated Date
+          </p>
+          <p
+            class="content--light-grey padding-md"
+          >
+            May 05 2022
+          </p>
+        </div>
+        <div
+          class="ant-col ant-col-12"
+          style="padding-left: 12px; padding-right: 12px;"
+        >
+          <p
+            class="field-title"
+          >
+            NOD Review Status
+          </p>
+          <div>
+            <div
+              class="ant-form-item ant-form-item-with-help"
+            >
+              <div
+                class="ant-row ant-form-item-row"
+              >
+                <div
+                  class="ant-col ant-form-item-control"
+                >
+                  <div
+                    class="ant-form-item-control-input"
+                  >
+                    <div
+                      class="ant-form-item-control-input-content"
+                    >
+                      <div
+                        class="ant-select ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-disabled ant-select-show-search"
+                        data-cy="nod_status"
+                      >
+                        <div
+                          class="ant-select-selector"
+                        >
+                          <span
+                            class="ant-select-selection-search"
+                          >
+                            <input
+                              aria-activedescendant="nod_status_list_0"
+                              aria-autocomplete="list"
+                              aria-controls="nod_status_list"
+                              aria-expanded="false"
+                              aria-haspopup="listbox"
+                              aria-owns="nod_status_list"
+                              autocomplete="off"
+                              class="ant-select-selection-search-input"
+                              disabled=""
+                              id="nod_status"
+                              role="combobox"
+                              type="search"
+                              value=""
+                            />
+                          </span>
+                          <span
+                            class="ant-select-selection-item"
+                            title="Pending Review"
+                          >
+                            Pending Review
+                          </span>
+                        </div>
+                        <span
+                          aria-hidden="true"
+                          class="ant-select-arrow"
+                          style="user-select: none;"
+                          unselectable="on"
+                        >
+                          <span
+                            aria-label="down"
+                            class="anticon anticon-down ant-select-suffix"
+                            role="img"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              data-icon="down"
+                              fill="currentColor"
+                              focusable="false"
+                              height="1em"
+                              viewBox="64 64 896 896"
+                              width="1em"
+                            >
+                              <path
+                                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                              />
+                            </svg>
+                          </span>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    style="display: flex; flex-wrap: nowrap;"
+                  >
+                    <div
+                      class="ant-form-item-explain ant-form-item-explain-connected"
+                      id="NOTICE_OF_DEPARTURE_FORM_nod_status_help"
+                      role="alert"
+                    >
+                      <div
+                        class=""
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="right center-mobile"
+      >
+        <button
+          class="ant-btn ant-btn-primary full-mobile nod-cancel-button"
+          type="button"
+        >
+          <span>
+            Close
+          </span>
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
 `;
diff --git a/services/core-web/src/tests/routes/__snapshots__/DashboardRoutes.spec.js.snap b/services/core-web/src/tests/routes/__snapshots__/DashboardRoutes.spec.js.snap
index 78e03cdeee..15cc765907 100644
--- a/services/core-web/src/tests/routes/__snapshots__/DashboardRoutes.spec.js.snap
+++ b/services/core-web/src/tests/routes/__snapshots__/DashboardRoutes.spec.js.snap
@@ -234,15 +234,7 @@ exports[`DashboardRoutes  renders properly 1`] = `
     path="/mine-dashboard/:id/mine-information/mms-archive"
   />
   <Route
-    component={
-      Object {
-        "$$typeof": Symbol(react.memo),
-        "WrappedComponent": [Function],
-        "compare": null,
-        "displayName": "Connect(MinePermitInfo)",
-        "type": [Function],
-      }
-    }
+    component={[Function]}
     exact={true}
     key="/mine-dashboard/:id/permits-and-approvals/permits"
     path="/mine-dashboard/:id/permits-and-approvals/permits"


Reviews:
user: login: taraepp
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-18T19:22:43Z
user: login: taraepp
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-18T19:28:37Z
user: login: taraepp
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-18T19:29:51Z
user: login: sggerard
body: Wooooooo!
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-18T22:39:17Z
user: login: matbusby-fw
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-03-19T21:59:09Z

Review comments:
diff_hunk: @@ -14,321 +10,248 @@ import {
   fetchMineAlertsByMine,
   deleteMineAlert,
 } from "@/actionCreators/mineAlertActionCreator";
-import * as FORM from "@/constants/forms";
 import * as ModalContent from "@/constants/modalContent";
 import { modalConfig } from "@/components/modalContent/config";
-import { IMineAlert } from "@mds/common/interfaces";
+import { IMine, IMineAlert } from "@mds/common/interfaces";
+import { useAppDispatch, useAppSelector } from "@mds/common/redux/rootState";
+import { ActionMenuButton, IHeaderAction } from "@mds/common/components/common/ActionMenu";
+
 
 interface MineAlertProps {
-  closeModal: () => void;
-  openModal: (arg: unknown) => void;
-  createMineAlert: (arg1: string, arg2: IMineAlert) => Promise<IMineAlert>;
-  updateMineAlert: (arg1: string, arg2: string, arg3: IMineAlert) => Promise<IMineAlert>;
-  deleteMineAlert: (arg1: string, arg2: string) => Promise<void>;
-  fetchMineAlertsByMine: (arg: string) => Promise<IMineAlert>;
-  mineAlerts: any;
-  mine: any;
+  mine: IMine;
 }
 
-interface MineAlertState {
-  loaded: boolean;
-  activeMineAlert: any;
-  pastMineAlerts: any[];
-}
+const MineAlert: FC<MineAlertProps> = ({ mine }) => {
+  const dispatch = useAppDispatch();
+  const [activeMineAlert, setActiveMineAlert] = useState<IMineAlert>();
+  const [pastMineAlerts, setPastMineAlerts] = useState<IMineAlert[]>([]);
+  const mineAlerts = useAppSelector(getMineAlerts);
+  const [loaded, setLoaded] = useState(mineAlerts.length > 0);
 
-export class MineAlert extends Component<MineAlertProps, MineAlertState> {
-  constructor(props: MineAlertProps) {
-    super(props);
-    this.state = {
-      loaded: false,
-      activeMineAlert: {},
-      pastMineAlerts: [],
-    };
-  }
 
-  componentDidMount() {
-    this.fetchAlerts();
-  }
+  const fetchAlerts = async () => {
+    setLoaded(false);
+    await dispatch(fetchMineAlertsByMine(mine.mine_guid));
+    setLoaded(true);
+  };
+
+  const remainingDays = (endDate: string) => {
+    const today = moment().startOf("day");
+    const end = moment(endDate).startOf("day");
+    return end.diff(today, "days");
+  };
 
-  handleCreateMineAlert = (values: IMineAlert) => {
-    this.props
-      .createMineAlert(this.props.mine.mine_guid, values)
+  useEffect(() => {
+    if (mineAlerts?.length > 0) {
+      const newActive = mineAlerts.filter((alert) => {
+        return alert.is_active && (alert.end_date == null || remainingDays(alert.end_date) >= 0)
+      })?.[0];
+      setActiveMineAlert(newActive);
+      const pastAlerts = mineAlerts.filter((alert) => {
+        return !alert.is_active || (alert.end_date && remainingDays(alert.end_date) < 0);
+      });
+      setPastMineAlerts(pastAlerts);
+    }
+
+  }, [mineAlerts])
+
+  useEffect(() => {
+    if (!loaded) {
+      fetchAlerts();
+    }
+  }, []);
+
+  const handleCreateMineAlert = (values: IMineAlert) => {
+    dispatch(createMineAlert(mine.mine_guid, values))
       .then(() => {
-        this.fetchAlerts();
+        fetchAlerts();
       })
       .finally(() => {
-        this.props.closeModal();
+        dispatch(closeModal());
       });
   };
 
-  handleUpdateMineAlert = (values: IMineAlert) => {
-    this.props
-      .updateMineAlert(this.props.mine.mine_guid, values.mine_alert_guid, values)
+  const handleUpdateMineAlert = (values: IMineAlert) => {
+    dispatch(updateMineAlert(mine.mine_guid, values.mine_alert_guid, values))
       .then(() => {
-        this.fetchAlerts();
-        this.props.closeModal();
+        fetchAlerts();
+        dispatch(closeModal());
       });
   };
 
-  handleRemoveAlert = (mineAlertGuid: string) => {
-    this.props
-      .deleteMineAlert(this.props.mine.mine_guid, mineAlertGuid)
-      .then(() => this.fetchAlerts());
+  const handleRemoveAlert = (mineAlertGuid: string) => {
+    dispatch(deleteMineAlert(mine.mine_guid, mineAlertGuid))
+      .then(() => fetchAlerts());
+  };
+
+  const removeConfirmWrapper = (mineAlert: IMineAlert) => {
+    const endDate = mineAlert.end_date ? ` - ${formatDate(activeMineAlert.end_date)}` : "";
+    const title = `Are you sure you want to delete alarm? ${formatDate(
+      mineAlert.start_date
+    )}${endDate}`;
+    return Modal.confirm({
+      title,
+      onOk: () => handleRemoveAlert(activeMineAlert.mine_alert_guid),
+      okText: "Delete",
+    })
   };
 
-  submitCreateMineAlarmForm = () => (values: IMineAlert) => {
+  const submitCreateMineAlarmForm = () => (values: IMineAlert) => {
     const payload = {
       ...values,
       start_date: moment(values.start_date).toISOString(),
       end_date: values.end_date ? moment(values.end_date).toISOString() : null,
     };
-    return this.handleCreateMineAlert(payload);
+    return handleCreateMineAlert(payload);
   };
 
-  submitUpdateMineAlarmForm = (mineAlertGuid: string) => (values: IMineAlert) => {
+  const submitUpdateMineAlarmForm = (mineAlertGuid: string) => (values: IMineAlert) => {
     const payload = {
       ...values,
       start_date: moment(values.start_date).toISOString(),
       end_date: values.end_date ? moment(values.end_date).toISOString() : null,
     };
     if (mineAlertGuid) {
-      return this.handleUpdateMineAlert(payload);
+      return handleUpdateMineAlert(payload);
     }
     return null;
   };
 
-  openCreateMineAlertModal = (activeMineAlert: any, mineAlerts: any) => {
-    return this.props.openModal({
+  const openCreateMineAlertModal = (activeMineAlert: IMineAlert, mineAlerts: IMineAlert[]) => {
+    dispatch(openModal({
       props: {
         title: ModalContent.CREATE_MINE_ALERT_RECORD,
         text: ModalContent.CREATE_MINE_ALERT_TEXT,
-        mineAlertGuid: this.state.activeMineAlert?.mine_alert_guid,
-        closeModal: this.props.closeModal,
-        onSubmit: this.submitCreateMineAlarmForm(),
+        mineAlertGuid: activeMineAlert?.mine_alert_guid,
+        closeModal: () => dispatch(closeModal()),
+        onSubmit: submitCreateMineAlarmForm(),
         activeMineAlert,
         mineAlerts,
       },
       content: modalConfig.ADD_MINE_ALERT,
-    });
+    }));
   };
 
-  openUpdateMineAlertModal = (activeMineAlert: any, mineAlerts: any) => {
-    return this.props.openModal({
+  const openUpdateMineAlertModal = (activeMineAlert: IMineAlert, mineAlerts: IMineAlert[]) => {
+    return dispatch(openModal({
       props: {
         title: ModalContent.EDIT_MINE_ALERT_RECORD,
         text: ModalContent.EDIT_MINE_ALERT_TEXT,
-        initialValues: this.state.activeMineAlert,
-        mineAlertGuid: this.state.activeMineAlert?.mine_alert_guid,
-        closeModal: this.props.closeModal,
-        onSubmit: this.submitUpdateMineAlarmForm(this.state.activeMineAlert?.mine_alert_guid),
+        initialValues: activeMineAlert,
+        mineAlertGuid: activeMineAlert?.mine_alert_guid,
+        closeModal: () => dispatch(closeModal()),
+        onSubmit: submitUpdateMineAlarmForm(activeMineAlert?.mine_alert_guid),
path: services/core-web/src/components/mine/MineAlert.tsx
user: login: taraepp
body: these submit handlers look pretty weird (without a `() =>`) but I did try them out
created_at: 2025-03-18T19:22:43Z
author_association: CONTRIBUTOR
diff_hunk: @@ -310,7 +296,7 @@ const NoticeOfDepartureModal: React.FC<NoticeOfDepartureModalProps> = (props) =>
           </div>
           <div className="inline-flex padding-sm">
             <p className="field-title margin-large--right">Mine Manager</p>
-            <p>{formatDate(noticeOfDeparture.mine_manager_name) || EMPTY_FIELD}</p>
+            <p>{currentMineManager?.party?.name || EMPTY_FIELD}</p>
path: services/core-web/src/components/modalContent/NoticeOfDepartureModal.tsx
user: login: taraepp
body: so this was an issue. 😆 
created_at: 2025-03-18T19:28:37Z
author_association: CONTRIBUTOR
diff_hunk: @@ -319,7 +305,8 @@ const NoticeOfDepartureModal: React.FC<NoticeOfDepartureModalProps> = (props) =>
         </div>
         <FieldArray
           name="nod_contacts"
-          component={(componentProps) => renderContacts(componentProps, disabled)}
+          component={NodContacts}
+          disabled={disabled}
path: services/core-web/src/components/modalContent/NoticeOfDepartureModal.tsx
user: login: taraepp
body: Also this was causing issues. The `(componentProps) => renderContacts` bit was causing constant re-renders. Made renderContacts/NodContacts into an actual FC
created_at: 2025-03-18T19:29:50Z
author_association: CONTRIBUTOR

PR comments:
user: login: sonarqubecloud[bot]
created_at: 2025-03-18T19:34:17Z
body: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=bcgov-sonarcloud_mds_minespace-web&pullRequest=3467) **Quality Gate passed for 'bcgov-sonarcloud_mds_minespace-web'**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=bcgov-sonarcloud_mds_minespace-web&pullRequest=3467&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=bcgov-sonarcloud_mds_minespace-web&pullRequest=3467&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=bcgov-sonarcloud_mds_minespace-web&pullRequest=3467&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=bcgov-sonarcloud_mds_minespace-web&pullRequest=3467&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=bcgov-sonarcloud_mds_minespace-web&pullRequest=3467&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=bcgov-sonarcloud_mds_minespace-web&pullRequest=3467)


author_association: NONE
user: login: sonarqubecloud[bot]
created_at: 2025-03-18T19:34:58Z
body: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=bcgov-sonarcloud_mds_common&pullRequest=3467) **Quality Gate passed for 'bcgov-sonarcloud_mds_common'**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=bcgov-sonarcloud_mds_common&pullRequest=3467&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=bcgov-sonarcloud_mds_common&pullRequest=3467&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=bcgov-sonarcloud_mds_common&pullRequest=3467&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [100.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=bcgov-sonarcloud_mds_common&pullRequest=3467&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=bcgov-sonarcloud_mds_common&pullRequest=3467&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=bcgov-sonarcloud_mds_common&pullRequest=3467)


author_association: NONE
user: login: sonarqubecloud[bot]
created_at: 2025-03-18T19:38:47Z
body: ## [![Quality Gate Failed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-failed-20px.png 'Quality Gate Failed')](https://sonarcloud.io/dashboard?id=bcgov-sonarcloud_mds_core-web&pullRequest=3467) **Quality Gate failed for 'bcgov-sonarcloud_mds_core-web'**  
Failed conditions  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/failed-16px.png '') [53.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=bcgov-sonarcloud_mds_core-web&pullRequest=3467&metric=new_coverage&view=list) (required ≥ 80%)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=bcgov-sonarcloud_mds_core-web&pullRequest=3467)


author_association: NONE