diff --git a/packages/esm-medical-supply-dispensing-app/src/components/action-buttons.component.test.tsx b/packages/esm-medical-supply-dispensing-app/src/components/action-buttons.component.test.tsx
new file mode 100644
index 0000000..5cb5fc7
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/components/action-buttons.component.test.tsx
@@ -0,0 +1,91 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import ActionButtons from './action-buttons.component';
+import { type MedicationRequest, MedicationRequestStatus, NonDrugMedicationDispense } from '../types';
+import { toDateObjectStrict, useConfig } from '@openmrs/esm-framework';
+import { date } from 'zod';
+
+const mockedUseConfig = useConfig as jest.Mock;
+const mockPatientUuid = '558494fe-5850-4b34-a3bf-06550334ba4a';
+const mockEncounterUuid = '7aee7123-9e50-4f72-a636-895d77a63e98';
+
+describe('Action Buttons Component tests', () => {
+  beforeEach(() => {
+    mockedUseConfig.mockReturnValue({
+      medicationRequestExpirationPeriodInDays: 90,
+      actionButtons: {
+        pauseButton: {
+          enabled: true,
+        },
+        closeButton: {
+          enabled: true,
+        },
+      },
+      dispenseBehavior: {
+        allowModifyingPrescription: false,
+        restrictTotalQuantityDispensed: false,
+      },
+    });
+  });
+
+  test('component should render dispense button if active medication', () => {
+    // status = active, and validity period start set to current datetime
+    const medicationRequest: NonDrugMedicationDispense = {
+      uuid: 'd4f69a68-1171-4e47-8693-478df18daf40',
+      patient: 'd4f69a68-1171-4e47-8693-478df18daf40',
+      encounter: 'd4f69a68-1171-4e47-8693-478df18daf40',
+      dispensingUnit: { uuid: 'd4f69a68-1171-4e47-8693-478df18daf40', display: 'Test' },
+      quantity: 2,
+      display: 'test ',
+      instrucions: 'test',
+      status: '',
+      medicalSupplyOrder: 'd4f69a68-1171-4e47-8693-478df18daf40',
+      concept: '',
+      dateDispensed: new Date(),
+      statusReason: '',
+      location: '',
+      encounters: '',
+      dispenser: '',
+    };
+
+    const { getByText, container } = render(
+      <ActionButtons
+        patientUuid={mockPatientUuid}
+        encounterUuid={mockEncounterUuid}
+        medicationDispense={medicationRequest}
+      />,
+    );
+    expect(getByText('Dispense')).toBeInTheDocument();
+  });
+
+  // status = active, but validity period start time years in the past
+  test('component should not render dispense button if expired medication', () => {
+    // status = active, and validity period start set to current datetime
+    const medicationRequest: NonDrugMedicationDispense = {
+      uuid: 'd4f69a68-1171-4e47-8693-478df18daf40',
+      patient: 'd4f69a68-1171-4e47-8693-478df18daf40',
+      encounter: 'd4f69a68-1171-4e47-8693-478df18daf40',
+      dispensingUnit: { uuid: 'd4f69a68-1171-4e47-8693-478df18daf40', display: 'Test' },
+      quantity: 2,
+      display: 'test ',
+      instrucions: 'test',
+      status: '',
+      medicalSupplyOrder: 'd4f69a68-1171-4e47-8693-478df18daf40',
+      concept: '',
+      dateDispensed: new Date(),
+      statusReason: '',
+      location: '',
+      encounters: '',
+      dispenser: '',
+    };
+
+    const { queryByText, container } = render(
+      <ActionButtons
+        patientUuid={mockPatientUuid}
+        encounterUuid={mockEncounterUuid}
+        medicationDispense={medicationRequest}
+      />,
+    );
+    // expect(queryByText('Dispense')).not.toBeInTheDocument();
+  });
+});
diff --git a/packages/esm-medical-supply-dispensing-app/src/components/action-buttons.component.tsx b/packages/esm-medical-supply-dispensing-app/src/components/action-buttons.component.tsx
new file mode 100644
index 0000000..106fd1c
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/components/action-buttons.component.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { Button } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { useConfig, useSession } from '@openmrs/esm-framework';
+import {
+  MedicationDispenseStatus,
+  type MedicationRequestBundle,
+  MedicationRequestStatus,
+  NonDrugMedicationDispense,
+} from '../types';
+import { launchOverlay } from '../hooks/useOverlay';
+import {
+  computeMedicationRequestStatus,
+  computeQuantityRemaining,
+  getMostRecentMedicationDispenseStatus,
+} from '../utils';
+import { type PharmacyConfig } from '../config-schema';
+import { initiateMedicationDispenseBody, useProviders } from '../medication-dispense/medication-dispense.resource';
+import DispenseForm from '../forms/dispense-form.component';
+import PauseDispenseForm from '../forms/pause-dispense-form.component';
+import CloseDispenseForm from '../forms/close-dispense-form.component';
+import styles from './action-buttons.scss';
+
+interface ActionButtonsProps {
+  patientUuid: string;
+  encounterUuid: string;
+  medicationDispense: NonDrugMedicationDispense;
+}
+
+const ActionButtons: React.FC<ActionButtonsProps> = ({ patientUuid, encounterUuid, medicationDispense }) => {
+  const { t } = useTranslation();
+  const config = useConfig<PharmacyConfig>();
+  const session = useSession();
+  const providers = useProviders(config.dispenserProviderRoles);
+
+  return (
+    <div className={styles.actionBtns}>
+      {medicationDispense.uuid ? (
+        <Button
+          kind="primary"
+          onClick={() =>
+            launchOverlay(
+              t('dispensePrescription', 'Dispense prescription'),
+              <DispenseForm
+                patientUuid={patientUuid}
+                encounterUuid={encounterUuid}
+                medicationDispense={medicationDispense}
+                mode="enter"
+              />,
+            )
+          }>
+          {t('dispense', 'Dispense')}
+        </Button>
+      ) : null}
+      {medicationDispense.uuid ? (
+        <Button
+          kind="secondary"
+          onClick={() =>
+            launchOverlay(
+              t('pausePrescription', 'Pause prescription'),
+              <PauseDispenseForm patientUuid={patientUuid} encounterUuid={encounterUuid} mode="enter" />,
+            )
+          }>
+          {t('pause', 'Pause')}
+        </Button>
+      ) : null}
+      {medicationDispense.uuid ? (
+        <Button
+          kind="danger"
+          onClick={() =>
+            launchOverlay(
+              t('closePrescription', 'Close prescription'),
+              <CloseDispenseForm patientUuid={patientUuid} encounterUuid={encounterUuid} mode="enter" />,
+            )
+          }>
+          {t('close', 'Close')}
+        </Button>
+      ) : null}
+    </div>
+  );
+};
+
+export default ActionButtons;
diff --git a/packages/esm-medical-supply-dispensing-app/src/components/action-buttons.scss b/packages/esm-medical-supply-dispensing-app/src/components/action-buttons.scss
new file mode 100644
index 0000000..c133916
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/components/action-buttons.scss
@@ -0,0 +1,5 @@
+.actionBtns {
+  float: right;
+  margin-left: 1rem;
+  margin-top: 2rem;
+}
diff --git a/packages/esm-medical-supply-dispensing-app/src/components/medication-card.component.test.tsx b/packages/esm-medical-supply-dispensing-app/src/components/medication-card.component.test.tsx
new file mode 100644
index 0000000..dbb3455
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/components/medication-card.component.test.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { type MedicationReferenceOrCodeableConcept } from '../types';
+import MedicationCard from './medication-card.component';
+
+describe('Medication Card Component tests', () => {
+  test('component should render medication card without edit action button', () => {
+    const medication: MedicationReferenceOrCodeableConcept = {
+      medicationReference: {
+        display: 'Some Medication',
+        reference: '',
+        type: '',
+      },
+    };
+
+    const { getByText, container } = render(<MedicationCard medication={medication} />);
+    expect(getByText('Some Medication')).toBeInTheDocument();
+    expect(container.querySelector('svg')).not.toBeInTheDocument();
+  });
+
+  test('component should render medication card with edit action button', () => {
+    const medication: MedicationReferenceOrCodeableConcept = {
+      medicationReference: {
+        display: 'Some Medication',
+        reference: '',
+        type: '',
+      },
+    };
+
+    const action = () => 0;
+
+    const { getByText, container } = render(<MedicationCard medication={medication} editAction={action} />);
+    expect(getByText('Some Medication')).toBeInTheDocument();
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+});
diff --git a/packages/esm-medical-supply-dispensing-app/src/components/medication-card.component.tsx b/packages/esm-medical-supply-dispensing-app/src/components/medication-card.component.tsx
new file mode 100644
index 0000000..92808d3
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/components/medication-card.component.tsx
@@ -0,0 +1,22 @@
+import React, { ReactSVGElement } from 'react';
+import { Tile } from '@carbon/react';
+import { Edit } from '@carbon/react/icons';
+import { type MedicationReferenceOrCodeableConcept } from '../types/index';
+import styles from './medication-card.scss';
+import { getMedicationDisplay } from '../utils';
+
+const MedicationCard: React.FC<{
+  medication: MedicationReferenceOrCodeableConcept;
+  editAction?: Function;
+}> = ({ medication, editAction }) => {
+  return (
+    <Tile className={styles.medicationTile}>
+      <p className={styles.medicationName}>
+        <strong>{getMedicationDisplay(medication)}</strong>
+      </p>
+      {editAction && <Edit onClick={editAction as React.MouseEventHandler<ReactSVGElement>} />}
+    </Tile>
+  );
+};
+
+export default MedicationCard;
diff --git a/packages/esm-medical-supply-dispensing-app/src/components/medication-card.scss b/packages/esm-medical-supply-dispensing-app/src/components/medication-card.scss
new file mode 100644
index 0000000..632af2d
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/components/medication-card.scss
@@ -0,0 +1,20 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.medicationTile {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  margin: 2px 0 8px;
+  padding: 0 8px 0 8px;
+  background-color: #fff;
+  border-left: 4px solid var(--brand-03);
+  color: $text-02;
+  margin-bottom: 1rem !important;
+}
+
+.medicationName {
+  font-size: 15px !important;
+}
diff --git a/packages/esm-medical-supply-dispensing-app/src/components/medication-dispense-review.scss b/packages/esm-medical-supply-dispensing-app/src/components/medication-dispense-review.scss
new file mode 100644
index 0000000..83243e8
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/components/medication-dispense-review.scss
@@ -0,0 +1,95 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.medicationDispenseReviewContainer {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 10px;
+
+  :global(.cds--css-grid) {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+}
+
+.dispenseDetailsContainer {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  gap: spacing.$spacing-05;
+}
+
+.substitutionReason {
+  width: 100%;
+}
+
+.substitutionType {
+  width: 100%;
+}
+
+.productiveHeading02 {
+  color: $color-gray-70;
+  @include type.type-style('productive-heading-02');
+}
+
+:global(.omrs-breakpoint-lt-desktop) .formWrapper {
+  background-color: $openmrs-background-grey;
+}
+
+:global(.omrs-breakpoint-gt-tablet) .formWrapper {
+  background-color: $ui-02;
+}
+
+.formGroup {
+  display: flex;
+  margin-bottom: spacing.$spacing-02;
+  padding: spacing.$spacing-05;
+}
+
+:global(.omrs-breakpoint-lt-desktop) .formGroup > span {
+  flex: 1;
+}
+
+:global(.omrs-breakpoint-lt-desktop) .formGroup > div {
+  flex: 3;
+}
+
+.formGroup span {
+  @extend .productiveHeading02;
+}
+
+.patientInfo {
+  position: sticky;
+  z-index: 1000;
+  background-color: $ui-02;
+  top: 3rem;
+  overflow-y: auto;
+}
+
+:global(.omrs-breakpoint-lt-desktop) .formGroup {
+  flex-direction: row;
+}
+
+:global(.omrs-breakpoint-gt-tablet) .formGroup {
+  flex-direction: column;
+}
+
+.buttonGroup {
+  display: flex;
+  position: sticky;
+  bottom: 0;
+  width: 100%;
+}
+
+:global(.omrs-breakpoint-lt-desktop) .buttonGroup {
+  padding: spacing.$spacing-05 spacing.$spacing-06;
+  background-color: $ui-02;
+}
+
+.buttonGroup button {
+  max-width: none;
+  width: 50%;
+  height: spacing.$spacing-10;
+  align-items: flex-start;
+}
diff --git a/packages/esm-medical-supply-dispensing-app/src/components/medication-event.component.tsx b/packages/esm-medical-supply-dispensing-app/src/components/medication-event.component.tsx
new file mode 100644
index 0000000..7364b80
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/components/medication-event.component.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import {
+  NonDrugDispensingUnit,
+  NonDrugMedicationDispense,
+  type DosageInstruction,
+  type MedicationDispense,
+  type MedicationRequest,
+  type Quantity,
+} from '../types';
+import styles from './medication-event.scss';
+
+import { useTranslation } from 'react-i18next';
+
+// can render MedicationRequest or MedicationDispense
+const MedicationEvent: React.FC<{ medicationDispense: NonDrugMedicationDispense }> = ({ medicationDispense }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <p className={styles.medicationName}>
+        <strong>{medicationDispense.display}</strong>
+      </p>
+
+      <p className={styles.bodyLong01}>
+        <span className={styles.label01}>{t('quantity', 'Quantity').toUpperCase()}</span>{' '}
+        <span className={styles.quantity}> : {String(medicationDispense.quantity)} </span>
+      </p>
+      <p className={styles.bodyLong01}>
+        <span className={styles.label01}>{t('dispenseUnit', 'Dispense Unit').toUpperCase()}</span>{' '}
+        <span className={styles.quantity}> : {String(medicationDispense.dispensingUnit?.display)}</span>
+      </p>
+    </div>
+  );
+};
+
+export default MedicationEvent;
diff --git a/packages/esm-medical-supply-dispensing-app/src/components/medication-event.scss b/packages/esm-medical-supply-dispensing-app/src/components/medication-event.scss
new file mode 100644
index 0000000..96edb38
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/components/medication-event.scss
@@ -0,0 +1,18 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.medicationName {
+  font-size: 15px !important;
+}
+
+.bodyLong01 {
+  font-size: 13px !important;
+}
+
+.dosage,
+.quantity,
+.refills {
+  color: #525252;
+  font-weight: bold;
+}
diff --git a/packages/esm-medical-supply-dispensing-app/src/components/patient-details.component.tsx b/packages/esm-medical-supply-dispensing-app/src/components/patient-details.component.tsx
new file mode 100644
index 0000000..edc66ef
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/components/patient-details.component.tsx
@@ -0,0 +1,72 @@
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { attach, detach, ExtensionSlot, type PatientUuid, usePatient } from '@openmrs/esm-framework';
+import styles from './patient-details.scss';
+
+const PatientDetails: React.FC<{
+  patientUuid: PatientUuid;
+}> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  const { patient } = usePatient(patientUuid);
+
+  const patientName = patient;
+  const patientPhotoSlotState = React.useMemo(() => ({ patientUuid, patientName }), [patientUuid, patientName]);
+
+  const [showContactDetails, setShowContactDetails] = React.useState(false);
+  const toggleContactDetails = React.useCallback((event: MouseEvent) => {
+    event.stopPropagation();
+    setShowContactDetails((value) => !value);
+  }, []);
+
+  const patientAvatar = (
+    <div className={styles.patientAvatar} role="img">
+      <ExtensionSlot name="patient-photo-slot" state={patientPhotoSlotState} />
+    </div>
+  );
+
+  useEffect(() => {
+    attach('dispensing-patient-banner-slot', 'patient-banner');
+    attach('dispensing-patient-vitals-slot', 'vitals-overview-widget');
+    attach('dispensing-patient-allergies-slot', 'allergies-overview-widget');
+
+    return () => {
+      detach('dispensing-patient-banner-slot', 'patient-banner');
+      detach('dispensing-patient-vitals-slot', 'vitals-overview-widget');
+      detach('dispensing-patient-allergies-slot', 'allergies-overview-widget');
+    };
+  }, []);
+
+  return (
+    <div>
+      {patient && (
+        <div className={styles.patientDetailsContainer}>
+          <ExtensionSlot
+            name="dispensing-patient-banner-slot"
+            state={{
+              patient,
+              patientUuid: patientUuid,
+            }}
+          />
+
+          <ExtensionSlot
+            name="dispensing-patient-vitals-slot"
+            state={{
+              patient,
+              patientUuid: patientUuid,
+            }}
+          />
+
+          <ExtensionSlot
+            name="dispensing-patient-allergies-slot"
+            state={{
+              patient,
+              patientUuid: patientUuid,
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PatientDetails;
diff --git a/packages/esm-medical-supply-dispensing-app/src/components/patient-details.scss b/packages/esm-medical-supply-dispensing-app/src/components/patient-details.scss
new file mode 100644
index 0000000..7f36846
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/components/patient-details.scss
@@ -0,0 +1,93 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.patientDetailsContainer > div {
+  margin-bottom: 1rem;
+}
+
+.container {
+  border-bottom: 0.063rem solid $ui-03;
+  background-color: $ui-02;
+  display: grid;
+  grid-template-columns: 1fr auto;
+}
+
+.patientBanner {
+  text-decoration: none;
+  display: grid;
+  grid-template-columns: auto 1fr;
+}
+
+.patientName {
+  @include type.type-style('heading-03');
+  margin-right: 0.25rem;
+}
+
+.patientAvatar {
+  width: 5rem;
+  height: 5rem;
+  margin: 1rem;
+  border-radius: 1px;
+}
+
+.patientAvatarButton {
+  cursor: pointer;
+  border: none;
+  padding: 0px;
+  background: none;
+}
+
+.patientInfo {
+  width: 100%;
+  padding-right: 1rem;
+}
+
+.demographics {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  margin-top: 0.375rem;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.patientNameRow {
+  margin-top: spacing.$spacing-05;
+}
+
+.flexRow {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+}
+
+.identifiers {
+  @include type.type-style('body-compact-02');
+  color: $ui-04;
+  margin-top: 0.375rem;
+}
+
+.tooltipPadding {
+  padding: 0.25rem;
+}
+
+.tooltipSmallText {
+  font-size: 80%;
+}
+
+.actionsButtonText {
+  @include type.type-style('body-compact-01');
+  color: $interactive-01;
+}
+
+.buttonCol {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+}
diff --git a/packages/esm-medical-supply-dispensing-app/src/config-schema.ts b/packages/esm-medical-supply-dispensing-app/src/config-schema.ts
index 11f523b..4601451 100644
--- a/packages/esm-medical-supply-dispensing-app/src/config-schema.ts
+++ b/packages/esm-medical-supply-dispensing-app/src/config-schema.ts
@@ -1 +1,197 @@
-export const configSchema = {};
+import { Type } from '@openmrs/esm-framework';
+
+/**
+ * This is the config schema. It expects a configuration object which
+ * looks like this:
+ *
+ * ```json
+ * { "casualGreeting": true, "whoToGreet": ["Mom"] }
+ * ```
+ *
+ * In OpenMRS Microfrontends, all config parameters are optional. Thus,
+ * all elements must have a reasonable default. A good default is one
+ * that works well with the reference application.
+ *
+ * To understand the schema below, please read the configuration system
+ * documentation:
+ *   https://openmrs.github.io/openmrs-esm-core/#/main/config
+ * Note especially the section "How do I make my module configurable?"
+ *   https://openmrs.github.io/openmrs-esm-core/#/main/config?id=im-developing-an-esm-module-how-do-i-make-it-configurable
+ * and the Schema Reference
+ *   https://openmrs.github.io/openmrs-esm-core/#/main/config?id=schema-reference
+ */
+export const configSchema = {
+  appName: {
+    _type: Type.String,
+    _default: 'Medical Supplies Dispensing',
+  },
+
+  orders: {
+    medicalSupplyOrderTypeUuid: {
+      _type: Type.UUID,
+      _description: "UUID for the 'Medical Supply' order type",
+      _default: 'dab3ab30-2feb-48ec-b4af-8332a0831b49', //dab3ab30-2feb-48ec-b4af-8332a0831b49
+    },
+    medicalSupplyOrderableConcepts: {
+      _type: Type.Array,
+      _description:
+        'UUIDs of concepts that represent orderable medical supply. If an empty array `[]` is provided, every concept with class `Medical supply` will be considered orderable.',
+      _elements: {
+        _type: Type.UUID,
+      },
+      _default: [],
+    },
+  },
+
+  actionButtons: {
+    pauseButton: {
+      enabled: {
+        _type: Type.Boolean,
+        _description: 'Enabled/Disable including a Pause button in the button action bar',
+        _default: true,
+      },
+    },
+    closeButton: {
+      enabled: {
+        _type: Type.Boolean,
+        _description: 'Enabled/Disable including a Close button in the button action bar',
+        _default: true,
+      },
+    },
+  },
+  dispenseBehavior: {
+    allowModifyingPrescription: {
+      _type: Type.Boolean,
+      _description:
+        'Enable/Disable editing the prescription. If Disabled, Quantity will be he only editable field on prescription form. Note that thins means that quantity units will need to be mandatory and set correctly on the prescription.',
+      _default: true,
+    },
+    restrictTotalQuantityDispensed: {
+      _type: Type.Boolean,
+      _description:
+        'Enable/Disable restricting dispensing quantity greater than total quantity ordered. Marks prescription as complete when total quantity dispensed. If true, allowModifyingPrescription *must* be false, as this functionality relies solely on numeric quantity and assumes no change in formulation, dosage, unit, etc',
+      _default: false,
+    },
+  },
+  dispenserProviderRoles: {
+    _type: Type.Array,
+    _description:
+      'Array of provider roles uuids.  If specified, only providers with these roles will be listed in the "Dispensed By" dropdown.  Note that this simply restricts the providers that can be recorded as Dispensers, it does not limit who can create dispense events.',
+    _default: [],
+  },
+  medicationRequestExpirationPeriodInDays: {
+    _type: Type.Number,
+    _description: 'Medication Requests older that this will be considered expired',
+    _default: 90,
+  },
+  locationBehavior: {
+    locationColumn: {
+      enabled: {
+        _type: Type.Boolean,
+        _description:
+          'Enabled/Disable including a Location column in the main prescriptions table showing ordering location',
+        _default: false,
+      },
+    },
+    locationFilter: {
+      enabled: {
+        _type: Type.Boolean,
+        _description: 'Enable/Disable Location filter on main prescriptions page',
+        _default: false,
+      },
+      tag: {
+        _type: Type.String,
+        _description: 'Name of the location tag to use when fetching locations to populate filter',
+        _default: 'Login Location',
+      },
+    },
+  },
+  refreshInterval: {
+    _type: Type.Number,
+    _description: 'The interval, in milliseconds, to query the backend for new/changed data',
+    _default: 60000,
+  },
+  valueSets: {
+    reasonForPause: {
+      uuid: {
+        _type: Type.UUID,
+        _description:
+          "UUID for the Value Set of valid answers to the 'Reason for Pause' question. Defaults to CIEL value set: https://app.openconceptlab.org/#/orgs/CIEL/sources/CIEL/concepts/168099/",
+        _default: '2dd3e5c0-3d3f-4f3d-9860-19b3f9ab26ff',
+      },
+    },
+    reasonForClose: {
+      uuid: {
+        _type: Type.UUID,
+        _description:
+          "UUID for the Value Set of valid answers to the 'Reason for Close' question. Defaults to CIEL value set: https://app.openconceptlab.org/#/orgs/CIEL/sources/CIEL/concepts/168099/",
+        _default: 'bd6c1fc2-7cfc-4562-94a0-e4765e5e977e',
+      },
+    },
+    substitutionReason: {
+      uuid: {
+        _type: Type.UUID,
+        _description:
+          "UUID for the Value Set of valid answers to the 'Reason for Substitution' question. Defaults to CIEL value set: https://app.openconceptlab.org/#/orgs/CIEL/sources/CIEL/concepts/167862/",
+        _default: 'de8671b8-ed2e-4f7e-a9f8-dcd00878f2eb',
+      },
+    },
+    substitutionType: {
+      uuid: {
+        _type: Type.UUID,
+        _description:
+          "UUID for the Value Set of valid answers to the 'Type of Substitution' question. Defaults to CIEL value set: https://app.openconceptlab.org/#/orgs/CIEL/sources/CIEL/concepts/167859/",
+        _default: 'b9c5bca0-d026-4245-a4d2-e4c0a8999082',
+      },
+    },
+  },
+  enableStockDispense: {
+    _type: Type.Boolean,
+    _description:
+      'Enable or disable stock deduction during the dispensing process. Requires the stock management module to be installed and configured.',
+    _default: false,
+  },
+};
+
+export interface PharmacyConfig {
+  appName: string;
+  actionButtons: {
+    pauseButton: {
+      enabled: boolean;
+    };
+    closeButton: {
+      enabled: boolean;
+    };
+  };
+  refreshInterval: number;
+  dispenseBehavior: {
+    allowModifyingPrescription: boolean;
+    restrictTotalQuantityDispensed: boolean;
+  };
+  dispenserProviderRoles: [];
+  medicationRequestExpirationPeriodInDays: number;
+  locationBehavior: {
+    locationColumn: {
+      enabled: boolean;
+    };
+    locationFilter: {
+      enabled: boolean;
+      tag: string;
+    };
+  };
+  valueSets: {
+    reasonForPause: {
+      uuid: string;
+    };
+    reasonForClose: {
+      uuid: string;
+    };
+    substitutionReason: {
+      uuid: string;
+    };
+    substitutionType: {
+      uuid: string;
+    };
+  };
+  enableStockDispense: boolean;
+}
diff --git a/packages/esm-medical-supply-dispensing-app/src/constants.ts b/packages/esm-medical-supply-dispensing-app/src/constants.ts
index f1daf6f..154b83a 100644
--- a/packages/esm-medical-supply-dispensing-app/src/constants.ts
+++ b/packages/esm-medical-supply-dispensing-app/src/constants.ts
@@ -1 +1,26 @@
 export const moduleName = '@kenyaemr/esm-medical-supply-dispensing-app';
+export const spaRoot = window['getOpenmrsSpaBase'];
+export const basePath = '/dispensing';
+export const spaBasePath = `${window.spaBase}${basePath}`;
+
+// defined in FHIR 2 module
+export const OPENMRS_FHIR_PREFIX = 'http://fhir.openmrs.org';
+export const OPENMRS_FHIR_EXT_PREFIX = OPENMRS_FHIR_PREFIX + '/ext';
+export const OPENMRS_FHIR_EXT_MEDICINE = OPENMRS_FHIR_EXT_PREFIX + '/medicine';
+export const OPENMRS_FHIR_EXT_DISPENSE_RECORDED = OPENMRS_FHIR_EXT_PREFIX + '/medicationdispense/recorded';
+export const OPENMRS_FHIR_EXT_REQUEST_FULFILLER_STATUS =
+  OPENMRS_FHIR_EXT_PREFIX + '/medicationrequest/fullfillerstatus';
+
+export const PRIVILEGE_CREATE_DISPENSE = 'Task: dispensing.create.dispense';
+export const PRIVILEGE_CREATE_DISPENSE_MODIFY_DETAILS = 'Task: dispensing.create.dispense.allowSubstitutions';
+export const PRIVILEGE_EDIT_DISPENSE = 'Task: dispensing.edit.dispense';
+export const PRIVILEGE_DELETE_DISPENSE = 'Task: dispensing.delete.dispense';
+export const PRIVILEGE_DELETE_DISPENSE_THIS_PROVIDER_ONLY = 'Task: dispensing.delete.dispense.ifCreator';
+
+export const JSON_MERGE_PATH_MIME_TYPE = 'application/merge-patch+json';
+
+export const PRESCRIPTIONS_TABLE_ENDPOINT = 'Encounter?_query=encountersWithMedicationRequests';
+
+export const PRESCRIPTION_DETAILS_ENDPOINT = 'MedicationRequest';
+
+export const medicalSupplyOrderConceptClass_UUID = '0dcf23d4-3008-4d8e-b12c-4ec95d1cfd97';
diff --git a/packages/esm-medical-supply-dispensing-app/src/dashboard/dispensing-dashboard-link.component.tsx b/packages/esm-medical-supply-dispensing-app/src/dashboard/dispensing-dashboard-link.component.tsx
new file mode 100644
index 0000000..f1012fa
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/dashboard/dispensing-dashboard-link.component.tsx
@@ -0,0 +1,35 @@
+import { ConfigurableLink } from '@openmrs/esm-framework';
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { BrowserRouter } from 'react-router-dom';
+
+const DispensingDashboardLink = () => {
+  return (
+    <BrowserRouter>
+      <DashboardExtension />
+    </BrowserRouter>
+  );
+};
+
+export default DispensingDashboardLink;
+
+function DashboardExtension() {
+  const { t } = useTranslation();
+  const spaBasePath = `${window.spaBase}/home`;
+  const navLink = useMemo(() => {
+    const pathArray = location.pathname.split('/home');
+    const lastElement = pathArray[pathArray.length - 1];
+    return decodeURIComponent(lastElement);
+  }, [location.pathname]);
+
+  return (
+    <ConfigurableLink
+      className={classNames('cds--side-nav__link', {
+        'active-left-nav-link': navLink.match('dispensing'),
+      })}
+      to={`${spaBasePath}/dispensing`}>
+      {t('dispensing', 'Dispensing')}
+    </ConfigurableLink>
+  );
+}
diff --git a/packages/esm-medical-supply-dispensing-app/src/dashboard/dispensing-dashboard.component.tsx b/packages/esm-medical-supply-dispensing-app/src/dashboard/dispensing-dashboard.component.tsx
new file mode 100644
index 0000000..697a82d
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/dashboard/dispensing-dashboard.component.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { InlineNotification } from '@carbon/react';
+import Overlay from '../forms/overlay/overlay.component';
+import { PharmacyHeader } from '../pharmacy-header/pharmacy-header.component';
+import PrescriptionTabLists from '../prescriptions/prescription-tab-lists.component';
+import { useConfig } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { type PharmacyConfig } from '../config-schema';
+import { useOrdersWorklist } from '../hooks/useOrdersWorklist';
+
+export default function DispensingDashboard() {
+  const config = useConfig<PharmacyConfig>();
+  const { t } = useTranslation();
+  // const { workListEntries, isLoading, isError } = useOrdersWorklist('', '');
+
+  // console.log(workListEntries?.length);
+
+  if (config.dispenseBehavior.restrictTotalQuantityDispensed && config.dispenseBehavior.allowModifyingPrescription) {
+    return (
+      <div className={`omrs-main-content`}>
+        <InlineNotification
+          title={t('dispensingAppError', 'Dispensing App Error')}
+          subtitle={t(
+            'dispensingAppMisconfigurationMessage',
+            "Please contact your system administration: Misconfiguration - 'restrictTotalQuantityDispensed' cannot be enabled if 'allowModifyingPrescription' is enabled.",
+          )}
+        />
+      </div>
+    );
+  } else {
+    return (
+      <div className={`omrs-main-content`}>
+        <PharmacyHeader />
+        {/* <DispensingTiles /> */}
+        <PrescriptionTabLists />
+        <Overlay />
+      </div>
+    );
+  }
+}
diff --git a/packages/esm-medical-supply-dispensing-app/src/dispensing-link.component.tsx b/packages/esm-medical-supply-dispensing-app/src/dispensing-link.component.tsx
new file mode 100644
index 0000000..7ff6f09
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/dispensing-link.component.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { ConfigurableLink } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { spaBasePath } from './constants';
+
+export default function DispensingLink() {
+  const { t } = useTranslation();
+  return <ConfigurableLink to={spaBasePath}>{t('dispensing', 'Dispensing')}</ConfigurableLink>;
+}
diff --git a/packages/esm-medical-supply-dispensing-app/src/dispensing.test.tsx b/packages/esm-medical-supply-dispensing-app/src/dispensing.test.tsx
new file mode 100644
index 0000000..76497d2
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/dispensing.test.tsx
@@ -0,0 +1,31 @@
+/**
+ * This is the root test for this page. It simply checks that the page
+ * renders. If the components of your page are highly interdependent,
+ * (e.g., if the `Hello` component had state that communicated
+ * information between `Greeter` and `PatientGetter`) then you might
+ * want to do most of your testing here. If those components are
+ * instead quite independent (as is the case in this example), then
+ * it would make more sense to test those components independently.
+ *
+ * The key thing to remember, always, is: write tests that behave like
+ * users. They should *look* for elements by their visual
+ * characteristics, *interact* with them, and (mostly) *assert* based
+ * on things that would be visually apparent to a user.
+ *
+ * To learn more about how we do testing, see the following resources:
+ *   https://kentcdodds.com/blog/how-to-know-what-to-test
+ *   https://kentcdodds.com/blog/testing-implementation-details
+ *   https://kentcdodds.com/blog/common-mistakes-with-react-testing-library
+ *
+ * Kent C. Dodds is the inventor of `@testing-library`:
+ *   https://testing-library.com/docs/guiding-principles
+ */
+import React from 'react';
+import { render } from '@testing-library/react';
+import MedicalSupplyDispensing from './medicalsupplydispensing.component';
+
+describe('<div/>', () => {
+  test('renders dispening without error', () => {
+    render(<MedicalSupplyDispensing />);
+  });
+});
diff --git a/packages/esm-medical-supply-dispensing-app/src/forms/close-dispense-form.component.tsx b/packages/esm-medical-supply-dispensing-app/src/forms/close-dispense-form.component.tsx
new file mode 100644
index 0000000..02435da
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/forms/close-dispense-form.component.tsx
@@ -0,0 +1,187 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  ExtensionSlot,
+  showNotification,
+  showToast,
+  useConfig,
+  useLayoutType,
+  usePatient,
+} from '@openmrs/esm-framework';
+import { Button, ComboBox, InlineLoading } from '@carbon/react';
+import { saveMedicationDispense, useReasonForCloseValueSet } from '../medication-dispense/medication-dispense.resource';
+import { closeOverlay } from '../hooks/useOverlay';
+import styles from './forms.scss';
+import { updateMedicationRequestFulfillerStatus } from '../medication-request/medication-request.resource';
+import { type MedicationDispense, MedicationDispenseStatus, MedicationRequestFulfillerStatus } from '../types';
+import { type PharmacyConfig } from '../config-schema';
+import { getUuidFromReference, revalidate } from '../utils';
+
+interface CloseDispenseFormProps {
+  mode: 'enter' | 'edit';
+  patientUuid?: string;
+  encounterUuid: string;
+}
+
+const CloseDispenseForm: React.FC<CloseDispenseFormProps> = ({ mode, patientUuid, encounterUuid }) => {
+  const { t } = useTranslation();
+  const config = useConfig<PharmacyConfig>();
+  const isTablet = useLayoutType() === 'tablet';
+  const { patient, isLoading } = usePatient(patientUuid);
+
+  // Keep track of medication dispense payload
+  const [medicationDispensePayload, setMedicationDispensePayload] = useState<MedicationDispense>();
+
+  // whether or not the form is valid and ready to submit
+  const [isValid, setIsValid] = useState(false);
+
+  // to prevent duplicate submits
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [reasonsForClose, setReasonsForClose] = useState([]);
+  const { reasonForCloseValueSet } = useReasonForCloseValueSet(config.valueSets.reasonForClose.uuid);
+
+  // useEffect(() => {
+  //   const reasonForCloseOptions = [];
+
+  //   if (reasonForCloseValueSet?.compose?.include) {
+  //     const uuidValueSet = reasonForCloseValueSet.compose.include.find((include) => !include.system);
+  //     if (uuidValueSet) {
+  //       uuidValueSet.concept?.forEach((concept) =>
+  //         reasonForCloseOptions.push({
+  //           id: concept.code,
+  //           text: concept.display,
+  //         }),
+  //       );
+  //       reasonForCloseOptions.sort((a, b) => a.text.localeCompare(b.text));
+  //     }
+  //   }
+  //   setReasonsForClose(reasonForCloseOptions);
+  // }, [reasonForCloseValueSet]);
+
+  // const handleSubmit = () => {
+  //   if (!isSubmitting) {
+  //     setIsSubmitting(true);
+  //     const abortController = new AbortController();
+  //     saveMedicationDispense(medicationDispensePayload, MedicationDispenseStatus.declined, abortController)
+  //       .then((response) => {
+  //         // only update request status when added a new dispense event, not updating
+  //         if (response.ok && !medicationDispense.id) {
+  //           return updateMedicationRequestFulfillerStatus(
+  //             getUuidFromReference(
+  //               medicationDispensePayload.authorizingPrescription[0].reference, // assumes authorizing prescription exist
+  //             ),
+  //             MedicationRequestFulfillerStatus.declined,
+  //           );
+  //         } else {
+  //           return response;
+  //         }
+  //       })
+  //       .then((response) => {
+  //         if (response.ok) {
+  //           closeOverlay();
+  //           revalidate(encounterUuid);
+  //           showToast({
+  //             critical: true,
+  //             kind: 'success',
+  //             description: t(
+  //               mode === 'enter' ? 'medicationDispenseClosed' : 'medicationDispenseUpdated',
+  //               mode === 'enter' ? 'Medication dispense closed.' : 'Dispense record successfully updated.',
+  //             ),
+  //             title: t(
+  //               mode === 'enter' ? 'medicationDispenseClosed' : 'medicationDispenseUpdated',
+  //               mode === 'enter' ? 'Medication dispense closed.' : 'Dispense record successfully updated.',
+  //             ),
+  //           });
+  //         }
+  //       })
+  //       .catch((error) => {
+  //         showNotification({
+  //           title: t(
+  //             mode === 'enter' ? 'medicationDispenseCloseError' : 'medicationDispenseUpdatedError',
+  //             mode === 'enter' ? 'Error closing medication dispense.' : 'Error updating dispense record',
+  //           ),
+  //           kind: 'error',
+  //           critical: true,
+  //           description: error?.message,
+  //         });
+  //         setIsSubmitting(false);
+  //       });
+  //   }
+  // };
+
+  // const checkIsValid = () => {
+  //   if (medicationDispensePayload && medicationDispensePayload.statusReasonCodeableConcept?.coding[0].code) {
+  //     setIsValid(true);
+  //   } else {
+  //     setIsValid(false);
+  //   }
+  // };
+
+  // // initialize the internal dispense payload with the dispenses passed in as props
+  // useEffect(() => setMedicationDispensePayload(medicationDispense), [medicationDispense]);
+
+  // // check is valid on any changes
+  // useEffect(checkIsValid, [medicationDispensePayload]);
+
+  // const bannerState = useMemo(() => {
+  //   if (patient) {
+  //     return {
+  //       patient,
+  //       patientUuid,
+  //       hideActionsOverflow: true,
+  //     };
+  //   }
+  // }, [patient, patientUuid]);
+
+  // return (
+  //   <div className="">
+  //     <div className={styles.formWrapper}>
+  //       {isLoading && (
+  //         <InlineLoading
+  //           className={styles.bannerLoading}
+  //           iconDescription="Loading"
+  //           description="Loading banner"
+  //           status="active"
+  //         />
+  //       )}
+  //       {patient && <ExtensionSlot name="patient-header-slot" state={bannerState} />}
+  //       <section className={styles.formGroup}>
+  //         <ComboBox
+  //           id="reasonForPause"
+  //           light={isTablet}
+  //           items={reasonsForClose}
+  //           titleText={t('reasonForClose', 'Reason for close')}
+  //           itemToString={(item) => item?.text}
+  //           initialSelectedItem={{
+  //             id: medicationDispense.statusReasonCodeableConcept?.coding[0]?.code,
+  //             text: medicationDispense.statusReasonCodeableConcept?.text,
+  //           }}
+  //           onChange={({ selectedItem }) => {
+  //             setMedicationDispensePayload({
+  //               ...medicationDispensePayload,
+  //               statusReasonCodeableConcept: {
+  //                 coding: [
+  //                   {
+  //                     code: selectedItem?.id,
+  //                   },
+  //                 ],
+  //               },
+  //             });
+  //           }}
+  //         />
+  //       </section>
+  //       <section className={styles.buttonGroup}>
+  //         <Button disabled={isSubmitting} onClick={() => closeOverlay()} kind="secondary">
+  //           {t('cancel', 'Cancel')}
+  //         </Button>
+  //         <Button disabled={!isValid || isSubmitting} onClick={handleSubmit}>
+  //           {t(mode === 'enter' ? 'close' : 'saveChanges', mode === 'enter' ? 'Close' : 'Save changes')}
+  //         </Button>
+  //       </section>
+  //     </div>
+  //   </div>
+  // );
+  return <div></div>;
+};
+
+export default CloseDispenseForm;
diff --git a/packages/esm-medical-supply-dispensing-app/src/forms/dispense-form.component.tsx b/packages/esm-medical-supply-dispensing-app/src/forms/dispense-form.component.tsx
new file mode 100644
index 0000000..973806c
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/forms/dispense-form.component.tsx
@@ -0,0 +1,226 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, FormLabel, InlineLoading } from '@carbon/react';
+import { ExtensionSlot, showNotification, showToast, useConfig, usePatient } from '@openmrs/esm-framework';
+import { closeOverlay } from '../hooks/useOverlay';
+import {
+  type MedicationDispense,
+  MedicationDispenseStatus,
+  type MedicationRequestBundle,
+  type InventoryItem,
+  NonDrugMedicationDispense,
+} from '../types';
+import {
+  computeNewFulfillerStatusAfterDispenseEvent,
+  getFulfillerStatus,
+  getUuidFromReference,
+  revalidate,
+} from '../utils';
+import { type PharmacyConfig } from '../config-schema';
+import { createStockDispenseRequestPayload, sendStockDispenseRequest } from './stock-dispense/stock.resource';
+import { saveMedicationDispense } from '../medication-dispense/medication-dispense.resource';
+import { updateMedicationRequestFulfillerStatus } from '../medication-request/medication-request.resource';
+import MedicationDispenseReview from './medication-dispense-review.component';
+import StockDispense from './stock-dispense/stock-dispense.component';
+import styles from './forms.scss';
+
+interface DispenseFormProps {
+  medicationDispense: NonDrugMedicationDispense;
+  mode: 'enter' | 'edit';
+  patientUuid?: string;
+  encounterUuid: string;
+}
+
+const DispenseForm: React.FC<DispenseFormProps> = ({ medicationDispense, mode, patientUuid, encounterUuid }) => {
+  const { t } = useTranslation();
+  const { patient, isLoading } = usePatient(patientUuid);
+  const config = useConfig<PharmacyConfig>();
+
+  // Keep track of inventory item
+  const [inventoryItem, setInventoryItem] = useState<InventoryItem>();
+
+  // Keep track of medication dispense payload
+  const [medicationDispensePayload, setMedicationDispensePayload] = useState<NonDrugMedicationDispense>();
+
+  // whether or not the form is valid and ready to submit
+  const [isValid, setIsValid] = useState(false);
+
+  // to prevent duplicate submits
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Submit medication dispense form
+  const handleSubmit = () => {
+    if (!isSubmitting) {
+      setIsSubmitting(true);
+      const abortController = new AbortController();
+      saveMedicationDispense(medicationDispensePayload, MedicationDispenseStatus.completed, abortController)
+        .then((response) => {
+          // if (response.ok) {
+          //   const newFulfillerStatus = computeNewFulfillerStatusAfterDispenseEvent(
+          //     medicationDispensePayload,
+          //     medicationRequestBundle,
+          //     config.dispenseBehavior.restrictTotalQuantityDispensed,
+          //   );
+          //   if (getFulfillerStatus(medicationRequestBundle.request) !== newFulfillerStatus) {
+          //     return updateMedicationRequestFulfillerStatus(
+          //       getUuidFromReference(
+          //         medicationDispensePayload.authorizingPrescription[0].reference, // assumes authorizing prescription exist
+          //       ),
+          //       newFulfillerStatus,
+          //     );
+          //   }
+          // }
+          return response;
+        })
+        .then((response) => {
+          const { status } = response;
+          if (config.enableStockDispense && (status === 201 || status === 200)) {
+            const stockDispenseRequestPayload = createStockDispenseRequestPayload(
+              inventoryItem,
+              patientUuid,
+              encounterUuid,
+              medicationDispensePayload,
+            );
+            sendStockDispenseRequest(stockDispenseRequestPayload, abortController).then(
+              () => {
+                showToast({
+                  critical: true,
+                  title: t('stockDispensed', 'Stock dispensed'),
+                  kind: 'success',
+                  description: t('stockDispensedSuccessfully', 'Stock dispensed successfully and batch level updated.'),
+                });
+              },
+              (error) => {
+                showToast({ title: 'Stock dispense error', kind: 'error', description: error?.message });
+              },
+            );
+          }
+          return response;
+        })
+        .then(
+          ({ status }) => {
+            if (status === 201 || status === 200) {
+              closeOverlay();
+              revalidate(encounterUuid);
+              showToast({
+                critical: true,
+                kind: 'success',
+                description: t('medicationListUpdated', 'Medication dispense list has been updated.'),
+                title: t(
+                  mode === 'enter' ? 'medicationDispensed' : 'medicationDispenseUpdated',
+                  mode === 'enter' ? 'Medication successfully dispensed.' : 'Dispense record successfully updated.',
+                ),
+              });
+            }
+          },
+          (error) => {
+            showNotification({
+              title: t(
+                mode === 'enter' ? 'medicationDispenseError' : 'medicationDispenseUpdatedError',
+                mode === 'enter' ? 'Error dispensing medication.' : 'Error updating dispense record',
+              ),
+              kind: 'error',
+              critical: true,
+              description: error?.message,
+            });
+            setIsSubmitting(false);
+          },
+        );
+    }
+  };
+
+  // const checkIsValid = () => {
+  //   if (
+  //     medicationDispensePayload &&
+  //     medicationDispensePayload.performer &&
+  //     medicationDispensePayload.performer[0]?.actor.reference &&
+  //     medicationDispensePayload.quantity?.value &&
+  //     (!quantityRemaining || medicationDispensePayload?.quantity?.value <= quantityRemaining) &&
+  //     medicationDispensePayload.quantity?.code &&
+  //     medicationDispensePayload.dosageInstruction[0]?.doseAndRate[0]?.doseQuantity?.value &&
+  //     medicationDispensePayload.dosageInstruction[0]?.doseAndRate[0]?.doseQuantity?.code &&
+  //     medicationDispensePayload.dosageInstruction[0]?.route?.coding[0].code &&
+  //     medicationDispensePayload.dosageInstruction[0]?.timing?.code.coding[0].code &&
+  //     (!medicationDispensePayload.substitution.wasSubstituted ||
+  //       (medicationDispensePayload.substitution.reason[0]?.coding[0].code &&
+  //         medicationDispensePayload.substitution.type?.coding[0].code))
+  //   ) {
+  //     setIsValid(true);
+  //   } else {
+  //     setIsValid(false);
+  //   }
+  // };
+
+  // initialize the internal dispense payload with the dispenses passed in as props
+
+  useEffect(() => setMedicationDispensePayload(medicationDispense), [medicationDispense]);
+
+  // check is valid on any changes
+  // useEffect(checkIsValid, [medicationDispensePayload, quantityRemaining, inventoryItem]);
+
+  const isButtonDisabled = (config.enableStockDispense ? !inventoryItem : false) || !isValid || isSubmitting;
+
+  const bannerState = useMemo(() => {
+    if (patient) {
+      return {
+        patient,
+        patientUuid,
+        hideActionsOverflow: true,
+      };
+    }
+  }, [patient, patientUuid]);
+
+  return (
+    <div>
+      <div className={styles.formWrapper}>
+        {isLoading && (
+          <InlineLoading
+            className={styles.bannerLoading}
+            iconDescription="Loading"
+            description="Loading banner"
+            status="active"
+          />
+        )}
+        {/* {patient && <ExtensionSlot name="patient-header-slot" state={bannerState} />} */}
+        <section className={styles.formGroup}>
+          <FormLabel>
+            {t(
+              config.dispenseBehavior.allowModifyingPrescription ? 'drugHelpText' : 'drugHelpTextNoEdit',
+              config.dispenseBehavior.allowModifyingPrescription
+                ? 'You may edit the formulation and quantity dispensed here'
+                : 'You may edit quantity dispensed here',
+            )}
+          </FormLabel>
+          {medicationDispensePayload ? (
+            <div>
+              <MedicationDispenseReview
+                medicationDispense={medicationDispensePayload}
+                updateMedicationDispense={setMedicationDispensePayload}
+              />
+              {config.enableStockDispense && (
+                <StockDispense
+                  inventoryItem={inventoryItem}
+                  medicationDispense={medicationDispense}
+                  updateInventoryItem={setInventoryItem}
+                />
+              )}
+            </div>
+          ) : null}
+        </section>
+        <section className={styles.buttonGroup}>
+          <Button disabled={isSubmitting} onClick={() => closeOverlay()} kind="secondary">
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button disabled={isButtonDisabled} onClick={handleSubmit}>
+            {t(
+              mode === 'enter' ? 'dispensePrescription' : 'saveChanges',
+              mode === 'enter' ? 'Dispense prescription' : 'Save changes',
+            )}
+          </Button>
+        </section>
+      </div>
+    </div>
+  );
+};
+
+export default DispenseForm;
diff --git a/packages/esm-medical-supply-dispensing-app/src/forms/forms.scss b/packages/esm-medical-supply-dispensing-app/src/forms/forms.scss
new file mode 100644
index 0000000..5879c2e
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/forms/forms.scss
@@ -0,0 +1,154 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+// TO DO Move this styles to style - guide
+// https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-styleguide/src/_vars.scss
+$color-blue-30: #a6c8ff;
+
+.productiveHeading02 {
+  color: $color-gray-70;
+  @include type.type-style('productive-heading-02');
+}
+
+:global(.omrs-breakpoint-lt-desktop) .formWrapper {
+  background-color: $openmrs-background-grey;
+}
+
+:global(.omrs-breakpoint-gt-tablet) .formWrapper {
+  background-color: $ui-02;
+}
+
+.formGroup {
+  display: flex;
+  margin-bottom: spacing.$spacing-02;
+  padding: spacing.$spacing-05;
+}
+
+:global(.omrs-breakpoint-lt-desktop) .formGroup > span {
+  flex: 1;
+}
+
+:global(.omrs-breakpoint-lt-desktop) .formGroup > div {
+  flex: 3;
+}
+
+.formGroup span {
+  @extend .productiveHeading02;
+}
+
+.bannerLoading {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.patientInfo {
+  position: sticky;
+  z-index: 1000;
+  background-color: $ui-02;
+  top: 3rem;
+  overflow-y: auto;
+}
+
+.dateTimeContainer {
+  display: flex;
+  margin: 1rem 0;
+}
+
+.timePickersContainer,
+.frequencyAndDay {
+  display: flex;
+
+  > div {
+    margin-right: 0.5rem;
+  }
+}
+
+.datePickerControl {
+  display: flex;
+  flex-direction: column;
+
+  > div {
+    margin-bottom: 1rem;
+  }
+}
+
+:global(.omrs-breakpoint-lt-desktop) .formGroup {
+  flex-direction: row;
+}
+
+:global(.omrs-breakpoint-gt-tablet) .formGroup {
+  flex-direction: column;
+}
+
+.buttonGroup {
+  display: flex;
+  position: sticky;
+  bottom: 0;
+  width: 100%;
+}
+
+:global(.omrs-breakpoint-lt-desktop) .buttonGroup {
+  padding: spacing.$spacing-05 spacing.$spacing-06;
+  background-color: $ui-02;
+}
+
+.buttonGroup button {
+  max-width: none;
+  width: 50%;
+  height: spacing.$spacing-10;
+  align-items: flex-start;
+}
+
+.contentSwitcherWrapper {
+  display: flex;
+  width: fit-content;
+  justify-content: flex-end;
+  align-items: center;
+  width: 60%;
+}
+
+.contentSwitcherWrapper > div > button {
+  background-color: $ui-02;
+}
+
+.contentSwitcherWrapper > div button:first-child {
+  border-top: 1px solid $color-blue-30;
+  border-bottom: 1px solid $color-blue-30;
+  border-left: 1px solid $color-blue-30;
+  border-right: none;
+  border-radius: spacing.$spacing-02 0 0px spacing.$spacing-02;
+}
+
+.contentSwitcherWrapper > div button:last-child {
+  border-top: 1px solid $color-blue-30;
+  border-bottom: 1px solid $color-blue-30;
+  border-right: 1px solid $color-blue-30;
+  border-left: none;
+  border-radius: 0px spacing.$spacing-02 spacing.$spacing-02 0px;
+}
+
+.contentSwitcherWrapper > div > button[aria-selected='true'],
+.contentSwitcherWrapper > div > button[aria-selected='true']:first-child {
+  background-color: $color-blue-10;
+  color: $color-blue-60-2;
+  border-color: $color-blue-60-2;
+  border-right: 1px solid $color-blue-60-2;
+}
+
+.contentSwitcherWrapper > div > button[aria-selected='true'],
+.contentSwitcherWrapper > div > button[aria-selected='true']:last-child {
+  background-color: $color-blue-10;
+  color: $color-blue-60-2;
+  border-color: $color-blue-60-2;
+  border-left: 1px solid $color-blue-60-2;
+}
+
+.contentSwitcherWrapper > div > button[aria-selected='true']:focus {
+  box-shadow: none;
+}
+
+.reviewContainer {
+  margin: 0.8rem 0 0 0 !important;
+}
diff --git a/packages/esm-medical-supply-dispensing-app/src/forms/medication-dispense-review.component.test.tsx b/packages/esm-medical-supply-dispensing-app/src/forms/medication-dispense-review.component.test.tsx
new file mode 100644
index 0000000..9444ace
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/forms/medication-dispense-review.component.test.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { type MedicationDispense, MedicationDispenseStatus, NonDrugMedicationDispense } from '../types';
+import MedicationDispenseReview from './medication-dispense-review.component';
+import { OpenmrsDatePicker, useConfig } from '@openmrs/esm-framework';
+
+const mockUseConfig = jest.mocked(useConfig);
+const mockOpenmrsDatePicker = jest.mocked(OpenmrsDatePicker);
+
+beforeEach(() => {
+  mockUseConfig.mockReturnValue({
+    dispenseBehavior: {
+      allowModifyingPrescription: false,
+      restrictTotalQuantityDispensed: false,
+    },
+    valueSets: {
+      substitutionType: { uuid: '123' },
+      substitutionReason: { uuid: 'abc' },
+    },
+  });
+
+  mockOpenmrsDatePicker.mockReturnValue(<div />);
+});
+
+describe('Medication Dispense Review Component tests', () => {
+  test('component should render medication dispense review', () => {
+    const medicationDispense: NonDrugMedicationDispense = {
+      uuid: 'd4f69a68-1171-4e47-8693-478df18daf40',
+      patient: 'd4f69a68-1171-4e47-8693-478df18daf40',
+      encounter: 'd4f69a68-1171-4e47-8693-478df18daf40',
+      dispensingUnit: { uuid: 'd4f69a68-1171-4e47-8693-478df18daf40', display: 'Test' },
+      quantity: 2,
+      display: 'test ',
+      instrucions: 'test',
+      status: '',
+      medicalSupplyOrder: 'd4f69a68-1171-4e47-8693-478df18daf40',
+      concept: '',
+      dateDispensed: new Date(),
+      statusReason: '',
+      location: '',
+      encounters: '',
+      dispenser: '',
+    };
+
+    const mockUpdate: Function = jest.fn();
+    render(<MedicationDispenseReview medicationDispense={medicationDispense} updateMedicationDispense={mockUpdate} />);
+
+    // TODO test expected views and various interactions
+  });
+});
diff --git a/packages/esm-medical-supply-dispensing-app/src/forms/medication-dispense-review.component.tsx b/packages/esm-medical-supply-dispensing-app/src/forms/medication-dispense-review.component.tsx
new file mode 100644
index 0000000..094a919
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/forms/medication-dispense-review.component.tsx
@@ -0,0 +1,237 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ComboBox, Dropdown, NumberInput, Stack, TextArea } from '@carbon/react';
+import { OpenmrsDatePicker, useLayoutType, useConfig, useSession, userHasAccess } from '@openmrs/esm-framework';
+import { getConceptCodingUuid, getMedicationReferenceOrCodeableConcept, getOpenMRSMedicineDrugName } from '../utils';
+import MedicationCard from '../components/medication-card.component';
+import { useMedicationCodeableConcept, useMedicationFormulations } from '../medication/medication.resource';
+import { useMedicationRequest, usePrescriptionDetails } from '../medication-request/medication-request.resource';
+import {
+  useOrderConfig,
+  useProviders,
+  useSubstitutionReasonValueSet,
+  useSubstitutionTypeValueSet,
+} from '../medication-dispense/medication-dispense.resource';
+import { PRIVILEGE_CREATE_DISPENSE_MODIFY_DETAILS } from '../constants';
+import { NonDrugMedicationDispense, type Medication, type MedicationDispense } from '../types/index';
+import { type PharmacyConfig } from '../config-schema';
+import styles from '../components/medication-dispense-review.scss';
+import dayjs from 'dayjs';
+
+interface MedicationDispenseReviewProps {
+  medicationDispense: NonDrugMedicationDispense;
+  updateMedicationDispense: Function;
+}
+
+const MedicationDispenseReview: React.FC<MedicationDispenseReviewProps> = ({
+  medicationDispense,
+  updateMedicationDispense,
+}) => {
+  const { t } = useTranslation();
+  const config = useConfig<PharmacyConfig>();
+  const session = useSession();
+  const [isEditingFormulation, setIsEditingFormulation] = useState(false);
+  const [isSubstitution, setIsSubstitution] = useState(false);
+  // Dosing Unit eg Tablets
+  const [drugDosingUnits, setDrugDosingUnits] = useState([]);
+  // Dispensing Unit eg Tablets
+  const [drugDispensingUnits, setDrugDispensingUnits] = useState([]);
+  // Route eg Oral
+  const [drugRoutes, setDrugRoutes] = useState([]);
+  // Frequency eg Twice daily
+  const [orderFrequencies, setOrderFrequencies] = useState([]);
+  // type of substitution question
+  const [substitutionTypes, setSubstitutionTypes] = useState([]);
+  // reason for substitution question
+  const [substitutionReasons, setSubstitutionReasons] = useState([]);
+  const [userCanModify, setUserCanModify] = useState(false);
+
+  const isTablet = useLayoutType() === 'tablet';
+  const prescriptionDate = Date.now();
+  const allowEditing = config.dispenseBehavior.allowModifyingPrescription;
+
+  const { orderConfigObject } = useOrderConfig();
+  const { substitutionTypeValueSet } = useSubstitutionTypeValueSet(config.valueSets.substitutionType.uuid);
+  const { substitutionReasonValueSet } = useSubstitutionReasonValueSet(config.valueSets.substitutionReason.uuid);
+  const providers = useProviders(config.dispenserProviderRoles);
+
+  useEffect(() => {
+    if (orderConfigObject) {
+      // sync drug route options order config
+      const availableRoutes = drugRoutes.map((x) => x.id);
+      const otherRouteOptions = [];
+      orderConfigObject.drugRoutes.forEach(
+        (x) => availableRoutes.includes(x.uuid) || otherRouteOptions.push({ id: x.uuid, text: x.display }),
+      );
+      setDrugRoutes([...drugRoutes, ...otherRouteOptions]);
+
+      // sync dosage.unit options with what's defined in the order config
+      const availableDosingUnits = drugDosingUnits.map((x) => x.id);
+      const otherDosingUnits = [];
+      orderConfigObject.drugDosingUnits.forEach(
+        (x) => availableDosingUnits.includes(x.uuid) || otherDosingUnits.push({ id: x.uuid, text: x.display }),
+      );
+      setDrugDosingUnits([...drugDosingUnits, ...otherDosingUnits]);
+
+      // sync dispensing unit options with what's defined in the order config
+      const availableDispensingUnits = drugDispensingUnits.map((x) => x.id);
+      const otherDispensingUnits = [];
+      orderConfigObject.drugDispensingUnits.forEach(
+        (x) => availableDispensingUnits.includes(x.uuid) || otherDispensingUnits.push({ id: x.uuid, text: x.display }),
+      );
+      setDrugDispensingUnits([...drugDispensingUnits, ...otherDispensingUnits]);
+
+      // sync order frequency options with order config
+      const availableFrequencies = orderFrequencies.map((x) => x.id);
+      const otherFrequencyOptions = [];
+      orderConfigObject.orderFrequencies.forEach(
+        (x) => availableFrequencies.includes(x.uuid) || otherFrequencyOptions.push({ id: x.uuid, text: x.display }),
+      );
+      setOrderFrequencies([...orderFrequencies, ...otherFrequencyOptions]);
+    }
+  }, [orderConfigObject]);
+
+  useEffect(() => {
+    const substitutionTypeOptions = [];
+
+    if (substitutionTypeValueSet?.compose?.include) {
+      const uuidValueSet = substitutionTypeValueSet.compose.include.find((include) => !include.system);
+      if (uuidValueSet) {
+        uuidValueSet.concept?.forEach((concept) =>
+          substitutionTypeOptions.push({
+            id: concept.code,
+            text: concept.display,
+          }),
+        );
+      }
+      substitutionTypeOptions.sort((a, b) => a.text.localeCompare(b.text));
+    }
+    setSubstitutionTypes(substitutionTypeOptions);
+  }, [substitutionTypeValueSet]);
+
+  useEffect(() => {
+    const substitutionReasonOptions = [];
+
+    if (substitutionReasonValueSet?.compose?.include) {
+      const uuidValueSet = substitutionReasonValueSet.compose.include.find((include) => !include.system);
+      if (uuidValueSet) {
+        uuidValueSet.concept?.forEach((concept) =>
+          substitutionReasonOptions.push({
+            id: concept.code,
+            text: concept.display,
+          }),
+        );
+      }
+      substitutionReasonOptions.sort((a, b) => a.text.localeCompare(b.text));
+    }
+    setSubstitutionReasons(substitutionReasonOptions);
+  }, [substitutionReasonValueSet]);
+
+  useEffect(() => {
+    setUserCanModify(session?.user && userHasAccess(PRIVILEGE_CREATE_DISPENSE_MODIFY_DETAILS, session.user));
+  }, [session]);
+
+  return (
+    <div className={styles.medicationDispenseReviewContainer}>
+      <Stack gap={5}>
+        <div className={styles.dispenseDetailsContainer}>
+          <NumberInput
+            allowEmpty={false}
+            disabled={!userCanModify}
+            hideSteppers={true}
+            id="quantity"
+            invalidText={t('numberIsNotValid', 'Number is not valid')}
+            label={t('quantity', 'Quantity')}
+            min={0}
+            value={medicationDispense.quantity}
+            onChange={(e) => {
+              updateMedicationDispense({
+                ...medicationDispense,
+                quantity: {
+                  ...medicationDispense.quantity,
+                  value: e.target?.value ? parseFloat(e.target.value) : '',
+                },
+              });
+            }}
+          />
+
+          <ComboBox
+            id="quantityUnits"
+            disabled={!userCanModify || !allowEditing}
+            light={isTablet}
+            items={drugDispensingUnits}
+            titleText={t('drugDispensingUnit', 'Dispensing unit')}
+            itemToString={(item) => item?.text}
+            initialSelectedItem={{
+              id: medicationDispense.dispensingUnit.uuid,
+              text: medicationDispense.dispensingUnit.display,
+            }}
+            onChange={({ selectedItem }) => {
+              updateMedicationDispense({
+                ...medicationDispense,
+                // note that we specifically recreate doesQuantity to overwrite any unit or system properties that may have been set
+                quantity: {
+                  value: medicationDispense.quantity,
+                  code: selectedItem?.id,
+                },
+              });
+            }}
+            required
+          />
+        </div>
+
+        <TextArea
+          labelText={t('patientInstructions', 'Patient instructions')}
+          value={medicationDispense.instrucions}
+          maxLength={65535}
+          onChange={(e) => {
+            updateMedicationDispense({
+              ...medicationDispense,
+              instrucions: e.target.value,
+            });
+          }}
+        />
+
+        <OpenmrsDatePicker
+          id="dispenseDate"
+          labelText={t('dispenseDate', 'Date of Dispense')}
+          minDate={prescriptionDate ? dayjs(prescriptionDate).startOf('day').toDate() : null}
+          maxDate={dayjs().toDate()}
+          // value={dayjs(medicationDispense.whenHandedOver).toDate()}
+        ></OpenmrsDatePicker>
+
+        {providers && (
+          <ComboBox
+            id="dispenser"
+            light={isTablet}
+            // initialSelectedItem={
+            //   medicationDispense?.performer[0].actor.reference
+            //     ? providers.find(
+            //         (provider) => provider.uuid === medicationDispense?.performer[0].actor.reference.split('/')[1],
+            //       )
+            //     : null
+            // }
+            // onChange={({ selectedItem }) => {
+            //   updateMedicationDispense({
+            //     ...medicationDispense,
+            //     performer: [
+            //       {
+            //         actor: {
+            //           reference: `Practitioner/${selectedItem?.uuid}`,
+            //         },
+            //       },
+            //     ],
+            //   });
+            // }}
+            items={providers}
+            itemToString={(item) => item?.person?.display}
+            required
+            titleText={t('dispensedBy', 'Dispensed by')}
+          />
+        )}
+      </Stack>
+    </div>
+  );
+};
+
+export default MedicationDispenseReview;
diff --git a/packages/esm-medical-supply-dispensing-app/src/forms/overlay/overlay.component.tsx b/packages/esm-medical-supply-dispensing-app/src/forms/overlay/overlay.component.tsx
new file mode 100644
index 0000000..8a093f5
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/forms/overlay/overlay.component.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Button, Header } from '@carbon/react';
+import { ArrowLeft, Close } from '@carbon/react/icons';
+import { useLayoutType } from '@openmrs/esm-framework';
+import { closeOverlay, useOverlay } from '../../hooks/useOverlay';
+import styles from './overlay.scss';
+
+const Overlay: React.FC = () => {
+  const { header, component, isOverlayOpen } = useOverlay();
+  const layout = useLayoutType();
+  const { t } = useTranslation();
+  return (
+    <>
+      {isOverlayOpen && (
+        <div
+          className={classNames({
+            [styles.desktopOverlay]: layout !== 'tablet',
+            [styles.tabletOverlay]: layout === 'tablet',
+          })}>
+          {layout !== 'tablet' ? (
+            <div className={styles.desktopHeader}>
+              <div className={styles.headerContent}>{header}</div>
+              <Button className={styles.closePanelButton} onClick={() => closeOverlay()} kind="ghost" hasIconOnly>
+                <Close size={16} />
+              </Button>
+            </div>
+          ) : (
+            <Header
+              onClick={() => closeOverlay()}
+              aria-label={t('tabletOverlay', 'Tablet overlay')}
+              className={styles.tabletOverlayHeader}>
+              <Button hasIconOnly>
+                <ArrowLeft size={16} />
+              </Button>
+              <div className={styles.headerContent}>{header}</div>
+            </Header>
+          )}
+          <div>{component}</div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Overlay;
diff --git a/packages/esm-medical-supply-dispensing-app/src/forms/overlay/overlay.scss b/packages/esm-medical-supply-dispensing-app/src/forms/overlay/overlay.scss
new file mode 100644
index 0000000..9eca21e
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/forms/overlay/overlay.scss
@@ -0,0 +1,93 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+@import '../../root.scss';
+
+.desktopOverlay {
+  position: fixed;
+  top: spacing.$spacing-09;
+  width: 37rem;
+  right: 0;
+  bottom: 0;
+  border-left: 1px solid $text-03;
+  background-color: $ui-01;
+  overflow-y: auto;
+  height: calc(100vh - 3rem);
+}
+
+.desktopOverlay::after {
+  height: 100%;
+  border-left: 1px solid $text-03;
+}
+
+.tabletOverlay {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+  background-color: $ui-01;
+  overflow-y: scroll;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    width: 0;
+  }
+
+  & > div {
+    margin-top: spacing.$spacing-09;
+  }
+}
+
+.tabletOverlayHeader {
+  button {
+    @include brand-01(background-color);
+  }
+
+  .headerContent {
+    color: $ui-02;
+  }
+}
+
+.desktopHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: $ui-03;
+  border-bottom: 1px solid $text-03;
+  position: sticky;
+  position: -webkit-sticky;
+  width: 100%;
+  z-index: 1000;
+  top: 0;
+}
+
+.headerContent {
+  @include type.type-style('heading-compact-02');
+  padding: 0 spacing.$spacing-05;
+  color: $ui-05;
+}
+
+.closeButton {
+  background-color: $ui-background;
+  color: $ui-05;
+  fill: $ui-05;
+}
+
+/* Desktop */
+:global(.omrs-breakpoint-gt-tablet) {
+  .overlayContent {
+    padding: 0 0 0 0;
+    overflow-y: auto;
+  }
+}
+
+/* Tablet */
+:global(.omrs-breakpoint-lt-desktop) {
+  .overlayContent {
+    padding: 0 0 0 0;
+    overflow-y: auto;
+  }
+}
diff --git a/packages/esm-medical-supply-dispensing-app/src/forms/pause-dispense-form.component.tsx b/packages/esm-medical-supply-dispensing-app/src/forms/pause-dispense-form.component.tsx
new file mode 100644
index 0000000..d328b06
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/forms/pause-dispense-form.component.tsx
@@ -0,0 +1,187 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  ExtensionSlot,
+  showNotification,
+  showToast,
+  useConfig,
+  useLayoutType,
+  usePatient,
+} from '@openmrs/esm-framework';
+import { Button, ComboBox, InlineLoading } from '@carbon/react';
+import { saveMedicationDispense, useReasonForPauseValueSet } from '../medication-dispense/medication-dispense.resource';
+import { closeOverlay } from '../hooks/useOverlay';
+import styles from './forms.scss';
+import { updateMedicationRequestFulfillerStatus } from '../medication-request/medication-request.resource';
+import { getUuidFromReference, revalidate } from '../utils';
+import { type MedicationDispense, MedicationDispenseStatus, MedicationRequestFulfillerStatus } from '../types';
+import { type PharmacyConfig } from '../config-schema';
+
+interface PauseDispenseFormProps {
+  mode: 'enter' | 'edit';
+  patientUuid?: string;
+  encounterUuid: string;
+}
+
+const PauseDispenseForm: React.FC<PauseDispenseFormProps> = ({ mode, patientUuid, encounterUuid }) => {
+  const { t } = useTranslation();
+  const config = useConfig<PharmacyConfig>();
+  const isTablet = useLayoutType() === 'tablet';
+  const { patient, isLoading } = usePatient(patientUuid);
+
+  // Keep track of medication dispense payload
+  const [medicationDispensePayload, setMedicationDispensePayload] = useState<MedicationDispense>();
+
+  // whether or not the form is valid and ready to submit
+  const [isValid, setIsValid] = useState(false);
+
+  // to prevent duplicate submits
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [reasonsForPause, setReasonsForPause] = useState([]);
+  const { reasonForPauseValueSet } = useReasonForPauseValueSet(config.valueSets.reasonForPause.uuid);
+
+  // useEffect(() => {
+  //   const reasonForPauseOptions = [];
+
+  //   if (reasonForPauseValueSet?.compose?.include) {
+  //     const uuidValueSet = reasonForPauseValueSet.compose.include.find((include) => !include.system);
+  //     if (uuidValueSet) {
+  //       uuidValueSet.concept?.forEach((concept) =>
+  //         reasonForPauseOptions.push({
+  //           id: concept.code,
+  //           text: concept.display,
+  //         }),
+  //       );
+  //       reasonForPauseOptions.sort((a, b) => a.text.localeCompare(b.text));
+  //     }
+  //   }
+  //   setReasonsForPause(reasonForPauseOptions);
+  // }, [reasonForPauseValueSet]);
+
+  // const handleSubmit = () => {
+  //   if (!isSubmitting) {
+  //     setIsSubmitting(true);
+  //     const abortController = new AbortController();
+  //     saveMedicationDispense(medicationDispensePayload, MedicationDispenseStatus.on_hold, abortController)
+  //       .then((response) => {
+  //         // only update request status when added a new dispense event, not updating
+  //         if (response.ok && !medicationDispense.id) {
+  //           return updateMedicationRequestFulfillerStatus(
+  //             getUuidFromReference(
+  //               medicationDispensePayload.authorizingPrescription[0].reference, // assumes authorizing prescription exist
+  //             ),
+  //             MedicationRequestFulfillerStatus.on_hold,
+  //           );
+  //         } else {
+  //           return response;
+  //         }
+  //       })
+  //       .then((response) => {
+  //         if (response.ok) {
+  //           closeOverlay();
+  //           revalidate(encounterUuid);
+  //           showToast({
+  //             critical: true,
+  //             kind: 'success',
+  //             description: t(
+  //               mode === 'enter' ? 'medicationDispensePaused' : 'medicationDispenseUpdated',
+  //               mode === 'enter' ? 'Medication dispense paused.' : 'Dispense record successfully updated.',
+  //             ),
+  //             title: t(
+  //               mode === 'enter' ? 'medicationDispensePaused' : 'medicationDispenseUpdated',
+  //               mode === 'enter' ? 'Medication dispense paused.' : 'Dispense record successfully updated.',
+  //             ),
+  //           });
+  //         }
+  //       })
+  //       .catch((error) => {
+  //         showNotification({
+  //           title: t(
+  //             mode === 'enter' ? 'medicationDispensePauseError' : 'medicationDispenseUpdatedError',
+  //             mode === 'enter' ? 'Error pausing medication dispense.' : 'Error updating dispense record',
+  //           ),
+  //           kind: 'error',
+  //           critical: true,
+  //           description: error?.message,
+  //         });
+  //         setIsSubmitting(false);
+  //       });
+  //   }
+  // };
+
+  // const checkIsValid = () => {
+  //   if (medicationDispensePayload && medicationDispensePayload.statusReasonCodeableConcept?.coding[0].code) {
+  //     setIsValid(true);
+  //   } else {
+  //     setIsValid(false);
+  //   }
+  // };
+
+  // // initialize the internal dispense payload with the dispenses passed in as props
+  // useEffect(() => setMedicationDispensePayload(medicationDispense), [medicationDispense]);
+
+  // // check is valid on any changes
+  // useEffect(checkIsValid, [medicationDispensePayload]);
+
+  // const bannerState = useMemo(() => {
+  //   if (patient) {
+  //     return {
+  //       patient,
+  //       patientUuid,
+  //       hideActionsOverflow: true,
+  //     };
+  //   }
+  // }, [patient, patientUuid]);
+
+  // return (
+  //   <div className="">
+  //     <div className={styles.formWrapper}>
+  //       {isLoading && (
+  //         <InlineLoading
+  //           className={styles.bannerLoading}
+  //           iconDescription="Loading"
+  //           description="Loading banner"
+  //           status="active"
+  //         />
+  //       )}
+  //       {patient && <ExtensionSlot name="patient-header-slot" state={bannerState} />}
+  //       <section className={styles.formGroup}>
+  //         <ComboBox
+  //           id="reasonForPause"
+  //           light={isTablet}
+  //           items={reasonsForPause}
+  //           titleText={t('reasonForPause', 'Reason for pause')}
+  //           itemToString={(item) => item?.text}
+  //           initialSelectedItem={{
+  //             id: medicationDispense.statusReasonCodeableConcept?.coding[0]?.code,
+  //             text: medicationDispense.statusReasonCodeableConcept?.text,
+  //           }}
+  //           onChange={({ selectedItem }) => {
+  //             setMedicationDispensePayload({
+  //               ...medicationDispensePayload,
+  //               statusReasonCodeableConcept: {
+  //                 coding: [
+  //                   {
+  //                     code: selectedItem?.id,
+  //                   },
+  //                 ],
+  //               },
+  //             });
+  //           }}
+  //         />
+  //       </section>
+  //       <section className={styles.buttonGroup}>
+  //         <Button disabled={isSubmitting} onClick={() => closeOverlay()} kind="secondary">
+  //           {t('cancel', 'Cancel')}
+  //         </Button>
+  //         <Button disabled={!isValid || isSubmitting} onClick={handleSubmit}>
+  //           {t(mode === 'enter' ? 'pause' : 'saveChanges', mode === 'enter' ? 'Pause' : 'Save changes')}
+  //         </Button>
+  //       </section>
+  //     </div>
+  //   </div>
+  // );
+  return <div></div>;
+};
+
+export default PauseDispenseForm;
diff --git a/packages/esm-medical-supply-dispensing-app/src/forms/stock-dispense/stock-dispense.component.tsx b/packages/esm-medical-supply-dispensing-app/src/forms/stock-dispense/stock-dispense.component.tsx
new file mode 100644
index 0000000..0baec76
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/forms/stock-dispense/stock-dispense.component.tsx
@@ -0,0 +1,118 @@
+import React from 'react';
+import { ComboBox, InlineLoading, InlineNotification, Layer } from '@carbon/react';
+import { type NonDrugMedicationDispense, type InventoryItem } from '../../types';
+import { useDispenseStock } from './stock.resource';
+import { formatDate } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+
+type StockDispenseProps = {
+  medicationDispense: NonDrugMedicationDispense;
+  updateInventoryItem: (inventoryItem: InventoryItem) => void;
+  inventoryItem: InventoryItem;
+};
+
+const StockDispense: React.FC<StockDispenseProps> = ({ medicationDispense, updateInventoryItem }) => {
+  const { t } = useTranslation();
+  const drugUuid = medicationDispense?.uuid;
+  const { inventoryItems, error, isLoading } = useDispenseStock(drugUuid);
+  const validInventoryItems = inventoryItems.filter((item) => isValidBatch(medicationDispense, item));
+
+  function parseDate(dateString) {
+    return new Date(dateString);
+  }
+
+  //check whether the drug will expire before the medication period ends
+  function isValidBatch(medicationToDispense, inventoryItem) {
+    if (medicationToDispense?.dosageInstruction && medicationToDispense?.dosageInstruction.length > 0) {
+      return medicationToDispense.dosageInstruction.some((instruction) => {
+        if (
+          instruction.timing?.repeat?.duration &&
+          instruction.timing?.repeat?.durationUnit &&
+          inventoryItem.quantity > 0
+        ) {
+          const durationUnit = instruction.timing.repeat.durationUnit;
+          const durationValue = instruction.timing.repeat.duration;
+          const lastMedicationDate = new Date();
+
+          switch (durationUnit) {
+            case 's':
+              lastMedicationDate.setSeconds(lastMedicationDate.getSeconds() + durationValue);
+              break;
+            case 'min':
+              lastMedicationDate.setMinutes(lastMedicationDate.getMinutes() + durationValue);
+              break;
+            case 'h':
+              lastMedicationDate.setHours(lastMedicationDate.getHours() + durationValue);
+              break;
+            case 'd':
+              lastMedicationDate.setDate(lastMedicationDate.getDate() + durationValue);
+              break;
+            case 'wk':
+              lastMedicationDate.setDate(lastMedicationDate.getDate() + durationValue * 7);
+              break;
+            case 'mo':
+              lastMedicationDate.setMonth(lastMedicationDate.getMonth() + durationValue);
+              break;
+            case 'y':
+              lastMedicationDate.setFullYear(lastMedicationDate.getFullYear() + durationValue);
+              break;
+            default:
+              return false;
+          }
+
+          const expiryDate = parseDate(inventoryItem.expiration);
+          return expiryDate > lastMedicationDate;
+        }
+        return false;
+      });
+    }
+    return false;
+  }
+
+  const toStockDispense = (inventoryItems) => {
+    return t(
+      'stockDispenseDetails',
+      'Batch: {{batchNumber}} - Quantity: {{quantity}} ({{quantityUoM}}) - Expiry: {{expiration}}',
+      {
+        batchNumber: inventoryItems.batchNumber,
+        quantity: Math.floor(inventoryItems.quantity),
+        quantityUoM: inventoryItems.quantityUoM,
+        expiration: formatDate(new Date(inventoryItems.expiration)),
+      },
+    );
+  };
+
+  if (error) {
+    return (
+      <InlineNotification
+        aria-label="closes notification"
+        kind="error"
+        lowContrast={true}
+        statusIconDescription="notification"
+        subtitle={t('errorLoadingInventoryItems', 'Error fetching inventory items')}
+        title={t('error', 'Error')}
+      />
+    );
+  }
+
+  if (isLoading) {
+    return <InlineLoading description={t('loadingInventoryItems', 'Loading inventory items...')} />;
+  }
+
+  return (
+    <Layer>
+      <ComboBox
+        id="stockDispense"
+        items={validInventoryItems}
+        onChange={({ selectedItem }) => {
+          updateInventoryItem(selectedItem);
+        }}
+        itemToString={(item) => (item ? toStockDispense(item) : '')}
+        titleText={t('stockDispense', 'Stock Dispense')}
+        placeholder={t('selectStockDispense', 'Select stock to dispense from')}
+      />
+    </Layer>
+  );
+};
+
+export default StockDispense;
diff --git a/packages/esm-medical-supply-dispensing-app/src/forms/stock-dispense/stock.resource.tsx b/packages/esm-medical-supply-dispensing-app/src/forms/stock-dispense/stock.resource.tsx
new file mode 100644
index 0000000..3915081
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/forms/stock-dispense/stock.resource.tsx
@@ -0,0 +1,72 @@
+import useSWR from 'swr';
+import { openmrsFetch, useSession } from '@openmrs/esm-framework';
+import {
+  type StockDispenseRequest,
+  type InventoryItem,
+  type MedicationDispense,
+  NonDrugMedicationDispense,
+} from '../../types';
+import { getUuidFromReference } from '../../utils';
+
+//TODO: Add configuration to retrieve the stock dispense endpoint
+// For stock dispense to work, stock management module should be installed and configured
+/**
+ * Fetches the inventory items for a given drug UUID.
+ *
+ * @param {string} drugUuid - The UUID of the drug.
+ * @returns {Array} - The inventory items.
+ */
+export const useDispenseStock = (drugUuid: string) => {
+  const session = useSession();
+  const url = `/ws/rest/v1/stockmanagement/stockiteminventory?v=default&totalCount=true&drugUuid=${drugUuid}&includeBatchNo=true&groupBy=LocationStockItemBatchNo&dispenseLocationUuid=${session?.sessionLocation?.uuid}&includeStrength=1&includeConceptRefIds=1&emptyBatch=1&emptyBatchLocationUuid=${session?.sessionLocation?.uuid}&dispenseAtLocation=1`;
+  const { data, error, isLoading } = useSWR<{ data: { results: Array<InventoryItem> } }>(url, openmrsFetch);
+  return { inventoryItems: data?.data?.results ?? [], error, isLoading };
+};
+
+/**
+ * Sends a POST request to the inventory dispense endpoint with the provided stock dispense request.
+ *
+ * @param {AbortController} abortController - The AbortController used to cancel the request.
+ * @returns {Promise<Response>} - A Promise that resolves to the response of the POST request.
+ */
+export async function sendStockDispenseRequest(
+  stockDispenseRequest,
+  abortController: AbortController,
+): Promise<Response> {
+  const url = '/ws/rest/v1/stockmanagement/dispenserequest';
+  return await openmrsFetch(url, {
+    method: 'POST',
+    signal: abortController.signal,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ dispenseItems: [stockDispenseRequest] }),
+  });
+}
+
+/**
+ * Creates a stock dispense request payload.
+ *
+ * @param inventoryItem - The inventory item to dispense.
+ * @param patientUuid - The UUID of the patient.
+ * @param encounterUuid - The UUID of the encounter.
+ * @param medicationDispensePayload - The medication dispense payload.
+ * @returns The stock dispense request payload.
+ */
+export const createStockDispenseRequestPayload = (
+  inventoryItem: InventoryItem,
+  patientUuid: string,
+  encounterUuid: string,
+  medicationDispensePayload: NonDrugMedicationDispense,
+): StockDispenseRequest => {
+  return {
+    dispenseLocation: inventoryItem.locationUuid,
+    patient: patientUuid,
+    order: '', // to generate order reference here
+    encounter: encounterUuid,
+    stockItem: inventoryItem?.stockItemUuid,
+    stockBatch: inventoryItem.stockBatchUuid,
+    stockItemPackagingUOM: inventoryItem.quantityUoMUuid,
+    quantity: Number(medicationDispensePayload.quantity),
+  };
+};
diff --git a/packages/esm-medical-supply-dispensing-app/src/hooks/useOrdersWorklist.ts b/packages/esm-medical-supply-dispensing-app/src/hooks/useOrdersWorklist.ts
new file mode 100644
index 0000000..d0828a4
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/hooks/useOrdersWorklist.ts
@@ -0,0 +1,43 @@
+import { ConfigObject, openmrsFetch, useConfig } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { medicalSupplyOrderConceptClass_UUID } from '../constants';
+import { Result } from '../types';
+export function useOrdersWorklist(activatedOnOrAfterDate: string, fulfillerStatus: string) {
+  const config = useConfig() as ConfigObject;
+
+  const responseFormat =
+    'custom:(uuid,orderNumber,patient:ref,concept:(uuid,display,conceptClass:(uuid)),action,careSetting,orderer:ref,encounter,urgency,instructions,commentToFulfiller,display,fulfillerStatus,dateStopped,scheduledDate,dateActivated,fulfillerComment,frequency,numberOfRepeats,quantity,quantityUnits:(uuid,display))';
+  const responseFormat1 =
+    'custom:(uuid,orderNumber,patient:ref,concept:(uuid,display,conceptClass:(uuid)),action,careSetting,orderer:ref,procedures,urgency,instructions,commentToFulfiller,display,fulfillerStatus,dateStopped,scheduledDate,dateActivated,fulfillerComment,frequency,numberOfRepeats)';
+  const orderTypeParam = `orderTypes=${config.orders.medicalSupplyOrderTypeUuid}&activatedOnOrAfterDate=${activatedOnOrAfterDate}&isStopped=false&fulfillerStatus=${fulfillerStatus}&v=${responseFormat}`;
+  const apiUrl = `/ws/rest/v1/order?${orderTypeParam}`;
+
+  const { data, error, isLoading } = useSWR<{ data: { results: Array<Result> } }, Error>(apiUrl, openmrsFetch);
+
+  const orders = data?.data?.results?.filter((order) => {
+    if (fulfillerStatus === '') {
+      return (
+        order.fulfillerStatus === null &&
+        order.dateStopped === null &&
+        order.action === 'NEW' &&
+        order.concept.conceptClass.uuid === medicalSupplyOrderConceptClass_UUID
+      );
+    } else if (fulfillerStatus === 'IN_PROGRESS') {
+      return (
+        order.fulfillerStatus === 'IN_PROGRESS' &&
+        order.dateStopped === null &&
+        order.action !== 'DISCONTINUE' &&
+        order.concept.conceptClass.uuid === medicalSupplyOrderConceptClass_UUID
+      );
+    }
+  });
+  const sortedOrders = orders?.sort(
+    (a, b) => new Date(a.dateActivated).getTime() - new Date(b.dateActivated).getTime(),
+  );
+
+  return {
+    workListEntries: sortedOrders?.length > 0 ? sortedOrders : [],
+    isLoading,
+    isError: error,
+  };
+}
diff --git a/packages/esm-medical-supply-dispensing-app/src/hooks/useOverlay.tsx b/packages/esm-medical-supply-dispensing-app/src/hooks/useOverlay.tsx
new file mode 100644
index 0000000..cba6fd3
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/hooks/useOverlay.tsx
@@ -0,0 +1,46 @@
+import { getGlobalStore } from '@openmrs/esm-framework';
+import { useEffect, useState } from 'react';
+
+interface OverlayStore {
+  isOverlayOpen: boolean;
+  component?: any;
+  header: string;
+}
+
+const initialState = { isOverlayOpen: false, component: Function, header: '' };
+
+const getOverlayStore = () => {
+  return getGlobalStore('dispensing-store', initialState);
+};
+
+export const launchOverlay = (headerTitle: string, componentToRender) => {
+  const store = getOverlayStore();
+  store.setState({
+    isOverlayOpen: true,
+    component: componentToRender,
+    header: headerTitle,
+  });
+};
+
+export const closeOverlay = () => {
+  const store = getOverlayStore();
+  store.setState({ component: null, isOverlayOpen: false });
+};
+
+export const useOverlay = () => {
+  const [overlay, setOverlay] = useState<OverlayStore>();
+
+  useEffect(() => {
+    function update(state: OverlayStore) {
+      setOverlay(state);
+    }
+    update(getOverlayStore().getState());
+    getOverlayStore().subscribe(update);
+  }, []);
+
+  return {
+    isOverlayOpen: overlay?.isOverlayOpen,
+    component: overlay?.component,
+    header: overlay?.header,
+  };
+};
diff --git a/packages/esm-medical-supply-dispensing-app/src/index.ts b/packages/esm-medical-supply-dispensing-app/src/index.ts
index bbbbd93..11af6e1 100644
--- a/packages/esm-medical-supply-dispensing-app/src/index.ts
+++ b/packages/esm-medical-supply-dispensing-app/src/index.ts
@@ -1,6 +1,10 @@
-import { getAsyncLifecycle, defineConfigSchema } from '@openmrs/esm-framework';
+import { getAsyncLifecycle, defineConfigSchema, getSyncLifecycle } from '@openmrs/esm-framework';
 import { configSchema } from './config-schema';
 import { moduleName } from './constants';
+import dispensingComponent from './medicalsupplydispensing.component';
+import dispensingLinkComponent from './dispensing-link.component';
+import dispensingDashboardComponent from './dashboard/dispensing-dashboard.component';
+import dispensingLinkHomepageComponent from './dashboard/dispensing-dashboard-link.component';
 
 const options = {
   featureName: 'esm-medical-supply-dispensing-app',
@@ -9,8 +13,16 @@ const options = {
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
+export const dispensing = getSyncLifecycle(dispensingComponent, options);
+
+export const medicalSuppliesDispensingLink = getSyncLifecycle(dispensingLinkComponent, options);
+
+export const supplyDispensingDashboard = getSyncLifecycle(dispensingDashboardComponent, options);
+
 export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
 }
 
-export const root = getAsyncLifecycle(() => import('./root.component'), options);
+// export const root = getAsyncLifecycle(() => import('./root.component'), options);
+
+export const dispensingDashboardLink = getSyncLifecycle(dispensingLinkHomepageComponent, options);
diff --git a/packages/esm-medical-supply-dispensing-app/src/location/location.resource.test.tsx b/packages/esm-medical-supply-dispensing-app/src/location/location.resource.test.tsx
new file mode 100644
index 0000000..f4de9db
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/location/location.resource.test.tsx
@@ -0,0 +1,170 @@
+import useSWR from 'swr';
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { useLocationForFiltering } from './location.resource';
+import { type PharmacyConfig } from '../config-schema';
+
+jest.mocked(openmrsFetch);
+jest.mock('swr');
+
+const pharmacyConfig: PharmacyConfig = {
+  appName: '',
+  actionButtons: {
+    pauseButton: {
+      enabled: true,
+    },
+    closeButton: {
+      enabled: true,
+    },
+  },
+  dispenseBehavior: {
+    allowModifyingPrescription: false,
+    restrictTotalQuantityDispensed: false,
+  },
+  dispenserProviderRoles: [],
+  locationBehavior: {
+    locationColumn: { enabled: false },
+    locationFilter: { enabled: false, tag: 'Login Location' },
+  },
+  refreshInterval: 10000,
+  medicationRequestExpirationPeriodInDays: 0,
+  valueSets: {
+    reasonForPause: { uuid: '' },
+    reasonForClose: { uuid: '' },
+    substitutionReason: { uuid: '' },
+    substitutionType: { uuid: '' },
+  },
+  enableStockDispense: false,
+};
+
+describe('Location Resource tests', () => {
+  test('useLoginLocations should call proper endpoint via SWR', () => {
+    // @ts-ignore
+    useSWR.mockImplementation(() => ({
+      data: { data: 'mockedLoginLocations' },
+    }));
+
+    useLocationForFiltering(pharmacyConfig);
+    expect(useSWR).toHaveBeenCalledWith('/ws/fhir2/R4/Location?_tag=Login%20Location&_count=100', openmrsFetch);
+  });
+  test('useLoginLocations should parse into Login Locations Array', () => {
+    // @ts-ignore
+    const queryResultsBundle = {
+      resourceType: 'Bundle',
+      id: '1a3e8986-84bb-4382-b215-0f952a09cd2f',
+      meta: {
+        lastUpdated: '2023-03-01T19:14:41.542-05:00',
+      },
+      type: 'searchset',
+      total: 41,
+      link: [
+        {
+          relation: 'self',
+          url: 'http://localhost:8080/openmrs/ws/fhir2/R4/Location?_tag=login%20location',
+        },
+        {
+          relation: 'next',
+          url: 'http://localhost:8080/openmrs/ws/fhir2/R4?_getpages=220bb352-01cd-4a9b-a54f-85f40eee268c&_getpagesoffset=10&_count=10&_bundletype=searchset',
+        },
+      ],
+      entry: [
+        {
+          fullUrl: 'http://localhost:8080/openmrs/ws/fhir2/R4/Location/083e75b0-5959-11e4-8ed6-0800200c9a66',
+          resource: {
+            resourceType: 'Location',
+            id: '083e75b0-5959-11e4-8ed6-0800200c9a66',
+            meta: {
+              lastUpdated: '2022-07-25T14:30:53.000-04:00',
+              tag: [
+                {
+                  system: 'http://fhir.openmrs.org/ext/location-tag',
+                  code: 'Order Radiology Study Location',
+                  display: 'Signifies a Location where a radiology study can be ordered',
+                },
+                {
+                  system: 'http://fhir.openmrs.org/ext/location-tag',
+                  code: 'Transfer Location',
+                  display: 'Patients may only be transfer to inpatient care in a location with this tag',
+                },
+              ],
+            },
+            text: {
+              status: 'generated',
+            },
+            status: 'active',
+            name: "Women's Clinic",
+            description: "Women's Clinic",
+          },
+        },
+        {
+          fullUrl: 'http://localhost:8080/openmrs/ws/fhir2/R4/Location/11857d81-5959-11e4-8ed6-0800200c9a66',
+          resource: {
+            resourceType: 'Location',
+            id: '11857d81-5959-11e4-8ed6-0800200c9a66',
+            meta: {
+              lastUpdated: '2022-07-25T14:30:53.000-04:00',
+              tag: [
+                {
+                  system: 'http://fhir.openmrs.org/ext/location-tag',
+                  code: 'Archives Location',
+                  display: 'A location that serves as an archives for storing medical records',
+                },
+                {
+                  system: 'http://fhir.openmrs.org/ext/location-tag',
+                  code: 'Check-In Location',
+                  display: 'Signifies a Location where the check-in app and form should be available',
+                },
+              ],
+            },
+            text: {
+              status: 'generated',
+              div: '<div xmlns="http://www.w3.org/1999/xhtml"><h2>CDI Klinik Ekstèn Jeneral Achiv Santral</h2></div>',
+            },
+            status: 'active',
+            name: "Men's Clinic",
+            description: "Men's Clinic",
+          },
+        },
+        {
+          fullUrl: 'http://localhost:8080/openmrs/ws/fhir2/R4/Location/11857d80-5959-11e4-8ed6-0800200c9a66',
+          resource: {
+            resourceType: 'Location',
+            id: '11857d80-5959-11e4-8ed6-0800200c9a66',
+            meta: {
+              lastUpdated: '2022-07-25T14:30:53.000-04:00',
+              tag: [
+                {
+                  system: 'http://fhir.openmrs.org/ext/location-tag',
+                  code: 'Check-In Location',
+                  display: 'Signifies a Location where the check-in app and form should be available',
+                },
+                {
+                  system: 'http://fhir.openmrs.org/ext/location-tag',
+                  code: 'Registration Location',
+                  display: 'Signifies a Location where the registration app should be available',
+                },
+              ],
+            },
+            text: {
+              status: 'generated',
+              div: '<div xmlns="http://www.w3.org/1999/xhtml"><h2>CDI Klinik Ekstèn Jeneral Biwo Randevou</h2></div>',
+            },
+            status: 'active',
+            name: 'Inpatient Ward',
+            description: 'Inpatient Ward',
+          },
+        },
+      ],
+    };
+
+    // @ts-ignore
+    useSWR.mockImplementation(() => ({ data: { data: queryResultsBundle } }));
+    const { filterLocations } = useLocationForFiltering(pharmacyConfig);
+    expect(filterLocations.length).toBe(3);
+    expect(filterLocations[0].id).toBe('11857d80-5959-11e4-8ed6-0800200c9a66');
+    expect(filterLocations[0].name).toBe('Inpatient Ward');
+    expect(filterLocations[1].id).toBe('11857d81-5959-11e4-8ed6-0800200c9a66');
+    expect(filterLocations[1].name).toBe("Men's Clinic");
+    expect(filterLocations[2].id).toBe('083e75b0-5959-11e4-8ed6-0800200c9a66');
+    expect(filterLocations[2].name).toBe("Women's Clinic");
+  });
+});
diff --git a/packages/esm-medical-supply-dispensing-app/src/location/location.resource.tsx b/packages/esm-medical-supply-dispensing-app/src/location/location.resource.tsx
new file mode 100644
index 0000000..60bfbb0
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/location/location.resource.tsx
@@ -0,0 +1,25 @@
+import useSWR from 'swr';
+import { fhirBaseUrl, openmrsFetch } from '@openmrs/esm-framework';
+import { type LocationResponse, type SimpleLocation } from '../types';
+import { type PharmacyConfig } from '../config-schema';
+
+export function useLocationForFiltering(config: PharmacyConfig) {
+  const { data, error } = useSWR<{ data: LocationResponse }, Error>(
+    `${fhirBaseUrl}/Location?_tag=${encodeURIComponent(config.locationBehavior.locationFilter.tag)}&_count=100`,
+    openmrsFetch,
+  );
+
+  // parse down to a simple representation of locations
+  const filterLocations: Array<SimpleLocation> = data?.data?.entry
+    ?.map((e) => ({
+      id: e.resource.id,
+      name: e.resource.name,
+    }))
+    .sort((a, b) => a.name.localeCompare(b.name));
+
+  return {
+    filterLocations,
+    isError: error,
+    isLoading: !filterLocations && !error,
+  };
+}
diff --git a/packages/esm-medical-supply-dispensing-app/src/medicalsupplydispensing.component.tsx b/packages/esm-medical-supply-dispensing-app/src/medicalsupplydispensing.component.tsx
new file mode 100644
index 0000000..7071535
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/medicalsupplydispensing.component.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { ExtensionSlot } from '@openmrs/esm-framework';
+
+export default function MedicalSupplyDispensing() {
+  return <ExtensionSlot name="medical-supply-dispensing-dashboard-slot" />;
+}
diff --git a/packages/esm-medical-supply-dispensing-app/src/medication-dispense/medication-dispense.resource.tsx b/packages/esm-medical-supply-dispensing-app/src/medication-dispense/medication-dispense.resource.tsx
new file mode 100644
index 0000000..2baeac8
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/medication-dispense/medication-dispense.resource.tsx
@@ -0,0 +1,182 @@
+import { fhirBaseUrl, restBaseUrl, openmrsFetch, type Session } from '@openmrs/esm-framework';
+import dayjs from 'dayjs';
+import useSWR from 'swr';
+import {
+  NonDrugMedicationDispense,
+  type MedicationDispense,
+  type MedicationDispenseStatus,
+  type MedicationRequest,
+  type OrderConfig,
+  type Provider,
+  type ProviderRequestResponse,
+  type ValueSet,
+} from '../types';
+
+export function saveMedicationDispense(
+  medicationDispense: NonDrugMedicationDispense,
+  medicationDispenseStatus: MedicationDispenseStatus,
+  abortController: AbortController,
+) {
+  // if we have an id, this is an update, otherwise it's a create
+  const url = medicationDispense.uuid
+    ? `${fhirBaseUrl}/MedicationDispense/${medicationDispense.uuid}`
+    : `${fhirBaseUrl}/MedicationDispense`;
+
+  const method = medicationDispense.uuid ? 'PUT' : 'POST';
+
+  medicationDispense.status = medicationDispenseStatus;
+
+  // TODO for now we don't support a different prepared and handed over date, so just set the handed over to the prepared date
+  // medicationDispense.whenPrepared = medicationDispense.whenHandedOver;
+
+  return openmrsFetch(url, {
+    method: method,
+    signal: abortController.signal,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: medicationDispense,
+  });
+}
+
+export function deleteMedicationDispense(medicationDispenseUuid: string) {
+  return openmrsFetch(`${fhirBaseUrl}/MedicationDispense/${medicationDispenseUuid}`, {
+    method: 'DELETE',
+  });
+}
+
+export function useOrderConfig() {
+  const { data, error, isValidating } = useSWR<{ data: OrderConfig }, Error>(
+    `${restBaseUrl}/orderentryconfig`,
+    openmrsFetch,
+  );
+  return {
+    orderConfigObject: data ? data.data : null,
+    isLoading: !data && !error,
+    isError: error,
+    isValidating,
+  };
+}
+
+export function useProviders(providerRoles: Array<string>) {
+  const rep = 'custom:(uuid,person:(display)';
+  const { data } = useSWR<{ data: ProviderRequestResponse }, Error>(
+    providerRoles && providerRoles.length > 0
+      ? `${restBaseUrl}/provider?providerRoles=${providerRoles.join(',')}&v=${rep})`
+      : `${restBaseUrl}/provider?v=${rep})`,
+    openmrsFetch,
+  );
+  return data?.data?.results.sort((a, b) => a.person?.display.localeCompare(b.person?.display));
+}
+
+export function useReasonForPauseValueSet(uuid: string) {
+  const valueSet = useValueSet(uuid);
+  return { reasonForPauseValueSet: valueSet };
+}
+
+export function useReasonForCloseValueSet(uuid: string) {
+  const valueSet = useValueSet(uuid);
+  return { reasonForCloseValueSet: valueSet };
+}
+
+export function useSubstitutionTypeValueSet(uuid: string) {
+  const valueSet = useValueSet(uuid);
+  return { substitutionTypeValueSet: valueSet };
+}
+
+export function useSubstitutionReasonValueSet(uuid: string) {
+  const valueSet = useValueSet(uuid);
+  return { substitutionReasonValueSet: valueSet };
+}
+
+export function useValueSet(uuid: string) {
+  const { data } = useSWR<{ data: ValueSet }, Error>(`${fhirBaseUrl}/ValueSet/${uuid}`, openmrsFetch);
+  return data ? data.data : null;
+}
+
+// TODO: what about the issue with the repetitive reloading?
+export function initiateMedicationDispenseBody(
+  medicationRequest: MedicationRequest,
+  session: Session,
+  providers: Provider[],
+  populateDispenseInformation: boolean,
+): MedicationDispense {
+  let medicationDispense: MedicationDispense = {
+    resourceType: 'MedicationDispense',
+    status: null,
+    authorizingPrescription: [
+      {
+        reference: 'MedicationRequest/' + medicationRequest.id,
+        type: 'MedicationRequest',
+      },
+    ],
+    medicationReference: medicationRequest.medicationReference,
+    medicationCodeableConcept: medicationRequest.medicationCodeableConcept,
+    subject: medicationRequest.subject,
+    performer: [
+      {
+        actor: {
+          reference:
+            session?.currentProvider &&
+            providers &&
+            providers.some((provider) => provider.uuid == session.currentProvider.uuid)
+              ? `Practitioner/${session.currentProvider.uuid}`
+              : '',
+        },
+      },
+    ],
+    location: {
+      reference: session?.sessionLocation ? `Location/${session.sessionLocation.uuid}` : '',
+    },
+    whenHandedOver: dayjs().format(),
+  };
+
+  if (populateDispenseInformation) {
+    medicationDispense = {
+      ...medicationDispense,
+      quantity: {
+        value: medicationRequest.dispenseRequest?.quantity?.value,
+        code: medicationRequest.dispenseRequest?.quantity?.code,
+        unit: medicationRequest.dispenseRequest?.quantity?.unit,
+        system: medicationRequest.dispenseRequest?.quantity?.system,
+      },
+      dosageInstruction: [
+        {
+          // see https://openmrs.atlassian.net/browse/O3-3791 for an explanation for the reason for the below
+          text: [
+            medicationRequest.dosageInstruction[0].text,
+            medicationRequest.dosageInstruction[0].additionalInstruction?.length > 0
+              ? medicationRequest.dosageInstruction[0].additionalInstruction[0].text
+              : null,
+          ]
+            .filter((str) => str != null)
+            .join(' '),
+          timing: medicationRequest.dosageInstruction[0].timing,
+          asNeededBoolean: false,
+          route: medicationRequest.dosageInstruction[0].route,
+          doseAndRate: medicationRequest.dosageInstruction[0].doseAndRate
+            ? medicationRequest.dosageInstruction[0].doseAndRate
+            : [
+                {
+                  doseQuantity: {
+                    value: null,
+                    code: null,
+                    unit: null,
+                  },
+                },
+              ],
+        },
+      ],
+      substitution: {
+        wasSubstituted: false,
+        reason: [
+          {
+            coding: [{ code: null }],
+          },
+        ],
+        type: { coding: [{ code: null }] },
+      },
+    };
+  }
+  return medicationDispense;
+}
diff --git a/packages/esm-medical-supply-dispensing-app/src/medication-request/medication-request.resource.tsx b/packages/esm-medical-supply-dispensing-app/src/medication-request/medication-request.resource.tsx
new file mode 100644
index 0000000..246e393
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/medication-request/medication-request.resource.tsx
@@ -0,0 +1,139 @@
+import useSWR from 'swr';
+import { fhirBaseUrl, openmrsFetch, parseDate } from '@openmrs/esm-framework';
+import {
+  type AllergyIntoleranceResponse,
+  type EncounterResponse,
+  type MedicationRequest,
+  type MedicationRequestResponse,
+  type PrescriptionsTableRow,
+  type MedicationDispense,
+  type Encounter,
+  type MedicationRequestFulfillerStatus,
+  type MedicationRequestBundle,
+} from '../types/index';
+import {
+  getPrescriptionDetailsEndpoint,
+  getMedicationDisplay,
+  getMedicationReferenceOrCodeableConcept,
+  getPrescriptionTableActiveMedicationRequestsEndpoint,
+  getPrescriptionTableAllMedicationRequestsEndpoint,
+  sortMedicationDispensesByWhenHandedOver,
+  computePrescriptionStatusMessageCode,
+  getAssociatedMedicationDispenses,
+} from '../utils';
+import dayjs from 'dayjs';
+import { JSON_MERGE_PATH_MIME_TYPE, OPENMRS_FHIR_EXT_REQUEST_FULFILLER_STATUS } from '../constants';
+
+export function usePrescriptionDetails(encounterUuid: string, refreshInterval = null) {
+  const medicationRequestBundles: Array<MedicationRequestBundle> = [];
+  let prescriptionDate: Date;
+  let isLoading = true;
+
+  const { data, error } = useSWR<{ data: MedicationRequestResponse }, Error>(
+    getPrescriptionDetailsEndpoint(encounterUuid),
+    openmrsFetch,
+    { refreshInterval: refreshInterval },
+  );
+
+  if (data) {
+    const results = data?.data.entry;
+
+    const encounter = results
+      ?.filter((entry) => entry?.resource?.resourceType == 'Encounter')
+      .map((entry) => entry.resource as unknown as Encounter);
+
+    if (encounter) {
+      // by definition of the request (search by encounter) there should be one and only one encounter
+      prescriptionDate = parseDate(encounter[0]?.period.start);
+
+      const medicationRequests = results
+        ?.filter((entry) => entry?.resource?.resourceType == 'MedicationRequest')
+        .map((entry) => entry.resource as MedicationRequest);
+
+      const medicationDispenses = results
+        ?.filter((entry) => entry?.resource?.resourceType == 'MedicationDispense')
+        .map((entry) => entry.resource as MedicationDispense)
+        .sort(sortMedicationDispensesByWhenHandedOver);
+
+      medicationRequests.every((medicationRequest) =>
+        medicationRequestBundles.push({
+          request: medicationRequest,
+          dispenses: getAssociatedMedicationDispenses(medicationRequest, medicationDispenses).sort(
+            sortMedicationDispensesByWhenHandedOver,
+          ),
+        }),
+      );
+    }
+  }
+
+  isLoading = (!medicationRequestBundles || medicationRequestBundles.length == 0) && !error;
+
+  return {
+    medicationRequestBundles,
+    prescriptionDate,
+    isError: error,
+    isLoading,
+  };
+}
+
+export function usePatientAllergies(patientUuid: string, refreshInterval) {
+  const { data, error } = useSWR<{ data: AllergyIntoleranceResponse }, Error>(
+    `${fhirBaseUrl}/AllergyIntolerance?patient=${patientUuid}`,
+    openmrsFetch,
+    { refreshInterval: refreshInterval },
+  );
+
+  const allergies = [];
+  if (data) {
+    const entries = data?.data.entry;
+    entries?.map((allergy) => {
+      return allergies.push(allergy.resource);
+    });
+  }
+
+  return {
+    allergies,
+    totalAllergies: data?.data.total,
+    isError: error,
+  };
+}
+
+// supports passing just the uuid/code or the entire reference, ie either: "MedicationReference/123-abc" or "123-abc"
+export function useMedicationRequest(reference: string, refreshInterval) {
+  reference = reference
+    ? reference.startsWith('MedicationRequest')
+      ? reference
+      : `MedicationRequest/${reference}`
+    : null;
+
+  const { data } = useSWR<{ data: MedicationRequest }, Error>(
+    reference ? `${fhirBaseUrl}/${reference}` : null,
+    openmrsFetch,
+    { refreshInterval: refreshInterval },
+  );
+  return {
+    medicationRequest: data ? data.data : null,
+  };
+}
+
+export function updateMedicationRequestFulfillerStatus(
+  medicationRequestUuid: string,
+  fulfillerStatus: MedicationRequestFulfillerStatus,
+) {
+  const url = `${fhirBaseUrl}/MedicationRequest/${medicationRequestUuid}`;
+
+  return openmrsFetch(url, {
+    method: 'PATCH',
+    headers: {
+      'Content-Type': JSON_MERGE_PATH_MIME_TYPE,
+    },
+    body: {
+      extension: [
+        {
+          url: OPENMRS_FHIR_EXT_REQUEST_FULFILLER_STATUS,
+          valueCode: fulfillerStatus,
+        },
+      ],
+    },
+  });
+}
diff --git a/packages/esm-medical-supply-dispensing-app/src/medication/medication.resource.test.tsx b/packages/esm-medical-supply-dispensing-app/src/medication/medication.resource.test.tsx
new file mode 100644
index 0000000..cdb4c32
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/medication/medication.resource.test.tsx
@@ -0,0 +1,156 @@
+import { useMedicationCodeableConcept, useMedicationFormulations } from './medication.resource';
+import useSWR from 'swr';
+import { openmrsFetch } from '@openmrs/esm-framework';
+
+jest.mocked(openmrsFetch);
+jest.mock('swr');
+
+describe('Medication Resource Tests', () => {
+  test('useMedicationCodeableConcept should call useSWR with null reference if existing codeable concept uuid passed in', () => {
+    // @ts-ignore
+    useSWR.mockImplementation(() => ({ data: null }));
+    const result = useMedicationCodeableConcept('123abc', 'Medication/123abc');
+    expect(useSWR).toHaveBeenCalledWith(null, openmrsFetch);
+    expect(result.medicationCodeableConceptUuid).toBeNull();
+  });
+
+  test('useMedicationCodeableConcept should call useSWR with medication reference if no existing codeable concept uuid passed in', () => {
+    // @ts-ignore
+    useSWR.mockImplementation(() => ({
+      data: { data: { code: { coding: [{ code: 'def678' }] } } },
+    }));
+    const result = useMedicationCodeableConcept(null, 'Medication/123abc');
+    expect(useSWR).toHaveBeenCalledWith('/ws/fhir2/R4/Medication/123abc', openmrsFetch);
+    expect(result.medicationCodeableConceptUuid).toBe('def678');
+  });
+
+  test('useMedicationFormulations should call useSWR with null reference if no concept uuid provided', () => {
+    // @ts-ignore
+    useSWR.mockImplementation(() => ({ data: null }));
+    const result = useMedicationFormulations(null);
+    expect(useSWR).toHaveBeenCalledWith(null, openmrsFetch);
+    expect(result.medicationFormulations).toBeUndefined(); // TODO: is this really what we want? or rather null or empty
+  });
+
+  test('useMedicationFormulations should call useSWR with with medications by concept endpoint and return formualations if concept defined', () => {
+    // @ts-ignore
+    useSWR.mockImplementation(() => ({
+      data: {
+        data: {
+          resourceType: 'Bundle',
+          id: '2ee923c2-6e97-464e-ae0b-797b24c3b3b5',
+          meta: {
+            lastUpdated: '2023-02-27T17:51:19.801-05:00',
+          },
+          type: 'searchset',
+          total: 2,
+          link: [
+            {
+              relation: 'self',
+              url: 'https://ci.pih-emr.org/openmrs/ws/fhir2/R4/Medication?code=3cd27a8a-26fe-102b-80cb-0017a47871b2',
+            },
+          ],
+          entry: [
+            {
+              fullUrl: 'https://ci.pih-emr.org/openmrs/ws/fhir2/R4/Medication/e47fa273-0c52-4f0f-b57b-34001a3e9677',
+              resource: {
+                resourceType: 'Medication',
+                id: 'e47fa273-0c52-4f0f-b57b-34001a3e9677',
+                meta: {
+                  lastUpdated: '2019-09-09T22:55:46.000-04:00',
+                },
+                text: {
+                  status: 'generated',
+                  div: '<div xmlns="http://www.w3.org/1999/xhtml"><table class="hapiPropertyTable"><tbody><tr><td>Id:</td><td>e47fa273-0c52-4f0f-b57b-34001a3e9677</td></tr><tr><td>Code:</td><td>Isoniazide</td></tr><tr><td>Status:</td><td>ACTIVE</td></tr></tbody></table></div>',
+                },
+                extension: [
+                  {
+                    url: 'http://fhir.openmrs.org/ext/medicine',
+                    extension: [
+                      {
+                        url: 'http://fhir.openmrs.org/ext/medicine#drugName',
+                        valueString: 'Isoniazid (H), 100mg tablet',
+                      },
+                    ],
+                  },
+                ],
+                code: {
+                  coding: [
+                    {
+                      code: '3cd27a8a-26fe-102b-80cb-0017a47871b2',
+                      display: 'Isoniazide',
+                    },
+                    {
+                      system: 'https://openconceptlab.org/orgs/CIEL/sources/CIEL',
+                      code: '1679',
+                      display: 'Isoniazide',
+                    },
+                    {
+                      system: 'http://snomed.info/sct',
+                      code: '81335000',
+                      display: 'Isoniazide',
+                    },
+                  ],
+                  text: 'Isoniazide',
+                },
+                status: 'active',
+              },
+            },
+            {
+              fullUrl: 'https://ci.pih-emr.org/openmrs/ws/fhir2/R4/Medication/849218ee-901c-46b3-80f9-7c808132893b',
+              resource: {
+                resourceType: 'Medication',
+                id: '849218ee-901c-46b3-80f9-7c808132893b',
+                meta: {
+                  lastUpdated: '2019-09-09T22:55:46.000-04:00',
+                },
+                text: {
+                  status: 'generated',
+                  div: '<div xmlns="http://www.w3.org/1999/xhtml"><table class="hapiPropertyTable"><tbody><tr><td>Id:</td><td>849218ee-901c-46b3-80f9-7c808132893b</td></tr><tr><td>Code:</td><td>Isoniazide</td></tr><tr><td>Status:</td><td>ACTIVE</td></tr></tbody></table></div>',
+                },
+                extension: [
+                  {
+                    url: 'http://fhir.openmrs.org/ext/medicine',
+                    extension: [
+                      {
+                        url: 'http://fhir.openmrs.org/ext/medicine#drugName',
+                        valueString: 'Isoniazid (H), 300mg tablet',
+                      },
+                    ],
+                  },
+                ],
+                code: {
+                  coding: [
+                    {
+                      code: '3cd27a8a-26fe-102b-80cb-0017a47871b2',
+                      display: 'Isoniazide',
+                    },
+                    {
+                      system: 'https://openconceptlab.org/orgs/CIEL/sources/CIEL',
+                      code: '1679',
+                      display: 'Isoniazide',
+                    },
+                    {
+                      system: 'http://snomed.info/sct',
+                      code: '81335000',
+                      display: 'Isoniazide',
+                    },
+                  ],
+                  text: 'Isoniazide',
+                },
+                status: 'active',
+              },
+            },
+          ],
+        },
+      },
+    }));
+    const result = useMedicationFormulations('123abc');
+    expect(useSWR).toHaveBeenCalledWith('/ws/fhir2/R4/Medication?code=123abc', openmrsFetch);
+    expect(result.medicationFormulations.length).toBe(2);
+    expect(result.medicationFormulations[0].id).toBe('e47fa273-0c52-4f0f-b57b-34001a3e9677');
+    expect(result.medicationFormulations[0].resourceType).toBe('Medication');
+    expect(result.medicationFormulations[1].id).toBe('849218ee-901c-46b3-80f9-7c808132893b');
+    expect(result.medicationFormulations[1].resourceType).toBe('Medication');
+  });
+});
diff --git a/packages/esm-medical-supply-dispensing-app/src/medication/medication.resource.tsx b/packages/esm-medical-supply-dispensing-app/src/medication/medication.resource.tsx
new file mode 100644
index 0000000..95a9f39
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/medication/medication.resource.tsx
@@ -0,0 +1,45 @@
+import useSWR from 'swr';
+import { type Medication, type MedicationFormulationsResponse } from '../types';
+import { fhirBaseUrl, openmrsFetch } from '@openmrs/esm-framework';
+import { getConceptCodingUuid, getMedicationsByConceptEndpoint } from '../utils';
+
+/**
+ * Given a Medication Reference, fetches that Medication and returns the codeable concept associated with it
+ * Note: returns null if existingMedicationCodeableConcept already defined
+ *
+ * @param existingMedicationCodeableConceptUuid
+ * @param medicationReference
+ */
+export function useMedicationCodeableConcept(
+  existingMedicationCodeableConceptUuid: string,
+  medicationReference: string,
+) {
+  const { data } = useSWR<{ data: Medication }, Error>(
+    existingMedicationCodeableConceptUuid || !medicationReference ? null : `${fhirBaseUrl}/${medicationReference}`,
+    openmrsFetch,
+  );
+
+  return {
+    medicationCodeableConceptUuid: data ? getConceptCodingUuid(data.data.code.coding) : null,
+  };
+}
+
+/**
+ * Given a concept uuid, returns all Medications associated with that concept
+ *
+ * @param medicationCodeableConcept
+ */
+export function useMedicationFormulations(medicationCodeableConcept: string) {
+  const { data } = useSWR<{ data: MedicationFormulationsResponse }, Error>(
+    medicationCodeableConcept ? getMedicationsByConceptEndpoint(medicationCodeableConcept) : null, // note that we don't start the search until we've confirmed we have a uuid to search for
+    openmrsFetch,
+  );
+
+  if (data) {
+    return {
+      medicationFormulations: data.data.entry.map((e) => e.resource),
+    };
+  } else {
+    return {};
+  }
+}
diff --git a/packages/esm-medical-supply-dispensing-app/src/pharmacy-header/pharmacy-header.component.tsx b/packages/esm-medical-supply-dispensing-app/src/pharmacy-header/pharmacy-header.component.tsx
new file mode 100644
index 0000000..26b55bb
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/pharmacy-header/pharmacy-header.component.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Calendar, Location } from '@carbon/react/icons';
+import { useConfig, useSession, formatDate } from '@openmrs/esm-framework';
+import PharmacyIllustration from './pharmacy-illustration.component';
+import { type PharmacyConfig } from '../config-schema';
+import styles from './pharmacy-header.scss';
+
+export const PharmacyHeader: React.FC = () => {
+  const { t } = useTranslation();
+  const userSession = useSession();
+  const config = useConfig<PharmacyConfig>();
+  const userLocation = userSession?.sessionLocation?.display;
+
+  return (
+    <div className={styles.header}>
+      <div className={styles['left-justified-items']}>
+        <PharmacyIllustration />
+        <div className={styles['page-labels']}>
+          <p>{t('appName', config.appName)}</p>
+          <p className={styles['page-name']}>{t('home', 'Home')}</p>
+        </div>
+      </div>
+      <div className={styles['right-justified-items']}>
+        <div className={styles['date-and-location']}>
+          <Location size={16} />
+          <span className={styles.value}>{userLocation}</span>
+          <span className={styles.middot}>&middot;</span>
+          <Calendar size={16} />
+          <span className={styles.value}>{formatDate(new Date(), { mode: 'standard' })}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/esm-medical-supply-dispensing-app/src/pharmacy-header/pharmacy-header.scss b/packages/esm-medical-supply-dispensing-app/src/pharmacy-header/pharmacy-header.scss
new file mode 100644
index 0000000..52236ed
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/pharmacy-header/pharmacy-header.scss
@@ -0,0 +1,55 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.header {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  height: spacing.$spacing-12;
+  background-color: $ui-02;
+  display: flex;
+  justify-content: space-between;
+}
+
+.left-justified-items {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-left: 0.75rem;
+}
+
+.right-justified-items {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  padding-top: 1rem;
+}
+
+.page-name {
+  @include type.type-style('heading-04');
+}
+
+.page-labels {
+  margin-left: 1rem;
+  p:first-of-type {
+    margin-bottom: 0.25rem;
+  }
+}
+
+.date-and-location {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-right: 1rem;
+}
+
+.value {
+  margin-left: 0.25rem;
+}
+
+.middot {
+  margin: 0 0.5rem;
+}
+
+.view {
+  @include type.type-style('label-01');
+}
diff --git a/packages/esm-medical-supply-dispensing-app/src/pharmacy-header/pharmacy-illustration.component.tsx b/packages/esm-medical-supply-dispensing-app/src/pharmacy-header/pharmacy-illustration.component.tsx
new file mode 100644
index 0000000..4e5f700
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/pharmacy-header/pharmacy-illustration.component.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+const PharmacyIllustration: React.FC = () => {
+  return (
+    <svg width="72" height="72" viewBox="0 0 62 58" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <path id="whv9q6f4ta" d="M0 0h62v30.508H0z" />
+        <path id="hp71ojgcnc" d="M0 0h24.603v26.571H0z" />
+      </defs>
+      <g fill="none">
+        <g opacity=".193" transform="matrix(-1 0 0 1 62 26.571)">
+          <path
+            d="M62 0c0 16.85-13.916 30.508-31.037 30.508S0 16.849 0 0h62z"
+            fill="var(--brand-03)"
+            mask="url(#rt0c8mo6eb)"
+          />
+        </g>
+        <g opacity=".396" transform="matrix(-1 0 0 1 60.032 0)">
+          <path
+            d="m24.603 26.571-13.35-23.51C9.592.141 5.884-.869 3.011.817.138 2.503-.855 6.272.804 9.193l9.874 17.378"
+            fill="var(--brand-03)"
+            mask="url(#hgianthqwd)"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default PharmacyIllustration;
diff --git a/packages/esm-medical-supply-dispensing-app/src/prescriptions/prescription-details.component.tsx b/packages/esm-medical-supply-dispensing-app/src/prescriptions/prescription-details.component.tsx
new file mode 100644
index 0000000..bad4564
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/prescriptions/prescription-details.component.tsx
@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { DataTableSkeleton, Tag, Tile } from '@carbon/react';
+import { WarningFilled } from '@carbon/react/icons';
+import { type PatientUuid, useConfig, UserHasAccess } from '@openmrs/esm-framework';
+import { type PharmacyConfig } from '../config-schema';
+import {
+  type AllergyIntolerance,
+  type MedicationRequest,
+  MedicationRequestCombinedStatus,
+  NonDrugDispensingUnit,
+  NonDrugMedicationDispense,
+} from '../types';
+import { computeMedicationRequestCombinedStatus, getConceptCodingDisplay } from '../utils';
+import { PRIVILEGE_CREATE_DISPENSE } from '../constants';
+import { usePatientAllergies, usePrescriptionDetails } from '../medication-request/medication-request.resource';
+import ActionButtons from '../components/action-buttons.component';
+import MedicationEvent from '../components/medication-event.component';
+import styles from './prescription-details.scss';
+
+const PrescriptionDetails: React.FC<{
+  encounterUuid: string;
+  patientUuid: PatientUuid;
+  medicationDispense: NonDrugMedicationDispense;
+}> = ({ encounterUuid, patientUuid, medicationDispense }) => {
+  const { t } = useTranslation();
+  const config = useConfig<PharmacyConfig>();
+
+  return (
+    <div className={styles.prescriptionContainer}>
+      <h5 style={{ paddingTop: '8px', paddingBottom: '8px', fontSize: '0.9rem' }}>{t('prescribed', 'Prescribed')}</h5>
+
+      <Tile className={styles.prescriptionTile}>
+        <UserHasAccess privilege={PRIVILEGE_CREATE_DISPENSE}>
+          <ActionButtons
+            patientUuid={patientUuid}
+            encounterUuid={encounterUuid}
+            medicationDispense={medicationDispense}
+          />
+        </UserHasAccess>
+        <MedicationEvent medicationDispense={medicationDispense} />
+      </Tile>
+    </div>
+  );
+};
+
+export default PrescriptionDetails;
diff --git a/packages/esm-medical-supply-dispensing-app/src/prescriptions/prescription-details.scss b/packages/esm-medical-supply-dispensing-app/src/prescriptions/prescription-details.scss
new file mode 100644
index 0000000..db4048f
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/prescriptions/prescription-details.scss
@@ -0,0 +1,73 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type/index';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.prescriptionTile {
+  width: 100%;
+  margin: 2px 0 8px;
+  padding: 0;
+  background-color: #fff;
+  border-left: 4px solid var(--brand-03);
+  color: $text-02;
+  margin-bottom: 1rem !important;
+}
+
+.prescriptionContainer {
+  display: flex;
+  flex-direction: column;
+  max-width: 80%;
+  margin-bottom: 1rem;
+
+  &:global(.cds--tile) {
+    min-height: 3rem !important;
+    padding-left: 10px !important;
+  }
+}
+
+.prescriptionContainer > :global(.cds--tile) {
+  min-height: 3rem !important;
+  padding-left: 10px !important;
+  margin: auto;
+}
+
+.allergiesTile {
+  height: 24px;
+  padding: 0 8px 0 0;
+  border-left: 4px solid #f1c21b;
+  background-color: rgba(253, 209, 58, 0.3);
+  margin: auto;
+  width: 100%;
+}
+
+.allergiesContent {
+  margin: auto;
+  min-width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+
+  div {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+  }
+
+  p {
+    margin-left: 10px;
+    font-size: 0.9rem;
+    width: 80%;
+  }
+
+  a {
+    margin: auto;
+    color: #0f62fe;
+    text-decoration: none;
+    text-align: right;
+  }
+}
+
+svg.allergiesIcon {
+  fill: #f1c21b;
+  vertical-align: middle;
+}
diff --git a/packages/esm-medical-supply-dispensing-app/src/prescriptions/prescription-expanded.component.tsx b/packages/esm-medical-supply-dispensing-app/src/prescriptions/prescription-expanded.component.tsx
new file mode 100644
index 0000000..1b98314
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/prescriptions/prescription-expanded.component.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { type PatientUuid } from '@openmrs/esm-framework';
+import { Tab, Tabs, TabList, TabPanels, TabPanel } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import styles from './prescription-expanded.scss';
+import PrescriptionDetails from './prescription-details.component';
+import { NonDrugDispensingUnit, NonDrugMedicationDispense } from '../types';
+
+interface TabItem {
+  name: string;
+  component: JSX.Element;
+}
+
+const PrescriptionExpanded: React.FC<{
+  encounterUuid: string;
+  patientUuid: PatientUuid;
+  medicationDispense: NonDrugMedicationDispense;
+}> = ({ encounterUuid, patientUuid, medicationDispense }) => {
+  const { t } = useTranslation();
+  const tabs: TabItem[] = [
+    {
+      name: t('prescriptionDetails', 'Prescription details'),
+      component: (
+        <PrescriptionDetails
+          encounterUuid={encounterUuid}
+          patientUuid={patientUuid}
+          medicationDispense={medicationDispense}
+        />
+      ),
+    },
+  ];
+
+  return (
+    <div className={styles.expandedTabsParentContainer}>
+      <div className={styles.expandedTabsContainer}>
+        <Tabs>
+          <TabList aria-label={t('tabList', 'Tab List')}>
+            {tabs.map((tab: TabItem, index: number) => (
+              <Tab key={index} className={styles.orderTabs}>
+                {tab.name}
+              </Tab>
+            ))}
+          </TabList>
+          <TabPanels>
+            {tabs.map((tab: TabItem, index) => (
+              <TabPanel key={index}>{tab.component}</TabPanel>
+            ))}
+          </TabPanels>
+        </Tabs>
+      </div>
+    </div>
+  );
+};
+
+export default PrescriptionExpanded;
diff --git a/packages/esm-medical-supply-dispensing-app/src/prescriptions/prescription-expanded.scss b/packages/esm-medical-supply-dispensing-app/src/prescriptions/prescription-expanded.scss
new file mode 100644
index 0000000..4005652
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/prescriptions/prescription-expanded.scss
@@ -0,0 +1,55 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.expandedTabsParentContainer {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: spacing.$spacing-05;
+}
+
+.expandedTabsContainer {
+  display: flex;
+  flex-direction: row;
+
+  :global(.cds--tabs) {
+    margin: 1rem 0;
+    width: 20%;
+    max-height: 8rem !important;
+  }
+
+  :global(.cds--tab--list) {
+    flex-direction: column !important;
+  }
+
+  :global(.cds--tab-content) {
+    margin: 1rem 0;
+    width: 100% !important;
+  }
+
+  :global(.cds--tabs__nav-link) {
+    border-bottom: 0 !important;
+    border-left: 3px solid $ui-03 !important;
+  }
+
+  :global(.cds--tabs__nav-item--selected) {
+    border-bottom: 0px !important;
+    border-left: 3px solid var(--brand-03) !important;
+  }
+
+  &:global(.cds--tabs--scrollable .cds--tabs--scrollable__nav-item + .cds--tabs--scrollable__nav-item) {
+    margin-left: 0rem !important;
+  }
+
+  > ul {
+    flex-direction: column !important;
+  }
+
+  > ul > li button {
+    width: 12rem !important;
+  }
+
+  :global(.cds--tabs__nav-link) {
+    max-width: 12rem !important;
+  }
+}
diff --git a/packages/esm-medical-supply-dispensing-app/src/prescriptions/prescription-tab-lists.component.tsx b/packages/esm-medical-supply-dispensing-app/src/prescriptions/prescription-tab-lists.component.tsx
new file mode 100755
index 0000000..48b6b95
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/prescriptions/prescription-tab-lists.component.tsx
@@ -0,0 +1,115 @@
+import React, { useEffect, useState } from 'react';
+import { Tab, Tabs, TabList, TabPanels, Search, ComboBox } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import PrescriptionTabPanel from './prescription-tab-panel.component';
+import styles from './prescriptions.scss';
+import { useLocationForFiltering } from '../location/location.resource';
+import { useConfig } from '@openmrs/esm-framework';
+import { type SimpleLocation } from '../types';
+import { type PharmacyConfig } from '../config-schema';
+
+const PrescriptionTabLists: React.FC = () => {
+  const { t } = useTranslation();
+  const config = useConfig<PharmacyConfig>();
+  const { filterLocations, isLoading: isFilterLocationsLoading } = useLocationForFiltering(config);
+  const [searchTermUserInput, setSearchTermUserInput] = useState(''); // we have a separate "searchTermUserInput" and "searchTerm" in order to debounce
+  const [searchTerm, setSearchTerm] = useState('');
+  const [location, setLocation] = useState('');
+  const [selectedTab, setSelectedTab] = useState(0);
+
+  const tabs = [
+    {
+      key: 'activePrescriptions',
+      header: t('activeMedicalSupplies', 'Active Medical Supplies'),
+      status: 'ACTIVE',
+    },
+    {
+      key: 'allPrescriptions',
+      header: t('allMedicalSupplies', 'All Medical Supplies'),
+      status: '',
+    },
+  ];
+
+  // debounce: delay the search term update so that a search isn't triggered on every single keystroke
+  useEffect(() => {
+    const debounceFn = setTimeout(() => {
+      setSearchTerm(searchTermUserInput);
+    }, 500);
+
+    return () => clearTimeout(debounceFn);
+  }, [searchTermUserInput]);
+
+  // we use this to only render the tab panel that is currently selected, see O3-2777
+  const handleTabChange = (event) => {
+    setSelectedTab(event.selectedIndex);
+  };
+
+  return (
+    <main className={`omrs-main-content ${styles.prescriptionListContainer}`}>
+      <section className={styles.prescriptionTabsContainer}>
+        <Tabs
+          className={styles.prescriptionTabs}
+          onChange={handleTabChange}
+          type="container"
+          tabContentClassName={styles.hiddenTabsContent}>
+          <TabList aria-label={t('tabList', 'Tab List')} contained className={styles.tabsContainer}>
+            {tabs.map((tab, index) => {
+              return (
+                <Tab title={t(tab.key)} key={index} id={'tab-' + index} className={styles.tab}>
+                  {t(tab.header)}
+                </Tab>
+              );
+            })}
+          </TabList>
+          <div className={styles.searchContainer}>
+            {/* <Button
+              kind="primary"
+              renderIcon={(props) => <Add size={24} />}
+              className={styles.addPrescriptionBtn}
+              size="sm"
+            >
+              {t("fillPrescription", "Fill prescription")}
+            </Button>*/}
+            <Search
+              closeButtonLabelText={t('clearSearchInput', 'Clear search input')}
+              defaultValue={searchTermUserInput}
+              placeholder={t('searchByPatientIdOrName', 'Search by patient ID or name')}
+              labelText={t('searchByPatientIdOrName', 'Search by patient ID or name')}
+              onChange={(e) => {
+                e.preventDefault();
+                setSearchTermUserInput(e.target.value);
+              }}
+              size="md"
+              className={styles.patientSearch}
+            />
+            {config.locationBehavior?.locationFilter?.enabled &&
+              !isFilterLocationsLoading &&
+              filterLocations?.length > 1 && (
+                <ComboBox
+                  id="locationFilter"
+                  placeholder={t('filterByLocation', 'Filter by location')}
+                  items={isFilterLocationsLoading ? [] : filterLocations}
+                  itemToString={(item: SimpleLocation) => item?.name}
+                  onChange={({ selectedItem }) => {
+                    setLocation(selectedItem?.id);
+                  }}
+                  className={styles.locationFilter}
+                />
+              )}
+          </div>
+          <TabPanels>
+            {tabs.map((tab, index) => {
+              return index === selectedTab ? (
+                <PrescriptionTabPanel location={location} searchTerm={searchTerm} status={tab.status} />
+              ) : (
+                <></>
+              );
+            })}
+          </TabPanels>
+        </Tabs>
+      </section>
+    </main>
+  );
+};
+
+export default PrescriptionTabLists;
diff --git a/packages/esm-medical-supply-dispensing-app/src/prescriptions/prescription-tab-panel.component.tsx b/packages/esm-medical-supply-dispensing-app/src/prescriptions/prescription-tab-panel.component.tsx
new file mode 100644
index 0000000..5e71b95
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/prescriptions/prescription-tab-panel.component.tsx
@@ -0,0 +1,189 @@
+import React, { useEffect, useState } from 'react';
+import {
+  DataTable,
+  DataTableSkeleton,
+  Layer,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableExpandedRow,
+  TableExpandHeader,
+  TableExpandRow,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TabPanel,
+  Tile,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { formatDatetime, parseDate, useConfig } from '@openmrs/esm-framework';
+import PrescriptionExpanded from './prescription-expanded.component';
+import { type PharmacyConfig } from '../config-schema';
+import styles from './prescriptions.scss';
+import { useOrdersWorklist } from '../hooks/useOrdersWorklist';
+import { PrescriptionsTableRow } from '../types';
+
+interface PrescriptionTabPanelProps {
+  searchTerm: string;
+  location: string;
+  status: string;
+}
+
+const PrescriptionTabPanel: React.FC<PrescriptionTabPanelProps> = ({ searchTerm, location, status }) => {
+  const { t } = useTranslation();
+  const config = useConfig<PharmacyConfig>();
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [nextOffSet, setNextOffSet] = useState(0);
+
+  // const { prescriptionsTableRows, error, isLoading, totalOrders } = usePrescriptionsTable(
+  //   pageSize,
+  //   nextOffSet,
+  //   searchTerm,
+  //   location,
+  //   status,
+  //   config.medicationRequestExpirationPeriodInDays,
+  //   config.refreshInterval,
+  // );
+  const { workListEntries, isLoading, isError } = useOrdersWorklist('', '');
+
+  let prescriptionsTableRows: PrescriptionsTableRow[];
+  if (workListEntries) {
+    prescriptionsTableRows = workListEntries.map((entry) => {
+      return {
+        id: entry?.uuid,
+        created: entry?.dateActivated,
+        patient: {
+          name: entry?.patient?.display?.split('-')[1],
+          uuid: entry?.patient?.uuid,
+        },
+        encounter: entry?.encounter?.uuid,
+        nonDrugItem: entry?.display,
+        lastDispenser: '',
+        prescriber: entry?.orderer?.display?.split('-')[1],
+        status: entry?.fulfillerStatus,
+        location: null,
+        drugDispenseQuantity: entry?.quantity,
+        drugDispenseUnit: entry?.quantityUnits,
+      };
+    });
+    prescriptionsTableRows.sort((a, b) => (a.created < b.created ? 1 : -1));
+  }
+  let columns = [
+    { header: t('created', 'Created'), key: 'created' },
+    { header: t('patientName', 'Patient name'), key: 'patient' },
+    { header: t('prescriber', 'Prescriber'), key: 'prescriber' },
+    { header: t('item', 'Item'), key: 'nonDrugItem' },
+    // { header: t('lastDispenser', 'Last dispenser'), key: 'lastDispenser' },
+    { header: t('status', 'Status'), key: 'status' },
+  ];
+  // add the locations column, if enabled
+  if (config.locationBehavior?.locationColumn?.enabled) {
+    columns = [...columns.slice(0, 3), { header: t('location', 'Location'), key: 'location' }, ...columns.slice(3)];
+  }
+
+  // reset back to page 1 whenever search term changes
+  useEffect(() => {
+    setPage(1);
+    setNextOffSet(0);
+  }, [searchTerm]);
+  return (
+    <TabPanel>
+      <div className={styles.patientListTableContainer}>
+        {isLoading && <DataTableSkeleton role="progressbar" />}
+        {isError && <p>Error</p>}
+        {prescriptionsTableRows && (
+          <>
+            <DataTable rows={prescriptionsTableRows} headers={columns} isSortable>
+              {({ rows, headers, getExpandHeaderProps, getHeaderProps, getRowProps, getTableProps }) => (
+                <TableContainer>
+                  <Table {...getTableProps()} useZebraStyles>
+                    <TableHead>
+                      <TableRow>
+                        <TableExpandHeader {...getExpandHeaderProps()} />
+                        {headers.map((header) => (
+                          <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+                        ))}
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {rows.map((row) => (
+                        <React.Fragment key={row.id}>
+                          <TableExpandRow {...getRowProps({ row })}>
+                            {row.cells.map((cell) => (
+                              <TableCell key={cell.id}>
+                                {cell.id.endsWith('created')
+                                  ? formatDatetime(parseDate(cell.value))
+                                  : cell.id.endsWith('patient')
+                                  ? cell.value.name
+                                  : cell.id.endsWith('status')
+                                  ? t(cell.value)
+                                  : cell.value}
+                              </TableCell>
+                            ))}
+                          </TableExpandRow>
+                          {row.isExpanded ? (
+                            <TableExpandedRow colSpan={headers.length + 1}>
+                              <PrescriptionExpanded
+                                encounterUuid={
+                                  prescriptionsTableRows.find((item) => item.id == row.id.split(':')[0]).encounter
+                                }
+                                patientUuid={row.cells.find((cell) => cell.id.endsWith('patient')).value.uuid}
+                                medicationDispense={{
+                                  uuid: row.id.split(':')[0],
+                                  quantity: prescriptionsTableRows.find((item) => item.id == row.id.split(':')[0])
+                                    .drugDispenseQuantity,
+                                  display: prescriptionsTableRows.find((item) => item.id == row.id.split(':')[0])
+                                    .nonDrugItem,
+                                  dispensingUnit: prescriptionsTableRows.find((item) => item.id == row.id.split(':')[0])
+                                    .drugDispenseUnit,
+                                }}
+                              />
+                            </TableExpandedRow>
+                          ) : (
+                            <TableExpandedRow className={styles.hiddenRow} colSpan={headers.length + 2} />
+                          )}
+                        </React.Fragment>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </TableContainer>
+              )}
+            </DataTable>
+            {prescriptionsTableRows?.length === 0 && (
+              <div className={styles.filterEmptyState}>
+                <Layer>
+                  <Tile className={styles.filterEmptyStateTile}>
+                    <p className={styles.filterEmptyStateContent}>
+                      {t('noPrescriptionsToDisplay', 'No prescriptions to display')}
+                    </p>
+                    <p className={styles.filterEmptyStateHelper}>{t('checkFilters', 'Check the filters above')}</p>
+                  </Tile>
+                </Layer>
+              </div>
+            )}
+            {prescriptionsTableRows?.length > 0 && (
+              <div style={{ width: '100%' }}>
+                <Pagination
+                  page={page}
+                  pageSize={pageSize}
+                  pageSizes={[10, 20, 30, 40, 50, 100]}
+                  totalItems={workListEntries?.length}
+                  onChange={({ page, pageSize }) => {
+                    setPage(page);
+                    setNextOffSet((page - 1) * pageSize);
+                    setPageSize(pageSize);
+                  }}
+                />
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </TabPanel>
+  );
+};
+
+export default PrescriptionTabPanel;
diff --git a/packages/esm-medical-supply-dispensing-app/src/prescriptions/prescriptions.scss b/packages/esm-medical-supply-dispensing-app/src/prescriptions/prescriptions.scss
new file mode 100644
index 0000000..336d3bf
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/prescriptions/prescriptions.scss
@@ -0,0 +1,170 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+@import '../root.scss';
+
+title {
+  width: 6.938rem;
+  height: 1.75rem;
+  margin: 0.438rem 22.875rem 0.813rem 0;
+  font-family: IBMPlexSans;
+  font-size: 1.25rem;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.4;
+  letter-spacing: normal;
+}
+
+.link {
+  text-decoration: none;
+}
+
+.breadcrumbsSlot {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+}
+
+.prescriptionTabsContainer {
+  height: 100%;
+  width: 100%;
+
+  :global(.cds--tab-content) {
+    padding: 0 !important;
+  }
+}
+
+.prescriptionTabs {
+  grid-column: 'span 2';
+  padding: 0 spacing.$spacing-05;
+}
+
+.newListButton {
+  width: fit-content;
+  justify-self: end;
+  align-self: center;
+}
+
+.tabsContainer {
+  background-color: $ui-02;
+
+  :global(.cds--tabs__nav-item--selected) {
+    box-shadow: inset 0 2px 0 0 var(--brand-03) !important;
+  }
+
+  :global(.cds--tab--list) button {
+    max-width: 12rem !important;
+  }
+}
+
+.hiddenTabsContent,
+.tabs .hiddenTabsContent {
+  display: none;
+}
+
+.patientListTableContainer {
+  grid-row: 3 / 4;
+  grid-column: 1 / 2;
+  height: 100%;
+  margin: 0 spacing.$spacing-05;
+  background-color: $ui-01;
+  border: 0.5px solid #e0e0e0;
+
+  :global(.cds--data-table-container) {
+    padding-top: 0 !important;
+  }
+
+  tbody > tr > :nth-child(2) {
+    white-space: nowrap;
+  }
+
+  :global(.cds--data-table td) {
+    height: unset !important;
+  }
+
+  :global(.cds--data-table--zebra) tbody tr[data-parent-row]:nth-child(4n + 1) td {
+    background-color: $ui-02;
+    border-bottom: 1px solid $ui-03;
+    border-top: 1px solid $ui-03;
+  }
+
+  :global(.cds--data-table--zebra) tbody tr[data-parent-row]:nth-child(4n + 3) td {
+    background-color: $ui-01;
+    border-bottom: 1px solid $ui-03;
+  }
+
+  :global(.cds--pagination) {
+    border-top: none !important;
+  }
+
+  :global(.cds--table-expand__button) {
+    height: 2rem !important;
+  }
+}
+
+.searchContainer {
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+  padding: 0.5rem 1rem 0;
+
+  :global(.cds--search-magnifier-icon) {
+    z-index: 0 !important;
+  }
+
+  input {
+    background-color: #fff;
+  }
+}
+
+.addPrescriptionBtn {
+  width: 10rem !important;
+  padding: 0.5rem !important;
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.patientSearch {
+  width: 25rem;
+  border-bottom-color: $ui-03;
+}
+
+.locationFilter {
+  width: 25rem;
+}
+
+.search {
+  width: 100%;
+  max-width: 16rem;
+  background-color: $ui-02;
+  border-bottom-color: $ui-03;
+}
+
+.hiddenRow {
+  display: none;
+}
+
+.filterEmptyState {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: spacing.$spacing-09;
+  text-align: center;
+  background-color: $ui-02;
+}
+
+.filterEmptyStateTile {
+  margin: auto;
+  background-color: $ui-01;
+}
+
+.filterEmptyStateContent {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: spacing.$spacing-03;
+}
+
+.filterEmptyStateHelper {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}
diff --git a/packages/esm-medical-supply-dispensing-app/src/routes.json b/packages/esm-medical-supply-dispensing-app/src/routes.json
index 2ead18e..50f2e22 100644
--- a/packages/esm-medical-supply-dispensing-app/src/routes.json
+++ b/packages/esm-medical-supply-dispensing-app/src/routes.json
@@ -4,11 +4,36 @@
     "fhir2": ">=1.2",
     "webservices.rest": "^2.24.0"
   },
-  "extensions": [],
+  
+  "extensions": [
+    {
+      "name": "medical-supplies-dispensing-link",
+      "slot": "app-menu-slot",
+      "component": "medicalSuppliesDispensingLink",
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "supplyDispensing-dashboard",
+      "slot": "medical-supply-dispensing-dashboard-slot",
+      "component": "supplyDispensingDashboard",
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "dispensing-dashboard-link",
+      "component": "dispensingDashboardLink",
+      "meta": {
+        "name": "dispensing",
+        "slot": "medical-supply-dispensing-dashboard-slot",
+        "title": "Supply Dispensing"
+      }
+    }
+  ],
   "workspaces": [],
   "pages": [
     {
-      "component": "root",
+      "component": "supplyDispensingDashboard",
       "route": "medical-supply-dispensing"
     }
   ]
diff --git a/packages/esm-medical-supply-dispensing-app/src/types/index.ts b/packages/esm-medical-supply-dispensing-app/src/types/index.ts
index af71fed..4ba382f 100644
--- a/packages/esm-medical-supply-dispensing-app/src/types/index.ts
+++ b/packages/esm-medical-supply-dispensing-app/src/types/index.ts
@@ -1 +1,636 @@
-// All types go here
+import { Concept, Link, type OpenmrsResource } from '@openmrs/esm-framework';
+
+export interface AllergyIntolerance {
+  resourceType: string;
+  id: string;
+  meta: {
+    lastUpdated: string;
+  };
+  clinicalStatus: {
+    coding: [
+      {
+        system: string;
+        code: string;
+        display: string;
+      },
+    ];
+    text: string;
+  };
+  verificationStatus: {
+    coding: [
+      {
+        system: string;
+        code: string;
+        display: string;
+      },
+    ];
+    text: string;
+  };
+  type: string;
+  category: Array<string>;
+  criticality: string;
+  code: {
+    coding: [
+      {
+        code: string;
+        display: string;
+      },
+    ];
+    text: string;
+  };
+  patient: {
+    reference: string;
+    type: string;
+    display: string;
+  };
+  recordedDate: string;
+  recorder: {
+    reference: string;
+    type: string;
+    display: string;
+  };
+  reaction: [
+    {
+      substance: {
+        coding: [
+          {
+            code: string;
+            display: string;
+          },
+        ];
+        text: string;
+      };
+      manifestation: [
+        {
+          coding: [
+            {
+              code: string;
+              display: string;
+            },
+          ];
+          text: string;
+        },
+      ];
+      severity: string;
+    },
+  ];
+}
+
+export interface AllergyIntoleranceResponse {
+  resourceType: string;
+  id: string;
+  meta: {
+    lastUpdated: string;
+  };
+  type: string;
+  total: number;
+  entry: Array<{
+    resource: AllergyIntolerance;
+  }>;
+}
+
+export interface Attribute {
+  attributeType: OpenmrsResource;
+  display: string;
+  uuid: string;
+  value: string | number;
+}
+
+export interface CodeableConcept {
+  coding?: Coding[];
+  text?: string;
+}
+
+export interface Coding {
+  system?: string;
+  code: string;
+  display?: string;
+}
+export interface CommonConfigProps {
+  uuid: string;
+  display: string;
+}
+
+export interface DosageInstruction {
+  text?: string;
+  timing: {
+    repeat?: {
+      duration: number;
+      durationUnit: string;
+    };
+    code: {
+      coding: Array<Coding>;
+      text?: string;
+    };
+  };
+  asNeededBoolean: boolean;
+  route: {
+    coding: Array<Coding>;
+    text?: string;
+  };
+  doseAndRate: Array<{
+    doseQuantity: Quantity;
+  }>;
+  additionalInstruction?: Array<CodeableConcept>;
+}
+
+export interface Drug {
+  uuid: string;
+  name: string;
+  strength: string;
+  concept: OpenmrsResource;
+  dosageForm: OpenmrsResource;
+}
+
+// add more properties, or fine just to keep the ones we are using? is there a global definition of this resource?
+export interface Encounter {
+  resourceType: string;
+  uuid: string;
+  meta: {
+    lastUpdated: string;
+  };
+  period?: {
+    start: string;
+  };
+  subject?: {
+    reference: string;
+    display: string;
+  };
+  location?: [{ location: Reference }];
+}
+
+export interface EncounterResponse {
+  resourceType: string;
+  id: string;
+  meta: {
+    lastUpdated: string;
+  };
+  type: string;
+  total: number;
+  entry: Array<{
+    resource: Encounter | MedicationRequest | MedicationDispense;
+  }>;
+}
+
+export interface Extension {
+  url: string;
+  valueDateTime?: string;
+  valueCode?: MedicationRequestFulfillerStatus; // add other possibilties once we start using other extensions
+}
+
+export interface LocationResponse {
+  resourceType: string;
+  id: string;
+  meta: {
+    lastUpdated: string;
+  };
+  type: string;
+  total: number;
+  entry: Array<any>; // TODO: type this out better?
+}
+
+export interface Medication {
+  resourceType: string;
+  id: string;
+  meta: {
+    lastUpdated: string;
+  };
+  extension: [
+    {
+      url: string;
+      extension: [
+        {
+          url: string;
+          valueString: string;
+        },
+      ];
+    },
+  ];
+  code: {
+    coding: Coding[];
+    text: string;
+  };
+  status: string;
+}
+
+export interface NonDrugMedicationDispense {
+  uuid: string;
+  patient?: string;
+  encounter?: string;
+  dispensingUnit?: NonDrugDispensingUnit;
+  quantity?: Number;
+  display?: string;
+  instrucions?: string;
+  status?: string;
+  medicalSupplyOrder?: string;
+  concept?: string;
+  dateDispensed?: Date;
+  statusReason?: string;
+  location?: string;
+  encounters?: string;
+  dispenser?: string;
+}
+
+export interface MedicationDispense {
+  resourceType: string;
+  id?: string;
+  meta?: {
+    lastUpdated: string;
+  };
+  extension?: Array<Extension>;
+  status: MedicationDispenseStatus;
+  statusReasonCodeableConcept?: CodeableConcept;
+  authorizingPrescription?: [
+    {
+      reference: string;
+      type: string;
+    },
+  ];
+  medicationReference: {
+    reference: string;
+    type?: string;
+    display?: string;
+  };
+  medicationCodeableConcept?: {
+    coding: Coding[];
+    text: string;
+  };
+  subject: {
+    reference: string;
+    type?: string;
+    display?: string;
+  };
+  performer: Array<{
+    actor: {
+      reference: string;
+      type?: string;
+      identifier?: {
+        value?: string;
+      };
+      display?: string;
+    };
+  }>;
+  location: Reference;
+  type?: CodeableConcept;
+  quantity?: Quantity;
+  whenPrepared?: any;
+  whenHandedOver?: any;
+  dosageInstruction?: Array<DosageInstruction>;
+  substitution?: {
+    wasSubstituted: boolean;
+    reason?: CodeableConcept[];
+    type?: CodeableConcept;
+  };
+}
+export enum MedicationDispenseStatus {
+  //in_progress = "in-progress",  NOT YET IMPLEMENTED
+  on_hold = 'on-hold',
+  completed = 'completed',
+  declined = 'declined',
+}
+
+export interface MedicationFormulationsResponse {
+  resourceType: string;
+  id: string;
+  meta: {
+    lastUpdated: string;
+  };
+  type: string;
+  total: number;
+  entry: Array<{
+    resource: Medication;
+  }>;
+}
+
+export interface MedicationRequest {
+  resourceType: string;
+  id: string;
+  meta: {
+    lastUpdated: string;
+  };
+  extension?: Array<Extension>;
+  status: MedicationRequestStatus;
+  intent: string;
+  priority: string;
+  medicationReference: {
+    reference: string;
+    type?: string;
+    display?: string;
+  };
+  medicationCodeableConcept?: {
+    coding: Coding[];
+    text: string;
+  };
+  subject: {
+    reference: string;
+    type?: string;
+    display?: string;
+  };
+  encounter: {
+    reference: string;
+    type: string;
+  };
+  requester: {
+    reference: string;
+    type: string;
+    identifier: {
+      value: string;
+    };
+    display: string;
+  };
+  dosageInstruction: Array<DosageInstruction>;
+  dispenseRequest: {
+    numberOfRepeatsAllowed: number;
+    quantity: Quantity;
+    validityPeriod: {
+      start: string;
+    };
+  };
+}
+
+export interface MedicationRequestResponse {
+  resourceType: string;
+  id: string;
+  meta: {
+    lastUpdated: string;
+  };
+  type: string;
+  total: number;
+  entry: Array<{
+    resource: MedicationRequest | MedicationDispense;
+  }>;
+}
+
+export enum MedicationRequestStatus {
+  active = 'active',
+  cancelled = 'cancelled',
+  completed = 'completed',
+  expired = 'expired',
+}
+
+/**
+ * These fulfiller statuses are an OpenMRS defined status (as opposed to FHIR) that we define as upper-case,
+ * hence the case difference from the other statuses
+ */
+export enum MedicationRequestFulfillerStatus {
+  on_hold = 'ON_HOLD',
+  declined = 'DECLINED',
+  completed = 'COMPLETED',
+}
+
+/**
+ * Within the UI, the "status" of a request we want to display to the pharmacist is
+ * a combination of the status and fulfiller status; this is the actual status we want to display to the pharmacist (see util method
+ * computeMedicationRequestCombinedStatus)
+ */
+export enum MedicationRequestCombinedStatus {
+  active = 'active',
+  cancelled = 'cancelled',
+  completed = 'completed',
+  expired = 'expired',
+  on_hold = 'on-hold',
+  declined = 'declined',
+  unknown = 'unknown',
+}
+
+/**
+ * Convenience object to group a medication request with all it's related medication dispenses
+ * Invalid if any of the dispenses point to a different request than the one referenced
+ */
+export interface MedicationRequestBundle {
+  request: MedicationRequest;
+  dispenses: Array<MedicationDispense>;
+}
+
+export interface MedicationReferenceOrCodeableConcept {
+  medicationReference?: {
+    reference: string;
+    type?: string;
+    display?: string;
+  };
+  medicationCodeableConcept?: {
+    coding: Coding[];
+    text: string;
+  };
+}
+
+export interface OrderConfig {
+  drugRoutes: Array<CommonConfigProps>;
+  drugDosingUnits: Array<CommonConfigProps>;
+  drugDispensingUnits: Array<CommonConfigProps>;
+  durationUnits: Array<CommonConfigProps>;
+  orderFrequencies: Array<CommonConfigProps>;
+}
+
+export interface Patient {
+  uuid: string;
+  display: string;
+  identifiers: Array<any>;
+  person: Person;
+}
+
+export interface Person {
+  age: number;
+  attributes: Array<Attribute>;
+  birthDate: string;
+  gender: string;
+  display: string;
+  preferredAddress: OpenmrsResource;
+  uuid: string;
+}
+
+export interface Provider {
+  uuid: string;
+  person: {
+    display: string;
+  };
+}
+
+export interface ProviderRequestResponse {
+  results: Array<Provider>;
+}
+
+// represents a row in the main table
+export interface PrescriptionsTableRow {
+  id: string;
+  created: string;
+  patient: {
+    name: string;
+    uuid: string;
+  };
+  prescriber: string;
+  nonDrugItem: string;
+  lastDispenser: string;
+  status: string;
+  location: string;
+  encounter: string;
+  drugDispenseUnit: NonDrugDispensingUnit;
+  drugDispenseQuantity: Number;
+}
+
+export interface Quantity {
+  value: number;
+  unit: string;
+  code: string;
+  system?: string;
+}
+
+export interface Reference {
+  reference: string;
+  type?: string;
+  display?: string;
+}
+
+// simple representation of a location
+export interface SimpleLocation {
+  id: string;
+  name: string;
+}
+
+export interface ValueSet {
+  id: string;
+  title: string;
+  status: string;
+  date: string;
+  description: string;
+  compose: {
+    include: [
+      {
+        system: string;
+        concept: [
+          {
+            code: string;
+            display: string;
+          },
+        ];
+      },
+    ];
+  };
+}
+
+export type InventoryItem = {
+  partyUuid: string;
+  locationUuid: string;
+  partyName: string;
+  stockItemUuid: string | null;
+  drugId: string | null;
+  drugUuid: string | null;
+  drugStrength: string | null;
+  conceptId: string | null;
+  conceptUuid: string | null;
+  stockBatchUuid: string;
+  batchNumber: string;
+  quantity: number;
+  quantityUoM: string;
+  quantityFactor: number;
+  quantityUoMUuid: string;
+  expiration: string;
+  commonName: string | null;
+  acronym: string | null;
+  drugName: string | null;
+  conceptName: string | null;
+  resourceVersion: string;
+};
+
+export type StockDispenseRequest = {
+  dispenseLocation: string;
+  patient: string;
+  order: string;
+  encounter: string;
+  stockItem: string;
+  stockBatch: string;
+  stockItemPackagingUOM: string;
+  quantity: number;
+};
+export interface Result {
+  uuid: string;
+  orderNumber: string;
+  accessionNumber: string;
+  patient: Patient;
+  concept: Concept;
+  action: string;
+  careSetting: CareSetting;
+  previousOrder: PreviousOrder;
+  dateActivated: string;
+  scheduledDate: any;
+  dateStopped: any;
+  autoExpireDate: any;
+  encounter: Encounter;
+  orderer: Orderer;
+  orderReason: any;
+  orderReasonNonCoded: any;
+  orderType: OrderType;
+  urgency: string;
+  instructions: any;
+  commentToFulfiller: any;
+  display: string;
+  auditInfo: AuditInfo;
+  fulfillerStatus: string;
+  fulfillerComment: any;
+  specimenSource: SpecimenSource;
+  laterality: any;
+  clinicalHistory: any;
+  frequency: any;
+  numberOfRepeats: any;
+  links: Link[];
+  type: string;
+  resourceVersion: string;
+  quantity: number;
+  quantityUnits: NonDrugDispensingUnit;
+}
+
+export interface CareSetting {
+  uuid: string;
+  name: string;
+  description: string;
+  retired: boolean;
+  careSettingType: string;
+  display: string;
+  links: Link[];
+  resourceVersion: string;
+}
+export interface Orderer {
+  uuid: string;
+  display: string;
+  links: Link[];
+}
+
+export interface OrderType {
+  uuid: string;
+  display: string;
+  name: string;
+  javaClassName: string;
+  retired: boolean;
+  description: string;
+  conceptClasses: any[];
+  parent: any;
+  links: Link[];
+  resourceVersion: string;
+}
+
+export interface AuditInfo {
+  creator: Creator;
+  dateCreated: string;
+  changedBy: any;
+  dateChanged: any;
+}
+export interface Creator {
+  uuid: string;
+  display: string;
+  links: Link[];
+}
+export interface SpecimenSource {
+  uuid: string;
+  display: string;
+  links: Link[];
+}
+export interface PreviousOrder {
+  uuid: string;
+  display: string;
+  links: Link[];
+  type: string;
+}
+export interface NonDrugDispensingUnit {
+  uuid: string;
+  display: string;
+}
diff --git a/packages/esm-medical-supply-dispensing-app/src/utils.test.ts b/packages/esm-medical-supply-dispensing-app/src/utils.test.ts
new file mode 100644
index 0000000..2ef32c6
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/utils.test.ts
@@ -0,0 +1,2846 @@
+import {
+  type Coding,
+  type DosageInstruction,
+  type Medication,
+  type MedicationDispense,
+  MedicationDispenseStatus,
+  type MedicationReferenceOrCodeableConcept,
+  type MedicationRequest,
+  type MedicationRequestBundle,
+  MedicationRequestCombinedStatus,
+  MedicationRequestFulfillerStatus,
+  MedicationRequestStatus,
+} from './types';
+import {
+  computeMedicationRequestCombinedStatus,
+  computeMedicationRequestStatus,
+  computeNewFulfillerStatusAfterDelete,
+  computeNewFulfillerStatusAfterDispenseEvent,
+  computePrescriptionStatus,
+  computeQuantityRemaining,
+  computeTotalQuantityDispensed,
+  computeTotalQuantityOrdered,
+  getAssociatedMedicationDispenses,
+  getAssociatedMedicationRequest,
+  getConceptCoding,
+  getConceptCodingDisplay,
+  getConceptCodingUuid,
+  getDosageInstruction,
+  getMedicationDisplay,
+  getMedicationReferenceOrCodeableConcept,
+  getMedicationsByConceptEndpoint,
+  getMostRecentMedicationDispenseStatus,
+  getNextMostRecentMedicationDispenseStatus,
+  getOpenMRSMedicineDrugName,
+  getPrescriptionDetailsEndpoint,
+  getPrescriptionTableActiveMedicationRequestsEndpoint,
+  getPrescriptionTableAllMedicationRequestsEndpoint,
+  getQuantity,
+  getQuantityUnitsMatch,
+  getRefillsAllowed,
+  isMostRecentMedicationDispense,
+} from './utils';
+import dayjs from 'dayjs';
+
+describe('Util Tests', () => {
+  describe('test computeMedicationRequestCombinedStatus', () => {
+    test('should return on-hold if status active and fulfiller status on-hold', () => {
+      const medicationRequest: MedicationRequest = {
+        dispenseRequest: {
+          numberOfRepeatsAllowed: 0,
+          quantity: undefined,
+          validityPeriod: { start: '' },
+        },
+        dosageInstruction: undefined,
+        encounter: { reference: '', type: '' },
+        id: '',
+        intent: '',
+        medicationReference: { display: '', reference: '', type: '' },
+        meta: { lastUpdated: '' },
+        priority: '',
+        requester: {
+          display: '',
+          identifier: { value: '' },
+          reference: '',
+          type: '',
+        },
+        resourceType: '',
+        status: MedicationRequestStatus.active,
+        subject: { display: '', reference: '', type: '' },
+        extension: [
+          {
+            url: 'http://fhir.openmrs.org/ext/medicationrequest/fullfillerstatus',
+            valueCode: MedicationRequestFulfillerStatus.on_hold,
+          },
+        ],
+      };
+      expect(computeMedicationRequestCombinedStatus(medicationRequest, 90)).toBe(
+        MedicationRequestCombinedStatus.on_hold,
+      );
+    });
+    test('should return declined if status active and fulfiller status declined', () => {
+      const medicationRequest: MedicationRequest = {
+        dispenseRequest: {
+          numberOfRepeatsAllowed: 0,
+          quantity: undefined,
+          validityPeriod: { start: '' },
+        },
+        dosageInstruction: undefined,
+        encounter: { reference: '', type: '' },
+        id: '',
+        intent: '',
+        medicationReference: { display: '', reference: '', type: '' },
+        meta: { lastUpdated: '' },
+        priority: '',
+        requester: {
+          display: '',
+          identifier: { value: '' },
+          reference: '',
+          type: '',
+        },
+        resourceType: '',
+        status: MedicationRequestStatus.active,
+        subject: { display: '', reference: '', type: '' },
+        extension: [
+          {
+            url: 'http://fhir.openmrs.org/ext/medicationrequest/fullfillerstatus',
+            valueCode: MedicationRequestFulfillerStatus.declined,
+          },
+        ],
+      };
+      expect(computeMedicationRequestCombinedStatus(medicationRequest, 90)).toBe(
+        MedicationRequestCombinedStatus.declined,
+      );
+    });
+    test('should return completed if status completed and fulfiller status completed', () => {
+      const medicationRequest: MedicationRequest = {
+        dispenseRequest: {
+          numberOfRepeatsAllowed: 0,
+          quantity: undefined,
+          validityPeriod: { start: '' },
+        },
+        dosageInstruction: undefined,
+        encounter: { reference: '', type: '' },
+        id: '',
+        intent: '',
+        medicationReference: { display: '', reference: '', type: '' },
+        meta: { lastUpdated: '' },
+        priority: '',
+        requester: {
+          display: '',
+          identifier: { value: '' },
+          reference: '',
+          type: '',
+        },
+        resourceType: '',
+        status: MedicationRequestStatus.completed,
+        subject: { display: '', reference: '', type: '' },
+        extension: [
+          {
+            url: 'http://fhir.openmrs.org/ext/medicationrequest/fullfillerstatus',
+            valueCode: MedicationRequestFulfillerStatus.completed,
+          },
+        ],
+      };
+      expect(computeMedicationRequestCombinedStatus(medicationRequest, 90)).toBe(
+        MedicationRequestCombinedStatus.completed,
+      );
+    });
+    test('should return cancelled if status cancelled and no fulfiller status', () => {
+      const medicationRequest: MedicationRequest = {
+        dispenseRequest: {
+          numberOfRepeatsAllowed: 0,
+          quantity: undefined,
+          validityPeriod: { start: '' },
+        },
+        dosageInstruction: undefined,
+        encounter: { reference: '', type: '' },
+        id: '',
+        intent: '',
+        medicationReference: { display: '', reference: '', type: '' },
+        meta: { lastUpdated: '' },
+        priority: '',
+        requester: {
+          display: '',
+          identifier: { value: '' },
+          reference: '',
+          type: '',
+        },
+        resourceType: '',
+        status: MedicationRequestStatus.cancelled,
+        subject: { display: '', reference: '', type: '' },
+      };
+      expect(computeMedicationRequestCombinedStatus(medicationRequest, 90)).toBe(
+        MedicationRequestCombinedStatus.cancelled,
+      );
+    });
+    test('should return cancelled if status cancelled and fulfiller on-hold', () => {
+      const medicationRequest: MedicationRequest = {
+        dispenseRequest: {
+          numberOfRepeatsAllowed: 0,
+          quantity: undefined,
+          validityPeriod: { start: '' },
+        },
+        dosageInstruction: undefined,
+        encounter: { reference: '', type: '' },
+        id: '',
+        intent: '',
+        medicationReference: { display: '', reference: '', type: '' },
+        meta: { lastUpdated: '' },
+        priority: '',
+        requester: {
+          display: '',
+          identifier: { value: '' },
+          reference: '',
+          type: '',
+        },
+        resourceType: '',
+        status: MedicationRequestStatus.cancelled,
+        subject: { display: '', reference: '', type: '' },
+        extension: [
+          {
+            url: 'http://fhir.openmrs.org/ext/medicationrequest/fullfillerstatus',
+            valueCode: MedicationRequestFulfillerStatus.on_hold,
+          },
+        ],
+      };
+      expect(computeMedicationRequestCombinedStatus(medicationRequest, 90)).toBe(
+        MedicationRequestCombinedStatus.cancelled,
+      );
+    });
+    test('should return cancelled if status cancelled and fulfiller declined', () => {
+      const medicationRequest: MedicationRequest = {
+        dispenseRequest: {
+          numberOfRepeatsAllowed: 0,
+          quantity: undefined,
+          validityPeriod: { start: '' },
+        },
+        dosageInstruction: undefined,
+        encounter: { reference: '', type: '' },
+        id: '',
+        intent: '',
+        medicationReference: { display: '', reference: '', type: '' },
+        meta: { lastUpdated: '' },
+        priority: '',
+        requester: {
+          display: '',
+          identifier: { value: '' },
+          reference: '',
+          type: '',
+        },
+        resourceType: '',
+        status: MedicationRequestStatus.cancelled,
+        subject: { display: '', reference: '', type: '' },
+        extension: [
+          {
+            url: 'http://fhir.openmrs.org/ext/medicationrequest/fullfillerstatus',
+            valueCode: MedicationRequestFulfillerStatus.declined,
+          },
+        ],
+      };
+      expect(computeMedicationRequestCombinedStatus(medicationRequest, 90)).toBe(
+        MedicationRequestCombinedStatus.cancelled,
+      );
+    });
+    test('should return expired if validity period over 90 days ago and no fulfiller status', () => {
+      const medicationRequest: MedicationRequest = {
+        dispenseRequest: {
+          numberOfRepeatsAllowed: 0,
+          quantity: undefined,
+          validityPeriod: { start: '2020-04-04' },
+        },
+        dosageInstruction: undefined,
+        encounter: { reference: '', type: '' },
+        id: '',
+        intent: '',
+        medicationReference: { display: '', reference: '', type: '' },
+        meta: { lastUpdated: '' },
+        priority: '',
+        requester: {
+          display: '',
+          identifier: { value: '' },
+          reference: '',
+          type: '',
+        },
+        resourceType: '',
+        status: MedicationRequestStatus.active,
+        subject: { display: '', reference: '', type: '' },
+      };
+      expect(computeMedicationRequestCombinedStatus(medicationRequest, 90)).toBe(
+        MedicationRequestCombinedStatus.expired,
+      );
+    });
+    test('should return expired if validity period over 90 days and fulfiller status on-hold', () => {
+      const medicationRequest: MedicationRequest = {
+        dispenseRequest: {
+          numberOfRepeatsAllowed: 0,
+          quantity: undefined,
+          validityPeriod: { start: '2020-04-04' },
+        },
+        dosageInstruction: undefined,
+        encounter: { reference: '', type: '' },
+        id: '',
+        intent: '',
+        medicationReference: { display: '', reference: '', type: '' },
+        meta: { lastUpdated: '' },
+        priority: '',
+        requester: {
+          display: '',
+          identifier: { value: '' },
+          reference: '',
+          type: '',
+        },
+        resourceType: '',
+        status: MedicationRequestStatus.active,
+        subject: { display: '', reference: '', type: '' },
+        extension: [
+          {
+            url: 'http://fhir.openmrs.org/ext/medicationrequest/fullfillerstatus',
+            valueCode: MedicationRequestFulfillerStatus.on_hold,
+          },
+        ],
+      };
+      expect(computeMedicationRequestCombinedStatus(medicationRequest, 90)).toBe(
+        MedicationRequestCombinedStatus.expired,
+      );
+    });
+    test('should return expired if validity period over 90 days and fulfiller status declined', () => {
+      const medicationRequest: MedicationRequest = {
+        dispenseRequest: {
+          numberOfRepeatsAllowed: 0,
+          quantity: undefined,
+          validityPeriod: { start: '2020-04-04' },
+        },
+        dosageInstruction: undefined,
+        encounter: { reference: '', type: '' },
+        id: '',
+        intent: '',
+        medicationReference: { display: '', reference: '', type: '' },
+        meta: { lastUpdated: '' },
+        priority: '',
+        requester: {
+          display: '',
+          identifier: { value: '' },
+          reference: '',
+          type: '',
+        },
+        resourceType: '',
+        status: MedicationRequestStatus.active,
+        subject: { display: '', reference: '', type: '' },
+        extension: [
+          {
+            url: 'http://fhir.openmrs.org/ext/medicationrequest/fullfillerstatus',
+            valueCode: MedicationRequestFulfillerStatus.declined,
+          },
+        ],
+      };
+      expect(computeMedicationRequestCombinedStatus(medicationRequest, 90)).toBe(
+        MedicationRequestCombinedStatus.expired,
+      );
+    });
+  });
+
+  describe('test computeMedicationRequestStatus', () => {
+    test('should return Cancelled if Medication Request has status cancelled', () => {
+      const medicationRequest: MedicationRequest = {
+        dispenseRequest: {
+          numberOfRepeatsAllowed: 0,
+          quantity: undefined,
+          validityPeriod: { start: '' },
+        },
+        dosageInstruction: undefined,
+        encounter: { reference: '', type: '' },
+        id: '',
+        intent: '',
+        medicationReference: { display: '', reference: '', type: '' },
+        meta: { lastUpdated: '' },
+        priority: '',
+        requester: {
+          display: '',
+          identifier: { value: '' },
+          reference: '',
+          type: '',
+        },
+        resourceType: '',
+        status: MedicationRequestStatus.cancelled,
+        subject: { display: '', reference: '', type: '' },
+      };
+      expect(computeMedicationRequestStatus(medicationRequest, 0)).toBe(MedicationRequestStatus.cancelled);
+    });
+    test('should return Completed if Medication Request has status completed', () => {
+      const medicationRequest: MedicationRequest = {
+        dispenseRequest: {
+          numberOfRepeatsAllowed: 0,
+          quantity: undefined,
+          validityPeriod: { start: '' },
+        },
+        dosageInstruction: undefined,
+        encounter: { reference: '', type: '' },
+        id: '',
+        intent: '',
+        medicationReference: { display: '', reference: '', type: '' },
+        meta: { lastUpdated: '' },
+        priority: '',
+        requester: {
+          display: '',
+          identifier: { value: '' },
+          reference: '',
+          type: '',
+        },
+        resourceType: '',
+        status: MedicationRequestStatus.completed,
+        subject: { display: '', reference: '', type: '' },
+      };
+      expect(computeMedicationRequestStatus(medicationRequest, 0)).toBe(MedicationRequestStatus.completed);
+    });
+    test('should return Expired if Medication Request older than expired timeframe', () => {
+      const medicationRequest: MedicationRequest = {
+        dispenseRequest: {
+          numberOfRepeatsAllowed: 0,
+          quantity: undefined,
+          validityPeriod: { start: dayjs().subtract(91, 'days').toString() },
+        },
+        dosageInstruction: undefined,
+        encounter: { reference: '', type: '' },
+        id: '',
+        intent: '',
+        medicationReference: { display: '', reference: '', type: '' },
+        meta: { lastUpdated: '' },
+        priority: '',
+        requester: {
+          display: '',
+          identifier: { value: '' },
+          reference: '',
+          type: '',
+        },
+        resourceType: '',
+        status: null,
+        subject: { display: '', reference: '', type: '' },
+      };
+      expect(computeMedicationRequestStatus(medicationRequest, 90)).toBe(MedicationRequestStatus.expired);
+    });
+    test('should return Expired if Medication Request age is passed expired timeframe', () => {
+      const medicationRequest: MedicationRequest = {
+        dispenseRequest: {
+          numberOfRepeatsAllowed: 0,
+          quantity: undefined,
+          validityPeriod: { start: dayjs().subtract(91, 'days').toString() },
+        },
+        dosageInstruction: undefined,
+        encounter: { reference: '', type: '' },
+        id: '',
+        intent: '',
+        medicationReference: { display: '', reference: '', type: '' },
+        meta: { lastUpdated: '' },
+        priority: '',
+        requester: {
+          display: '',
+          identifier: { value: '' },
+          reference: '',
+          type: '',
+        },
+        resourceType: '',
+        status: null,
+        subject: { display: '', reference: '', type: '' },
+      };
+      expect(computeMedicationRequestStatus(medicationRequest, 90)).toBe(MedicationRequestStatus.expired);
+    });
+    test('should return Active if Medication Request age is equal to expired timeframe (even if status is expired)', () => {
+      const medicationRequest: MedicationRequest = {
+        dispenseRequest: {
+          numberOfRepeatsAllowed: 0,
+          quantity: undefined,
+          validityPeriod: {
+            start: dayjs().startOf('day').subtract(90, 'days').toString(),
+          },
+        },
+        dosageInstruction: undefined,
+        encounter: { reference: '', type: '' },
+        id: '',
+        intent: '',
+        medicationReference: { display: '', reference: '', type: '' },
+        meta: { lastUpdated: '' },
+        priority: '',
+        requester: {
+          display: '',
+          identifier: { value: '' },
+          reference: '',
+          type: '',
+        },
+        resourceType: '',
+        status: MedicationRequestStatus.expired,
+        subject: { display: '', reference: '', type: '' },
+      };
+      expect(computeMedicationRequestStatus(medicationRequest, 90)).toBe(MedicationRequestStatus.active);
+    });
+    test('should return Active if Medication Request is age is less than expired timeframe (even if status is expired)', () => {
+      const medicationRequest: MedicationRequest = {
+        dispenseRequest: {
+          numberOfRepeatsAllowed: 0,
+          quantity: undefined,
+          validityPeriod: {
+            start: dayjs().startOf('day').subtract(90, 'days').toString(),
+          },
+        },
+        dosageInstruction: undefined,
+        encounter: { reference: '', type: '' },
+        id: '',
+        intent: '',
+        medicationReference: { display: '', reference: '', type: '' },
+        meta: { lastUpdated: '' },
+        priority: '',
+        requester: {
+          display: '',
+          identifier: { value: '' },
+          reference: '',
+          type: '',
+        },
+        resourceType: '',
+        status: MedicationRequestStatus.expired,
+        subject: { display: '', reference: '', type: '' },
+      };
+      expect(computeMedicationRequestStatus(medicationRequest, 90)).toBe(MedicationRequestStatus.active);
+    });
+    test('should return Active as default', () => {
+      const medicationRequest: MedicationRequest = {
+        dispenseRequest: {
+          numberOfRepeatsAllowed: 0,
+          quantity: undefined,
+          validityPeriod: { start: '' },
+        },
+        dosageInstruction: undefined,
+        encounter: { reference: '', type: '' },
+        id: '',
+        intent: '',
+        medicationReference: { display: '', reference: '', type: '' },
+        meta: { lastUpdated: '' },
+        priority: '',
+        requester: {
+          display: '',
+          identifier: { value: '' },
+          reference: '',
+          type: '',
+        },
+        resourceType: '',
+        status: null,
+        subject: { display: '', reference: '', type: '' },
+      };
+      expect(computeMedicationRequestStatus(medicationRequest, 90)).toBe(MedicationRequestStatus.active);
+    });
+  });
+
+  describe('test computeNewFulfillerStatusAfterDelete', () => {
+    const medicationRequest: MedicationRequest = {
+      id: '1c1ad91e-8653-453a-9f59-8d5c36249aff',
+      dispenseRequest: {
+        numberOfRepeatsAllowed: undefined,
+        quantity: {
+          value: 30,
+          unit: 'mg',
+          code: '123abc',
+        },
+        validityPeriod: { start: '' },
+      },
+      dosageInstruction: undefined,
+      encounter: { reference: '', type: '' },
+      intent: '',
+      medicationReference: { display: '', reference: '', type: '' },
+      meta: { lastUpdated: '' },
+      priority: '',
+      requester: {
+        display: '',
+        identifier: { value: '' },
+        reference: '',
+        type: '',
+      },
+      resourceType: 'MedicationRequest',
+      status: MedicationRequestStatus.completed,
+      subject: { display: '', reference: '', type: '' },
+      extension: [
+        {
+          url: 'http://fhir.openmrs.org/ext/medicationrequest/fullfillerstatus',
+          valueCode: MedicationRequestFulfillerStatus.declined,
+        },
+      ],
+    };
+
+    const medicationDispenseCompleteMostRecent: MedicationDispense = {
+      dosageInstruction: undefined,
+      id: 'ab663520-8b5f-4afe-a333-5196f69ccea7',
+      extension: [
+        {
+          url: 'http://fhir.openmrs.org/ext/medicationdispense/recorded',
+          valueDateTime: '2023-01-05T14:00:00-05:00',
+        },
+      ],
+      authorizingPrescription: [
+        {
+          reference: 'MedicationRequest/',
+          type: 'MedicationRequest',
+        },
+      ],
+      location: { display: '', reference: '', type: '' },
+      medicationReference: { display: '', reference: '', type: '' },
+      meta: { lastUpdated: '' },
+      quantity: {
+        value: 5,
+        unit: 'mg',
+        code: '123abc',
+      },
+      performer: undefined,
+      resourceType: 'MedicationDispense',
+      status: MedicationDispenseStatus.completed,
+      subject: { display: '', reference: '', type: '' },
+      substitution: { reason: [], type: undefined, wasSubstituted: false },
+      type: undefined,
+      whenHandedOver: '2023-01-05T14:00:00-05:00',
+      whenPrepared: '2023-01-05T14:00:00-05:00',
+    };
+
+    const medicationDispenseDeclined: MedicationDispense = {
+      dosageInstruction: undefined,
+      id: '9f7987e8-95c6-42f3-96e6-fd2eaa3134a5',
+      extension: [
+        {
+          url: 'http://fhir.openmrs.org/ext/medicationdispense/recorded',
+          valueDateTime: '2023-01-04T14:00:00-05:00',
+        },
+      ],
+      authorizingPrescription: [
+        {
+          reference: 'MedicationRequest/1c1ad91e-8653-453a-9f59-8d5c36249aff',
+          type: 'MedicationRequest',
+        },
+      ],
+      location: { display: '', reference: '', type: '' },
+      medicationReference: { display: '', reference: '', type: '' },
+      meta: { lastUpdated: '' },
+      quantity: {
+        value: 5,
+        unit: 'mg',
+        code: '123abc',
+      },
+      performer: undefined,
+      resourceType: 'MedicationDispense',
+      status: MedicationDispenseStatus.declined,
+      subject: { display: '', reference: '', type: '' },
+      substitution: { reason: [], type: undefined, wasSubstituted: false },
+      type: undefined,
+      whenHandedOver: '2023-01-04T14:00:00-05:00',
+      whenPrepared: '2023-01-04T14:00:00-05:00',
+    };
+
+    const medicationDispenseOnHold: MedicationDispense = {
+      dosageInstruction: undefined,
+      id: 'e2bf7117-aa87-4a92-9e61-f985f29a82aa',
+      extension: [
+        {
+          url: 'http://fhir.openmrs.org/ext/medicationdispense/recorded',
+          valueDateTime: '2023-01-03T14:00:00-05:00',
+        },
+      ],
+      authorizingPrescription: [
+        {
+          reference: 'MedicationRequest/1c1ad91e-8653-453a-9f59-8d5c36249aff',
+          type: 'MedicationRequest',
+        },
+      ],
+      location: { display: '', reference: '', type: '' },
+      medicationReference: { display: '', reference: '', type: '' },
+      meta: { lastUpdated: '' },
+      quantity: {
+        value: 5,
+        unit: 'mg',
+        code: '123abc',
+      },
+      performer: undefined,
+      resourceType: 'MedicationDispense',
+      status: MedicationDispenseStatus.on_hold,
+      subject: { display: '', reference: '', type: '' },
+      substitution: { reason: [], type: undefined, wasSubstituted: false },
+      type: undefined,
+      whenHandedOver: '2023-01-03T14:00:00-05:00',
+      whenPrepared: '2023-01-03T14:00:00-05:00',
+    };
+
+    const medicationDispenseCompleteOldest: MedicationDispense = {
+      dosageInstruction: undefined,
+      id: '7fd2dcd2-6621-444d-9054-fe1d36acf498',
+      extension: [
+        {
+          url: 'http://fhir.openmrs.org/ext/medicationdispense/recorded',
+          valueDateTime: '2023-01-01T14:00:00-05:00',
+        },
+      ],
+      authorizingPrescription: [
+        {
+          reference: 'MedicationRequest/',
+          type: 'MedicationRequest',
+        },
+      ],
+      location: { display: '', reference: '', type: '' },
+      medicationReference: { display: '', reference: '', type: '' },
+      meta: { lastUpdated: '' },
+      quantity: {
+        value: 5,
+        unit: 'mg',
+        code: '123abc',
+      },
+      performer: undefined,
+      resourceType: 'MedicationDispense',
+      status: MedicationDispenseStatus.completed,
+      subject: { display: '', reference: '', type: '' },
+      substitution: { reason: [], type: undefined, wasSubstituted: false },
+      type: undefined,
+      whenHandedOver: '2023-01-01T14:00:00-05:00',
+      whenPrepared: '2023-01-01T14:00:00-05:00',
+    };
+
+    test('should return declined if deleting most recent medication dispense and next most recent status declined', () => {
+      const medicationRequestBundle: MedicationRequestBundle = {
+        request: medicationRequest,
+        dispenses: [
+          medicationDispenseCompleteMostRecent,
+          medicationDispenseDeclined,
+          medicationDispenseOnHold,
+          medicationDispenseCompleteOldest,
+        ],
+      };
+
+      expect(
+        computeNewFulfillerStatusAfterDelete(medicationDispenseCompleteMostRecent, medicationRequestBundle, false),
+      ).toBe(MedicationRequestFulfillerStatus.declined);
+    }),
+      test('should return on-hold if deleting most recent medication dispense next most recent status on-hold', () => {
+        const medicationRequestBundle: MedicationRequestBundle = {
+          request: medicationRequest,
+          dispenses: [medicationDispenseCompleteMostRecent, medicationDispenseOnHold, medicationDispenseCompleteOldest],
+        };
+
+        expect(
+          computeNewFulfillerStatusAfterDelete(medicationDispenseCompleteMostRecent, medicationRequestBundle, false),
+        ).toBe(MedicationRequestFulfillerStatus.on_hold);
+      }),
+      test('should return null if deleting only medication dispense', () => {
+        const medicationRequestBundle: MedicationRequestBundle = {
+          request: medicationRequest,
+          dispenses: [medicationDispenseCompleteMostRecent],
+        };
+
+        expect(
+          computeNewFulfillerStatusAfterDelete(medicationDispenseCompleteMostRecent, medicationRequestBundle, false),
+        ).toBeNull();
+      }),
+      test('should return current fulfiller status if not most recent medication dispense and deleted dispense does not have status of completed', () => {
+        const medicationRequestBundle: MedicationRequestBundle = {
+          request: medicationRequest,
+          dispenses: [medicationDispenseDeclined, medicationDispenseOnHold],
+        };
+
+        expect(computeNewFulfillerStatusAfterDelete(medicationDispenseOnHold, medicationRequestBundle, false)).toBe(
+          MedicationRequestFulfillerStatus.declined,
+        );
+      });
+  });
+
+  describe('test computeNewFulfillerStatusAfterDispenseEvent', () => {
+    const medicationRequest: MedicationRequest = {
+      id: '1c1ad91e-8653-453a-9f59-8d5c36249aff',
+      dispenseRequest: {
+        numberOfRepeatsAllowed: undefined,
+        quantity: {
+          value: 30,
+          unit: 'mg',
+          code: '123abc',
+        },
+        validityPeriod: { start: '' },
+      },
+      dosageInstruction: undefined,
+      encounter: { reference: '', type: '' },
+      intent: '',
+      medicationReference: { display: '', reference: '', type: '' },
+      meta: { lastUpdated: '' },
+      priority: '',
+      requester: {
+        display: '',
+        identifier: { value: '' },
+        reference: '',
+        type: '',
+      },
+      resourceType: 'MedicationRequest',
+      status: null,
+      subject: { display: '', reference: '', type: '' },
+      extension: [
+        {
+          url: 'http://fhir.openmrs.org/ext/medicationrequest/fullfillerstatus',
+          valueCode: MedicationRequestFulfillerStatus.completed,
+        },
+      ],
+    };
+
+    const newMedicationDispense: MedicationDispense = {
+      // ie quantity dispense = quantity ordered
+      dosageInstruction: undefined,
+      id: '',
+      extension: [
+        {
+          url: 'http://fhir.openmrs.org/ext/medicationdispense/recorded',
+          valueDateTime: '',
+        },
+      ],
+      authorizingPrescription: [
+        {
+          reference: 'MedicationRequest/',
+          type: 'MedicationRequest',
+        },
+      ],
+      location: { display: '', reference: '', type: '' },
+      medicationReference: { display: '', reference: '', type: '' },
+      meta: { lastUpdated: '' },
+      quantity: {
+        value: null,
+        unit: 'mg',
+        code: '123abc',
+      },
+      performer: undefined,
+      resourceType: 'MedicationDispense',
+      status: null,
+      subject: { display: '', reference: '', type: '' },
+      substitution: { reason: [], type: undefined, wasSubstituted: false },
+      type: undefined,
+      whenHandedOver: '',
+      whenPrepared: '',
+    };
+
+    const existingMedicationDispense: MedicationDispense = {
+      // ie quantity dispense = quantity ordered
+      dosageInstruction: undefined,
+      id: 'ab663520-8b5f-4afe-a333-5196f69ccea7',
+      extension: [
+        {
+          url: 'http://fhir.openmrs.org/ext/medicationdispense/recorded',
+          valueDateTime: '',
+        },
+      ],
+      authorizingPrescription: [
+        {
+          reference: 'MedicationRequest/',
+          type: 'MedicationRequest',
+        },
+      ],
+      location: { display: '', reference: '', type: '' },
+      medicationReference: { display: '', reference: '', type: '' },
+      meta: { lastUpdated: '' },
+      quantity: {
+        value: null,
+        unit: 'mg',
+        code: '123abc',
+      },
+      performer: undefined,
+      resourceType: 'MedicationDispense',
+      status: null,
+      subject: { display: '', reference: '', type: '' },
+      substitution: { reason: [], type: undefined, wasSubstituted: false },
+      type: undefined,
+      whenHandedOver: '',
+      whenPrepared: '',
+    };
+
+    test('when adding new dispense should return null even if dispense meets or exceeds quantity if restrict total quantity dispensed config is false', () => {
+      newMedicationDispense.extension[0].valueDateTime = '2023-01-03T14:00:00-05:00';
+      newMedicationDispense.whenHandedOver = '2023-01-03T14:00:00-05:00';
+      newMedicationDispense.whenPrepared = '2023-01-03T14:00:00-05:00';
+      newMedicationDispense.status = MedicationDispenseStatus.completed;
+      newMedicationDispense.quantity.value = 30;
+      expect(
+        computeNewFulfillerStatusAfterDispenseEvent(
+          newMedicationDispense,
+          { request: medicationRequest, dispenses: [] },
+          false,
+        ),
+      ).toBeNull();
+    });
+
+    test('when adding new dispense should return on-hold if status of new dispense is on-hold and if restrict total quantity dispensed config is false', () => {
+      newMedicationDispense.extension[0].valueDateTime = '2023-01-03T14:00:00-05:00';
+      newMedicationDispense.status = MedicationDispenseStatus.on_hold;
+      newMedicationDispense.quantity.value = 0;
+      expect(
+        computeNewFulfillerStatusAfterDispenseEvent(
+          newMedicationDispense,
+          { request: medicationRequest, dispenses: [] },
+          false,
+        ),
+      ).toBe(MedicationRequestFulfillerStatus.on_hold);
+    });
+
+    test('when adding new dispense should return complete if total dispensed equals total ordered and restrict total quantity dispensed config is true', () => {
+      newMedicationDispense.extension[0].valueDateTime = '2023-01-03T14:00:00-05:00';
+      newMedicationDispense.status = MedicationDispenseStatus.completed;
+      newMedicationDispense.quantity.value = 30;
+      expect(
+        computeNewFulfillerStatusAfterDispenseEvent(
+          newMedicationDispense,
+          { request: medicationRequest, dispenses: [] },
+          true,
+        ),
+      ).toBe(MedicationRequestFulfillerStatus.completed);
+    });
+
+    test('when adding new dispense should return null if total dispensed less than total ordered and restrict total quantity dispensed config is true', () => {
+      newMedicationDispense.extension[0].valueDateTime = '2023-01-03T14:00:00-05:00';
+      newMedicationDispense.status = MedicationDispenseStatus.completed;
+      newMedicationDispense.quantity.value = 20;
+      expect(
+        computeNewFulfillerStatusAfterDispenseEvent(
+          newMedicationDispense,
+          { request: medicationRequest, dispenses: [] },
+          true,
+        ),
+      ).toBeNull();
+    });
+
+    test('when adding new on-hold dispense should return on-hold if restrict total quantity dispensed config is true', () => {
+      newMedicationDispense.extension[0].valueDateTime = '2023-01-03T14:00:00-05:00';
+      newMedicationDispense.status = MedicationDispenseStatus.on_hold;
+      newMedicationDispense.quantity.value = 0;
+      expect(
+        computeNewFulfillerStatusAfterDispenseEvent(
+          newMedicationDispense,
+          { request: medicationRequest, dispenses: [] },
+          true,
+        ),
+      ).toBe(MedicationRequestFulfillerStatus.on_hold);
+    });
+
+    test('when adding new dispense to request with existing dispense should return complete if meets total quantity ordered and restrict total quantity dispensed config is true', () => {
+      newMedicationDispense.extension[0].valueDateTime = '2023-01-03T14:00:00-05:00';
+      newMedicationDispense.status = MedicationDispenseStatus.on_hold;
+      newMedicationDispense.quantity.value = 20;
+      existingMedicationDispense.extension[0].valueDateTime = '2023-01-03T14:00:00-05:00';
+      existingMedicationDispense.status = MedicationDispenseStatus.on_hold;
+      existingMedicationDispense.quantity.value = 10;
+      expect(
+        computeNewFulfillerStatusAfterDispenseEvent(
+          newMedicationDispense,
+          {
+            request: medicationRequest,
+            dispenses: [existingMedicationDispense],
+          },
+          true,
+        ),
+      ).toBe(MedicationRequestFulfillerStatus.completed);
+    });
+
+    test('when adding new dispense to request with existing dispense should return null if does not meet total quantiy order and  restrict total quantity dispensed config is true', () => {
+      newMedicationDispense.extension[0].valueDateTime = '2023-01-03T14:00:00-05:00';
+      newMedicationDispense.status = MedicationDispenseStatus.completed;
+      newMedicationDispense.quantity.value = 10;
+      existingMedicationDispense.extension[0].valueDateTime = '2023-01-03T14:00:00-05:00';
+      existingMedicationDispense.status = MedicationDispenseStatus.completed;
+      existingMedicationDispense.quantity.value = 10;
+      expect(
+        computeNewFulfillerStatusAfterDispenseEvent(
+          newMedicationDispense,
+          {
+            request: medicationRequest,
+            dispenses: [existingMedicationDispense],
+          },
+          true,
+        ),
+      ).toBeNull();
+    });
+
+    test('when editing existing dispense should return null if does not meet total quantity order and  restrict total quantity dispensed config is true', () => {
+      existingMedicationDispense.extension[0].valueDateTime = '2023-01-03T14:00:00-05:00';
+      existingMedicationDispense.status = MedicationDispenseStatus.completed;
+      existingMedicationDispense.quantity.value = 30;
+      const editedExistingMedicationDispense = {
+        ...existingMedicationDispense,
+      };
+      editedExistingMedicationDispense.quantity.value = 20;
+      expect(
+        computeNewFulfillerStatusAfterDispenseEvent(
+          editedExistingMedicationDispense,
+          {
+            request: medicationRequest,
+            dispenses: [existingMedicationDispense],
+          },
+          true,
+        ),
+      ).toBeNull();
+    });
+
+    test('when editing existing dispense should return complete if meets total quantity order and  restrict total quantity dispensed config is true', () => {
+      existingMedicationDispense.extension[0].valueDateTime = '2023-01-03T14:00:00-05:00';
+      existingMedicationDispense.status = MedicationDispenseStatus.completed;
+      existingMedicationDispense.quantity.value = 20;
+      const editedExistingMedicationDispense = {
+        ...existingMedicationDispense,
+      };
+      editedExistingMedicationDispense.quantity.value = 30;
+      expect(
+        computeNewFulfillerStatusAfterDispenseEvent(
+          editedExistingMedicationDispense,
+          {
+            request: medicationRequest,
+            dispenses: [existingMedicationDispense],
+          },
+          true,
+        ),
+      ).toBe(MedicationRequestFulfillerStatus.completed);
+    });
+  });
+
+  describe('test computePrescriptionStatus', () => {
+    const activeMedicationRequest = {
+      dispenseRequest: {
+        numberOfRepeatsAllowed: 0,
+        quantity: undefined,
+        validityPeriod: { start: '' },
+      },
+      dosageInstruction: undefined,
+      encounter: { reference: '', type: '' },
+      id: '',
+      intent: '',
+      medicationReference: { display: '', reference: '', type: '' },
+      meta: { lastUpdated: '' },
+      priority: '',
+      requester: {
+        display: '',
+        identifier: { value: '' },
+        reference: '',
+        type: '',
+      },
+      resourceType: '',
+      status: MedicationRequestStatus.active,
+      subject: { display: '', reference: '', type: '' },
+    };
+    // sanity check
+    expect(computeMedicationRequestCombinedStatus(activeMedicationRequest, 90)).toBe(
+      MedicationRequestCombinedStatus.active,
+    );
+    const cancelledMedicationRequest = {
+      dispenseRequest: {
+        numberOfRepeatsAllowed: 0,
+        quantity: undefined,
+        validityPeriod: { start: '' },
+      },
+      dosageInstruction: undefined,
+      encounter: { reference: '', type: '' },
+      id: '',
+      intent: '',
+      medicationReference: { display: '', reference: '', type: '' },
+      meta: { lastUpdated: '' },
+      priority: '',
+      requester: {
+        display: '',
+        identifier: { value: '' },
+        reference: '',
+        type: '',
+      },
+      resourceType: '',
+      status: MedicationRequestStatus.cancelled,
+      subject: { display: '', reference: '', type: '' },
+    };
+    // sanity check
+    expect(computeMedicationRequestCombinedStatus(cancelledMedicationRequest, 90)).toBe(
+      MedicationRequestCombinedStatus.cancelled,
+    );
+    const expiredMedicationRequest = {
+      dispenseRequest: {
+        numberOfRepeatsAllowed: 0,
+        quantity: undefined,
+        validityPeriod: { start: '2020-04-04' },
+      },
+      dosageInstruction: undefined,
+      encounter: { reference: '', type: '' },
+      id: '',
+      intent: '',
+      medicationReference: { display: '', reference: '', type: '' },
+      meta: { lastUpdated: '' },
+      priority: '',
+      requester: {
+        display: '',
+        identifier: { value: '' },
+        reference: '',
+        type: '',
+      },
+      resourceType: '',
+      status: MedicationRequestStatus.active,
+      subject: { display: '', reference: '', type: '' },
+    };
+    // sanity check
+    expect(computeMedicationRequestCombinedStatus(expiredMedicationRequest, 90)).toBe(
+      MedicationRequestCombinedStatus.expired,
+    );
+    const onHoldMedicationRequest = {
+      dispenseRequest: {
+        numberOfRepeatsAllowed: 0,
+        quantity: undefined,
+        validityPeriod: { start: '' },
+      },
+      dosageInstruction: undefined,
+      encounter: { reference: '', type: '' },
+      id: '',
+      intent: '',
+      medicationReference: { display: '', reference: '', type: '' },
+      meta: { lastUpdated: '' },
+      priority: '',
+      requester: {
+        display: '',
+        identifier: { value: '' },
+        reference: '',
+        type: '',
+      },
+      resourceType: '',
+      status: MedicationRequestStatus.active,
+      subject: { display: '', reference: '', type: '' },
+      extension: [
+        {
+          url: 'http://fhir.openmrs.org/ext/medicationrequest/fullfillerstatus',
+          valueCode: MedicationRequestFulfillerStatus.on_hold,
+        },
+      ],
+    };
+    // sanity check
+    expect(computeMedicationRequestCombinedStatus(onHoldMedicationRequest, 90)).toBe(
+      MedicationRequestCombinedStatus.on_hold,
+    );
+    const declinedMedicationRequest = {
+      dispenseRequest: {
+        numberOfRepeatsAllowed: 0,
+        quantity: undefined,
+        validityPeriod: { start: '' },
+      },
+      dosageInstruction: undefined,
+      encounter: { reference: '', type: '' },
+      id: '',
+      intent: '',
+      medicationReference: { display: '', reference: '', type: '' },
+      meta: { lastUpdated: '' },
+      priority: '',
+      requester: {
+        display: '',
+        identifier: { value: '' },
+        reference: '',
+        type: '',
+      },
+      resourceType: '',
+      status: MedicationRequestStatus.active,
+      subject: { display: '', reference: '', type: '' },
+      extension: [
+        {
+          url: 'http://fhir.openmrs.org/ext/medicationrequest/fullfillerstatus',
+          valueCode: MedicationRequestFulfillerStatus.declined,
+        },
+      ],
+    };
+    // santity check
+    expect(computeMedicationRequestCombinedStatus(declinedMedicationRequest, 90)).toBe(
+      MedicationRequestCombinedStatus.declined,
+    );
+    const completedMedicationRequest = {
+      dispenseRequest: {
+        numberOfRepeatsAllowed: 0,
+        quantity: undefined,
+        validityPeriod: { start: '' },
+      },
+      dosageInstruction: undefined,
+      encounter: { reference: '', type: '' },
+      id: '',
+      intent: '',
+      medicationReference: { display: '', reference: '', type: '' },
+      meta: { lastUpdated: '' },
+      priority: '',
+      requester: {
+        display: '',
+        identifier: { value: '' },
+        reference: '',
+        type: '',
+      },
+      resourceType: '',
+      status: MedicationRequestStatus.completed,
+      subject: { display: '', reference: '', type: '' },
+      extension: [
+        {
+          url: 'http://fhir.openmrs.org/ext/medicationrequest/fullfillerstatus',
+          valueCode: MedicationRequestFulfillerStatus.completed,
+        },
+      ],
+    };
+    // santiy-check
+    expect(computeMedicationRequestCombinedStatus(completedMedicationRequest, 90)).toBe(
+      MedicationRequestCombinedStatus.completed,
+    );
+    test('should return active if any medication request combined status active', () => {
+      expect(
+        computePrescriptionStatus(
+          [
+            activeMedicationRequest,
+            cancelledMedicationRequest,
+            expiredMedicationRequest,
+            onHoldMedicationRequest,
+            declinedMedicationRequest,
+            completedMedicationRequest,
+          ],
+          90,
+        ),
+      ).toBe(MedicationRequestCombinedStatus.active);
+    });
+    test('should return on-hold if any medication request combined status on-hold, and none active', () => {
+      expect(
+        computePrescriptionStatus(
+          [
+            cancelledMedicationRequest,
+            expiredMedicationRequest,
+            onHoldMedicationRequest,
+            declinedMedicationRequest,
+            completedMedicationRequest,
+          ],
+          90,
+        ),
+      ).toBe(MedicationRequestCombinedStatus.on_hold);
+    });
+    test('should return completed if any medication request combined status completed, and none active or on hold', () => {
+      expect(
+        computePrescriptionStatus(
+          [cancelledMedicationRequest, expiredMedicationRequest, declinedMedicationRequest, completedMedicationRequest],
+          90,
+        ),
+      ).toBe(MedicationRequestCombinedStatus.completed);
+    });
+    test('should return declined if any medication request combined status declined, and none active or on hold or completed', () => {
+      expect(
+        computePrescriptionStatus(
+          [cancelledMedicationRequest, expiredMedicationRequest, declinedMedicationRequest],
+          90,
+        ),
+      ).toBe(MedicationRequestCombinedStatus.declined);
+    });
+    test('should return cancelled if any medication request combined status cancelled, and none active or on hold or completed or declined', () => {
+      expect(computePrescriptionStatus([cancelledMedicationRequest, expiredMedicationRequest], 90)).toBe(
+        MedicationRequestCombinedStatus.cancelled,
+      );
+    });
+    test('should return expired if any medication request combined status expired, and none active or on hold or completed or declined or cancelled', () => {
+      expect(computePrescriptionStatus([expiredMedicationRequest], 90)).toBe(MedicationRequestCombinedStatus.expired);
+    });
+    test('should return null for empty array', () => {
+      expect(computePrescriptionStatus([], 90)).toBe(null);
+    });
+    test('should return null for null input', () => {
+      expect(computePrescriptionStatus(null, 90)).toBe(null);
+    });
+  });
+
+  describe('test computeRemainingQuantity', () => {
+    const medicationRequest: MedicationRequest = {
+      id: '1c1ad91e-8653-453a-9f59-8d5c36249aff',
+      dispenseRequest: {
+        numberOfRepeatsAllowed: undefined,
+        quantity: {
+          value: 30,
+          unit: 'mg',
+          code: '123abc',
+        },
+        validityPeriod: { start: '' },
+      },
+      dosageInstruction: undefined,
+      encounter: { reference: '', type: '' },
+      intent: '',
+      medicationReference: { display: '', reference: '', type: '' },
+      meta: { lastUpdated: '' },
+      priority: '',
+      requester: {
+        display: '',
+        identifier: { value: '' },
+        reference: '',
+        type: '',
+      },
+      resourceType: 'MedicationRequest',
+      status: MedicationRequestStatus.completed,
+      subject: { display: '', reference: '', type: '' },
+      extension: [
+        {
+          url: 'http://fhir.openmrs.org/ext/medicationrequest/fullfillerstatus',
+          valueCode: MedicationRequestFulfillerStatus.completed,
+        },
+      ],
+    };
+    const medicationDispense1: MedicationDispense = {
+      dosageInstruction: undefined,
+      id: '',
+      authorizingPrescription: [
+        {
+          reference: 'MedicationRequest/1c1ad91e-8653-453a-9f59-8d5c36249aff',
+          type: 'MedicationRequest',
+        },
+      ],
+      location: { display: '', reference: '', type: '' },
+      medicationReference: { display: '', reference: '', type: '' },
+      meta: { lastUpdated: '' },
+      quantity: {
+        value: 5,
+        unit: 'mg',
+        code: '123abc',
+      },
+      performer: undefined,
+      resourceType: 'MedicationDispense',
+      status: MedicationDispenseStatus.completed,
+      subject: { display: '', reference: '', type: '' },
+      substitution: { reason: [], type: undefined, wasSubstituted: false },
+      type: undefined,
+      whenHandedOver: '',
+      whenPrepared: '',
+    };
+    const medicationDispense2: MedicationDispense = {
+      dosageInstruction: undefined,
+      id: '',
+      authorizingPrescription: [
+        {
+          reference: 'MedicationRequest/1c1ad91e-8653-453a-9f59-8d5c36249aff',
+          type: 'MedicationRequest',
+        },
+      ],
+      location: { display: '', reference: '', type: '' },
+      medicationReference: { display: '', reference: '', type: '' },
+      meta: { lastUpdated: '' },
+      quantity: {
+        value: 10,
+        unit: 'mg',
+        code: '123abc',
+      },
+      performer: undefined,
+      resourceType: 'MedicationDispense',
+      status: MedicationDispenseStatus.completed,
+      subject: { display: '', reference: '', type: '' },
+      substitution: { reason: [], type: undefined, wasSubstituted: false },
+      type: undefined,
+      whenHandedOver: '',
+      whenPrepared: '',
+    };
+    const medicationDispenseNoQuantity: MedicationDispense = {
+      dosageInstruction: undefined,
+      id: '',
+      authorizingPrescription: [
+        {
+          reference: 'MedicationRequest/1c1ad91e-8653-453a-9f59-8d5c36249aff',
+          type: 'MedicationRequest',
+        },
+      ],
+      location: { display: '', reference: '', type: '' },
+      medicationReference: { display: '', reference: '', type: '' },
+      meta: { lastUpdated: '' },
+      quantity: undefined,
+      performer: undefined,
+      resourceType: 'MedicationDispense',
+      status: MedicationDispenseStatus.completed,
+      subject: { display: '', reference: '', type: '' },
+      substitution: { reason: [], type: undefined, wasSubstituted: false },
+      type: undefined,
+      whenHandedOver: '',
+      whenPrepared: '',
+    };
+    const medicationRequestDifferentUnits: MedicationRequest = {
+      id: '1c1ad91e-8653-453a-9f59-8d5c36249aff',
+      dispenseRequest: {
+        numberOfRepeatsAllowed: undefined,
+        quantity: {
+          value: 30,
+          unit: 'kg',
+          code: '456def',
+        },
+        validityPeriod: { start: '' },
+      },
+      dosageInstruction: undefined,
+      encounter: { reference: '', type: '' },
+      intent: '',
+      medicationReference: { display: '', reference: '', type: '' },
+      meta: { lastUpdated: '' },
+      priority: '',
+      requester: {
+        display: '',
+        identifier: { value: '' },
+        reference: '',
+        type: '',
+      },
+      resourceType: 'MedicationRequest',
+      status: MedicationRequestStatus.completed,
+      subject: { display: '', reference: '', type: '' },
+      extension: [
+        {
+          url: 'http://fhir.openmrs.org/ext/medicationrequest/fullfillerstatus',
+          valueCode: MedicationRequestFulfillerStatus.completed,
+        },
+      ],
+    };
+
+    test('should return quantity remaining', () => {
+      expect(
+        computeQuantityRemaining({
+          request: medicationRequest,
+          dispenses: [medicationDispense1, medicationDispense2, medicationDispenseNoQuantity],
+        }),
+      ).toBe(15);
+    });
+    test('should return quantity ordered if no dispense has happened', () => {
+      expect(
+        computeQuantityRemaining({
+          request: medicationRequest,
+          dispenses: [medicationDispenseNoQuantity],
+        }),
+      ).toBe(30);
+    });
+    test('should return amount orders if no dispenses', () => {
+      expect(computeQuantityRemaining({ request: medicationRequest, dispenses: [] })).toBe(30);
+    });
+    test('should return zero for null input', () => {
+      expect(computeQuantityRemaining(null)).toBe(0);
+    });
+    /*  // TODO: figure out how to get this to work
+    test("should throw Error if unit mismatch", () => {
+      expect(
+        computeQuantityRemaining(medicationRequestDifferentUnits, [
+          medicationDispense1,
+          medicationDispenseNoQuantity,
+          medicationDispense2,
+        ])
+      ).toThrow(Error);
+    });*/
+  });
+
+  describe('test computeTotalQuantityDispensed', () => {
+    const medicationDispense1: MedicationDispense = {
+      dosageInstruction: undefined,
+      id: '',
+      location: { display: '', reference: '', type: '' },
+      medicationReference: { display: '', reference: '', type: '' },
+      meta: { lastUpdated: '' },
+      quantity: {
+        value: 5,
+        unit: 'mg',
+        code: '123abc',
+      },
+      performer: undefined,
+      resourceType: 'MedicationDispense',
+      status: MedicationDispenseStatus.completed,
+      subject: { display: '', reference: '', type: '' },
+      substitution: { reason: [], type: undefined, wasSubstituted: false },
+      type: undefined,
+      whenHandedOver: '',
+      whenPrepared: '',
+    };
+
+    const medicationDispense2: MedicationDispense = {
+      dosageInstruction: undefined,
+      id: '',
+      location: { display: '', reference: '', type: '' },
+      medicationReference: { display: '', reference: '', type: '' },
+      meta: { lastUpdated: '' },
+      quantity: {
+        value: 15,
+        unit: 'mg',
+        code: '123abc',
+      },
+      performer: undefined,
+      resourceType: 'MedicationDispense',
+      status: MedicationDispenseStatus.completed,
+      subject: { display: '', reference: '', type: '' },
+      substitution: { reason: [], type: undefined, wasSubstituted: false },
+      type: undefined,
+      whenHandedOver: '',
+      whenPrepared: '',
+    };
+
+    const medicationDispenseNoQuantity: MedicationDispense = {
+      dosageInstruction: undefined,
+      id: '',
+      location: { display: '', reference: '', type: '' },
+      medicationReference: { display: '', reference: '', type: '' },
+      meta: { lastUpdated: '' },
+      quantity: undefined,
+      performer: undefined,
+      resourceType: 'MedicationDispense',
+      status: MedicationDispenseStatus.completed,
+      subject: { display: '', reference: '', type: '' },
+      substitution: { reason: [], type: undefined, wasSubstituted: false },
+      type: undefined,
+      whenHandedOver: '',
+      whenPrepared: '',
+    };
+
+    const medicationDispenseDifferentUnits: MedicationDispense = {
+      dosageInstruction: undefined,
+      id: '',
+      location: { display: '', reference: '', type: '' },
+      medicationReference: { display: '', reference: '', type: '' },
+      meta: { lastUpdated: '' },
+      quantity: {
+        value: 1,
+        unit: 'kg',
+        code: '456ddef',
+      },
+      performer: undefined,
+      resourceType: 'MedicationDispense',
+      status: MedicationDispenseStatus.completed,
+      subject: { display: '', reference: '', type: '' },
+      substitution: { reason: [], type: undefined, wasSubstituted: false },
+      type: undefined,
+      whenHandedOver: '',
+      whenPrepared: '',
+    };
+
+    test('should return 0 for null input', () => {
+      expect(computeTotalQuantityDispensed(null)).toBe(0);
+    });
+    test('should return 0 if no dispense events have quantity', () =>
+      expect(computeTotalQuantityDispensed([medicationDispenseNoQuantity])).toBe(0));
+    test('should return total quantity dispensed', () => {
+      expect(
+        computeTotalQuantityDispensed([medicationDispense1, medicationDispenseNoQuantity, medicationDispense2]),
+      ).toBe(20);
+    });
+    // TODO: figure out how to get this to work
+    /*test("should throw Error if unit mismatch", () => {
+      expect(
+        computeTotalQuantityDispensed([
+          medicationDispense1,
+          medicationDispenseNoQuantity,
+          medicationDispense2,
+          medicationDispenseDifferentUnits,
+        ])
+      ).toThrow("Can't calculate quantity dispensed if units don't match");
+    });*/
+  });
+
+  describe('test computeTotalQuantityOrdered', () => {
+    test('should calculate total quantity ordered when refills set', () => {
+      const medicationRequest: MedicationRequest = {
+        dispenseRequest: {
+          numberOfRepeatsAllowed: 3,
+          quantity: {
+            value: 30,
+            unit: 'mg',
+            code: '123abc',
+          },
+          validityPeriod: { start: '' },
+        },
+        dosageInstruction: undefined,
+        encounter: { reference: '', type: '' },
+        id: '',
+        intent: '',
+        medicationReference: { display: '', reference: '', type: '' },
+        meta: { lastUpdated: '' },
+        priority: '',
+        requester: {
+          display: '',
+          identifier: { value: '' },
+          reference: '',
+          type: '',
+        },
+        resourceType: 'MedicationRequest',
+        status: MedicationRequestStatus.completed,
+        subject: { display: '', reference: '', type: '' },
+        extension: [
+          {
+            url: 'http://fhir.openmrs.org/ext/medicationrequest/fullfillerstatus',
+            valueCode: MedicationRequestFulfillerStatus.completed,
+          },
+        ],
+      };
+      expect(computeTotalQuantityOrdered(medicationRequest)).toBe(120);
+    });
+    test('should calculate total quantity ordered when refills not set', () => {
+      const medicationRequest: MedicationRequest = {
+        dispenseRequest: {
+          numberOfRepeatsAllowed: undefined,
+          quantity: {
+            value: 30,
+            unit: 'mg',
+            code: '123abc',
+          },
+          validityPeriod: { start: '' },
+        },
+        dosageInstruction: undefined,
+        encounter: { reference: '', type: '' },
+        id: '',
+        intent: '',
+        medicationReference: { display: '', reference: '', type: '' },
+        meta: { lastUpdated: '' },
+        priority: '',
+        requester: {
+          display: '',
+          identifier: { value: '' },
+          reference: '',
+          type: '',
+        },
+        resourceType: 'MedicationRequest',
+        status: MedicationRequestStatus.completed,
+        subject: { display: '', reference: '', type: '' },
+        extension: [
+          {
+            url: 'http://fhir.openmrs.org/ext/medicationrequest/fullfillerstatus',
+            valueCode: MedicationRequestFulfillerStatus.completed,
+          },
+        ],
+      };
+      expect(computeTotalQuantityOrdered(medicationRequest)).toBe(30);
+    });
+    test('should return null when no quantity', () => {
+      const medicationRequest: MedicationRequest = {
+        dispenseRequest: {
+          numberOfRepeatsAllowed: undefined,
+          quantity: undefined,
+          validityPeriod: { start: '' },
+        },
+        dosageInstruction: undefined,
+        encounter: { reference: '', type: '' },
+        id: '',
+        intent: '',
+        medicationReference: { display: '', reference: '', type: '' },
+        meta: { lastUpdated: '' },
+        priority: '',
+        requester: {
+          display: '',
+          identifier: { value: '' },
+          reference: '',
+          type: '',
+        },
+        resourceType: 'MedicationRequest',
+        status: MedicationRequestStatus.completed,
+        subject: { display: '', reference: '', type: '' },
+        extension: [
+          {
+            url: 'http://fhir.openmrs.org/ext/medicationrequest/fullfillerstatus',
+            valueCode: MedicationRequestFulfillerStatus.completed,
+          },
+        ],
+      };
+      expect(computeTotalQuantityOrdered(medicationRequest)).toBe(null);
+    });
+  });
+
+  describe('test getAssociatedMedicationDispense', () => {
+    test('should return medication dispenses associated with request', () => {
+      const medicationRequest: MedicationRequest = {
+        id: '1c1ad91e-8653-453a-9f59-8d5c36249aff',
+        dispenseRequest: {
+          numberOfRepeatsAllowed: 0,
+          quantity: undefined,
+          validityPeriod: { start: '' },
+        },
+        dosageInstruction: undefined,
+        encounter: { reference: '', type: '' },
+        intent: '',
+        medicationReference: { display: '', reference: '', type: '' },
+        meta: { lastUpdated: '' },
+        priority: '',
+        requester: {
+          display: '',
+          identifier: { value: '' },
+          reference: '',
+          type: '',
+        },
+        resourceType: '',
+        status: null,
+        subject: { display: '', reference: '', type: '' },
+      };
+
+      const medicationDispenses: Array<MedicationDispense> = [
+        {
+          dosageInstruction: undefined,
+          id: 'e74e74a1-6b70-40fd-8c44-485178c71721',
+          authorizingPrescription: [
+            {
+              reference: 'MedicationRequest/075318da-ce26-4de5-9700-e49820f9d974',
+              type: 'MedicationRequest',
+            },
+          ],
+          location: { display: '', reference: '', type: '' },
+          medicationReference: { display: '', reference: '', type: '' },
+          meta: { lastUpdated: '' },
+          quantity: {
+            value: 1,
+            unit: '',
+            code: '',
+          },
+          performer: undefined,
+          resourceType: 'MedicationDispense',
+          status: MedicationDispenseStatus.completed,
+          subject: { display: '', reference: '', type: '' },
+          substitution: { reason: [], type: undefined, wasSubstituted: false },
+          type: undefined,
+          whenHandedOver: '',
+          whenPrepared: '',
+        },
+        {
+          dosageInstruction: undefined,
+          id: 'f7b5585d-6867-4f3a-8151-da9ee1f70fab',
+          authorizingPrescription: [
+            {
+              reference: 'MedicationRequest/1c1ad91e-8653-453a-9f59-8d5c36249aff',
+              type: 'MedicationRequest',
+            },
+          ],
+          location: { display: '', reference: '', type: '' },
+          medicationReference: { display: '', reference: '', type: '' },
+          meta: { lastUpdated: '' },
+          quantity: {
+            value: 1,
+            unit: '',
+            code: '',
+          },
+          performer: undefined,
+          resourceType: 'MedicationDispense',
+          status: MedicationDispenseStatus.completed,
+          subject: { display: '', reference: '', type: '' },
+          substitution: { reason: [], type: undefined, wasSubstituted: false },
+          type: undefined,
+          whenHandedOver: '',
+          whenPrepared: '',
+        },
+        {
+          dosageInstruction: undefined,
+          id: 'a2121f8e-1bcc-4cf9-b1e8-1edace155e7f',
+          authorizingPrescription: [
+            {
+              reference: 'MedicationRequest/075318da-ce26-4de5-9700-e49820f9d974',
+              type: 'MedicationRequest',
+            },
+          ],
+          location: { display: '', reference: '', type: '' },
+          medicationReference: { display: '', reference: '', type: '' },
+          meta: { lastUpdated: '' },
+          quantity: {
+            value: 1,
+            unit: '',
+            code: '',
+          },
+          performer: undefined,
+          resourceType: 'MedicationDispense',
+          status: MedicationDispenseStatus.completed,
+          subject: { display: '', reference: '', type: '' },
+          substitution: { reason: [], type: undefined, wasSubstituted: false },
+          type: undefined,
+          whenHandedOver: '',
+          whenPrepared: '',
+        },
+        {
+          dosageInstruction: undefined,
+          id: 'b59a6c54-c178-4972-a33b-dfe9f968e71a',
+          authorizingPrescription: [
+            {
+              reference: 'MedicationRequest/1c1ad91e-8653-453a-9f59-8d5c36249aff',
+              type: 'MedicationRequest',
+            },
+          ],
+          location: { display: '', reference: '', type: '' },
+          medicationReference: { display: '', reference: '', type: '' },
+          meta: { lastUpdated: '' },
+          quantity: {
+            value: 1,
+            unit: '',
+            code: '',
+          },
+          performer: undefined,
+          resourceType: 'MedicationDispense',
+          status: MedicationDispenseStatus.completed,
+          subject: { display: '', reference: '', type: '' },
+          substitution: { reason: [], type: undefined, wasSubstituted: false },
+          type: undefined,
+          whenHandedOver: '',
+          whenPrepared: '',
+        },
+      ];
+      const results: Array<MedicationDispense> = getAssociatedMedicationDispenses(
+        medicationRequest,
+        medicationDispenses,
+      );
+      expect(results.length).toBe(2);
+      expect(results).toContain(medicationDispenses[1]);
+      expect(results).toContain(medicationDispenses[3]);
+    });
+    test('should return empty list if no associated requests', () => {
+      const medicationRequest: MedicationRequest = {
+        id: '1c1ad91e-8653-453a-9f59-8d5c36249aff',
+        dispenseRequest: {
+          numberOfRepeatsAllowed: 0,
+          quantity: undefined,
+          validityPeriod: { start: '' },
+        },
+        dosageInstruction: undefined,
+        encounter: { reference: '', type: '' },
+        intent: '',
+        medicationReference: { display: '', reference: '', type: '' },
+        meta: { lastUpdated: '' },
+        priority: '',
+        requester: {
+          display: '',
+          identifier: { value: '' },
+          reference: '',
+          type: '',
+        },
+        resourceType: '',
+        status: null,
+        subject: { display: '', reference: '', type: '' },
+      };
+
+      const medicationDispenses: Array<MedicationDispense> = [
+        {
+          dosageInstruction: undefined,
+          id: 'e74e74a1-6b70-40fd-8c44-485178c71721',
+          authorizingPrescription: [
+            {
+              reference: 'MedicationRequest/075318da-ce26-4de5-9700-e49820f9d974',
+              type: 'MedicationRequest',
+            },
+          ],
+          location: { display: '', reference: '', type: '' },
+          medicationReference: { display: '', reference: '', type: '' },
+          meta: { lastUpdated: '' },
+          quantity: {
+            value: 1,
+            unit: '',
+            code: '',
+          },
+          performer: undefined,
+          resourceType: 'MedicationDispense',
+          status: MedicationDispenseStatus.completed,
+          subject: { display: '', reference: '', type: '' },
+          substitution: { reason: [], type: undefined, wasSubstituted: false },
+          type: undefined,
+          whenHandedOver: '',
+          whenPrepared: '',
+        },
+      ];
+      const results: Array<MedicationDispense> = getAssociatedMedicationDispenses(
+        medicationRequest,
+        medicationDispenses,
+      );
+      expect(results.length).toBe(0);
+    });
+  });
+
+  describe('test getAssociatedRequest', () => {
+    test('should return medication request associated with dispense', () => {
+      const medicationRequest1: MedicationRequest = {
+        id: '0c26097a-e856-4c01-a6b4-7c8e6c636618',
+        dispenseRequest: {
+          numberOfRepeatsAllowed: undefined,
+          quantity: {
+            value: 30,
+            unit: 'mg',
+            code: '123abc',
+          },
+          validityPeriod: { start: '' },
+        },
+        dosageInstruction: undefined,
+        encounter: { reference: '', type: '' },
+        intent: '',
+        medicationReference: { display: '', reference: '', type: '' },
+        meta: { lastUpdated: '' },
+        priority: '',
+        requester: {
+          display: '',
+          identifier: { value: '' },
+          reference: '',
+          type: '',
+        },
+        resourceType: 'MedicationRequest',
+        status: MedicationRequestStatus.completed,
+        subject: { display: '', reference: '', type: '' },
+        extension: [
+          {
+            url: 'http://fhir.openmrs.org/ext/medicationrequest/fullfillerstatus',
+            valueCode: MedicationRequestFulfillerStatus.completed,
+          },
+        ],
+      };
+
+      const medicationRequest2: MedicationRequest = {
+        id: '1c1ad91e-8653-453a-9f59-8d5c36249aff',
+        dispenseRequest: {
+          numberOfRepeatsAllowed: undefined,
+          quantity: {
+            value: 30,
+            unit: 'mg',
+            code: '123abc',
+          },
+          validityPeriod: { start: '' },
+        },
+        dosageInstruction: undefined,
+        encounter: { reference: '', type: '' },
+        intent: '',
+        medicationReference: { display: '', reference: '', type: '' },
+        meta: { lastUpdated: '' },
+        priority: '',
+        requester: {
+          display: '',
+          identifier: { value: '' },
+          reference: '',
+          type: '',
+        },
+        resourceType: 'MedicationRequest',
+        status: MedicationRequestStatus.completed,
+        subject: { display: '', reference: '', type: '' },
+        extension: [
+          {
+            url: 'http://fhir.openmrs.org/ext/medicationrequest/fullfillerstatus',
+            valueCode: MedicationRequestFulfillerStatus.completed,
+          },
+        ],
+      };
+
+      const medicationDispense: MedicationDispense = {
+        dosageInstruction: undefined,
+        id: '998f4111-96e8-4cd6-aebd-7f55716621a0',
+        authorizingPrescription: [
+          {
+            reference: 'MedicationRequest/1c1ad91e-8653-453a-9f59-8d5c36249aff',
+            type: 'MedicationRequest',
+          },
+        ],
+        location: { display: '', reference: '', type: '' },
+        medicationReference: { display: '', reference: '', type: '' },
+        meta: { lastUpdated: '' },
+        quantity: {
+          value: 5,
+          unit: 'mg',
+          code: '123abc',
+        },
+        performer: undefined,
+        resourceType: 'MedicationDispense',
+        status: MedicationDispenseStatus.completed,
+        subject: { display: '', reference: '', type: '' },
+        substitution: { reason: [], type: undefined, wasSubstituted: false },
+        type: undefined,
+        whenHandedOver: '',
+        whenPrepared: '',
+      };
+
+      expect(getAssociatedMedicationRequest(medicationDispense, [medicationRequest1, medicationRequest2])).toBe(
+        medicationRequest2,
+      );
+    });
+  });
+
+  describe('test getConceptCoding', () => {
+    test('should find the concept coding without a system', () => {
+      const codings: Array<Coding> = [
+        {
+          system: 'SNOMED',
+          code: '123456',
+          display: 'Weight',
+        },
+        {
+          code: '123abc',
+          display: 'Weight',
+        },
+        {
+          system: 'CIEL',
+          code: 'abcdef',
+          display: 'Weight',
+        },
+      ];
+
+      expect(getConceptCoding(codings).code).toBe('123abc');
+    });
+    test('should find the concept coding undefined system', () => {
+      const codings: Array<Coding> = [
+        {
+          system: 'SNOMED',
+          code: '123456',
+          display: 'Weight',
+        },
+        {
+          system: undefined,
+          code: '123abc',
+          display: 'Weight',
+        },
+        {
+          system: 'CIEL',
+          code: 'abcdef',
+          display: 'Weight',
+        },
+      ];
+
+      expect(getConceptCoding(codings).code).toBe('123abc');
+    });
+  });
+
+  describe('test getConceptCodingUuid', () => {
+    test('should find the concept coding uuid without a system', () => {
+      const codings: Array<Coding> = [
+        {
+          system: 'SNOMED',
+          code: '123456',
+          display: 'Weight',
+        },
+        {
+          code: '123abc',
+          display: 'Weight',
+        },
+        {
+          system: 'CIEL',
+          code: 'abcdef',
+          display: 'Weight',
+        },
+      ];
+
+      expect(getConceptCodingUuid(codings)).toBe('123abc');
+    });
+    test('should find the concept coding uuid without a system', () => {
+      const codings: Array<Coding> = [
+        {
+          system: 'SNOMED',
+          code: '123456',
+          display: 'Weight',
+        },
+        {
+          code: '123abc',
+          display: 'Weight',
+        },
+        {
+          system: 'CIEL',
+          code: 'abcdef',
+          display: 'Weight',
+        },
+      ];
+      expect(getConceptCodingDisplay(codings)).toBe('Weight');
+    });
+  });
+
+  describe('test getDosageInstructions', () => {
+    test('should return first element of dosage instructions array', () => {
+      const dosageInstructions: Array<DosageInstruction> = [
+        {
+          asNeededBoolean: false,
+          doseAndRate: undefined,
+          route: { coding: undefined },
+          text: 'first',
+          timing: {
+            code: { coding: undefined },
+            repeat: { duration: 0, durationUnit: '' },
+          },
+        },
+        {
+          asNeededBoolean: false,
+          doseAndRate: undefined,
+          route: { coding: undefined },
+          text: 'second',
+          timing: {
+            code: { coding: undefined },
+            repeat: { duration: 0, durationUnit: '' },
+          },
+        },
+      ];
+
+      expect(getDosageInstruction(dosageInstructions).text).toBe('first');
+    });
+  });
+
+  describe('test getMedicationsByConceptEndpoint', () => {
+    test('should return medications by concept endpoint', () => {
+      expect(getMedicationsByConceptEndpoint('123abc')).toBe('/ws/fhir2/R4/Medication?code=123abc');
+    });
+  });
+
+  describe('test getMedicationDisplay', () => {
+    test('should return medication reference display when present', () => {
+      const medication: MedicationReferenceOrCodeableConcept = {
+        medicationReference: {
+          reference: 'Medication/123abc',
+          display: 'Aspirin',
+        },
+        medicationCodeableConcept: {
+          coding: [
+            {
+              code: 'def687',
+              display: 'Aspirin',
+            },
+          ],
+          text: 'Aspirin',
+        },
+      };
+      expect(getMedicationDisplay(medication)).toBe('Aspirin');
+    });
+    test('should return medication codeable concept when reference not present', () => {
+      const medication: MedicationReferenceOrCodeableConcept = {
+        medicationCodeableConcept: {
+          coding: [
+            {
+              code: 'def687',
+              display: 'Aspirin',
+            },
+          ],
+          text: 'Aspirin',
+        },
+      };
+      expect(getMedicationDisplay(medication)).toBe('Aspirin: Aspirin');
+    });
+  });
+
+  describe('test getMedicationReferenceOrCodeableConcept', () => {
+    test('should return medication reference or codeable concept from Medication Request', () => {
+      const medicationRequest: MedicationRequest = {
+        dispenseRequest: {
+          numberOfRepeatsAllowed: 3,
+          quantity: {
+            value: 5,
+            unit: 'mg',
+            code: '123abc',
+          },
+          validityPeriod: { start: '' },
+        },
+        dosageInstruction: undefined,
+        encounter: { reference: '', type: '' },
+        id: '',
+        intent: '',
+        medicationReference: {
+          display: '',
+          reference: 'Medication/123abc',
+          type: '',
+        },
+        medicationCodeableConcept: {
+          coding: undefined,
+          text: 'Some concept',
+        },
+        meta: { lastUpdated: '' },
+        priority: '',
+        requester: {
+          display: '',
+          identifier: { value: '' },
+          reference: '',
+          type: '',
+        },
+        resourceType: 'MedicationRequest',
+        status: null,
+        subject: { display: '', reference: '', type: '' },
+      };
+      expect(getMedicationReferenceOrCodeableConcept(medicationRequest).medicationReference.reference).toBe(
+        'Medication/123abc',
+      );
+      expect(getMedicationReferenceOrCodeableConcept(medicationRequest).medicationCodeableConcept.text).toBe(
+        'Some concept',
+      );
+    });
+    test('should return medication reference or codeable concept from Medication Dispense', () => {
+      const medicationDispense: MedicationDispense = {
+        dosageInstruction: undefined,
+        id: '',
+        location: { display: '', reference: '', type: '' },
+        medicationReference: {
+          display: '',
+          reference: 'Medication/123abc',
+          type: '',
+        },
+        medicationCodeableConcept: {
+          coding: undefined,
+          text: 'Some concept',
+        },
+        meta: { lastUpdated: '' },
+        quantity: {
+          value: 5,
+          unit: 'mg',
+          code: '123abc',
+        },
+        performer: undefined,
+        resourceType: 'MedicationDispense',
+        status: MedicationDispenseStatus.completed,
+        subject: { display: '', reference: '', type: '' },
+        substitution: { reason: [], type: undefined, wasSubstituted: false },
+        type: undefined,
+        whenHandedOver: '',
+        whenPrepared: '',
+      };
+      expect(getMedicationReferenceOrCodeableConcept(medicationDispense).medicationReference.reference).toBe(
+        'Medication/123abc',
+      );
+      expect(getMedicationReferenceOrCodeableConcept(medicationDispense).medicationCodeableConcept.text).toBe(
+        'Some concept',
+      );
+    });
+  });
+
+  describe('test getMostRecentMedicationDispenseStatus', () => {
+    test('should return most recent status', () => {
+      const medicationDispenses: Array<MedicationDispense> = [
+        {
+          dosageInstruction: undefined,
+          id: 'e74e74a1-6b70-40fd-8c44-485178c71721',
+          extension: [
+            {
+              url: 'http://fhir.openmrs.org/ext/medicationdispense/recorded',
+              valueDateTime: '2023-01-05T14:00:00-05:00',
+            },
+          ],
+          authorizingPrescription: [
+            {
+              reference: 'MedicationRequest/075318da-ce26-4de5-9700-e49820f9d974',
+              type: 'MedicationRequest',
+            },
+          ],
+          location: { display: '', reference: '', type: '' },
+          medicationReference: { display: '', reference: '', type: '' },
+          meta: { lastUpdated: '' },
+          quantity: {
+            value: 1,
+            unit: '',
+            code: '',
+          },
+          performer: undefined,
+          resourceType: 'MedicationDispense',
+          status: MedicationDispenseStatus.on_hold,
+          subject: { display: '', reference: '', type: '' },
+          substitution: { reason: [], type: undefined, wasSubstituted: false },
+          type: undefined,
+          whenHandedOver: '2023-01-05T14:00:00-05:00',
+          whenPrepared: '2023-01-05T14:00:00-05:00',
+        },
+        {
+          dosageInstruction: undefined,
+          id: 'f7b5585d-6867-4f3a-8151-da9ee1f70fab',
+          extension: [
+            {
+              url: 'http://fhir.openmrs.org/ext/medicationdispense/recorded',
+              valueDateTime: '2023-01-05T20:00:00-05:00',
+            },
+          ],
+          authorizingPrescription: [
+            {
+              reference: 'MedicationRequest/1c1ad91e-8653-453a-9f59-8d5c36249aff',
+              type: 'MedicationRequest',
+            },
+          ],
+          location: { display: '', reference: '', type: '' },
+          medicationReference: { display: '', reference: '', type: '' },
+          meta: { lastUpdated: '' },
+          quantity: {
+            value: 1,
+            unit: '',
+            code: '',
+          },
+          performer: undefined,
+          resourceType: 'MedicationDispense',
+          status: MedicationDispenseStatus.completed,
+          subject: { display: '', reference: '', type: '' },
+          substitution: { reason: [], type: undefined, wasSubstituted: false },
+          type: undefined,
+          whenHandedOver: '2023-01-05T20:00:00-05:00',
+          whenPrepared: '2023-01-05T20:00:00-05:00',
+        },
+        {
+          dosageInstruction: undefined,
+          id: 'a2121f8e-1bcc-4cf9-b1e8-1edace155e7f',
+          extension: [
+            {
+              url: 'http://fhir.openmrs.org/ext/medicationdispense/recorded',
+              valueDateTime: '2023-01-05T17:00:00-05:00',
+            },
+          ],
+          authorizingPrescription: [
+            {
+              reference: 'MedicationRequest/075318da-ce26-4de5-9700-e49820f9d974',
+              type: 'MedicationRequest',
+            },
+          ],
+          location: { display: '', reference: '', type: '' },
+          medicationReference: { display: '', reference: '', type: '' },
+          meta: { lastUpdated: '' },
+          quantity: {
+            value: 1,
+            unit: '',
+            code: '',
+          },
+          performer: undefined,
+          resourceType: 'MedicationDispense',
+          status: MedicationDispenseStatus.declined,
+          subject: { display: '', reference: '', type: '' },
+          substitution: { reason: [], type: undefined, wasSubstituted: false },
+          type: undefined,
+          whenHandedOver: '2023-01-05T17:00:00-05:00',
+          whenPrepared: '2023-01-05T17:00:00-05:00',
+        },
+      ];
+
+      expect(getMostRecentMedicationDispenseStatus(medicationDispenses)).toBe(MedicationDispenseStatus.completed);
+    });
+    test('should return null for null input', () => {
+      expect(getMostRecentMedicationDispenseStatus(null)).toBeNull();
+    });
+    test('should return null for empty list', () => {
+      expect(getMostRecentMedicationDispenseStatus([])).toBeNull();
+    });
+  });
+
+  describe('test getNextMostRecentMedicationDispenseStatus', () => {
+    test('should return next most recent status', () => {
+      const medicationDispenses: Array<MedicationDispense> = [
+        {
+          dosageInstruction: undefined,
+          id: 'e74e74a1-6b70-40fd-8c44-485178c71721',
+          extension: [
+            {
+              url: 'http://fhir.openmrs.org/ext/medicationdispense/recorded',
+              valueDateTime: '2023-01-05T14:00:00-05:00',
+            },
+          ],
+          authorizingPrescription: [
+            {
+              reference: 'MedicationRequest/075318da-ce26-4de5-9700-e49820f9d974',
+              type: 'MedicationRequest',
+            },
+          ],
+          location: { display: '', reference: '', type: '' },
+          medicationReference: { display: '', reference: '', type: '' },
+          meta: { lastUpdated: '' },
+          quantity: {
+            value: 1,
+            unit: '',
+            code: '',
+          },
+          performer: undefined,
+          resourceType: 'MedicationDispense',
+          status: MedicationDispenseStatus.on_hold,
+          subject: { display: '', reference: '', type: '' },
+          substitution: { reason: [], type: undefined, wasSubstituted: false },
+          type: undefined,
+          whenHandedOver: '2023-01-05T14:00:00-05:00',
+          whenPrepared: '2023-01-05T14:00:00-05:00',
+        },
+        {
+          dosageInstruction: undefined,
+          id: 'f7b5585d-6867-4f3a-8151-da9ee1f70fab',
+          extension: [
+            {
+              url: 'http://fhir.openmrs.org/ext/medicationdispense/recorded',
+              valueDateTime: '2023-01-05T20:00:00-05:00',
+            },
+          ],
+          authorizingPrescription: [
+            {
+              reference: 'MedicationRequest/1c1ad91e-8653-453a-9f59-8d5c36249aff',
+              type: 'MedicationRequest',
+            },
+          ],
+          location: { display: '', reference: '', type: '' },
+          medicationReference: { display: '', reference: '', type: '' },
+          meta: { lastUpdated: '' },
+          quantity: {
+            value: 1,
+            unit: '',
+            code: '',
+          },
+          performer: undefined,
+          resourceType: 'MedicationDispense',
+          status: MedicationDispenseStatus.completed,
+          subject: { display: '', reference: '', type: '' },
+          substitution: { reason: [], type: undefined, wasSubstituted: false },
+          type: undefined,
+          whenHandedOver: '2023-01-05T20:00:00-05:00',
+          whenPrepared: '2023-01-05T20:00:00-05:00',
+        },
+        {
+          dosageInstruction: undefined,
+          id: 'a2121f8e-1bcc-4cf9-b1e8-1edace155e7f',
+          extension: [
+            {
+              url: 'http://fhir.openmrs.org/ext/medicationdispense/recorded',
+              valueDateTime: '2023-01-05T17:00:00-05:00',
+            },
+          ],
+          authorizingPrescription: [
+            {
+              reference: 'MedicationRequest/075318da-ce26-4de5-9700-e49820f9d974',
+              type: 'MedicationRequest',
+            },
+          ],
+          location: { display: '', reference: '', type: '' },
+          medicationReference: { display: '', reference: '', type: '' },
+          meta: { lastUpdated: '' },
+          quantity: {
+            value: 1,
+            unit: '',
+            code: '',
+          },
+          performer: undefined,
+          resourceType: 'MedicationDispense',
+          status: MedicationDispenseStatus.declined,
+          subject: { display: '', reference: '', type: '' },
+          substitution: { reason: [], type: undefined, wasSubstituted: false },
+          type: undefined,
+          whenHandedOver: '2023-01-05T17:00:00-05:00',
+          whenPrepared: '2023-01-05T17:00:00-05:00',
+        },
+      ];
+
+      expect(getNextMostRecentMedicationDispenseStatus(medicationDispenses)).toBe(MedicationDispenseStatus.declined);
+    });
+    test('should return null if only one dispense', () => {
+      const medicationDispenses: Array<MedicationDispense> = [
+        {
+          dosageInstruction: undefined,
+          id: 'e74e74a1-6b70-40fd-8c44-485178c71721',
+          extension: [
+            {
+              url: 'http://fhir.openmrs.org/ext/medicationdispense/recorded',
+              valueDateTime: '2023-01-05T14:00:00-05:00',
+            },
+          ],
+          authorizingPrescription: [
+            {
+              reference: 'MedicationRequest/075318da-ce26-4de5-9700-e49820f9d974',
+              type: 'MedicationRequest',
+            },
+          ],
+          location: { display: '', reference: '', type: '' },
+          medicationReference: { display: '', reference: '', type: '' },
+          meta: { lastUpdated: '' },
+          quantity: {
+            value: 1,
+            unit: '',
+            code: '',
+          },
+          performer: undefined,
+          resourceType: 'MedicationDispense',
+          status: MedicationDispenseStatus.on_hold,
+          subject: { display: '', reference: '', type: '' },
+          substitution: { reason: [], type: undefined, wasSubstituted: false },
+          type: undefined,
+          whenHandedOver: '2023-01-05T14:00:00-05:00',
+          whenPrepared: '2023-01-05T14:00:00-05:00',
+        },
+      ];
+      expect(getNextMostRecentMedicationDispenseStatus(medicationDispenses)).toBeNull();
+    });
+    test('should return null for null input', () => {
+      expect(getNextMostRecentMedicationDispenseStatus(null)).toBeNull();
+    });
+    test('should return null for empty list', () => {
+      expect(getMostRecentMedicationDispenseStatus([])).toBeNull();
+    });
+  });
+
+  describe('test getOpenMRSMedicineDrugName', () => {
+    test('getOpenMRSMedicineDrugName should get drug name stored in FHIR extension', () => {
+      const medication: Medication = {
+        code: { coding: [], text: '' },
+        extension: [
+          {
+            extension: [
+              {
+                url: 'http://fhir.openmrs.org/ext/medicine#drugName',
+                valueString: 'Aspirin',
+              },
+            ],
+            url: 'http://fhir.openmrs.org/ext/medicine',
+          },
+        ],
+        id: '',
+        meta: { lastUpdated: '' },
+        resourceType: 'Medication',
+        status: '',
+      };
+
+      expect(getOpenMRSMedicineDrugName(medication)).toBe('Aspirin');
+    });
+  });
+
+  describe('test getPrescriptionTableActiveMedicationRequestsEndpoint', () => {
+    test('should return endpoint with date parameter', () => {
+      expect(getPrescriptionTableActiveMedicationRequestsEndpoint(1, 10, '2020-01-01', null, null)).toBe(
+        '/ws/fhir2/R4/Encounter?_query=encountersWithMedicationRequests&_getpagesoffset=1&_count=10&date=ge2020-01-01&status=active',
+      );
+    });
+    test('should return endpoint with date and search term parameters', () => {
+      expect(getPrescriptionTableActiveMedicationRequestsEndpoint(1, 10, '2020-01-01', 'bob', null)).toBe(
+        '/ws/fhir2/R4/Encounter?_query=encountersWithMedicationRequests&_getpagesoffset=1&_count=10&date=ge2020-01-01&status=active&patientSearchTerm=bob',
+      );
+    });
+    test('should return endpoint with date and location parameters', () => {
+      expect(getPrescriptionTableActiveMedicationRequestsEndpoint(1, 10, '2020-01-01', null, '123abc')).toBe(
+        '/ws/fhir2/R4/Encounter?_query=encountersWithMedicationRequests&_getpagesoffset=1&_count=10&date=ge2020-01-01&status=active&location=123abc',
+      );
+    });
+    test('should return endpoint with date, location, and search term parameters', () => {
+      expect(getPrescriptionTableActiveMedicationRequestsEndpoint(1, 10, '2020-01-01', 'bob', '123abc')).toBe(
+        '/ws/fhir2/R4/Encounter?_query=encountersWithMedicationRequests&_getpagesoffset=1&_count=10&date=ge2020-01-01&status=active&patientSearchTerm=bob&location=123abc',
+      );
+    });
+  });
+
+  describe('test getPrescriptionTableAllMedicationRequestsEndpoint', () => {
+    test('should return endpoint', () => {
+      expect(getPrescriptionTableAllMedicationRequestsEndpoint(1, 10, null, null)).toBe(
+        '/ws/fhir2/R4/Encounter?_query=encountersWithMedicationRequests&_getpagesoffset=1&_count=10',
+      );
+    });
+    test('should return endpoint with search term parameter', () => {
+      expect(getPrescriptionTableAllMedicationRequestsEndpoint(1, 10, 'bob', null)).toBe(
+        '/ws/fhir2/R4/Encounter?_query=encountersWithMedicationRequests&_getpagesoffset=1&_count=10&patientSearchTerm=bob',
+      );
+    });
+    test('should return endpoint with location parameter', () => {
+      expect(getPrescriptionTableAllMedicationRequestsEndpoint(1, 10, null, '123abc')).toBe(
+        '/ws/fhir2/R4/Encounter?_query=encountersWithMedicationRequests&_getpagesoffset=1&_count=10&location=123abc',
+      );
+    });
+    test('should return endpoint with search term and location parameters', () => {
+      expect(getPrescriptionTableAllMedicationRequestsEndpoint(1, 10, 'bob', '123abc')).toBe(
+        '/ws/fhir2/R4/Encounter?_query=encountersWithMedicationRequests&_getpagesoffset=1&_count=10&patientSearchTerm=bob&location=123abc',
+      );
+    });
+  });
+
+  describe('test getPrescriptionDetailsEndpoint', () => {
+    test('should return endpoint with encounter uuid', () => {
+      expect(getPrescriptionDetailsEndpoint('123abc')).toBe(
+        '/ws/fhir2/R4/MedicationRequest?encounter=123abc&_revinclude=MedicationDispense:prescription&_include=MedicationRequest:encounter',
+      );
+    });
+  });
+
+  describe('test getQuantity', () => {
+    test('should return quantity from Medication Request', () => {
+      const medicationRequest: MedicationRequest = {
+        dispenseRequest: {
+          numberOfRepeatsAllowed: 3,
+          quantity: {
+            value: 5,
+            unit: 'mg',
+            code: '123abc',
+          },
+          validityPeriod: { start: '' },
+        },
+        dosageInstruction: undefined,
+        encounter: { reference: '', type: '' },
+        id: '',
+        intent: '',
+        medicationReference: { display: '', reference: '', type: '' },
+        meta: { lastUpdated: '' },
+        priority: '',
+        requester: {
+          display: '',
+          identifier: { value: '' },
+          reference: '',
+          type: '',
+        },
+        resourceType: 'MedicationRequest',
+        status: null,
+        subject: { display: '', reference: '', type: '' },
+      };
+      expect(getQuantity(medicationRequest).value).toBe(5);
+    });
+    test('should return quantity from Medication Dispense', () => {
+      const medicationDispense: MedicationDispense = {
+        dosageInstruction: undefined,
+        id: '',
+        location: { display: '', reference: '', type: '' },
+        medicationReference: { display: '', reference: '', type: '' },
+        meta: { lastUpdated: '' },
+        quantity: {
+          value: 5,
+          unit: 'mg',
+          code: '123abc',
+        },
+        performer: undefined,
+        resourceType: 'MedicationDispense',
+        status: MedicationDispenseStatus.completed,
+        subject: { display: '', reference: '', type: '' },
+        substitution: { reason: [], type: undefined, wasSubstituted: false },
+        type: undefined,
+        whenHandedOver: '',
+        whenPrepared: '',
+      };
+      expect(getQuantity(medicationDispense).value).toBe(5);
+    });
+  });
+
+  describe('test getQuantityUnitsMatch', () => {
+    const medicationRequest: MedicationRequest = {
+      dispenseRequest: {
+        numberOfRepeatsAllowed: undefined,
+        quantity: {
+          value: 30,
+          unit: 'mg',
+          code: '123abc',
+        },
+        validityPeriod: { start: '' },
+      },
+      dosageInstruction: undefined,
+      encounter: { reference: '', type: '' },
+      id: '',
+      intent: '',
+      medicationReference: { display: '', reference: '', type: '' },
+      meta: { lastUpdated: '' },
+      priority: '',
+      requester: {
+        display: '',
+        identifier: { value: '' },
+        reference: '',
+        type: '',
+      },
+      resourceType: 'MedicationRequest',
+      status: MedicationRequestStatus.completed,
+      subject: { display: '', reference: '', type: '' },
+      extension: [
+        {
+          url: 'http://fhir.openmrs.org/ext/medicationrequest/fullfillerstatus',
+          valueCode: MedicationRequestFulfillerStatus.completed,
+        },
+      ],
+    };
+    const medicationDispense: MedicationDispense = {
+      dosageInstruction: undefined,
+      id: '',
+      location: { display: '', reference: '', type: '' },
+      medicationReference: { display: '', reference: '', type: '' },
+      meta: { lastUpdated: '' },
+      quantity: {
+        value: 5,
+        unit: 'mg',
+        code: '123abc',
+      },
+      performer: undefined,
+      resourceType: 'MedicationDispense',
+      status: MedicationDispenseStatus.completed,
+      subject: { display: '', reference: '', type: '' },
+      substitution: { reason: [], type: undefined, wasSubstituted: false },
+      type: undefined,
+      whenHandedOver: '',
+      whenPrepared: '',
+    };
+    const medicationDispenseNoQuantity: MedicationDispense = {
+      dosageInstruction: undefined,
+      id: '',
+      location: { display: '', reference: '', type: '' },
+      medicationReference: { display: '', reference: '', type: '' },
+      meta: { lastUpdated: '' },
+      quantity: undefined,
+      performer: undefined,
+      resourceType: 'MedicationDispense',
+      status: MedicationDispenseStatus.completed,
+      subject: { display: '', reference: '', type: '' },
+      substitution: { reason: [], type: undefined, wasSubstituted: false },
+      type: undefined,
+      whenHandedOver: '',
+      whenPrepared: '',
+    };
+    const medicationDispenseDifferentUnits: MedicationDispense = {
+      dosageInstruction: undefined,
+      id: '',
+      location: { display: '', reference: '', type: '' },
+      medicationReference: { display: '', reference: '', type: '' },
+      meta: { lastUpdated: '' },
+      quantity: {
+        value: 1,
+        unit: 'kg',
+        code: '456ddef',
+      },
+      performer: undefined,
+      resourceType: 'MedicationDispense',
+      status: MedicationDispenseStatus.completed,
+      subject: { display: '', reference: '', type: '' },
+      substitution: { reason: [], type: undefined, wasSubstituted: false },
+      type: undefined,
+      whenHandedOver: '',
+      whenPrepared: '',
+    };
+    test('should return true if all quantity units match or are undefined', () => {
+      expect(getQuantityUnitsMatch([medicationDispense, medicationRequest, medicationDispenseNoQuantity])).toBe(true);
+    });
+    test("should return false if all quantity units don't match", () => {
+      expect(
+        getQuantityUnitsMatch([
+          medicationDispense,
+          medicationRequest,
+          medicationDispenseNoQuantity,
+          medicationDispenseDifferentUnits,
+        ]),
+      ).toBe(false);
+    });
+    test('should return true for null input', () => {
+      expect(getQuantityUnitsMatch(null)).toBe(true);
+    });
+    test('should return true for empty input', () => {
+      expect(getQuantityUnitsMatch([])).toBe(true);
+    });
+    test('should return true if all quantity units undefined', () => {
+      expect(getQuantityUnitsMatch([medicationDispenseNoQuantity])).toBe(true);
+    });
+  });
+
+  describe('test getRefillsAllowed', () => {
+    test('should return refills allowed from Medication Request', () => {
+      const medicationRequest: MedicationRequest = {
+        dispenseRequest: {
+          numberOfRepeatsAllowed: 3,
+          quantity: {
+            value: 5,
+            unit: 'mg',
+            code: '123abc',
+          },
+          validityPeriod: { start: '' },
+        },
+        dosageInstruction: undefined,
+        encounter: { reference: '', type: '' },
+        id: '',
+        intent: '',
+        medicationReference: { display: '', reference: '', type: '' },
+        meta: { lastUpdated: '' },
+        priority: '',
+        requester: {
+          display: '',
+          identifier: { value: '' },
+          reference: '',
+          type: '',
+        },
+        resourceType: 'MedicationRequest',
+        status: null,
+        subject: { display: '', reference: '', type: '' },
+      };
+      expect(getRefillsAllowed(medicationRequest)).toBe(3);
+    });
+    test('should return null from Medication Dispense', () => {
+      const medicationDispense: MedicationDispense = {
+        dosageInstruction: undefined,
+        id: '',
+        location: { display: '', reference: '', type: '' },
+        medicationReference: { display: '', reference: '', type: '' },
+        meta: { lastUpdated: '' },
+        quantity: {
+          value: 5,
+          unit: 'mg',
+          code: '123abc',
+        },
+        performer: undefined,
+        resourceType: 'MedicationDispense',
+        status: MedicationDispenseStatus.completed,
+        subject: { display: '', reference: '', type: '' },
+        substitution: { reason: [], type: undefined, wasSubstituted: false },
+        type: undefined,
+        whenHandedOver: '',
+        whenPrepared: '',
+      };
+      expect(getRefillsAllowed(medicationDispense)).toBeNull();
+    });
+  });
+
+  describe('test isMostRecentMedicationDispenseStatus', () => {
+    const medicationDispense1: MedicationDispense = {
+      dosageInstruction: undefined,
+      id: 'e74e74a1-6b70-40fd-8c44-485178c71721',
+      extension: [
+        {
+          url: 'http://fhir.openmrs.org/ext/medicationdispense/recorded',
+          valueDateTime: '2023-01-05T14:00:00-05:00',
+        },
+      ],
+      authorizingPrescription: [
+        {
+          reference: 'MedicationRequest/075318da-ce26-4de5-9700-e49820f9d974',
+          type: 'MedicationRequest',
+        },
+      ],
+      location: { display: '', reference: '', type: '' },
+      medicationReference: { display: '', reference: '', type: '' },
+      meta: { lastUpdated: '' },
+      quantity: {
+        value: 1,
+        unit: '',
+        code: '',
+      },
+      performer: undefined,
+      resourceType: 'MedicationDispense',
+      status: MedicationDispenseStatus.on_hold,
+      subject: { display: '', reference: '', type: '' },
+      substitution: { reason: [], type: undefined, wasSubstituted: false },
+      type: undefined,
+      whenHandedOver: '2023-01-05T14:00:00-05:00',
+      whenPrepared: '2023-01-05T14:00:00-05:00',
+    };
+
+    const medicationDispense2: MedicationDispense = {
+      dosageInstruction: undefined,
+      id: 'f7b5585d-6867-4f3a-8151-da9ee1f70fab',
+      extension: [
+        {
+          url: 'http://fhir.openmrs.org/ext/medicationdispense/recorded',
+          valueDateTime: '2023-01-05T20:00:00-05:00',
+        },
+      ],
+      authorizingPrescription: [
+        {
+          reference: 'MedicationRequest/1c1ad91e-8653-453a-9f59-8d5c36249aff',
+          type: 'MedicationRequest',
+        },
+      ],
+      location: { display: '', reference: '', type: '' },
+      medicationReference: { display: '', reference: '', type: '' },
+      meta: { lastUpdated: '' },
+      quantity: {
+        value: 1,
+        unit: '',
+        code: '',
+      },
+      performer: undefined,
+      resourceType: 'MedicationDispense',
+      status: MedicationDispenseStatus.completed,
+      subject: { display: '', reference: '', type: '' },
+      substitution: { reason: [], type: undefined, wasSubstituted: false },
+      type: undefined,
+      whenHandedOver: '2023-01-05T20:00:00-05:00',
+      whenPrepared: '2023-01-05T20:00:00-05:00',
+    };
+
+    const medicationDispense3: MedicationDispense = {
+      dosageInstruction: undefined,
+      id: 'a2121f8e-1bcc-4cf9-b1e8-1edace155e7f',
+      extension: [
+        {
+          url: 'http://fhir.openmrs.org/ext/medicationdispense/recorded',
+          valueDateTime: '2023-01-05T17:00:00-05:00',
+        },
+      ],
+      authorizingPrescription: [
+        {
+          reference: 'MedicationRequest/075318da-ce26-4de5-9700-e49820f9d974',
+          type: 'MedicationRequest',
+        },
+      ],
+      location: { display: '', reference: '', type: '' },
+      medicationReference: { display: '', reference: '', type: '' },
+      meta: { lastUpdated: '' },
+      quantity: {
+        value: 1,
+        unit: '',
+        code: '',
+      },
+      performer: undefined,
+      resourceType: 'MedicationDispense',
+      status: MedicationDispenseStatus.declined,
+      subject: { display: '', reference: '', type: '' },
+      substitution: { reason: [], type: undefined, wasSubstituted: false },
+      type: undefined,
+      whenHandedOver: '2023-01-05T17:00:00-05:0',
+      whenPrepared: '2023-01-05T17:00:00-05:0',
+    };
+
+    const medicationDispenses: Array<MedicationDispense> = [
+      medicationDispense1,
+      medicationDispense2,
+      medicationDispense3,
+    ];
+
+    test('should return true if most recent medication request', () => {
+      expect(isMostRecentMedicationDispense(medicationDispense2, medicationDispenses)).toBe(true);
+    });
+    test('should return false if not most recent medication requst', () => {
+      expect(isMostRecentMedicationDispense(medicationDispense1, medicationDispenses)).toBe(false);
+    });
+    test('should return false if null', () => {
+      expect(isMostRecentMedicationDispense(null, medicationDispenses)).toBe(false);
+    });
+  });
+});
diff --git a/packages/esm-medical-supply-dispensing-app/src/utils.ts b/packages/esm-medical-supply-dispensing-app/src/utils.ts
new file mode 100644
index 0000000..4460154
--- /dev/null
+++ b/packages/esm-medical-supply-dispensing-app/src/utils.ts
@@ -0,0 +1,592 @@
+import { mutate } from 'swr';
+import {
+  type Coding,
+  type DosageInstruction,
+  type Medication,
+  type MedicationDispense,
+  MedicationDispenseStatus,
+  type MedicationReferenceOrCodeableConcept,
+  type MedicationRequest,
+  type MedicationRequestBundle,
+  MedicationRequestCombinedStatus,
+  MedicationRequestFulfillerStatus,
+  MedicationRequestStatus,
+  type Quantity,
+} from './types';
+import { fhirBaseUrl, parseDate } from '@openmrs/esm-framework';
+import {
+  OPENMRS_FHIR_EXT_DISPENSE_RECORDED,
+  OPENMRS_FHIR_EXT_MEDICINE,
+  OPENMRS_FHIR_EXT_REQUEST_FULFILLER_STATUS,
+  PRESCRIPTION_DETAILS_ENDPOINT,
+  PRESCRIPTIONS_TABLE_ENDPOINT,
+} from './constants';
+import dayjs from 'dayjs';
+
+const unitsDontMatchErrorMessage =
+  "Misconfiguration, please contact your System Administrator:  Can't calculate quantity dispensed if units don't match. Likely issue: allowModifyingPrescription and restrictTotalQuantityDispensed configuration parameters both set to true. " +
+  'Either set restrictTotalQuantityDispensed to false or set allowModifyingPrescription to false. If you have previously entered dispense events that modified prescriptions, you will likely need to clean up or remove that data before setting restrictTotalQuantityDispensed to true.';
+
+/**
+ * Computes the fulfiller status for a bundle
+ *
+ * @param medicationRequestBundle
+ * @param restrictTotalQuantityDispensed
+ */
+export function computeFulfillerStatus(
+  medicationRequestBundle: MedicationRequestBundle,
+  restrictTotalQuantityDispensed: boolean,
+): MedicationRequestFulfillerStatus {
+  if (restrictTotalQuantityDispensed && computeQuantityRemaining(medicationRequestBundle) <= 0) {
+    // if we set to restrict total quantity dispenses and quantity remaining less than 0, set status to completed
+    return MedicationRequestFulfillerStatus.completed;
+  }
+
+  // otherwise, set based on most recent dispense status as follows
+  const mostRecentMedicationDispenseStatus = getMostRecentMedicationDispenseStatus(medicationRequestBundle.dispenses);
+
+  if (mostRecentMedicationDispenseStatus === MedicationDispenseStatus.declined) {
+    return MedicationRequestFulfillerStatus.declined;
+  }
+
+  if (mostRecentMedicationDispenseStatus === MedicationDispenseStatus.on_hold) {
+    return MedicationRequestFulfillerStatus.on_hold;
+  }
+
+  return null;
+}
+/**
+ * Within the UI, the "status" of a request we want to display to the pharmacist is
+ * a combination of the status and the fulfiller statuts; given a request
+ * this calculates the actual status we want to display to the pharmacist
+ *
+ * @param medicationRequests
+ * @param medicationRequestExpirationPeriodInDays
+ */
+export function computeMedicationRequestCombinedStatus(
+  medicationRequest: MedicationRequest,
+  medicationRequestExpirationPeriondInDays: number,
+): MedicationRequestCombinedStatus {
+  const medicationRequestStatus: MedicationRequestStatus = computeMedicationRequestStatus(
+    medicationRequest,
+    medicationRequestExpirationPeriondInDays,
+  );
+  const medicationRequestFulfillerStatus: MedicationRequestFulfillerStatus = getFulfillerStatus(medicationRequest);
+
+  // if the request is no longer active, that status takes precedent
+  if (medicationRequestStatus !== MedicationRequestStatus.active) {
+    if (medicationRequestStatus === MedicationRequestStatus.expired) {
+      return MedicationRequestCombinedStatus.expired;
+    } else if (medicationRequestStatus === MedicationRequestStatus.completed) {
+      return MedicationRequestCombinedStatus.completed;
+    } else if (medicationRequestStatus === MedicationRequestStatus.cancelled) {
+      return MedicationRequestCombinedStatus.cancelled;
+    }
+  }
+  // otherwise, if the medication dispense status is paused or closed, return that
+  if (medicationRequestFulfillerStatus === MedicationRequestFulfillerStatus.declined) {
+    return MedicationRequestCombinedStatus.declined;
+  } else if (medicationRequestFulfillerStatus === MedicationRequestFulfillerStatus.on_hold) {
+    return MedicationRequestCombinedStatus.on_hold;
+  }
+
+  // otherwise, return active
+  return MedicationRequestCombinedStatus.active;
+}
+
+/**
+ * Calculates the status of a medication request given the request and the expiration period in days
+ * Necessary to handle the (admittedly confusing) fact that the Dispense ESMs idea of "expired" is different
+ * from that of the OpenMRS Backend, see logic below
+ *
+ * @param medicationRequests
+ * @param medicationRequestExpirationPeriodInDays
+ */
+export function computeMedicationRequestStatus(
+  medicationRequest: MedicationRequest,
+  medicationRequestExpirationPeriodInDays: number,
+): MedicationRequestStatus {
+  if (
+    medicationRequest.status === MedicationRequestStatus.cancelled ||
+    medicationRequest.status === MedicationRequestStatus.completed
+  ) {
+    return medicationRequest.status;
+  }
+
+  // expired is not based on based actual medication request expired status, but calculated from our configurable expiration period in days
+  // NOTE: the assumption here is that the validityPeriod.start is equal to encounter datetime of the associated encounter, because we use the encounter date when doing backend querying
+  if (
+    medicationRequest.dispenseRequest?.validityPeriod?.start &&
+    dayjs(medicationRequest.dispenseRequest.validityPeriod.start).isBefore(
+      dayjs().startOf('day').subtract(medicationRequestExpirationPeriodInDays, 'day'),
+    )
+  ) {
+    return MedicationRequestStatus.expired;
+  }
+
+  return MedicationRequestStatus.active;
+}
+
+/**
+ * Captures the logic to compute the new fulfiller status after a dispense event, where dispense event = a medication dispense where medication is actually dispensed (as opposed one with status "on_hold" or "declined")
+ *
+ * @param medicationDispense the medication dispense being added or editing
+ * @param medicationRequestBundle the entire existing bundle associated with the dispense being added/edited
+ * @param restrictTotalQuantityDispensed value of the "dispenseBehavior.restrictTotalQuantityDispensed"
+ */
+export function computeNewFulfillerStatusAfterDispenseEvent(
+  medicationDispense: MedicationDispense,
+  medicationRequestBundle: MedicationRequestBundle,
+  restrictTotalQuantityDispensed: boolean,
+) {
+  // add or edit the existing bundle as necessary
+  let dispenses = [...medicationRequestBundle.dispenses];
+
+  if (!medicationDispense.id) {
+    // new dispense, add to the array
+    dispenses = [medicationDispense, ...dispenses];
+  } else {
+    // edited dispense, swap out
+    dispenses = dispenses.map((dispense) => (dispense.id === medicationDispense.id ? medicationDispense : dispense));
+  }
+
+  // then call computeFulfillerStatus to compute status
+  return computeFulfillerStatus(
+    {
+      request: medicationRequestBundle.request,
+      dispenses: dispenses,
+    },
+    restrictTotalQuantityDispensed,
+  );
+}
+
+/**
+ * Captures the logic to compute the new fulfiller status after a medication dispense is deleted
+ *
+ * @param deletedMedicationDispense the medication dispense we are deleting delete
+ * @param medicationRequestBundle the entire existing bundle associated with the dispense being delete
+ * @param restrictTotalQuantityDispensed value of the "dispenseBehavior.restrictTotalQuantityDispensed"
+ */
+export function computeNewFulfillerStatusAfterDelete(
+  deletedMedicationDispense: MedicationDispense,
+  medicationRequestBundle: MedicationRequestBundle,
+  restrictTotalQuantityDispensed: boolean,
+): MedicationRequestFulfillerStatus {
+  // filter out the dispense being deleted and call computeFulfillerStatus
+  return computeFulfillerStatus(
+    {
+      request: medicationRequestBundle.request,
+      dispenses: medicationRequestBundle.dispenses.filter((dispense) => dispense.id !== deletedMedicationDispense.id),
+    },
+    restrictTotalQuantityDispensed,
+  );
+}
+
+/**
+ * Given a set of medication requests, calculates the "combined" status (see computeMedicationRequestCombinedStatus)
+ * of each, and then, from those determines the overall status of the "prescription" (where "prescription"
+ * means all medication requests in a single encounter)
+ * @param medicationRequests
+ * @param medicationRequestExpirationPeriodInDays
+ */
+export function computePrescriptionStatus(
+  medicationRequests: Array<MedicationRequest>,
+  medicationRequestExpirationPeriodInDays: number,
+): MedicationRequestCombinedStatus {
+  if (!medicationRequests || medicationRequests.length === 0) {
+    return null;
+  }
+
+  const medicationRequestCombinedStatuses: Array<MedicationRequestCombinedStatus> = medicationRequests.map(
+    (medicationRequest) =>
+      computeMedicationRequestCombinedStatus(medicationRequest, medicationRequestExpirationPeriodInDays),
+  );
+
+  if (medicationRequestCombinedStatuses.includes(MedicationRequestCombinedStatus.active)) {
+    return MedicationRequestCombinedStatus.active;
+  } else if (medicationRequestCombinedStatuses.includes(MedicationRequestCombinedStatus.on_hold)) {
+    return MedicationRequestCombinedStatus.on_hold;
+  } else if (medicationRequestCombinedStatuses.includes(MedicationRequestCombinedStatus.completed)) {
+    return MedicationRequestCombinedStatus.completed;
+  } else if (medicationRequestCombinedStatuses.includes(MedicationRequestCombinedStatus.declined)) {
+    return MedicationRequestCombinedStatus.declined;
+  } else if (medicationRequestCombinedStatuses.includes(MedicationRequestCombinedStatus.cancelled)) {
+    return MedicationRequestCombinedStatus.cancelled;
+  } else if (medicationRequestCombinedStatuses.includes(MedicationRequestCombinedStatus.expired)) {
+    return MedicationRequestCombinedStatus.expired;
+  }
+
+  return null;
+}
+
+/**
+ * Calculates the prescription status and then returns the actual message code we want to display to the end user
+ *
+ * @param medicationRequests
+ * @param medicationRequestExpirationPeriodInDays
+ */
+export function computePrescriptionStatusMessageCode(
+  medicationRequests: Array<MedicationRequest>,
+  medicationRequestExpirationPeriodInDays: number,
+): string {
+  const medicationRequestCombinedStatus: MedicationRequestCombinedStatus = computePrescriptionStatus(
+    medicationRequests,
+    medicationRequestExpirationPeriodInDays,
+  );
+
+  if (medicationRequestCombinedStatus === null) {
+    return null;
+  } else if (medicationRequestCombinedStatus === MedicationRequestCombinedStatus.active) {
+    return 'active';
+  } else if (medicationRequestCombinedStatus === MedicationRequestCombinedStatus.on_hold) {
+    return 'paused';
+  } else if (medicationRequestCombinedStatus === MedicationRequestCombinedStatus.completed) {
+    return 'completed';
+  } else if (medicationRequestCombinedStatus === MedicationRequestCombinedStatus.declined) {
+    return 'closed';
+  } else if (medicationRequestCombinedStatus === MedicationRequestCombinedStatus.expired) {
+    return 'expired';
+  } else if (medicationRequestCombinedStatus === MedicationRequestCombinedStatus.cancelled) {
+    return 'cancelled';
+  }
+  return null;
+}
+
+export function computeQuantityRemaining(medicationRequestBundle): number {
+  if (medicationRequestBundle) {
+    // hard protect against quantity type mistmatch
+    if (!getQuantityUnitsMatch([medicationRequestBundle.request, ...medicationRequestBundle.dispenses])) {
+      throw new Error(unitsDontMatchErrorMessage);
+    }
+
+    return (
+      computeTotalQuantityOrdered(medicationRequestBundle.request) -
+      computeTotalQuantityDispensed(medicationRequestBundle.dispenses)
+    );
+  }
+  return 0;
+}
+
+/**
+ * Given a set of medication dispenses, calculate the total quantity dispensed
+ * @param medicationDispenses
+ */
+export function computeTotalQuantityDispensed(medicationDispenses: Array<MedicationDispense>): number {
+  if (medicationDispenses) {
+    if (!getQuantityUnitsMatch(medicationDispenses)) {
+      throw new Error(unitsDontMatchErrorMessage);
+    }
+    const quantity = medicationDispenses
+      .map((medicationDispense) => (medicationDispense.quantity?.value ? medicationDispense.quantity?.value : 0))
+      .reduce((acc, currentValue) => acc + currentValue, 0);
+    return quantity;
+  } else {
+    return 0;
+  }
+}
+
+/**
+ * Given a medication request, calculate the total quantity ordered (including all refills)
+ * @param medicationRequest
+ */
+export function computeTotalQuantityOrdered(medicationRequest: MedicationRequest): number {
+  const refillsAllowed = getRefillsAllowed(medicationRequest);
+  if (medicationRequest.dispenseRequest?.quantity?.value) {
+    return medicationRequest.dispenseRequest.quantity.value * (1 + (refillsAllowed ? refillsAllowed : 0));
+  } else {
+    return null;
+  }
+}
+
+/**
+ * Given a medication request and an array of medication dispenses, fetch all dispenses authorized by that request
+ *
+ * @param medicationRequest
+ * @param medicationDispenses
+ */
+export function getAssociatedMedicationDispenses(
+  medicationRequest: MedicationRequest,
+  medicationDispenses: Array<MedicationDispense>,
+): Array<MedicationDispense> {
+  return medicationDispenses?.filter((medicationDispense) =>
+    medicationDispense?.authorizingPrescription?.some((prescription) =>
+      prescription.reference.endsWith(medicationRequest.id),
+    ),
+  );
+}
+
+/**
+ * Given a medication dispense and an array of medication requests, fetch request which authorized this request
+ *
+ * @param medicationDispense
+ * @param medicationRequests
+ */
+export function getAssociatedMedicationRequest(
+  medicationDispense: MedicationDispense,
+  medicationRequests: Array<MedicationRequest>,
+): MedicationRequest {
+  return medicationRequests.find((medicationRequest) =>
+    medicationDispense?.authorizingPrescription?.some((prescription) =>
+      prescription.reference.endsWith(medicationRequest.id),
+    ),
+  );
+}
+
+/**
+ * Given an array of CodeableConcept codings, return the first one without an associated system (which should be the concept-referenced-by-uuid coding)
+ * @param codings
+ */
+export function getConceptCoding(codings: Coding[]): Coding {
+  return codings ? codings.find((c) => !('system' in c) || c.system === undefined) : null;
+}
+
+/**
+ * Given an array of CodeableConcept codings, return the display for the first one without an associated system (which should be the concept-referenced-by-uuid coding)
+ * @param codings
+ */
+export function getConceptCodingDisplay(codings: Coding[]): string {
+  return getConceptCoding(codings)?.display;
+}
+
+/**
+ * Given an array of CodeableConcept codings, return the code for the first one without an associated system (which should be the concept-referenced-by-uuid coding)
+ * @param codings
+ */
+export function getConceptCodingUuid(codings: Coding[]): string {
+  return getConceptCoding(codings)?.code;
+}
+
+/**
+ * Fetch the "recorded" extension off a medication request
+ * @param medicationDispense
+ */
+export function getDateRecorded(medicationDispense: MedicationDispense): string {
+  return medicationDispense?.extension?.find((ext) => ext.url === OPENMRS_FHIR_EXT_DISPENSE_RECORDED)?.valueDateTime;
+}
+
+export function getDosageInstruction(dosageInstructions: Array<DosageInstruction>): DosageInstruction {
+  if (dosageInstructions?.length > 0) {
+    return dosageInstructions[0];
+  }
+  return null;
+}
+
+/**
+ * Fetch the "fulfiller status" extension off a medication request
+ * @param medicationDispense
+ */
+export function getFulfillerStatus(medicationRequest: MedicationRequest): MedicationRequestFulfillerStatus {
+  return medicationRequest?.extension?.find((ext) => ext.url === OPENMRS_FHIR_EXT_REQUEST_FULFILLER_STATUS)?.valueCode;
+}
+
+export function getMedicationsByConceptEndpoint(conceptUuid: string): string {
+  return `${fhirBaseUrl}/Medication?code=${conceptUuid}`;
+}
+
+/**
+ * Given a medication reference/codeable concept, format for display
+ * When we have a medication reference (ie a coded Drug reference in the OpenMRS model) we simply use the display property associated with the medication reference
+ * When we do not have medication reference, we display the associated concept and the OpenMRS DrugOrder.drugNonCoded string (which is stored in the codeable concept text field)
+ *  (this may be slightly duplicative, but protects against the case when the provider only enters the formulation, not the drug, in the drugNonCoded field)
+ * @param medication
+ */
+export function getMedicationDisplay(medication: MedicationReferenceOrCodeableConcept): string {
+  return medication.medicationReference
+    ? medication.medicationReference.display
+    : getConceptCodingDisplay(medication?.medicationCodeableConcept.coding) +
+        ': ' +
+        medication?.medicationCodeableConcept.text;
+}
+
+// TODO does this need to null-check
+export function getMedicationReferenceOrCodeableConcept(
+  resource: MedicationRequest | MedicationDispense,
+): MedicationReferenceOrCodeableConcept {
+  return {
+    medicationReference: resource.medicationReference,
+    medicationCodeableConcept: resource.medicationCodeableConcept,
+  };
+}
+
+/**
+ * Given a set of medication requests, return the status of the one with the most recent recorded date
+ */
+export function getMostRecentMedicationDispenseStatus(
+  medicationDispenses: Array<MedicationDispense>,
+): MedicationDispenseStatus {
+  const sorted = medicationDispenses?.sort(sortMedicationDispensesByWhenHandedOver);
+  return sorted && sorted.length > 0 ? sorted[0].status : null;
+}
+
+/**
+ * Given a set of medication requests, return the status of the one with the next most recent recorded date
+ * (used when deleting the most recent, as we may need to update fulfiller status based on the next recent)
+ */
+export function getNextMostRecentMedicationDispenseStatus(
+  medicationDispenses: Array<MedicationDispense>,
+): MedicationDispenseStatus {
+  const sorted = medicationDispenses?.sort(sortMedicationDispensesByWhenHandedOver);
+  return sorted && sorted.length > 1 ? sorted[1].status : null;
+}
+
+export function getMedicationRequestBundleContainingMedicationDispense(
+  medicationRequestBundles: Array<MedicationRequestBundle>,
+  medicationDispense: MedicationDispense,
+) {
+  return medicationRequestBundles.find((bundle) =>
+    bundle.dispenses.find((dispense) => dispense.id === medicationDispense.id),
+  );
+}
+
+/**
+ * Given a FHIR Medication, returns the string value stored in the "http://fhir.openmrs.org/ext/medicine#drugName" extension
+ * @param medication
+ */
+export function getOpenMRSMedicineDrugName(medication: Medication): string {
+  if (!medication || !medication.extension) {
+    return null;
+  }
+
+  const medicineExtension = medication.extension.find((ext) => ext.url === OPENMRS_FHIR_EXT_MEDICINE);
+
+  if (!medicineExtension || !medicineExtension.extension) {
+    return null;
+  }
+
+  const medicationExtensionDrugName = medicineExtension.extension.find(
+    (ext) => ext.url === OPENMRS_FHIR_EXT_MEDICINE + '#drugName',
+  );
+
+  return medicationExtensionDrugName ? medicationExtensionDrugName.valueString : null;
+}
+
+export function getPrescriptionDetailsEndpoint(encounterUuid: string): string {
+  return `${fhirBaseUrl}/${PRESCRIPTION_DETAILS_ENDPOINT}?encounter=${encounterUuid}&_revinclude=MedicationDispense:prescription&_include=MedicationRequest:encounter`;
+}
+
+export function getPrescriptionTableActiveMedicationRequestsEndpoint(
+  pageOffset: number,
+  pageSize: number,
+  date: string,
+  patientSearchTerm: string,
+  location: string,
+): string {
+  return appendSearchTermAndLocation(
+    `${fhirBaseUrl}/${PRESCRIPTIONS_TABLE_ENDPOINT}&_getpagesoffset=${pageOffset}&_count=${pageSize}&date=ge${date}&status=active`,
+    patientSearchTerm,
+    location,
+  );
+}
+
+export function getPrescriptionTableAllMedicationRequestsEndpoint(
+  pageOffset: number,
+  pageSize: number,
+  patientSearchTerm: string,
+  location: string,
+): string {
+  return appendSearchTermAndLocation(
+    `${fhirBaseUrl}/${PRESCRIPTIONS_TABLE_ENDPOINT}&_getpagesoffset=${pageOffset}&_count=${pageSize}`,
+    patientSearchTerm,
+    location,
+  );
+}
+
+function appendSearchTermAndLocation(url: string, patientSearchTerm: string, location: string): string {
+  if (patientSearchTerm) {
+    url = `${url}&patientSearchTerm=${patientSearchTerm}`;
+  }
+  if (location) {
+    url = `${url}&location=${location}`;
+  }
+  return url;
+}
+
+export function getQuantity(resource: MedicationRequest | MedicationDispense): Quantity {
+  if (resource.resourceType == 'MedicationRequest') {
+    return (resource as MedicationRequest).dispenseRequest?.quantity;
+  }
+  if (resource.resourceType == 'MedicationDispense') {
+    return (resource as MedicationDispense).quantity;
+  }
+}
+
+/**
+ * Returns true/false whether the quantity units on all the resources are identical (or match)
+ * @param resources
+ */
+export function getQuantityUnitsMatch(resources: Array<MedicationRequest | MedicationDispense>): boolean {
+  if (resources) {
+    const quantityUnitsArray = resources.map((resource) => getQuantity(resource)?.code).filter((quantity) => quantity);
+    if (quantityUnitsArray.length > 0) {
+      return quantityUnitsArray.every((element) => element === quantityUnitsArray[0]);
+    } else {
+      return true; // consider true if empty
+    }
+  } else {
+    return true; // consider true if null
+  }
+}
+
+export function getRefillsAllowed(resource: MedicationRequest | MedicationDispense): number {
+  if (resource.resourceType == 'MedicationRequest') {
+    return (resource as MedicationRequest).dispenseRequest?.numberOfRepeatsAllowed;
+  } else {
+    return null; // dispense doesn't have a "refills allowed" component
+  }
+}
+
+/**
+ * Given a refernece in format "MedicationReference/uuid" or just "uuid", returns just the uuid compoennt
+ */
+export function getUuidFromReference(reference: string): string {
+  if (reference?.includes('/')) {
+    return reference.split('/')[1];
+  } else {
+    return reference;
+  }
+}
+
+/**
+ * Returns true/false whether the most passed in medication dispense status is the most recent
+ * @param medicationDispenses
+ */
+export function isMostRecentMedicationDispense(
+  medicationDispense: MedicationDispense,
+  medicationDispenses: Array<MedicationDispense>,
+): boolean {
+  const sorted = medicationDispenses?.sort(sortMedicationDispensesByWhenHandedOver);
+
+  // prettier-ignore
+  return medicationDispense &&
+    sorted &&
+    sorted.length > 0 &&
+    sorted[0].id === medicationDispense.id ? true : false;
+}
+
+/**
+ * Revalidated (reloads) both the prescription associated with the encounter uuid,
+ * and the entire prescrption table
+ * @param encounterUuid
+ */
+export function revalidate(encounterUuid: string) {
+  mutate(
+    (key) =>
+      typeof key === 'string' &&
+      (key.startsWith(`${fhirBaseUrl}/${PRESCRIPTIONS_TABLE_ENDPOINT}`) ||
+        key.startsWith(`${fhirBaseUrl}/${PRESCRIPTION_DETAILS_ENDPOINT}?encounter=${encounterUuid}`)),
+  );
+}
+
+export function sortMedicationDispensesByWhenHandedOver(a: MedicationDispense, b: MedicationDispense): number {
+  if (b.whenHandedOver === null) {
+    return 1;
+  } else if (a.whenHandedOver === null) {
+    return -1;
+  }
+  const dateDiff = parseDate(b.whenHandedOver).getTime() - parseDate(a.whenHandedOver).getTime();
+  if (dateDiff !== 0) {
+    return dateDiff;
+  } else {
+    return a.id.localeCompare(b.id); // just to enforce a standard order if two dates are equals
+  }
+}
diff --git a/packages/esm-medical-supply-dispensing-app/translations/en.json b/packages/esm-medical-supply-dispensing-app/translations/en.json
index 9f84954..8ef7668 100644
--- a/packages/esm-medical-supply-dispensing-app/translations/en.json
+++ b/packages/esm-medical-supply-dispensing-app/translations/en.json
@@ -1,37 +1,48 @@
 {
-  "add": "Add",
-  "additionalInstructions": "Additional instructions",
-  "addMedicalSupplyOrderWorkspaceTitle": "Add Medical Supply order",
-  "backToOrderBasket": "Back to order basket",
-  "connect": "Connect",
-  "connectExplainer": "Get in touch with the community",
-  "designDocs": "Design docs",
-  "designDocsExplainer": "Read the O3 design documentation",
-  "discard": "Discard",
+  "activeMedicalSupplies": "Active Medical Supplies",
+  "allMedicalSupplies": "All Medical Supplies",
+  "appName": "",
+  "cancel": "Cancel",
+  "checkFilters": "Check the filters above",
+  "clearSearchInput": "Clear search input",
+  "close": "Close",
+  "closePrescription": "Close prescription",
+  "created": "Created",
+  "dispense": "Dispense",
+  "dispenseDate": "Date of Dispense",
+  "dispensedBy": "Dispensed by",
+  "dispensePrescription": "Dispense prescription",
+  "dispenseUnit": "Dispense Unit",
+  "dispensing": "Dispensing",
+  "dispensingAppError": "Dispensing App Error",
+  "dispensingAppMisconfigurationMessage": "Please contact your system administration: Misconfiguration - 'restrictTotalQuantityDispensed' cannot be enabled if 'allowModifyingPrescription' is enabled.",
+  "drugDispensingUnit": "Dispensing unit",
   "error": "Error",
-  "errorLoadingMedicalSupplyTypes": "Error occurred when loading medical supply types",
-  "explainer": "The following examples demonstrate some key features of the O3 framework",
-  "frontendDocs": "Frontend docs",
-  "getStarted": "Get started",
-  "getStartedExplainer": "Create a frontend module from this template",
-  "learnExplainer": "Learn how to use the O3 framework",
-  "loading": "Loading",
-  "medicalSupplyOrders": "Medical supply orders",
-  "medicalSupplyType": "Medical supply type",
-  "medicalSupplyTypePlaceholder": "Select one",
-  "orderActionDiscontinue": "Discontinue",
-  "orderActionIncomplete": "Incomplete",
-  "orderActionNew": "New",
-  "orderActionRenew": "Renew",
-  "orderActionRevise": "Modify",
-  "pleaseRequiredFields": "Please fill all required fields",
-  "priority": "Priority",
+  "errorLoadingInventoryItems": "Error fetching inventory items",
+  "filterByLocation": "Filter by location",
+  "home": "Home",
+  "item": "Item",
+  "lastDispenser": "Last dispenser",
+  "loadingInventoryItems": "Loading inventory items...",
+  "location": "Location",
+  "medicationListUpdated": "Medication dispense list has been updated.",
+  "noPrescriptionsToDisplay": "No prescriptions to display",
+  "numberIsNotValid": "Number is not valid",
+  "patientInstructions": "Patient instructions",
+  "patientName": "Patient name",
+  "pause": "Pause",
+  "pausePrescription": "Pause prescription",
+  "prescribed": "Prescribed",
+  "prescriber": "Prescriber",
+  "prescriptionDetails": "Prescription details",
   "quantity": "Quantity",
-  "removeFromBasket": "Remove from basket",
-  "resources": "Resources",
-  "saveOrder": "Save order",
-  "scheduleDate": "Scheduled date",
-  "tryReopeningTheForm": "Please try launching the form again",
-  "usefulLinks": "Below are some links to useful resources",
-  "welcomeText": "Welcome to the O3 Template app"
+  "searchByPatientIdOrName": "Search by patient ID or name",
+  "selectStockDispense": "Select stock to dispense from",
+  "status": "Status",
+  "stockDispense": "Stock Dispense",
+  "stockDispensed": "Stock dispensed",
+  "stockDispenseDetails": "Batch: {{batchNumber}} - Quantity: {{quantity}} ({{quantityUoM}}) - Expiry: {{expiration}}",
+  "stockDispensedSuccessfully": "Stock dispensed successfully and batch level updated.",
+  "tabletOverlay": "Tablet overlay",
+  "tabList": "Tab List"
 }
diff --git a/packages/esm-procedure-orders-app/translations/en.json b/packages/esm-procedure-orders-app/translations/en.json
index 9e26dfe..cee0373 100644
--- a/packages/esm-procedure-orders-app/translations/en.json
+++ b/packages/esm-procedure-orders-app/translations/en.json
@@ -1 +1,117 @@
-{}
\ No newline at end of file
+{
+  "action": "Action",
+  "actions": "Actions",
+  "activelLaboratoryTestsDisplayTextTitle": "Active Laboratory Tests",
+  "add": "Add",
+  "additionalInstructions": "Additional instructions",
+  "addProcedureOrderWorkspaceTitle": "Add procedure order",
+  "barcode": "Barcode",
+  "bodySite": "Body Site",
+  "cancel": "Cancel",
+  "commentsToFulfiller": "Comments To Fulfiller",
+  "completedOrders": "Completed Orders",
+  "complications": "complications",
+  "date": "DATE",
+  "discard": "Discard",
+  "endDatetime": "End Datetime",
+  "enterCondition": "Enter condition",
+  "enterParticipant": "Enter Participant",
+  "enterReferredLocation": "Enter Referred Location",
+  "error": "Error",
+  "errorGeneratingId', 'Error Generating Sample Id": "",
+  "errorLoadingTestTypes": "Error occured when loading test types",
+  "errorPicking an order', 'Error Picking an Order": "",
+  "errorRejecting order', 'Error Rejecting a order": "",
+  "errorSavingProcedure": "Error saving procedure",
+  "errorSavingReport', 'Error occurred while saving the report": "",
+  "frequency": "Frequency",
+  "generatesampleID": "Generate Sample Id",
+  "generateSuccessfully": "Report saved successfully",
+  "groupedOrdersTableDescription": "Orders grouped by patient, expand row to view all orders",
+  "instructions": "Instructions",
+  "invalidDates": "Invalid or missing dates",
+  "loading": "Loading",
+  "location": "Location",
+  "locationReferral": "Referral Location ",
+  "noOrdersDescription": "No orders",
+  "noOrdersList": "",
+  "notDoneList": "Not Done List",
+  "notes": "Enter Comments ",
+  "noTestOrdersToDisplay": "No test orders to display",
+  "noTestResultsToDisplay": "No test results to display",
+  "notSuccessfully": "Not successful",
+  "numberOfRepeats": "Number Of Repeats",
+  "option": "Choose an Option",
+  "order": "Order",
+  "orderActionDiscontinue": "Discontinue",
+  "orderActionIncomplete": "Incomplete",
+  "orderActionNew": "New",
+  "orderActionRenew": "Renew",
+  "orderActionRevise": "Modify",
+  "orderDate": "Test Date",
+  "orderer": "orderer",
+  "orderNumber": "Order Number",
+  "orderReason": "Order reason",
+  "orderType": "OrderType",
+  "outcome": "Outcome",
+  "partiallySuccessful": "Partially success",
+  "participants": "Participants",
+  "pastLaboratoryTestsDisplayTextTitle": "Past Laboratory Tests",
+  "patientName": "Patient Name",
+  "pending": "Routine Tests",
+  "pickedAnOrder": "Picked an order",
+  "pickPatient": "Pick Order Request",
+  "pickProcedureOrder": "Pick Procedure Order",
+  "pickProcedureRequest": "Pick Procedure Request",
+  "pickRequest": "Pick Request",
+  "pickSuccessfully": "You have successfully picked an Order",
+  "pleaseRequiredFields": "Please fill all required fields",
+  "priority": "Priority",
+  "procedure": "procedure",
+  "procedureInstructions": "Procedure Order Instructions",
+  "procedureInstructionsModal": "Procedure Instructions",
+  "procedureOutcome": "Procedure outcome",
+  "procedureRejectionModal": "Procedure Rejection",
+  "procedureReport": "Procedure report",
+  "procedureReportPlaceholder": "Enter procedure report",
+  "procedureResultForm": "Procedure Result Form",
+  "procedureSaved": "Procedure saved",
+  "procedureSavedSuccessfully": "Procedure saved successfully",
+  "proceduresOrdered": "Procedures Ordered",
+  "range": "Reference Range",
+  "reasonNotDone": "Reason Not Done",
+  "referals": "Referrals",
+  "referral": "Referral",
+  "referralLaboratoryTestsDisplayTextTitle": "Laboratory Referral Tests",
+  "referredProcedure": "Referred",
+  "referredProcedures": "Referred Procedures",
+  "rejectOrder": "Reject Order",
+  "removeFromBasket": "Remove from basket",
+  "result": "Results",
+  "results": "Results",
+  "saveAndClose": "Save & Close",
+  "saveOrder": "Save order",
+  "saveReport": "Report updated sucessful",
+  "scheduleDate": "Scheduled date",
+  "searchThisList": "Search this list",
+  "selectOutcome": "Select outcome",
+  "sendEmail": "Send Email",
+  "sendResults": "Send Results",
+  "specimenID": "Procedure Id",
+  "specimenType": "Select Specimen Type",
+  "startDatetime": "Start Datetime",
+  "status": "Status",
+  "successful": "Successful",
+  "successfullyrejected": "",
+  "tabletOverlay": "Tablet overlay",
+  "test": "Test",
+  "tests": "Tests",
+  "testType": "Test type",
+  "testTypePlaceholder": "Select one",
+  "totalOrders": "Total Orders",
+  "transition": "Transition",
+  "tryReopeningTheForm": "Please try launching the form again",
+  "urgency": "urgency",
+  "view": "View ",
+  "workList": "Work List"
+}