From 63ae301e98f7e592448ada6cccc1c7c976f282ba Mon Sep 17 00:00:00 2001
From: Himabindu T <tbindu@thoughtworks.com>
Date: Sun, 9 Jun 2024 19:49:18 +0530
Subject: [PATCH] BAH-3802 | Add. Provider Notification Tab In Clinical View

* BAH-3802 | Arjun | setup notifications page

* add. components for provider notifications

* Abi | update. bahmni-carbon-ui version

* Srini | BAH-3802 |Provider Acknowledgement workflow for the Emergency medication administered by Ward Nurse

* [Sri] - fix styling issue for provider acknowledgement flow

* Srini | BAH-3802 | Refactor the patient list view in the provider acknowledgement flow

* Bindu | Fix build issue

* [Rahul] | BAH-3802 | Refactor. Provider Notification State Management

---------

Co-authored-by: Arjun-Go <arjun.g@thoughtworks.com>
Co-authored-by: srinithishg <srinithish.g@thoughtworks.com>
Co-authored-by: Rahul Ramesh <121226043+rahu1ramesh@users.noreply.github.com>
Co-authored-by: Rahul Ramesh <rahul.ramesh@thoughtworks.com>
---
 micro-frontends/package.json                  |   8 +-
 micro-frontends/public/i18n/locale_en.json    |   5 +-
 .../PatientListContent.jsx                    |  60 ++++++
 .../PatientListContent.scss                   |  37 ++++
 .../PatientListContent.spec.jsx               | 110 ++++++++++
 .../PatientListMockData.js                    |  69 +++++++
 .../PatientListTitle.jsx                      |  34 +++
 .../PatientListTitle.scss                     |  31 +++
 .../PatientListTitle.spec.jsx                 |  66 ++++++
 .../PatientsList.jsx                          |  67 ++++++
 .../PatientsList.scss                         |  20 ++
 .../PatientsList.spec.jsx                     |  68 ++++++
 .../PatientListContent.spec.jsx.snap          |  67 ++++++
 .../PatientListTitle.spec.jsx.snap            |  48 +++++
 .../__snapshots__/PatientsList.spec.jsx.snap  | 150 ++++++++++++++
 .../ProviderNotifications.jsx                 |  97 +++++++++
 .../ProviderNotifications.scss                |  17 ++
 .../ProviderNotifications.spec.jsx            | 177 ++++++++++++++++
 .../ProviderNotifications.spec.jsx.snap       | 164 +++++++++++++++
 micro-frontends/src/next-ui/constants.js      |   2 +-
 micro-frontends/src/next-ui/index.js          |  10 +-
 .../ProviderNotificationUtils.js              |  68 ++++++
 .../ProviderNotificationUtils.spec.js         | 194 ++++++++++++++++++
 micro-frontends/src/next-ui/utils/utils.js    |  44 ++++
 .../src/next-ui/utils/utils.spec.js           | 107 +++++++---
 micro-frontends/yarn.lock                     |   8 +-
 ui/app/common/patient-search/constants.js     |   1 +
 .../controllers/patientsListController.js     |   3 +-
 ui/app/common/patient-search/models/search.js |   4 +
 .../patient-search/views/patientsList.html    |   7 +-
 .../registration/services/patientService.js   |   2 +-
 .../patientsListController.spec.js            |   2 +-
 32 files changed, 1705 insertions(+), 42 deletions(-)
 create mode 100644 micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientListContent.jsx
 create mode 100644 micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientListContent.scss
 create mode 100644 micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientListContent.spec.jsx
 create mode 100644 micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientListMockData.js
 create mode 100644 micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientListTitle.jsx
 create mode 100644 micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientListTitle.scss
 create mode 100644 micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientListTitle.spec.jsx
 create mode 100644 micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientsList.jsx
 create mode 100644 micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientsList.scss
 create mode 100644 micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientsList.spec.jsx
 create mode 100644 micro-frontends/src/next-ui/Components/ProviderNotificationPatients/__snapshots__/PatientListContent.spec.jsx.snap
 create mode 100644 micro-frontends/src/next-ui/Components/ProviderNotificationPatients/__snapshots__/PatientListTitle.spec.jsx.snap
 create mode 100644 micro-frontends/src/next-ui/Components/ProviderNotificationPatients/__snapshots__/PatientsList.spec.jsx.snap
 create mode 100644 micro-frontends/src/next-ui/Containers/providerNotifications/ProviderNotifications.jsx
 create mode 100644 micro-frontends/src/next-ui/Containers/providerNotifications/ProviderNotifications.scss
 create mode 100644 micro-frontends/src/next-ui/Containers/providerNotifications/ProviderNotifications.spec.jsx
 create mode 100644 micro-frontends/src/next-ui/Containers/providerNotifications/__snapshots__/ProviderNotifications.spec.jsx.snap
 create mode 100644 micro-frontends/src/next-ui/utils/providerNotifications/ProviderNotificationUtils.js
 create mode 100644 micro-frontends/src/next-ui/utils/providerNotifications/ProviderNotificationUtils.spec.js

diff --git a/micro-frontends/package.json b/micro-frontends/package.json
index a39a778daa..32167f3260 100644
--- a/micro-frontends/package.json
+++ b/micro-frontends/package.json
@@ -9,12 +9,13 @@
     "@babel/core": "^7.15.5",
     "@babel/plugin-transform-runtime": "^7.22.4",
     "@babel/preset-env": "^7.22.4",
-    "bahmni-form-controls": "^0.93.12",
     "@babel/preset-react": "^7.22.3",
     "@testing-library/react": "12.1.5",
     "axios": "1.4.0",
     "babel-jest": "^29.5.0",
     "babel-loader": "^9.1.2",
+    "bahmni-form-controls": "^0.93.12",
+    "copy-webpack-plugin": "^11.0.0",
     "css-loader": "5.2.6",
     "eslint": "^8.42.0",
     "eslint-config-prettier": "^8.8.0",
@@ -29,13 +30,12 @@
     "sass": "^1.63.4",
     "sass-loader": "10.1.0",
     "webpack": "^5.86.0",
-    "webpack-cli": "^5.1.4",
-    "copy-webpack-plugin": "^11.0.0"
+    "webpack-cli": "^5.1.4"
   },
   "dependencies": {
     "@carbon/icons-react": "^10.18.0",
     "angular-component": "^0.1.3",
-    "bahmni-carbon-ui": "0.1.3",
+    "bahmni-carbon-ui": "0.1.6",
     "carbon-components": "^10.19.0",
     "carbon-components-react": "^7.25.0",
     "classnames": "2.3.1",
diff --git a/micro-frontends/public/i18n/locale_en.json b/micro-frontends/public/i18n/locale_en.json
index 5e3e8ef006..19673cb2bb 100644
--- a/micro-frontends/public/i18n/locale_en.json
+++ b/micro-frontends/public/i18n/locale_en.json
@@ -30,5 +30,8 @@
   "UPDATE_NOTE_TITLE": "Update Note",
   "ADD_NOTE_TITLE": "Add Note",
   "LOADING": "Loading...",
-  "UPDATE": "Update"
+  "UPDATE": "Update",
+  "AKNOWLEDGE_BUTTON": "Acknowledge",
+  "AKNOWLEDGEMENT_REQUIRED_TEXT": "Acknowledgement required",
+  "NO_DRUGS_TO_BE_AKNOWLEDGED_TEXT": "You have no new drugs to be acknowledged"
 }
\ No newline at end of file
diff --git a/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientListContent.jsx b/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientListContent.jsx
new file mode 100644
index 0000000000..f4876b9d80
--- /dev/null
+++ b/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientListContent.jsx
@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { Button, TextArea } from "carbon-components-react";
+import { FormattedMessage } from 'react-intl';
+import "./PatientListContent.scss";
+import { Title } from "bahmni-carbon-ui";
+import { formatArrayDateToDefaultDateFormat } from "../../utils/utils";
+import PropTypes from "prop-types";
+
+const PatientListContent = ({ patientMedicationDetails, handleOnClick }) => {
+  const { administered_date_time, administered_drug_name, medication_administration_performer_uuid, medication_administration_uuid } = patientMedicationDetails;
+  const acknowledgementRequiredText = (<FormattedMessage id="AKNOWLEDGE_BUTTON" defaultMessage="Acknowledge" />);
+  const [providerNotes, setProviderNotes] = useState("");
+
+  function acknowledgeMedication() {
+    handleOnClick(medication_administration_performer_uuid, medication_administration_uuid, providerNotes);
+    setProviderNotes("");
+  }
+
+  const handleNotesChange = (e) => {
+    setProviderNotes(e.target.value);
+  };
+
+  return (
+    <div className="patient-list-content">
+      <span>{formatArrayDateToDefaultDateFormat(administered_date_time)}</span>
+      <div className="content-info">
+        <span>{administered_drug_name}</span>
+        <div className="notes">
+          <TextArea
+            className="patient-list-text-area"
+            labelText={<Title text="Note" isRequired />}
+            placeholder="Enter Notes"
+            rows={1}
+            required
+            value={providerNotes}
+            onChange={handleNotesChange}
+          />
+          <Button
+            className="patient-list-button"
+            disabled={providerNotes.trim() === ""}
+            onClick={acknowledgeMedication}
+          >
+            {acknowledgementRequiredText}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+PatientListContent.propTypes = {
+    patientMedicationDetails: PropTypes.shape({
+        administered_date_time: PropTypes.array.isRequired,
+        administered_drug_name: PropTypes.string.isRequired,
+        medication_administration_performer_uuid: PropTypes.string.isRequired,
+    }).isRequired,
+    handleOnClick: PropTypes.func.isRequired
+};
+
+export default PatientListContent;
diff --git a/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientListContent.scss b/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientListContent.scss
new file mode 100644
index 0000000000..5756573b5e
--- /dev/null
+++ b/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientListContent.scss
@@ -0,0 +1,37 @@
+.patient-list-content {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: start;
+    padding: 10px;
+
+    .content-info {
+        margin-left: 20px;
+        display: flex;
+        flex-flow: column nowrap;
+        justify-content: start;
+        align-items: start;
+
+        .notes {
+            display: flex;
+            flex-flow: row wrap;
+            justify-content: start;
+            align-items: end;
+
+            .patient-list-text-area {
+                flex: 1;
+                min-height: 48px;
+            }
+
+            .patient-list-button {
+                width: 116px;
+                height: 48px;
+                margin-left: 10px;
+
+                @media screen and (max-width: 640px) {
+                    margin-left: 0;
+                    margin-top: 10px;
+                }
+            }
+        }
+    }
+}
diff --git a/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientListContent.spec.jsx b/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientListContent.spec.jsx
new file mode 100644
index 0000000000..6ebc9b028b
--- /dev/null
+++ b/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientListContent.spec.jsx
@@ -0,0 +1,110 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import PatientListContent from './PatientListContent';
+
+describe('PatientListContent Component', () => {
+  const patientMedicationDetails = {
+    administered_date_time: [2022,6,9],
+    administered_drug_name: 'Drug A',
+    medication_administration_performer_uuid: 'performer123',
+    medication_administration_uuid: 'medication123'
+  };
+
+  const handleOnClickMock = jest.fn();
+
+  it('renders the component without crashing', () => {
+    const {container} = render(
+        <PatientListContent
+          patientMedicationDetails={patientMedicationDetails}
+          handleOnClick={handleOnClickMock}
+          
+        />
+      );
+    expect(container).toMatchSnapshot();
+  });
+
+  it('displays the correct medication information', () => {
+    const { getByText } = render(
+      <PatientListContent
+        patientMedicationDetails={patientMedicationDetails}
+        handleOnClick={handleOnClickMock}
+      />
+    );
+    expect(getByText('9/6/2022')).toBeTruthy();
+    expect(getByText('Drug A')).toBeTruthy();
+  });
+
+  it('calls handleOnClick with correct arguments when Acknowledge button is clicked', () => {
+    const { getByText, getByPlaceholderText } = render(
+      <PatientListContent
+        patientMedicationDetails={patientMedicationDetails}
+        handleOnClick={handleOnClickMock}
+      />
+    );
+    const notesInput = getByPlaceholderText('Enter Notes');
+    fireEvent.change(notesInput, { target: { value: 'Some notes' } });
+    expect(notesInput.value).toBe('Some notes');
+    fireEvent.click(getByText('Acknowledge'));
+    expect(handleOnClickMock).toHaveBeenCalledTimes(1);
+    expect(handleOnClickMock).toHaveBeenCalledWith(
+      'performer123',
+      'medication123',
+      'Some notes'
+    );
+  });
+
+  it('updates providerNotes state when notes are entered', () => {
+    const { getByPlaceholderText } = render(
+      <PatientListContent
+        patientMedicationDetails={patientMedicationDetails}
+        handleOnClick={handleOnClickMock}
+      />
+    );
+    const notesInput = getByPlaceholderText('Enter Notes');
+    fireEvent.change(notesInput, { target: { value: 'Some notes' } });
+    expect(notesInput.value).toBe('Some notes');
+  });
+
+  it('clears providerNotes state after Acknowledge button is clicked', () => {
+    const { getByPlaceholderText, getByText } = render(
+      <PatientListContent
+        patientMedicationDetails={patientMedicationDetails}
+        handleOnClick={handleOnClickMock}
+      />
+    );
+    const notesInput = getByPlaceholderText('Enter Notes');
+    fireEvent.change(notesInput, { target: { value: 'Some notes' } });
+    expect(notesInput.value).toBe('Some notes');
+    fireEvent.click(getByText('Acknowledge'));
+    expect(handleOnClickMock).toHaveBeenCalledWith(
+      'performer123',
+      'medication123',
+      'Some notes'
+    );
+    expect(notesInput.value).toBe('');
+  });
+
+  it('disables Acknowledge button when no notes are entered', () => {
+    const { getByText } = render(
+      <PatientListContent
+        patientMedicationDetails={patientMedicationDetails}
+        handleOnClick={handleOnClickMock}
+      />
+    );
+    const acknowledgeButton = getByText('Acknowledge');
+    expect(acknowledgeButton).toHaveProperty('disabled', true); 
+  });
+
+  it('enables Acknowledge button when notes are entered', () => {
+    const { getByText, getByPlaceholderText } = render(
+      <PatientListContent
+        patientMedicationDetails={patientMedicationDetails}
+        handleOnClick={handleOnClickMock}
+      />
+    );
+    const notesInput = getByPlaceholderText('Enter Notes');
+    fireEvent.change(notesInput, { target: { value: 'Some notes' } });
+    const acknowledgeButton = getByText('Acknowledge');
+    expect(acknowledgeButton).toHaveProperty('disabled', false); 
+  });
+});
diff --git a/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientListMockData.js b/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientListMockData.js
new file mode 100644
index 0000000000..11c9ae5cf5
--- /dev/null
+++ b/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientListMockData.js
@@ -0,0 +1,69 @@
+export const mockSortedData = [
+  [
+    {
+      name: 'Hanif Oreo',
+      date_of_birth: '2024-01-17',
+      gender: 'Male',
+      identifier: '123',
+      patient_uuid: 'patientUuid123',
+      visit_uuid: 'visitUuid123',
+    },
+  ],
+  [
+    {
+      name: 'Aby K',
+      date_of_birth: '2024-01-30',
+      gender: 'Male',
+      identifier: '456',
+      patient_uuid: 'patientUuid456',
+      visit_uuid: 'visitUuid456',
+    },
+  ],
+];
+
+export const mockData = [
+  {
+    "identifier": "ET904706",
+    "name": "Hanif Oreo",
+    "gender": "M",
+    "patient_uuid": "a319d19c-03bd-425e-83ef-6799507548f2",
+    "date_of_birth": 1389810600000,
+    "medication_administration_uuid": "ae7e79b9-e831-4602-944d-6739f491f7cf",
+    "administered_date_time": [
+      2024,
+      1,
+      17,
+      16,
+      17,
+      59
+    ],
+    "administered_drug_name": "Azithromycin 500 mg Tablet",
+    "administered_dose": 1,
+    "administered_dose_units": "Tablet(s)",
+    "administered_route": "Oral",
+    "medication_administration_performer_uuid": "868c8723-ac15-4b34-b55e-35314a1e6e53",
+    "visit_uuid": "39d4c60f-dbfc-4290-a2ec-603fcb650d96"
+  },
+  {
+    "identifier": "ET904844",
+    "name": "Aby K",
+    "gender": "M",
+    "patient_uuid": "8755ff3f-1eb6-42f1-92cd-7fb6f6e428ef",
+    "date_of_birth": 1359484200000,
+    "medication_administration_uuid": "8fc88156-1212-4c01-8f2f-a6b872a85501",
+    "administered_date_time": [
+      2024,
+      1,
+      30,
+      16,
+      29,
+      33
+    ],
+    "administered_drug_name": "Paracetamol 250 mg Suppository",
+    "administered_dose": 1,
+    "administered_dose_units": "Tablet(s)",
+    "administered_route": "Oral",
+    "medication_administration_performer_uuid": "0e56149a-fc47-448f-bd14-f0c8cc5826c4",
+    "visit_uuid": "6f0c44e9-9555-45d2-acd5-8d6721029b67"
+  },
+];
\ No newline at end of file
diff --git a/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientListTitle.jsx b/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientListTitle.jsx
new file mode 100644
index 0000000000..e52f42be5e
--- /dev/null
+++ b/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientListTitle.jsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { WarningAlt16 } from "@carbon/icons-react";
+import { Link } from "carbon-components-react";
+import "./PatientListTitle.scss";
+import { getPatientIPDDashboardUrl } from "../../utils/providerNotifications/ProviderNotificationUtils";
+import { formatGender } from "../../utils/utils";
+import PropTypes from "prop-types";
+
+const PatientListTitle = ({ noOfDrugs, identifier, name, age, gender, patientUuid, visitUuid }) => (
+  <div className="patient-list-tile-content">
+    <div className="warning">
+      <WarningAlt16 />
+      <span className="drug-count">{noOfDrugs}</span>
+    </div>
+    <div className="patient-info">
+      <Link href={getPatientIPDDashboardUrl(patientUuid, visitUuid)} className="patient-id">
+        {`(${identifier})`}
+      </Link>
+      <span>{`${name} - ${formatGender(gender)}, ${age}`}</span>
+    </div>
+  </div>
+);
+
+PatientListTitle.propTypes = {
+  noOfDrugs: PropTypes.number.isRequired,
+  identifier: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  age: PropTypes.string.isRequired,
+  gender: PropTypes.string.isRequired,
+  patientUuid: PropTypes.string.isRequired,
+  visitUuid: PropTypes.string.isRequired,
+};
+
+export default PatientListTitle;
diff --git a/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientListTitle.scss b/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientListTitle.scss
new file mode 100644
index 0000000000..a69696b878
--- /dev/null
+++ b/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientListTitle.scss
@@ -0,0 +1,31 @@
+.patient-list-tile-content {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+
+    .patient-info {
+        display: flex;
+        flex-flow: row;
+        justify-content: start;
+        align-items: center;
+        margin-left: 15px;
+        font-size: .875rem;
+    }
+
+    a.bx--link.patient-id {
+        color: #2b95ff;
+        font-size: .875rem;
+        margin-right: 10px;
+    }
+}
+
+.warning {
+    display: flex;
+    color: red;
+    align-items: center;
+}
+
+
+.drug-count {
+    padding-left: 5px;
+}
\ No newline at end of file
diff --git a/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientListTitle.spec.jsx b/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientListTitle.spec.jsx
new file mode 100644
index 0000000000..aefe60af6d
--- /dev/null
+++ b/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientListTitle.spec.jsx
@@ -0,0 +1,66 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import PatientListTitle from "./PatientListTitle";
+import { formatGender } from "../../utils/utils";
+import { getPatientIPDDashboardUrl } from "../../utils/providerNotifications/ProviderNotificationUtils";
+
+const mockWindowOpen = jest.fn();
+global.window.open = mockWindowOpen;
+
+jest.mock("../../utils/providerNotifications/ProviderNotificationUtils", () => ({
+  getPatientIPDDashboardUrl: jest.fn(),
+}));
+
+describe("PatientListTitle Component", () => {
+
+  beforeEach(()=>{
+    jest.clearAllMocks();
+  })
+
+  const props = {
+    noOfDrugs: 3,
+    identifier: "PID123",
+    name: "John Doe",
+    age: "30",
+    gender: "M",
+    patientUuid: "patient123",
+    visitUuid: "visit123",
+    openedWindow: null,
+    setOpenedWindow: jest.fn(),
+  };
+
+  it('should render without crashing', () => {
+    const {container} = render(<PatientListTitle {...props} />);
+    expect(container).toMatchSnapshot();
+  })
+
+  it('renders the correct number of drugs', () => {
+    const { getByText } = render(<PatientListTitle {...props} />);
+    expect(getByText(`${props.noOfDrugs}`)).toBeTruthy();
+  });
+
+  it('renders the patient identifier within a Link', () => {
+    const expectedUrl = 'http://example.com/dashboard';
+    getPatientIPDDashboardUrl.mockReturnValue(expectedUrl);
+    const { getByText } = render(<PatientListTitle {...props} />);
+    const link = getByText(`(${props.identifier})`);
+    expect(link.href).toBe(expectedUrl);
+    expect(link.textContent).toBe(`(${props.identifier})`);
+  });
+
+  it('renders the patient name, gender, and age', () => {
+    const { getByText } = render(<PatientListTitle {...props} />);
+    const expectedText = `${props.name} - ${formatGender(props.gender)}, ${props.age}`;
+    expect(getByText(expectedText)).toBeTruthy();
+  });
+
+  it('passes prop types correctly', () => {
+    const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
+    const invalidProps = {
+      noOfDrugs: '3',
+    };
+    render(<PatientListTitle {...invalidProps} />);
+    expect(consoleError).toHaveBeenCalled();
+    consoleError.mockRestore();
+  });
+});
diff --git a/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientsList.jsx b/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientsList.jsx
new file mode 100644
index 0000000000..24c3625a2d
--- /dev/null
+++ b/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientsList.jsx
@@ -0,0 +1,67 @@
+import React from "react";
+import PatientListTitle from "./PatientListTitle";
+import { Accordion, AccordionItem } from "carbon-components-react";
+import PropTypes from "prop-types";
+import "./PatientsList.scss";
+import PatientListContent from "./PatientListContent";
+import { calculateAgeFromEpochDOB } from "../../utils/utils";
+
+const PatientsList = ({ patientListWithMedications, handleOnClick }) => {
+
+  const renderPatientListTitle = (patient) => (
+    <PatientListTitle
+      noOfDrugs={patient.length}
+      name={patient[0].name}
+      age={calculateAgeFromEpochDOB(patient[0].date_of_birth)}
+      gender={patient[0].gender}
+      identifier={patient[0].identifier}
+      patientUuid={patient[0].patient_uuid}
+      visitUuid={patient[0].visit_uuid}
+    />
+  );
+
+  const renderPatientListContent = (patient) => (
+    patient.map((medication, index) => (
+      <PatientListContent
+        key={index}
+        patientMedicationDetails={medication}
+        handleOnClick={handleOnClick}
+      />
+    ))
+  );
+
+  return (
+    <Accordion className="patient-list-dropdown">
+      {patientListWithMedications && patientListWithMedications.map((patient, index) => (
+        <AccordionItem key={index} title={renderPatientListTitle(patient)}>
+          {renderPatientListContent(patient)}
+        </AccordionItem>
+      ))}
+    </Accordion>
+  );
+};
+
+PatientsList.propTypes = {
+  patientListWithMedications: PropTypes.arrayOf(
+    PropTypes.arrayOf(
+      PropTypes.shape({
+        administered_date_time: PropTypes.array.isRequired,
+        administered_drug_name: PropTypes.string.isRequired,
+        administered_dose: PropTypes.string.isRequired,
+        administered_dose_units: PropTypes.string.isRequired,
+        administered_route: PropTypes.string.isRequired,
+        date_of_birth: PropTypes.array.isRequired,
+        gender: PropTypes.string.isRequired,
+        identifier: PropTypes.string.isRequired,
+        name: PropTypes.string.isRequired,
+        patient_uuid: PropTypes.string.isRequired,
+        visit_uuid: PropTypes.string.isRequired,
+        medication_administration_performer_uuid: PropTypes.string.isRequired,
+        medication_administration_uuid: PropTypes.string.isRequired
+      }).isRequired
+    ).isRequired
+  ).isRequired,
+  handleOnClick: PropTypes.func.isRequired
+};
+
+export default PatientsList;
\ No newline at end of file
diff --git a/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientsList.scss b/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientsList.scss
new file mode 100644
index 0000000000..68d94c8c45
--- /dev/null
+++ b/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientsList.scss
@@ -0,0 +1,20 @@
+.patient-list-dropdown {
+    li.bx--accordion__item {
+        padding: 0;
+        margin-bottom: 12px;
+        background-color: transparent;
+        border: 1px solid #007d79;
+    }
+
+    li.bx--accordion__item:hover {
+        border: transparent;
+    }
+}
+
+.patient-list-content .content-info .notes {
+    background-color: transparent;
+}
+
+.patient-list-content {
+    border-bottom: 1px solid #C6C6C6;
+}
\ No newline at end of file
diff --git a/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientsList.spec.jsx b/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientsList.spec.jsx
new file mode 100644
index 0000000000..7959833406
--- /dev/null
+++ b/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/PatientsList.spec.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import PatientsList from './PatientsList';
+
+describe('PatientsList Component', () => {
+  const patientListWithMedications = [
+    [{
+      administered_date_time: '2022-06-09',
+      administered_drug_name: 'Drug A',
+      administered_dose: '10mg',
+      administered_dose_units: 'mg',
+      administered_route: 'Oral',
+      date_of_birth: '1990-01-01',
+      gender: 'M',
+      identifier: 'PID123',
+      name: 'John Doe',
+      patient_uuid: 'patient123',
+      visit_uuid: 'visit123',
+      medication_administration_performer_uuid: 'performer123',
+      medication_administration_uuid: 'medication123'
+    }]
+  ];
+
+  const handleOnClickMock = jest.fn();
+
+  it('renders the component without crashing', () => {
+    const {container} = render(
+      <PatientsList
+        patientListWithMedications={patientListWithMedications}
+        handleOnClick={handleOnClickMock}
+      />
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it('renders AccordionItem components for each patient', () => {
+    const { getAllByRole } = render(
+      <PatientsList
+        patientListWithMedications={patientListWithMedications}
+        handleOnClick={handleOnClickMock}
+      />
+    );
+    const accordionItems = getAllByRole('button', { name: /John Doe - Male, 34 years 5 months 8 days/i });
+    expect(accordionItems).toHaveLength(patientListWithMedications.length);
+  });
+
+  it('renders PatientListTitle with correct props', () => {
+    const { getByText } = render(
+      <PatientsList
+        patientListWithMedications={patientListWithMedications}
+        handleOnClick={handleOnClickMock}
+      />
+    );
+    const patientName = getByText('John Doe - Male, 34 years 5 months 8 days');
+    expect(patientName).toBeTruthy();
+  });
+
+  it('renders PatientListContent with correct props', () => {
+    const { getByText } = render(
+      <PatientsList
+        patientListWithMedications={patientListWithMedications}
+        handleOnClick={handleOnClickMock}
+      />
+    );
+    const drugName = getByText('Drug A');
+    expect(drugName).toBeTruthy();
+  });
+});
diff --git a/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/__snapshots__/PatientListContent.spec.jsx.snap b/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/__snapshots__/PatientListContent.spec.jsx.snap
new file mode 100644
index 0000000000..3a42f17d0b
--- /dev/null
+++ b/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/__snapshots__/PatientListContent.spec.jsx.snap
@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PatientListContent Component renders the component without crashing 1`] = `
+<div>
+  <div
+    class="patient-list-content"
+  >
+    <span>
+      9/6/2022
+    </span>
+    <div
+      class="content-info"
+    >
+      <span>
+        Drug A
+      </span>
+      <div
+        class="notes"
+      >
+        <div
+          class="bx--form-item"
+        >
+          <div
+            class="bx--text-area__label-wrapper"
+          >
+            <label
+              class="bx--label"
+            >
+              <div
+                class="titleText"
+              >
+                <span>
+                  Note 
+                </span>
+                <span
+                  class="required"
+                >
+                  *
+                </span>
+              </div>
+            </label>
+          </div>
+          <div
+            class="bx--text-area__wrapper"
+          >
+            <textarea
+              class="bx--text-area patient-list-text-area"
+              cols="50"
+              placeholder="Enter Notes"
+              required=""
+              rows="1"
+            />
+          </div>
+        </div>
+        <button
+          class="patient-list-button bx--btn bx--btn--primary bx--btn--disabled"
+          disabled=""
+          tabindex="0"
+          type="button"
+        >
+          Acknowledge
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/__snapshots__/PatientListTitle.spec.jsx.snap b/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/__snapshots__/PatientListTitle.spec.jsx.snap
new file mode 100644
index 0000000000..b34ac566bd
--- /dev/null
+++ b/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/__snapshots__/PatientListTitle.spec.jsx.snap
@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PatientListTitle Component should render without crashing 1`] = `
+<div>
+  <div
+    class="patient-list-tile-content"
+  >
+    <div
+      class="warning"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        focusable="false"
+        height="16"
+        preserveAspectRatio="xMidYMid meet"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M14.5,14h-13c-0.2,0-0.3-0.1-0.4-0.2c-0.1-0.2-0.1-0.3,0-0.5l6.5-12C7.7,1,8,0.9,8.2,1.1c0.1,0,0.2,0.1,0.2,0.2l6.5,12	c0.1,0.2,0.1,0.3,0,0.5C14.9,13.9,14.7,14,14.5,14z M2.3,13h11.3L8,2.5L2.3,13z"
+        />
+        <path
+          d="M7.5 6H8.5V9.5H7.5zM8 10.8c-.4 0-.8.3-.8.8s.3.8.8.8c.4 0 .8-.3.8-.8S8.4 10.8 8 10.8z"
+        />
+      </svg>
+      <span
+        class="drug-count"
+      >
+        3
+      </span>
+    </div>
+    <div
+      class="patient-info"
+    >
+      <a
+        class="bx--link patient-id"
+      >
+        (PID123)
+      </a>
+      <span>
+        John Doe - Male, 30
+      </span>
+    </div>
+  </div>
+</div>
+`;
diff --git a/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/__snapshots__/PatientsList.spec.jsx.snap b/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/__snapshots__/PatientsList.spec.jsx.snap
new file mode 100644
index 0000000000..f1db74fb40
--- /dev/null
+++ b/micro-frontends/src/next-ui/Components/ProviderNotificationPatients/__snapshots__/PatientsList.spec.jsx.snap
@@ -0,0 +1,150 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PatientsList Component renders the component without crashing 1`] = `
+<div>
+  <ul
+    class="bx--accordion patient-list-dropdown bx--accordion--end bx--accordion--md"
+  >
+    <li
+      class="bx--accordion__item"
+    >
+      <button
+        aria-controls="accordion-item-2"
+        aria-expanded="false"
+        class="bx--accordion__heading"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          class="bx--accordion__arrow"
+          fill="currentColor"
+          focusable="false"
+          height="16"
+          preserveAspectRatio="xMidYMid meet"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"
+          />
+        </svg>
+        <div
+          class="bx--accordion__title"
+          dir="auto"
+        >
+          <div
+            class="patient-list-tile-content"
+          >
+            <div
+              class="warning"
+            >
+              <svg
+                aria-hidden="true"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                preserveAspectRatio="xMidYMid meet"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M14.5,14h-13c-0.2,0-0.3-0.1-0.4-0.2c-0.1-0.2-0.1-0.3,0-0.5l6.5-12C7.7,1,8,0.9,8.2,1.1c0.1,0,0.2,0.1,0.2,0.2l6.5,12	c0.1,0.2,0.1,0.3,0,0.5C14.9,13.9,14.7,14,14.5,14z M2.3,13h11.3L8,2.5L2.3,13z"
+                />
+                <path
+                  d="M7.5 6H8.5V9.5H7.5zM8 10.8c-.4 0-.8.3-.8.8s.3.8.8.8c.4 0 .8-.3.8-.8S8.4 10.8 8 10.8z"
+                />
+              </svg>
+              <span
+                class="drug-count"
+              >
+                1
+              </span>
+            </div>
+            <div
+              class="patient-info"
+            >
+              <a
+                class="bx--link patient-id"
+                href="/bahmni/clinical/index.html#/default/patient/patient123/dashboard/visit/ipd/visit123?source=clinical"
+              >
+                (PID123)
+              </a>
+              <span>
+                John Doe - Male, 34 years 5 months 8 days
+              </span>
+            </div>
+          </div>
+        </div>
+      </button>
+      <div
+        class="bx--accordion__content"
+        id="accordion-item-2"
+      >
+        <div
+          class="patient-list-content"
+        >
+          <span>
+            2/0/2
+          </span>
+          <div
+            class="content-info"
+          >
+            <span>
+              Drug A
+            </span>
+            <div
+              class="notes"
+            >
+              <div
+                class="bx--form-item"
+              >
+                <div
+                  class="bx--text-area__label-wrapper"
+                >
+                  <label
+                    class="bx--label"
+                  >
+                    <div
+                      class="titleText"
+                    >
+                      <span>
+                        Note 
+                      </span>
+                      <span
+                        class="required"
+                      >
+                        *
+                      </span>
+                    </div>
+                  </label>
+                </div>
+                <div
+                  class="bx--text-area__wrapper"
+                >
+                  <textarea
+                    class="bx--text-area patient-list-text-area"
+                    cols="50"
+                    placeholder="Enter Notes"
+                    required=""
+                    rows="1"
+                  />
+                </div>
+              </div>
+              <button
+                class="patient-list-button bx--btn bx--btn--primary bx--btn--disabled"
+                disabled=""
+                tabindex="0"
+                type="button"
+              >
+                Acknowledge
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </li>
+  </ul>
+</div>
+`;
diff --git a/micro-frontends/src/next-ui/Containers/providerNotifications/ProviderNotifications.jsx b/micro-frontends/src/next-ui/Containers/providerNotifications/ProviderNotifications.jsx
new file mode 100644
index 0000000000..ca9f2aa282
--- /dev/null
+++ b/micro-frontends/src/next-ui/Containers/providerNotifications/ProviderNotifications.jsx
@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from 'react';
+import './ProviderNotifications.scss';
+import PropTypes from 'prop-types';
+import PatientsList from '../../Components/ProviderNotificationPatients/PatientsList';
+import { FormattedMessage } from 'react-intl';
+import { I18nProvider } from '../../Components/i18n/I18nProvider';
+import { getCookies } from '../../utils/cookieHandler/cookieHandler';
+import { getProvider, getEmergencyDrugAcknowledgements, sortMedicationList, groupByIdentifier } from '../../utils/providerNotifications/ProviderNotificationUtils';
+import { acknowledgeEmergencyMedication } from '../../utils/providerNotifications/ProviderNotificationUtils';
+import { MEDICATION_ACKNOWLEDGE_SQL_PROPERTY, verifierFunction } from '../../constants';
+import { NotificationCarbon } from "bahmni-carbon-ui";
+
+export function ProviderNotifications() {
+    const acknowledgementRequiredText = (<FormattedMessage id="AKNOWLEDGEMENT_REQUIRED_TEXT" defaultMessage="Acknowledgement required" />);
+    const noDrugsToBeAcknowledgedText = (<FormattedMessage id="NO_DRUGS_TO_BE_AKNOWLEDGED_TEXT" defaultMessage="You have no new drugs to be acknowledged." />);
+    const [patientListWithMedications, setPatientListWithMedications] = useState([]);
+    const [showNotification, setShowNotification] = useState(false);
+    const [notificationTitle, setNotificationTitle] = useState("");
+    const [notificationType, setNotificationType] = useState("success");
+    const [providerUuid, setProviderUuid] = useState();
+    const cookies = getCookies();
+    const locationUuid = JSON.parse(cookies["bahmni.user.location"]).uuid;
+
+    const fetchProviderAndMedications = async () => {
+        try {
+            const provider = await getProvider();
+            const providerUuid = provider.currentProvider.uuid;
+            setProviderUuid(providerUuid);
+            const emergencyDrugAcknowledgementResponse = await getEmergencyDrugAcknowledgements(locationUuid, MEDICATION_ACKNOWLEDGE_SQL_PROPERTY, providerUuid);
+            const patientListGroupedByIdentifier = groupByIdentifier(emergencyDrugAcknowledgementResponse, 'identifier');
+            const sortedMedicationList = sortMedicationList(Object.values(patientListGroupedByIdentifier));
+            setPatientListWithMedications(sortedMedicationList);
+        } catch (error) {
+            console.error(error);
+        }
+    };
+    
+    const handleOnClick = async (medication_administration_performer_uuid, medication_administration_uuid, providerNotes) => {
+        try {
+            const response = await acknowledgeEmergencyMedication({
+                providers: [
+                {
+                    uuid: medication_administration_performer_uuid,
+                    providerUuid,
+                    function: verifierFunction
+                }
+                ],
+                notes: [{ authorUuid: providerUuid, text: providerNotes }]
+            }, medication_administration_uuid);
+            updateNotification(response)
+            fetchProviderAndMedications();
+        } catch (error) {
+            updateNotification({ success: false, message: error.message });
+        }
+    };
+
+    const updateNotification = async (response) => {
+        setShowNotification(true);
+        setNotificationTitle(response.message);
+        setNotificationType(response.success ? "success" : "error");
+    }
+
+    const hideNotification = () => {
+        setShowNotification(false);
+    }
+
+    useEffect(() => {
+        fetchProviderAndMedications();
+    }, []);
+
+    if (patientListWithMedications.length === 0) {
+        return (
+            <I18nProvider>
+                <div className='provider-notifications-next-ui'>
+                    <div className='provider-notification-headers'>{noDrugsToBeAcknowledgedText}</div>
+                </div>
+            </I18nProvider>
+        );
+    } else {
+        return (
+            <I18nProvider>
+                <div className='provider-notifications-next-ui'>
+                    <div className='provider-notification-headers'>
+                        <span>{acknowledgementRequiredText}: </span>
+                    </div>
+                    <PatientsList patientListWithMedications={patientListWithMedications} handleOnClick={handleOnClick}/>
+                </div>
+                <NotificationCarbon messageDuration={3000} onClose={hideNotification} showMessage={showNotification} kind={notificationType} title={notificationTitle}/>
+            </I18nProvider>
+        );
+    }
+}
+
+ProviderNotifications.propTypes = {
+    hostData: PropTypes.object,
+    hostApi: PropTypes.object
+};
diff --git a/micro-frontends/src/next-ui/Containers/providerNotifications/ProviderNotifications.scss b/micro-frontends/src/next-ui/Containers/providerNotifications/ProviderNotifications.scss
new file mode 100644
index 0000000000..8e891aab60
--- /dev/null
+++ b/micro-frontends/src/next-ui/Containers/providerNotifications/ProviderNotifications.scss
@@ -0,0 +1,17 @@
+.provider-notifications-next-ui {
+    padding: 10px;
+    margin-top: 0;
+    margin-bottom: 0;
+
+    .provider-notification-headers {
+      padding: 10px 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 16px;
+      color: black;
+      font-weight: 500;
+    }
+  }
+
+  
\ No newline at end of file
diff --git a/micro-frontends/src/next-ui/Containers/providerNotifications/ProviderNotifications.spec.jsx b/micro-frontends/src/next-ui/Containers/providerNotifications/ProviderNotifications.spec.jsx
new file mode 100644
index 0000000000..d86078b2bf
--- /dev/null
+++ b/micro-frontends/src/next-ui/Containers/providerNotifications/ProviderNotifications.spec.jsx
@@ -0,0 +1,177 @@
+import React from 'react';
+import { render, waitFor, screen, fireEvent, act } from '@testing-library/react';
+import { ProviderNotifications } from './ProviderNotifications';
+import { getCookies } from '../../utils/cookieHandler/cookieHandler';
+import { getProvider, getEmergencyDrugAcknowledgements, sortMedicationList, groupByIdentifier, acknowledgeEmergencyMedication, getPatientIPDDashboardUrl } from '../../utils/providerNotifications/ProviderNotificationUtils';
+
+jest.mock('../../utils/cookieHandler/cookieHandler', () => ({
+    getCookies: jest.fn(),
+}));
+
+jest.mock('../../utils/providerNotifications/ProviderNotificationUtils', () => ({
+    getProvider: jest.fn(),
+    getEmergencyDrugAcknowledgements: jest.fn(),
+    sortMedicationList: jest.fn(),
+    groupByIdentifier: jest.fn(),
+    acknowledgeEmergencyMedication: jest.fn(),
+    getPatientIPDDashboardUrl: jest.fn()
+}));
+
+describe('ProviderNotifications Component', () => {
+    const cookiesMock = {
+        "bahmni.user.location": JSON.stringify({ uuid: 'location-uuid' }),
+    };
+    const providerMock = { currentProvider: { uuid: 'provider-uuid' } };
+    const emergencyDrugAcknowledgementResponseMock = [
+        {
+        identifier: 'PID123',
+        administered_date_time: [2022,6,9],
+        administered_drug_name: 'Drug A',
+        administered_dose: '10mg',
+        administered_dose_units: 'mg',
+        administered_route: 'Oral',
+        date_of_birth: [1990,1,1],
+        gender: 'M',
+        name: 'John Doe',
+        patient_uuid: 'patient123',
+        visit_uuid: 'visit123',
+        medication_administration_performer_uuid: 'performer123',
+        medication_administration_uuid: 'medication123'
+        }
+    ];
+    const groupedByIdentifierMock = { PID123: emergencyDrugAcknowledgementResponseMock };
+    const sortedMedicationListMock = [emergencyDrugAcknowledgementResponseMock];
+    const acknowledgeResponseMock = { success: true, message: 'Acknowledgement successful' };
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        getCookies.mockReturnValue(cookiesMock);
+        getProvider.mockResolvedValue(providerMock);
+        getEmergencyDrugAcknowledgements.mockResolvedValue(emergencyDrugAcknowledgementResponseMock);
+        groupByIdentifier.mockReturnValue(groupedByIdentifierMock);
+        sortMedicationList.mockReturnValue(sortedMedicationListMock);
+        acknowledgeEmergencyMedication.mockResolvedValue(acknowledgeResponseMock);
+    });
+
+    it('should render without crashing and display no drugs to be acknowledged message', async () => {
+        jest.clearAllMocks();
+        sortMedicationList.mockReturnValue([]);
+        await act(async () => {
+            render(<ProviderNotifications />);
+        });
+        expect(await screen.findByText(/You have no new drugs to be acknowledged/i)).toBeTruthy();
+    });
+
+    it('renders the component without crashing when drugs are to be acknowledged', async () => {
+        let container;
+        await act(async () => {
+            ({ container } = render(<ProviderNotifications />));
+        });
+        expect(container).toMatchSnapshot();
+    });
+
+    it('should render and display acknowledgment required message with patients list', async () => {
+        await act(async () => {
+            render(<ProviderNotifications />);
+        });
+        expect(await screen.findByText(/Acknowledgement required:/i)).toBeTruthy();
+        expect(await screen.findByText(/John Doe - Male, 34 years 4 months 8 days/i)).toBeTruthy();
+    });
+
+    it('should call handleOnClick and display success notification on acknowledge button click', async () => {
+        await act(async () => {
+            render(<ProviderNotifications />);
+        });
+        await waitFor(() => expect(screen.getByText(/John Doe - Male, 34 years 4 months 8 days/i)).toBeTruthy());
+        const notesInput = screen.getByPlaceholderText('Enter Notes');
+        act(() => {
+            fireEvent.change(notesInput, { target: { value: 'Some notes' } });
+        });
+        expect(notesInput.value).toBe('Some notes');
+        const acknowledgeButton = screen.getByText("Acknowledge", { exact: true });
+        act(() => {
+            fireEvent.click(acknowledgeButton);
+        });
+        await waitFor(() => expect(acknowledgeEmergencyMedication).toHaveBeenCalled());
+        expect(await screen.findByText(/Acknowledgement successful/i)).toBeTruthy();
+    });
+
+    it('should display error notification if acknowledgeEmergencyMedication fails', async () => {
+        const errorResponseMock = { success: false, message: 'Acknowledgement failed' };
+        acknowledgeEmergencyMedication.mockResolvedValueOnce(errorResponseMock);
+        await act(async () => {
+            render(<ProviderNotifications />);
+        });
+        await waitFor(() => expect(screen.getByText(/John Doe - Male, 34 years 4 months 8 days/i)).toBeTruthy());
+        const notesInput = screen.getByPlaceholderText('Enter Notes');
+        act(() => {
+            fireEvent.change(notesInput, { target: { value: 'Some notes' } });
+        });
+        expect(notesInput.value).toBe('Some notes');
+        const acknowledgeButton = screen.getByText("Acknowledge", { exact: true });
+        act(() => {
+            fireEvent.click(acknowledgeButton);
+        });
+        await waitFor(() => expect(acknowledgeEmergencyMedication).toHaveBeenCalled());
+        expect(await screen.findByText(/Acknowledgement failed/i)).toBeTruthy();
+    });
+
+    it('should fetch provider and medications on component mount', async () => {
+        await act(async () => {
+            render(<ProviderNotifications />);
+        });
+        await waitFor(() => expect(getProvider).toHaveBeenCalled());
+        await waitFor(() => expect(getEmergencyDrugAcknowledgements).toHaveBeenCalled());
+    });
+
+    it('should handle errors during fetching provider and medications', async () => {
+        getProvider.mockRejectedValueOnce(new Error('Failed to fetch provider'));
+        console.error = jest.fn(); // Suppress error logging in test output
+        await act(async () => {
+            render(<ProviderNotifications />);
+        });
+        await waitFor(() => expect(getProvider).toHaveBeenCalled());
+        expect(console.error).toHaveBeenCalledWith(new Error('Failed to fetch provider'));
+    });
+
+    it('should set notification when an error occurs', async () => {
+        acknowledgeEmergencyMedication.mockImplementationOnce(() => {
+            throw new Error('New Error');
+        });
+        await act(async () => {
+            render(<ProviderNotifications />);
+        });
+        await waitFor(() => expect(screen.getByText(/John Doe - Male, 34 years 4 months 8 days/i)).toBeTruthy());
+        const notesInput = screen.getByPlaceholderText('Enter Notes');
+        act(() => {
+            fireEvent.change(notesInput, { target: { value: 'Some notes' } });
+        });
+        expect(notesInput.value).toBe('Some notes');
+        const acknowledgeButton = screen.getByText("Acknowledge", { exact: true });
+        act(() => {
+            fireEvent.click(acknowledgeButton);
+        });
+        expect(screen.getByText(/New Error/i)).toBeTruthy();
+        const notification = screen.getByRole('alert');
+        expect(notification.getAttribute("class")).toContain("error");
+    });
+
+    it('should set showNotification to false when NotificationCarbon onClose is called', async () => {
+        await act(async () => {
+            render(<ProviderNotifications />);
+        });
+        await waitFor(() => expect(screen.getByText(/John Doe - Male, 34 years 4 months 8 days/i)).toBeTruthy());
+        const notesInput = screen.getByPlaceholderText('Enter Notes');
+        act(() => {
+            fireEvent.change(notesInput, { target: { value: 'Some notes' } });
+        });
+        expect(notesInput.value).toBe('Some notes');
+        const acknowledgeButton = screen.getByText("Acknowledge", { exact: true });
+        act(() => {
+            fireEvent.click(acknowledgeButton);
+        });
+        await waitFor(() => expect(screen.getByText(/Acknowledgement successful/i)).toBeTruthy());
+        await new Promise(res => setTimeout(res, 3000));
+        expect(screen.queryByText(/Acknowledgement successful/i)).not.toBeTruthy();
+    });
+});
diff --git a/micro-frontends/src/next-ui/Containers/providerNotifications/__snapshots__/ProviderNotifications.spec.jsx.snap b/micro-frontends/src/next-ui/Containers/providerNotifications/__snapshots__/ProviderNotifications.spec.jsx.snap
new file mode 100644
index 0000000000..95f0accd1e
--- /dev/null
+++ b/micro-frontends/src/next-ui/Containers/providerNotifications/__snapshots__/ProviderNotifications.spec.jsx.snap
@@ -0,0 +1,164 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProviderNotifications Component renders the component without crashing when drugs are to be acknowledged 1`] = `
+<div>
+  <div
+    class="provider-notifications-next-ui"
+  >
+    <div
+      class="provider-notification-headers"
+    >
+      <span>
+        Acknowledgement required
+        : 
+      </span>
+    </div>
+    <ul
+      class="bx--accordion patient-list-dropdown bx--accordion--end bx--accordion--md"
+    >
+      <li
+        class="bx--accordion__item"
+      >
+        <button
+          aria-controls="accordion-item-2"
+          aria-expanded="false"
+          class="bx--accordion__heading"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="bx--accordion__arrow"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            preserveAspectRatio="xMidYMid meet"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"
+            />
+          </svg>
+          <div
+            class="bx--accordion__title"
+            dir="auto"
+          >
+            <div
+              class="patient-list-tile-content"
+            >
+              <div
+                class="warning"
+              >
+                <svg
+                  aria-hidden="true"
+                  fill="currentColor"
+                  focusable="false"
+                  height="16"
+                  preserveAspectRatio="xMidYMid meet"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M14.5,14h-13c-0.2,0-0.3-0.1-0.4-0.2c-0.1-0.2-0.1-0.3,0-0.5l6.5-12C7.7,1,8,0.9,8.2,1.1c0.1,0,0.2,0.1,0.2,0.2l6.5,12	c0.1,0.2,0.1,0.3,0,0.5C14.9,13.9,14.7,14,14.5,14z M2.3,13h11.3L8,2.5L2.3,13z"
+                  />
+                  <path
+                    d="M7.5 6H8.5V9.5H7.5zM8 10.8c-.4 0-.8.3-.8.8s.3.8.8.8c.4 0 .8-.3.8-.8S8.4 10.8 8 10.8z"
+                  />
+                </svg>
+                <span
+                  class="drug-count"
+                >
+                  1
+                </span>
+              </div>
+              <div
+                class="patient-info"
+              >
+                <a
+                  class="bx--link patient-id"
+                >
+                  (PID123)
+                </a>
+                <span>
+                  John Doe - Male, 34 years 4 months 8 days
+                </span>
+              </div>
+            </div>
+          </div>
+        </button>
+        <div
+          class="bx--accordion__content"
+          id="accordion-item-2"
+        >
+          <div
+            class="patient-list-content"
+          >
+            <span>
+              9/6/2022
+            </span>
+            <div
+              class="content-info"
+            >
+              <span>
+                Drug A
+              </span>
+              <div
+                class="notes"
+              >
+                <div
+                  class="bx--form-item"
+                >
+                  <div
+                    class="bx--text-area__label-wrapper"
+                  >
+                    <label
+                      class="bx--label"
+                    >
+                      <div
+                        class="titleText"
+                      >
+                        <span>
+                          Note 
+                        </span>
+                        <span
+                          class="required"
+                        >
+                          *
+                        </span>
+                      </div>
+                    </label>
+                  </div>
+                  <div
+                    class="bx--text-area__wrapper"
+                  >
+                    <textarea
+                      class="bx--text-area patient-list-text-area"
+                      cols="50"
+                      placeholder="Enter Notes"
+                      required=""
+                      rows="1"
+                    />
+                  </div>
+                </div>
+                <button
+                  class="patient-list-button bx--btn bx--btn--primary bx--btn--disabled"
+                  disabled=""
+                  tabindex="0"
+                  type="button"
+                >
+                  Acknowledge
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+  <div
+    class="alertContainer"
+  />
+</div>
+`;
diff --git a/micro-frontends/src/next-ui/constants.js b/micro-frontends/src/next-ui/constants.js
index cf4cf88f09..8e20179f4a 100644
--- a/micro-frontends/src/next-ui/constants.js
+++ b/micro-frontends/src/next-ui/constants.js
@@ -2,7 +2,7 @@ export const defaultDateFormat = "DD MMM YYYY";
 export const defaultDateTimeFormat = "DD MMM YYYY hh:mm a";
 
 export const LS_LANG_KEY = "NG_TRANSLATE_LANG_KEY";
-export const SQL_PROPERTY = "emrapi.sqlSearch.emergencyMedicationToAcknowledge";
+export const MEDICATION_ACKNOWLEDGE_SQL_PROPERTY = "emrapi.sqlSearch.emergencyMedicationToAcknowledge";
 export const BASE_URL =
   typeof __webpack_public_path__ !== "undefined"
     ? __webpack_public_path__
diff --git a/micro-frontends/src/next-ui/index.js b/micro-frontends/src/next-ui/index.js
index b523398d05..28f3f338ea 100644
--- a/micro-frontends/src/next-ui/index.js
+++ b/micro-frontends/src/next-ui/index.js
@@ -1,6 +1,7 @@
 import { React2AngularBridgeBuilder } from "../utils/bridge-builder";
 import { PatientAlergiesControl } from "./Containers/patientAlergies/PatientAlergiesControl";
 import { FormDisplayControl } from "./Containers/formDisplayControl/FormDisplayControl";
+import { ProviderNotifications } from "./Containers/providerNotifications/ProviderNotifications";
 import { OtNotesSavePopup, OtNotesDeletePopup } from "./Containers/otNotes/OtNotes";
 
 const MODULE_NAME = "bahmni.mfe.nextUi";
@@ -22,12 +23,17 @@ builder.createComponentWithTranslationForwarding(
   FormDisplayControl
 );
 
+builder.createComponentWithTranslationForwarding(
+  "ProviderNotifications",
+  ProviderNotifications
+);
+
 builder.createComponentWithTranslationForwarding(
     "OtNotesSavePopup",
     OtNotesSavePopup
-)
+);
 
 builder.createComponentWithTranslationForwarding(
     "OtNotesDeletePopup",
     OtNotesDeletePopup
-)
\ No newline at end of file
+);
\ No newline at end of file
diff --git a/micro-frontends/src/next-ui/utils/providerNotifications/ProviderNotificationUtils.js b/micro-frontends/src/next-ui/utils/providerNotifications/ProviderNotificationUtils.js
new file mode 100644
index 0000000000..f752016245
--- /dev/null
+++ b/micro-frontends/src/next-ui/utils/providerNotifications/ProviderNotificationUtils.js
@@ -0,0 +1,68 @@
+import axios from "axios";
+import { EMERGENCY_MEDICATIONS_BASE_URL, GET_DRUG_ACKNOWLEDGEMENT_URL, GET_PROVIDER_UUID_URL } from "../../constants";
+import { parseDateArray } from "../utils";
+
+export const getPatientIPDDashboardUrl = (patientUuid, visitUuid) =>
+    `/bahmni/clinical/index.html#/default/patient/${patientUuid}/dashboard/visit/ipd/${visitUuid}?source=clinical`;
+
+export const getEmergencyDrugAcknowledgements = async (locationUuid, property, providerUuid) => {
+    const apiURL = GET_DRUG_ACKNOWLEDGEMENT_URL.replace("{location_uuid}", locationUuid).replace("{property}", property).replace("{provider_uuid}",providerUuid);
+
+    try {
+        const response = await axios.get(apiURL);
+        if (response.status === 200) {
+            return response.data;
+        }
+        return [];
+    } catch (error) {
+        console.error(error);
+    }
+}
+
+export const sortMedicationList = (medicationList) => {
+    medicationList.forEach(group => {
+        group.sort((a, b) => parseDateArray(a.administered_date_time).diff(parseDateArray(b.administered_date_time)));
+    });
+    medicationList.sort((a, b) => parseDateArray(a[0].administered_date_time).diff(parseDateArray(b[0].administered_date_time)));
+    return medicationList;
+};
+
+export const acknowledgeEmergencyMedication = async (emergencyMedication, medicationAdministrationUuid) => {
+    try {
+        const response = await axios.put(
+            EMERGENCY_MEDICATIONS_BASE_URL.replace("{medication_administration_uuid}",medicationAdministrationUuid),
+            emergencyMedication
+        );
+        if (response.status === 200) {
+            return { success: true, message: 'Emergency Medication Acknowledged Successfully' };
+        } else {
+            const errorMessage = response.data.error.message;
+            return { success: false, message: `Error: ${errorMessage}` };
+        }
+    } catch (error) {
+        return { success: false, message: `Error: ${error}` };
+    }
+};
+
+export const getProvider = async () => {
+    try {
+        const response = await axios.get(GET_PROVIDER_UUID_URL);
+        if (response.status === 200) {
+            return response.data;
+        }
+        return [];
+    } catch (error) {
+        console.error(error);
+    }
+}
+
+export const groupByIdentifier = (data, key) => {
+    return data.reduce((accumulator, item) => {
+      if (!accumulator[item[key]]) {
+        accumulator[item[key]] = [];
+      }
+      accumulator[item[key]].push(item);
+      return accumulator;
+    }, {});
+  };
+  
\ No newline at end of file
diff --git a/micro-frontends/src/next-ui/utils/providerNotifications/ProviderNotificationUtils.spec.js b/micro-frontends/src/next-ui/utils/providerNotifications/ProviderNotificationUtils.spec.js
new file mode 100644
index 0000000000..87311d5ac2
--- /dev/null
+++ b/micro-frontends/src/next-ui/utils/providerNotifications/ProviderNotificationUtils.spec.js
@@ -0,0 +1,194 @@
+import axios from "axios";
+import {
+  getEmergencyDrugAcknowledgements,
+  sortMedicationList,
+  acknowledgeEmergencyMedication,
+  getProvider,
+  groupByIdentifier,
+  getPatientIPDDashboardUrl,
+} from "./ProviderNotificationUtils";
+
+jest.mock("axios");
+
+describe("getEmergencyDrugAcknowledgements", () => {
+  const locationUuid = "testLocation";
+  const property = "testProperty";
+  const providerUuid = "testProvider";
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should return data when API call is successful", async () => {
+    const mockResponseData = [{ drug: "Drug1" }, { drug: "Drug2" }];
+    axios.get.mockResolvedValueOnce({ status: 200, data: mockResponseData });
+
+    const result = await getEmergencyDrugAcknowledgements(locationUuid, property, providerUuid);
+
+    expect(result).toEqual(mockResponseData);
+    expect(axios.get).toHaveBeenCalledTimes(1);
+  });
+
+  it("should return an empty array when API call is not successful", async () => {
+    axios.get.mockResolvedValueOnce({ status: 400, data: "" });
+
+    const result = await getEmergencyDrugAcknowledgements(locationUuid, property, providerUuid);
+    
+    expect(result).toEqual([]);
+    expect(axios.get).toHaveBeenCalledTimes(1);
+  });
+
+  it("should log an error when API call fails", async () => {
+    const consoleErrorSpy = jest.spyOn(console, "error").mockImplementation(() => {});
+    const errorMessage = "API Error";
+
+    axios.get.mockRejectedValueOnce(new Error(errorMessage));
+
+    await getEmergencyDrugAcknowledgements(locationUuid, property, providerUuid);
+
+    expect(consoleErrorSpy).toHaveBeenCalledWith(new Error(errorMessage));
+    expect(axios.get).toHaveBeenCalledTimes(1);
+    consoleErrorSpy.mockRestore();
+  });
+});
+
+describe("sortMedicationList", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should correctly sort medication list", () => {
+    const medicationList = [
+      [{ administered_date_time: [2024, 2, 7, 12, 30, 0] }, { administered_date_time: [2024, 2, 7, 11, 0, 0] }],
+      [{ administered_date_time: [2024, 2, 6, 10, 0, 0] }],
+    ];
+
+    const expectedSortedMedicationList = [
+      [{ administered_date_time: [2024, 2, 6, 10, 0, 0] }],
+      [{ administered_date_time: [2024, 2, 7, 11, 0, 0] }, { administered_date_time: [2024, 2, 7, 12, 30, 0] }],
+    ];
+
+    const sortedMedicationList = sortMedicationList(medicationList);
+
+    expect(sortedMedicationList).toEqual(expectedSortedMedicationList);
+  });
+});
+
+describe("acknowledgeEmergencyMedication", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should return success message when API call is successful", async () => {
+    const emergencyMedication = { medication: "Med1" };
+    const medicationAdministrationUuid = "testUuid";
+    const mockResponse = { status: 200, data: { success: true } };
+
+    axios.put.mockResolvedValueOnce(mockResponse);
+
+    const result = await acknowledgeEmergencyMedication(emergencyMedication, medicationAdministrationUuid);
+
+    expect(result).toEqual({ success: true, message: 'Emergency Medication Acknowledged Successfully' });
+    expect(axios.put).toHaveBeenCalledTimes(1);
+  });
+
+  it("should return error message when API call is not successful", async () => {
+    const emergencyMedication = { medication: "Med1" };
+    const medicationAdministrationUuid = "testUuid";
+    const mockResponse = { status: 400, data: { error: { message: 'Error Message' } } };
+
+    axios.put.mockResolvedValueOnce(mockResponse);
+
+    const result = await acknowledgeEmergencyMedication(emergencyMedication, medicationAdministrationUuid);
+
+    expect(result).toEqual({ success: false, message: 'Error: Error Message' });
+    expect(axios.put).toHaveBeenCalledTimes(1);
+  });
+
+  it("should return error message when API call fails", async () => {
+    const emergencyMedication = { medication: "Med1" };
+    const medicationAdministrationUuid = "testUuid";
+    const errorMessage = "API Error";
+
+    axios.put.mockRejectedValueOnce(new Error(errorMessage));
+
+    const result = await acknowledgeEmergencyMedication(emergencyMedication, medicationAdministrationUuid);
+
+    expect(result).toEqual({ success: false, message: `Error: Error: ${errorMessage}` });
+    expect(axios.put).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("getProvider", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should return data when API call is successful", async () => {
+    const mockResponseData = { provider: "Provider1" };
+
+    axios.get.mockResolvedValueOnce({ status: 200, data: mockResponseData });
+
+    const result = await getProvider();
+
+    expect(result).toEqual(mockResponseData);
+    expect(axios.get).toHaveBeenCalledTimes(1);
+  });
+
+  it("should return empty array when API call is not successful", async () => {
+    axios.get.mockResolvedValueOnce({ status: 400, data: "" });
+
+    const result = await getProvider();
+
+    expect(result).toEqual([]);
+    expect(axios.get).toHaveBeenCalledTimes(1);
+  });
+
+  it("should log an error when API call fails", async () => {
+    const consoleErrorSpy = jest.spyOn(console, "error").mockImplementation(() => {});
+    const errorMessage = "API Error";
+
+    axios.get.mockRejectedValueOnce(new Error(errorMessage));
+
+    await getProvider();
+    
+    expect(consoleErrorSpy).toHaveBeenCalledWith(new Error(errorMessage));
+    expect(axios.get).toHaveBeenCalledTimes(1);
+    consoleErrorSpy.mockRestore();
+  });
+});
+
+describe("groupByIdentifier", () => {
+  it("should group data by the given identifier", () => {
+    const data = [
+      { identifier: 'ID1', value: 'Value1' },
+      { identifier: 'ID2', value: 'Value2' },
+      { identifier: 'ID1', value: 'Value3' },
+    ];
+
+    const expectedGroupedData = {
+      ID1: [
+        { identifier: 'ID1', value: 'Value1' },
+        { identifier: 'ID1', value: 'Value3' },
+      ],
+      ID2: [{ identifier: 'ID2', value: 'Value2' }],
+    };
+
+    const result = groupByIdentifier(data, 'identifier');
+
+    expect(result).toEqual(expectedGroupedData);
+  });
+});
+
+describe("getPatientIPDDashboardUrl", () => {
+  it("should return the correct IPD dashboard URL", () => {
+    const patientUuid = 'patient123';
+    const visitUuid = 'visit123';
+
+    const expectedUrl = `/bahmni/clinical/index.html#/default/patient/${patientUuid}/dashboard/visit/ipd/${visitUuid}?source=clinical`;
+
+    const result = getPatientIPDDashboardUrl(patientUuid, visitUuid);
+
+    expect(result).toBe(expectedUrl);
+  });
+});
diff --git a/micro-frontends/src/next-ui/utils/utils.js b/micro-frontends/src/next-ui/utils/utils.js
index 8c8cdf6037..c32aad4830 100644
--- a/micro-frontends/src/next-ui/utils/utils.js
+++ b/micro-frontends/src/next-ui/utils/utils.js
@@ -4,3 +4,47 @@ import { defaultDateTimeFormat } from "../constants";
 export const formatDate = (value, format = defaultDateTimeFormat) => {
     return value ? moment(value).format(format) : value;
 };
+
+export const formatArrayDateToDefaultDateFormat = (dateTimeArray) => {
+  const year = dateTimeArray[0];
+  const month = dateTimeArray[1];
+  const day = dateTimeArray[2];
+
+  const formattedDate = `${day}/${month}/${year}`;
+
+  return formattedDate;
+};
+
+export const formatGender = (gender) => {
+  let formattedGender;
+
+  if (gender === "M") {
+    formattedGender = "Male";
+  } else if (gender === "F") {
+    formattedGender = "Female";
+  } else {
+    formattedGender = "Other";
+  }
+
+  return formattedGender;
+};
+
+export const calculateAgeFromEpochDOB = (epochDateOfBirth) => {
+  const dob = moment(epochDateOfBirth);
+  const now = moment();
+
+  const years = now.diff(dob, 'years');
+  dob.add(years, 'years');
+
+  const months = now.diff(dob, 'months');
+  dob.add(months, 'months');
+
+  const days = now.diff(dob, 'days');
+
+  return `${years} years ${months} months ${days} days`;
+};
+
+export const parseDateArray = (dateArray) => {
+  const dateString = dateArray.join('-');
+  return moment(dateString, 'YYYY-MM-DD-HH-mm-ss');
+};
diff --git a/micro-frontends/src/next-ui/utils/utils.spec.js b/micro-frontends/src/next-ui/utils/utils.spec.js
index 3485956ced..2f422b348d 100644
--- a/micro-frontends/src/next-ui/utils/utils.spec.js
+++ b/micro-frontends/src/next-ui/utils/utils.spec.js
@@ -1,33 +1,90 @@
-import moment from "moment";
-import { formatDate } from "./utils";
-import { defaultDateTimeFormat } from "../constants";
-
-describe("formatDate function", function () {
-    it("should format a valid date using the default format", () => {
-        const inputDate = "2024-05-02T10:30:00Z";
-        const expectedOutput = moment(inputDate).format(defaultDateTimeFormat);
-        
-        const result = formatDate(inputDate);
-        
-        expect(result).toBe(expectedOutput);
+import {
+  calculateAgeFromEpochDOB,
+  parseDateArray,
+  formatDate,
+  formatArrayDateToDefaultDateFormat,
+  formatGender
+} from './utils';
+describe('calculateAgeFromEpochDOB', () => {
+
+  describe('formatDate', () => {
+
+    it('should correctly format date using custom format', () => {
+      const dateValue = '2023-12-25T08:45:00Z';
+      const customFormat = 'YYYY/MM/DD';
+
+      const formattedDate = formatDate(dateValue, customFormat);
+
+      expect(formattedDate).toEqual('2023/12/25');
+    });
+
+    it('should return value unchanged if value is falsy', () => {
+      const falsyValue = null;
+
+      const formattedDate = formatDate(falsyValue);
+
+      expect(formattedDate).toBeNull();
+    });
+  });
+
+  describe('formatGender function', () => {
+    test('should return "Male" when gender is "M"', () => {
+      const gender = "M";
+      const formattedGender = formatGender(gender);
+      expect(formattedGender).toEqual("Male");
     });
 
-    it("should format a valid date using a custom format", () => {
-        const inputDate = "2024-05-02T10:30:00Z";
-        const customFormat = "DD/MM/YYYY HH:mm:ss";
-        const expectedOutput = moment(inputDate).format(customFormat);
-        
-        const result = formatDate(inputDate, customFormat);
-        
-        expect(result).toBe(expectedOutput);
+    test('should return "Female" when gender is "F"', () => {
+      const gender = "F";
+      const formattedGender = formatGender(gender);
+      expect(formattedGender).toEqual("Female");
     });
 
-    it("should return the input if the value is null or undefined", () => {
-        expect(formatDate(null)).toBeNull();
-        expect(formatDate(undefined)).toBeUndefined();
+    test('should return "Other" when gender is neither "M" nor "F"', () => {
+      const gender = "X";
+      const formattedGender = formatGender(gender);
+      expect(formattedGender).toEqual("Other");
     });
+  });
+
+  describe('formatArrayDateToDefaultDateFormat', () => {
+    it('should correctly format date array to default format', () => {
+      const dateArray = [2024, 2, 7];
+
+      const formattedDate = formatArrayDateToDefaultDateFormat(dateArray);
 
-    it("should handle an empty string input", () => {
-        expect(formatDate("")).toBe("");
+      expect(formattedDate).toEqual('7/2/2024');
     });
+
+    it('should correctly format date array with different values to default format', () => {
+      const dateArray = [2023, 12, 25];
+
+      const formattedDate = formatArrayDateToDefaultDateFormat(dateArray);
+
+      expect(formattedDate).toEqual('25/12/2023');
+    });
+  });
+
+  it('should correctly calculate age from epoch date of birth', () => {
+    jest.spyOn(Date, 'now').mockImplementation(() =>
+      new Date('2024-02-07T00:00:00Z').getTime()
+    );
+
+    expect(calculateAgeFromEpochDOB(946684800000)).toEqual('24 years 1 months 6 days');
+
+    expect(calculateAgeFromEpochDOB(631123200000)).toEqual('34 years 1 months 6 days');
+
+    Date.now.mockRestore();
+  });
+
+  it('should correctly parse date array into a moment object', () => {
+    const dateArray1 = [2024, 2, 7, 12, 30, 0];
+    const dateArray2 = [2000, 1, 1, 0, 0, 0];
+
+    const result1 = parseDateArray(dateArray1).format('YYYY-MM-DD HH:mm:ss');
+    const result2 = parseDateArray(dateArray2).format('YYYY-MM-DD HH:mm:ss');
+
+    expect(result1).toEqual('2024-02-07 12:30:00');
+    expect(result2).toEqual('2000-01-01 00:00:00');
+  });
 });
diff --git a/micro-frontends/yarn.lock b/micro-frontends/yarn.lock
index 00e3e937a1..731511381d 100644
--- a/micro-frontends/yarn.lock
+++ b/micro-frontends/yarn.lock
@@ -3904,10 +3904,10 @@ babel-preset-jest@^29.5.0:
     babel-plugin-jest-hoist "^29.5.0"
     babel-preset-current-node-syntax "^1.0.0"
 
-bahmni-carbon-ui@0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/bahmni-carbon-ui/-/bahmni-carbon-ui-0.1.3.tgz#c8bac17ff9fa7374a24ec78e551b6bf13773a510"
-  integrity sha512-QW6JhAWA9qkM02BeAMEpQQ6wQ2lFr/+MIeDm36qo9jKl0yrWBtievSoXBPLr6NkqA/yi/HIhhYXiolKf2iSM+w==
+bahmni-carbon-ui@0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/bahmni-carbon-ui/-/bahmni-carbon-ui-0.1.6.tgz#0e83ecb932c25e35e1e384bb74539c888c4009f2"
+  integrity sha512-B6Xz8zCPxB9LL8KEJofoJsG3atIi4Baid+js+TqTwI8tyeFo+zkboOvfD7y8I2ZCPSEbzDVJMXA4igffrL4f/g==
   dependencies:
     "@storybook/addon-styling" "0.3"
     "@storybook/react" "6.5"
diff --git a/ui/app/common/patient-search/constants.js b/ui/app/common/patient-search/constants.js
index ee8f4f8798..63c973a8fd 100644
--- a/ui/app/common/patient-search/constants.js
+++ b/ui/app/common/patient-search/constants.js
@@ -5,6 +5,7 @@ Bahmni.Common.PatientSearch = Bahmni.Common.PatientSearch || {};
 Bahmni.Common.PatientSearch.Constants = {
     searchExtensionTileViewType: "tile",
     searchExtensionTabularViewType: "tabular",
+    searchExtensionCustomViewType: "custom",
     nameHeading: ["NAME", "Name", "name"],
     patientTileHeight: 100,
     patientTileWidth: 100,
diff --git a/ui/app/common/patient-search/controllers/patientsListController.js b/ui/app/common/patient-search/controllers/patientsListController.js
index f57150de02..0588e78219 100644
--- a/ui/app/common/patient-search/controllers/patientsListController.js
+++ b/ui/app/common/patient-search/controllers/patientsListController.js
@@ -187,7 +187,8 @@ angular.module('bahmni.common.patientSearch')
                 searchColumns: appExtn.extensionParams.searchColumns,
                 translationKey: appExtn.extensionParams.translationKey,
                 linkColumn: appExtn.extensionParams.linkColumn,
-                links: appExtn.extensionParams.links
+                links: appExtn.extensionParams.links,
+                templateUrl: appExtn.extensionParams.templateUrl || null
             };
         };
 
diff --git a/ui/app/common/patient-search/models/search.js b/ui/app/common/patient-search/models/search.js
index 2c1a004c11..2241f2e988 100644
--- a/ui/app/common/patient-search/models/search.js
+++ b/ui/app/common/patient-search/models/search.js
@@ -83,6 +83,10 @@ Bahmni.Common.PatientSearch.Search = function (searchTypes) {
         return self.searchType && self.searchType.view === Bahmni.Common.PatientSearch.Constants.searchExtensionTabularViewType;
     };
 
+    self.isCustomView = function () {
+        return self.searchType && self.searchType.view === Bahmni.Common.PatientSearch.Constants.searchExtensionCustomViewType;
+    };
+
     self.showPatientCountOnSearchParameter = function (searchType) {
         return showPatientCount(searchType) && self.searchParameter;
     };
diff --git a/ui/app/common/patient-search/views/patientsList.html b/ui/app/common/patient-search/views/patientsList.html
index ec3e8599d7..bbd092625e 100644
--- a/ui/app/common/patient-search/views/patientsList.html
+++ b/ui/app/common/patient-search/views/patientsList.html
@@ -20,7 +20,7 @@
     </div>
     <div class="tab-content" ng-if="::search.searchTypes.length">
         <div class="patient-list-spinner"></div>
-        <span ng-if="search.isCurrentSearchLookUp()">
+        <span ng-if="search.isCurrentSearchLookUp() && !search.isCustomView()">
             <form name="filterPatients" ng-submit="filterPatientsAndSubmit()">
                 <div class="search-wrapper">
                     <input type="text" id="patientIdentifier" ng-model="::search.searchParameter"
@@ -29,7 +29,7 @@
                 </div>
             </form>
         </span>
-        <span ng-if="search.searchType && !search.isCurrentSearchLookUp()">
+        <span ng-if="search.searchType && !search.isCurrentSearchLookUp() && !search.isCustomView()">
             <form name="searchPatientForm" ng-submit="searchPatients()" class="overflow-hidden">
                 <div class="search-patient-id left">
                     <input type="text" id="patientIdentifier" ng-model="::search.searchParameter"
@@ -100,6 +100,9 @@
                 </li>
             </ul>
         </resize>
+        <div ng-if="search.isCustomView()">
+            <div ng-include="search.searchType.templateUrl"></div>
+        </div>
         <div class="note-container" ng-if="search.noResultsMessage">
             <div class="note warning">
                 <div class="text">
diff --git a/ui/app/registration/services/patientService.js b/ui/app/registration/services/patientService.js
index 0ddc63de13..9bdfa69f06 100644
--- a/ui/app/registration/services/patientService.js
+++ b/ui/app/registration/services/patientService.js
@@ -93,7 +93,7 @@ angular.module('bahmni.registration')
         };
 
         var getRegistrationMessage = function (patientId, name, age, gender) {
-            var locationName = $rootScope.facilityVisitLocation ? $rootScope.facilityVisitLocation.name : $rootScope.loggedInLocation.name;
+            var locationName = $rootScope.facilityVisitLocation && $rootScope.facilityVisitLocation.name ? $rootScope.facilityVisitLocation.name : $rootScope.loggedInLocation.name;
             var message = $translate.instant(appService.getAppDescriptor().getConfigValue("registrationMessage") || Bahmni.Registration.Constants.registrationMessage);
             message = message.replace("#clinicName", locationName);
             message = message.replace("#patientId", patientId);
diff --git a/ui/test/unit/common/patient-search/controllers/patientsListController.spec.js b/ui/test/unit/common/patient-search/controllers/patientsListController.spec.js
index df79f2abc1..7f5199e137 100644
--- a/ui/test/unit/common/patient-search/controllers/patientsListController.spec.js
+++ b/ui/test/unit/common/patient-search/controllers/patientsListController.spec.js
@@ -130,7 +130,7 @@ describe("PatientsListController", function () {
                 scope.$apply(setUp);
 
                 expect(scope.search.searchType).toEqual({ name : 'All active patients', display : 'All active patients', handler : 'emrapi.sqlSearch.activePatients', forwardUrl : "../adt/#/patient/{{patientUuid}}/visit/{{visitUuid}}/", targetedTab : "In Patient", id : 'bahmni.clinical.patients.allPatients', params : undefined, refreshTime : '10', view : 'tile',
-                    showPrint : false, printHtmlLocation : null, searchColumns : undefined, additionalParams : undefined, translationKey : undefined, patientCount : '...', linkColumn : undefined, links : undefined});
+                    showPrint : false, printHtmlLocation : null, searchColumns : undefined, additionalParams : undefined, translationKey : undefined, patientCount : '...', linkColumn : undefined, links : undefined, templateUrl: null});
                 expect(_patientService.findPatients).toHaveBeenCalled();
 
                 findPatientsPromise.callThenCallBack({data: patients});