@kenyaemr/esm-ward-app 8.0.1-pre.99 → 8.0.2

package/src/ward-view/materal-ward/maternal-ward-patient-card.test.tsx

@@ -0,0 +1,58 @@
+import { getDefaultsFromConfigSchema, useAppContext, useConfig } from '@openmrs/esm-framework';
+import { screen } from '@testing-library/react';
+import { mockPatientAlice, mockVisitAlice } from '__mocks__';
+import React from 'react';
+import { renderWithSwr } from 'tools';
+import { mockInpatientAdmissionAlice } from '../../../../../__mocks__/inpatient-admission';
+import { mockWardBeds } from '../../../../../__mocks__/wardBeds.mock';
+import { mockWardViewContext } from '../../../mock';
+import { configSchema, type WardConfigObject } from '../../config-schema';
+import { useObs } from '../../hooks/useObs';
+import { type WardPatient, type WardViewContext } from '../../types';
+import MaternalWardPatientCard from './maternal-ward-patient-card.component';
+
+jest.mocked(useAppContext<WardViewContext>).mockReturnValue(mockWardViewContext);
+jest.mock('../../hooks/useObs', () => ({
+  useObs: jest.fn(),
+}));
+jest.mock('../../ward-patient-card/row-elements/ward-patient-obs.resource', () => ({
+  useConceptToTagColorMap: jest.fn(),
+}));
+
+const defaultConfig: WardConfigObject = getDefaultsFromConfigSchema(configSchema);
+
+jest.mocked(useConfig).mockReturnValue(defaultConfig);
+//@ts-ignore
+jest.mocked(useObs).mockReturnValue({
+  data: [],
+});
+
+describe('MaternalWardPatientCard', () => {
+  it('renders a patient with no child', () => {
+    const alice: WardPatient = {
+      patient: mockPatientAlice,
+      bed: mockWardBeds[0],
+      inpatientAdmission: mockInpatientAdmissionAlice,
+      visit: mockVisitAlice,
+      inpatientRequest: null,
+    };
+    renderWithSwr(<MaternalWardPatientCard wardPatient={alice} childrenOfWardPatientInSameBed={[]} />);
+
+    const patientName = screen.queryByText('Alice Johnson');
+    expect(patientName).toBeInTheDocument();
+  });
+
+  it('renders a patient with another child in same bed', () => {
+    const alice: WardPatient = {
+      patient: mockPatientAlice,
+      bed: mockWardBeds[0],
+      inpatientAdmission: mockInpatientAdmissionAlice,
+      visit: mockVisitAlice,
+      inpatientRequest: null,
+    };
+    renderWithSwr(<MaternalWardPatientCard wardPatient={alice} childrenOfWardPatientInSameBed={[alice]} />);
+
+    const bedDivider = screen.queryByText('Mother / Child');
+    expect(bedDivider).toBeInTheDocument();
+  });
+});

package/src/ward-view/materal-ward/maternal-ward-pending-patients.component.tsx

@@ -0,0 +1,48 @@
+import { ErrorState, useAppContext } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { type InpatientRequest, type WardViewContext } from '../../types';
+import AdmissionRequestNoteRow from '../../ward-patient-card/card-rows/admission-request-note-row.component';
+import CodedObsTagsRow from '../../ward-patient-card/card-rows/coded-obs-tags-row.component';
+import MotherChildRow from '../../ward-patient-card/card-rows/mother-child-row.component';
+import WardPatientSkeletonText from '../../ward-patient-card/row-elements/ward-patient-skeleton-text';
+import AdmissionRequestCard from '../../ward-workspace/admission-request-card/admission-request-card.component';
+
+function MaternalWardPendingPatients() {
+  const { wardPatientGroupDetails } = useAppContext<WardViewContext>('ward-view-context') ?? {};
+  const { t } = useTranslation();
+  const { inpatientRequestResponse } = wardPatientGroupDetails ?? {};
+  const {
+    inpatientRequests,
+    isLoading: isLoadingInpatientRequests,
+    error: errorFetchingInpatientRequests,
+  } = inpatientRequestResponse ?? {};
+
+  return isLoadingInpatientRequests ? (
+    <WardPatientSkeletonText />
+  ) : errorFetchingInpatientRequests ? (
+    <ErrorState headerTitle={t('admissionRequests', 'Admission requests')} error={errorFetchingInpatientRequests} />
+  ) : (
+    <>
+      {inpatientRequests?.map((request: InpatientRequest, i) => {
+        const wardPatient = {
+          patient: request.patient,
+          visit: request.visit,
+          bed: null,
+          inpatientRequest: request,
+          inpatientAdmission: null,
+        };
+
+        return (
+          <AdmissionRequestCard key={`admission-request-card-${i}`} wardPatient={wardPatient}>
+            <CodedObsTagsRow id="pregnancy-complications" {...wardPatient} />
+            <MotherChildRow wardPatient={wardPatient} childrenOfWardPatientInSameBed={[]} />
+            <AdmissionRequestNoteRow id={'admission-request-note'} wardPatient={wardPatient} />
+          </AdmissionRequestCard>
+        );
+      })}
+    </>
+  );
+}
+
+export default MaternalWardPendingPatients;

package/src/ward-view/materal-ward/maternal-ward-unassigned-patients.component.tsx

@@ -0,0 +1,33 @@
+import { useAppContext } from '@openmrs/esm-framework';
+import React from 'react';
+import { type WardViewContext } from '../../types';
+import MaternalWardPatientCard from './maternal-ward-patient-card.component';
+
+/**
+ * Renders a list of patients in the ward that are admitted but not assigned a bed
+ * @returns
+ */
+function MaternalWardUnassignedPatients() {
+  const { wardPatientGroupDetails } = useAppContext<WardViewContext>('ward-view-context') ?? {};
+  const { wardUnassignedPatientsList } = wardPatientGroupDetails ?? {};
+
+  const wardUnassignedPatients = wardUnassignedPatientsList?.map((inpatientAdmission) => {
+    return (
+      <MaternalWardPatientCard
+        wardPatient={{
+          patient: inpatientAdmission.patient,
+          visit: inpatientAdmission.visit,
+          bed: null,
+          inpatientAdmission,
+          inpatientRequest: inpatientAdmission.currentInpatientRequest,
+        }}
+        childrenOfWardPatientInSameBed={[]}
+        key={inpatientAdmission.patient.uuid}
+      />
+    );
+  });
+
+  return <>{wardUnassignedPatients}</>;
+}
+
+export default MaternalWardUnassignedPatients;

package/src/ward-view/materal-ward/maternal-ward-view.component.tsx

@@ -0,0 +1,38 @@
+import { useDefineAppContext } from '@openmrs/esm-framework';
+import React from 'react';
+import { useWardPatientGrouping } from '../../hooks/useWardPatientGrouping';
+import { type MaternalWardViewContext, type WardViewContext } from '../../types';
+import WardViewHeader from '../../ward-view-header/ward-view-header.component';
+import Ward from '../ward.component';
+import MaternalWardBeds from './maternal-ward-beds.component';
+import MaternalWardPatientCardHeader from './maternal-ward-patient-card-header.component';
+import MaternalWardPendingPatients from './maternal-ward-pending-patients.component';
+import MaternalWardUnassignedPatients from './maternal-ward-unassigned-patients.component';
+import { useMotherChildrenRelationshipsByPatient } from './maternal-ward-view.resource';
+
+const MaternalWardView = () => {
+  const wardPatientGroupDetails = useWardPatientGrouping();
+  useDefineAppContext<WardViewContext>('ward-view-context', {
+    wardPatientGroupDetails,
+    WardPatientHeader: MaternalWardPatientCardHeader,
+  });
+  const { allWardPatientUuids, isLoading } = wardPatientGroupDetails;
+
+  const motherChildRelationships = useMotherChildrenRelationshipsByPatient(Array.from(allWardPatientUuids), !isLoading);
+  useDefineAppContext<MaternalWardViewContext>('maternal-ward-view-context', {
+    motherChildRelationships,
+  });
+
+  const wardBeds = <MaternalWardBeds {...motherChildRelationships} />;
+  const wardUnassignedPatients = <MaternalWardUnassignedPatients />;
+  const wardPendingPatients = <MaternalWardPendingPatients />;
+
+  return (
+    <>
+      <WardViewHeader {...{ wardPendingPatients }} />
+      <Ward {...{ wardBeds, wardUnassignedPatients }} />
+    </>
+  );
+};
+
+export default MaternalWardView;

package/src/ward-view/materal-ward/maternal-ward-view.resource.ts

@@ -0,0 +1,89 @@
+import { showNotification } from '@openmrs/esm-framework';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMotherAndChildren, type MothersAndChildrenSearchCriteria } from '../../hooks/useMotherAndChildren';
+import { type PatientAndAdmission } from '../../types';
+
+const motherAndChildrenRep =
+  'custom:(childAdmission,mother:(person,identifiers:full,uuid),child:(person,identifiers:full,uuid),motherAdmission)';
+
+export function useMotherChildrenRelationshipsByPatient(allWardPatientUuids: string[], fetch: boolean) {
+  const { t } = useTranslation();
+
+  const getChildrenRequestParams: MothersAndChildrenSearchCriteria = {
+    mothers: allWardPatientUuids,
+    requireMotherHasActiveVisit: true,
+    requireChildHasActiveVisit: true,
+    requireChildBornDuringMothersActiveVisit: true,
+  };
+
+  const getMotherRequestParams: MothersAndChildrenSearchCriteria = {
+    children: allWardPatientUuids,
+    requireMotherHasActiveVisit: true,
+    requireChildHasActiveVisit: true,
+    requireChildBornDuringMothersActiveVisit: true,
+  };
+
+  const {
+    data: childrenData,
+    isLoading: isLoadingChildrenData,
+    error: childrenDataError,
+  } = useMotherAndChildren(getChildrenRequestParams, fetch && allWardPatientUuids.length > 0, motherAndChildrenRep);
+  const {
+    data: motherData,
+    isLoading: isLoadingMotherData,
+    error: motherDataError,
+  } = useMotherAndChildren(getMotherRequestParams, fetch && allWardPatientUuids.length > 0, motherAndChildrenRep);
+
+  if (childrenDataError) {
+    showNotification({
+      title: t('errorLoadingChildren', 'Error loading children info'),
+      kind: 'error',
+      critical: true,
+      description: childrenDataError?.message,
+    });
+  }
+  if (motherDataError) {
+    showNotification({
+      title: t('errorLoadingMother', 'Error loading mother info'),
+      kind: 'error',
+      critical: true,
+      description: motherDataError?.message,
+    });
+  }
+
+  const relationships = useMemo(() => {
+    if (isLoadingChildrenData || isLoadingMotherData) {
+      return null;
+    }
+
+    const motherByChildUuid = new Map<string, PatientAndAdmission>();
+    const childrenByMotherUuid = new Map<string, PatientAndAdmission[]>();
+
+    for (const { child, childAdmission, mother, motherAdmission } of motherData ?? []) {
+      motherByChildUuid.set(child.uuid, { patient: mother, currentAdmission: motherAdmission });
+      if (!childrenByMotherUuid.has(mother.uuid)) {
+        childrenByMotherUuid.set(mother.uuid, []);
+      }
+      childrenByMotherUuid.get(mother.uuid).push({ patient: child, currentAdmission: childAdmission });
+    }
+
+    for (const { child, childAdmission, mother, motherAdmission } of childrenData ?? []) {
+      motherByChildUuid.set(child.uuid, { patient: mother, currentAdmission: motherAdmission });
+      if (!childrenByMotherUuid.has(mother.uuid)) {
+        childrenByMotherUuid.set(mother.uuid, []);
+      }
+
+      // careful, we need to avoid duplicate entries if both mother and child as in same ward
+      const children = childrenByMotherUuid.get(mother.uuid);
+      const hasChildAlready = children.some(({ patient }) => patient.uuid == child.uuid);
+      if (!hasChildAlready) {
+        children.push({ patient: child, currentAdmission: childAdmission });
+      }
+    }
+
+    return { motherByChildUuid, childrenByMotherUuid };
+  }, [childrenData, motherData, isLoadingChildrenData, isLoadingMotherData]);
+
+  return relationships;
+}

package/src/ward-view/ward-view.component.tsx

@@ -1,23 +1,20 @@
-import React, { useMemo } from 'react';
 import { InlineNotification } from '@carbon/react';
+import { ExtensionSlot, useFeatureFlag } from '@openmrs/esm-framework';
+import classNames from 'classnames';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { WorkspaceContainer, useFeatureFlag } from '@openmrs/esm-framework';
-import EmptyBedSkeleton from '../beds/empty-bed-skeleton';
-import { useAdmissionLocation } from '../hooks/useAdmissionLocation';
-import WardBed from './ward-bed.component';
-import { bedLayoutToBed, filterBeds } from './ward-view.resource';
-import styles from './ward-view.scss';
-import WardViewHeader from '../ward-view-header/ward-view-header.component';
-import { type InpatientAdmission, type WardPatient } from '../types';
-import { useInpatientAdmission } from '../hooks/useInpatientAdmission';
 import useWardLocation from '../hooks/useWardLocation';
-import UnassignedPatient from '../beds/unassigned-patient.component';
+import { useWardConfig } from './ward-view.resource';
+import styles from './ward-view.scss';
 
-const WardView = () => {
+const WardView: React.FC<{}> = () => {
   const response = useWardLocation();
-  const { isLoadingLocation, invalidLocation } = response;
+  const { isLoadingLocation, invalidLocation, location } = response;
   const { t } = useTranslation();
-  const isBedManagementModuleInstalled = useFeatureFlag('bedmanagement-module');
+
+  const locationUuid = location?.uuid;
+  const isVertical = useFeatureFlag('ward-view-vertical-tiling');
+  const wardConfig = useWardConfig(locationUuid);
 
   if (isLoadingLocation) {
     return <></>;
@@ -27,157 +24,12 @@ const WardView = () => {
     return <InlineNotification kind="error" title={t('invalidLocationSpecified', 'Invalid location specified')} />;
   }
 
-  return (
-    <div className={styles.wardView}>
-      <WardViewHeader />
-      <div className={styles.wardViewMain}>
-        {isBedManagementModuleInstalled ? <WardViewWithBedManagement /> : <WardViewWithoutBedManagement />}
-      </div>
-      <WorkspaceContainer overlay contextKey="ward" />
-    </div>
-  );
-};
-
-// display to use if bed management is installed
-const WardViewWithBedManagement = () => {
-  const { location } = useWardLocation();
-  const { admissionLocation, isLoading: isLoadingLocation, error: errorLoadingLocation } = useAdmissionLocation();
-  const { inpatientAdmissions, isLoading: isLoadingPatients, error: errorLoadingPatients } = useInpatientAdmission();
-  const { t } = useTranslation();
-  const inpatientAdmissionsByPatientUuid = useMemo(() => {
-    const map = new Map<string, InpatientAdmission>();
-    for (const inpatientAdmission of inpatientAdmissions ?? []) {
-      map.set(inpatientAdmission.patient.uuid, inpatientAdmission);
-    }
-    return map;
-  }, [inpatientAdmissions]);
-
-  if (admissionLocation != null || inpatientAdmissions != null) {
-    const bedLayouts = admissionLocation && filterBeds(admissionLocation);
-    // iterate over all beds
-    const wardBeds = bedLayouts?.map((bedLayout) => {
-      const { patients } = bedLayout;
-      const bed = bedLayoutToBed(bedLayout);
-      const wardPatients: WardPatient[] = patients.map((patient): WardPatient => {
-        const inpatientAdmission = inpatientAdmissionsByPatientUuid.get(patient.uuid);
-        if (inpatientAdmission) {
-          const { patient, visit } = inpatientAdmission;
-          return { patient, visit, bed, inpatientAdmission, inpatientRequest: null };
-        } else {
-          // for some reason this patient is in a bed but not in the list of admitted patients, so we need to use the patient data from the bed endpoint
-          return {
-            patient: patient,
-            visit: null,
-            bed,
-            inpatientAdmission: null, // populate after BED-13
-            inpatientRequest: null,
-          };
-        }
-      });
-      return <WardBed key={bed.uuid} bed={bed} wardPatients={wardPatients} />;
-    });
-
-    const patientsInBedsUuids = bedLayouts?.flatMap((bedLayout) => bedLayout.patients.map((patient) => patient.uuid));
-    const wardUnassignedPatients =
-      inpatientAdmissions &&
-      inpatientAdmissions
-        .filter(
-          (inpatientAdmission) =>
-            !patientsInBedsUuids || !patientsInBedsUuids.includes(inpatientAdmission.patient.uuid),
-        )
-        .map((inpatientAdmission) => {
-          return (
-            <UnassignedPatient
-              wardPatient={{
-                patient: inpatientAdmission.patient,
-                visit: inpatientAdmission.visit,
-                bed: null,
-                inpatientAdmission,
-                inpatientRequest: null,
-              }}
-              key={inpatientAdmission.patient.uuid}
-            />
-          );
-        });
-
-    return (
-      <>
-        {wardBeds}
-        {bedLayouts?.length == 0 && (
-          <InlineNotification
-            kind="warning"
-            lowContrast={true}
-            title={t('noBedsConfigured', 'No beds configured for this location')}
-          />
-        )}
-        {wardUnassignedPatients}
-      </>
-    );
-  } else if (isLoadingLocation || isLoadingPatients) {
-    return <EmptyBeds />;
-  } else if (errorLoadingLocation) {
-    return (
-      <InlineNotification
-        kind="error"
-        lowContrast={true}
-        title={t('errorLoadingWardLocation', 'Error loading ward location')}
-        subtitle={
-          errorLoadingLocation?.message ??
-          t('invalidWardLocation', 'Invalid ward location: {{location}}', { location: location.display })
-        }
-      />
-    );
-  } else {
-    return (
-      <InlineNotification
-        kind="error"
-        lowContrast={true}
-        title={t('errorLoadingPatients', 'Error loading admitted patients')}
-        subtitle={errorLoadingPatients?.message}
-      />
-    );
-  }
-};
-
-// display to use if not using bed management
-const WardViewWithoutBedManagement = () => {
-  const { inpatientAdmissions, isLoading: isLoadingPatients, error: errorLoadingPatients } = useInpatientAdmission();
-  const { t } = useTranslation();
+  const wardId = wardConfig.id;
 
-  if (inpatientAdmissions) {
-    const wardPatients = inpatientAdmissions?.map((inpatientAdmission) => {
-      const { patient, visit } = inpatientAdmission;
-      return (
-        <UnassignedPatient
-          wardPatient={{ patient, visit, bed: null, inpatientAdmission, inpatientRequest: null }}
-          key={inpatientAdmission.patient.uuid}
-        />
-      );
-    });
-    return <>{wardPatients}</>;
-  } else if (isLoadingPatients) {
-    return <EmptyBeds />;
-  } else {
-    return (
-      <InlineNotification
-        kind="error"
-        lowContrast={true}
-        title={t('errorLoadingPatients', 'Error loading admitted patients')}
-        subtitle={errorLoadingPatients?.message}
-      />
-    );
-  }
-};
-
-const EmptyBeds = () => {
   return (
-    <>
-      {Array(20)
-        .fill(0)
-        .map((_, i) => (
-          <EmptyBedSkeleton key={i} />
-        ))}
-    </>
+    <div className={classNames(styles.wardView, { [styles.verticalTiling]: isVertical })}>
+      <ExtensionSlot name={wardId} />
+    </div>
   );
 };
 

package/src/ward-view/ward-view.resource.ts

@@ -1,4 +1,26 @@
-import type { AdmissionLocationFetchResponse, Bed, BedLayout } from '../types';
+import { showNotification, useConfig, type Patient } from '@openmrs/esm-framework';
+import type { TFunction } from 'i18next';
+import { useMemo } from 'react';
+import {
+  type PendingItemsElementConfig,
+  type ColoredObsTagsElementConfig,
+  type IdentifierElementConfig,
+  type ObsElementConfig,
+  type PatientAddressElementConfig,
+  type WardConfigObject,
+  type WardDefinition,
+  type AdmissionRequestNoteElementConfig,
+} from '../config-schema';
+import type {
+  AdmissionLocationFetchResponse,
+  Bed,
+  BedLayout,
+  InpatientAdmission,
+  InpatientRequest,
+  WardMetrics,
+  WardPatientGroupDetails,
+} from '../types';
+import { useTranslation } from 'react-i18next';
 
 // the server side has 2 slightly incompatible types for Bed
 export function bedLayoutToBed(bedLayout: BedLayout): Bed {
@@ -20,5 +42,175 @@ export function filterBeds(admissionLocation: AdmissionLocationFetchResponse): B
   const bedLayouts = admissionLocation.bedLayouts
     .filter((bl) => bl.bedId)
     .sort((bedA, bedB) => collator.compare(bedA.bedNumber, bedB.bedNumber));
+
   return bedLayouts;
 }
+
+export function getWardMetrics(bedLayouts: BedLayout[], wardPatientGroup: WardPatientGroupDetails): WardMetrics {
+  const bedMetrics = {
+    patients: '--',
+    freeBeds: '--',
+    capacity: '--',
+  };
+  if (bedLayouts == null || bedLayouts.length == 0) return bedMetrics;
+  const total = bedLayouts.length;
+  const occupiedBeds = bedLayouts.filter((bed) => bed.patients.length > 0);
+  const patients = occupiedBeds.length;
+  const freeBeds = total - patients;
+  const capacity = total != 0 ? Math.trunc((wardPatientGroup.totalPatientsCount / total) * 100) : 0;
+  return {
+    patients: wardPatientGroup?.totalPatientsCount.toString() ?? '--',
+    freeBeds: freeBeds.toString(),
+    capacity: capacity.toString(),
+  };
+}
+
+export function getInpatientAdmissionsUuidMap(inpatientAdmissions: InpatientAdmission[]) {
+  const map = new Map<string, InpatientAdmission>();
+  for (const inpatientAdmission of inpatientAdmissions ?? []) {
+    // TODO: inpatientAdmission is undefined sometimes, why?
+    if (inpatientAdmission) {
+      map.set(inpatientAdmission.patient.uuid, inpatientAdmission);
+    }
+  }
+  return map;
+}
+
+export function createAndGetWardPatientGrouping(
+  inpatientAdmissions: InpatientAdmission[],
+  admissionLocation: AdmissionLocationFetchResponse,
+  inpatientRequests: InpatientRequest[],
+) {
+  const inpatientAdmissionsByPatientUuid = getInpatientAdmissionsUuidMap(inpatientAdmissions);
+
+  const wardAdmittedPatientsWithBed = new Map<string, InpatientAdmission>();
+  const wardUnadmittedPatientsWithBed = new Map<string, Patient>();
+  const bedLayouts = admissionLocation && filterBeds(admissionLocation);
+  const allWardPatientUuids = new Set<string>();
+  let wardPatientPendingCount = 0;
+  bedLayouts?.map((bedLayout) => {
+    const { patients } = bedLayout;
+    patients.map((patient) => {
+      const patientAdmittedWithBed = inpatientAdmissionsByPatientUuid.get(patient.uuid);
+      allWardPatientUuids.add(patient.uuid);
+      if (patientAdmittedWithBed) {
+        wardAdmittedPatientsWithBed.set(patient.uuid, patientAdmittedWithBed);
+        //count the pending metric
+        const dispositionType = patientAdmittedWithBed.currentInpatientRequest?.dispositionType;
+        if (dispositionType == 'TRANSFER' || dispositionType == 'DISCHARGE') wardPatientPendingCount++;
+      } else {
+        wardUnadmittedPatientsWithBed.set(patient.uuid, patient);
+      }
+    });
+  });
+
+  const wardUnassignedPatientsList =
+    inpatientAdmissions?.filter((inpatientAdmission) => {
+      allWardPatientUuids.add(inpatientAdmission.patient.uuid);
+      return (
+        !wardAdmittedPatientsWithBed.has(inpatientAdmission.patient.uuid) &&
+        !wardUnadmittedPatientsWithBed.has(inpatientAdmission.patient.uuid)
+      );
+    }) ?? [];
+
+  //excluding inpatientRequests
+  const totalPatientsCount = allWardPatientUuids.size;
+
+  for (const inpatientRequest of inpatientRequests ?? []) {
+    // TODO: inpatientRequest is undefined sometimes, why?
+    if (inpatientRequest) {
+      allWardPatientUuids.add(inpatientRequest.patient.uuid);
+    }
+  }
+
+  return {
+    wardAdmittedPatientsWithBed,
+    wardUnadmittedPatientsWithBed,
+    wardPatientPendingCount,
+    bedLayouts,
+    wardUnassignedPatientsList,
+    allWardPatientUuids,
+    totalPatientsCount,
+  };
+}
+
+export function getWardMetricNameTranslation(name: string, t: TFunction) {
+  switch (name) {
+    case 'patients':
+      return t('patients', 'Patients');
+    case 'freeBeds':
+      return t('freeBeds', 'Free beds');
+    case 'capacity':
+      return t('capacity', 'Capacity');
+    case 'pendingOut':
+      return t('pendingOut', 'Pending out');
+  }
+}
+
+export function getWardMetricValueTranslation(name: string, t: TFunction, value: string) {
+  switch (name) {
+    case 'patients':
+      return t('patientsMetricValue', '{{ metricValue }}', { metricValue: value });
+    case 'freeBeds':
+      return t('freeBedsMetricValue', '{{ metricValue }}', { metricValue: value });
+    case 'capacity':
+      return t('capacityMetricValue', '{{ metricValue }} %', { metricValue: value });
+    case 'pendingOut':
+      return t('pendingOutMetricValue', '{{ metricValue }}', { metricValue: value });
+  }
+}
+
+export function useElementConfig(elementType: 'obs', id: string): ObsElementConfig;
+export function useElementConfig(elementType: 'patientIdentifier', id: string): IdentifierElementConfig;
+export function useElementConfig(elementType: 'patientAddress', id: string): PatientAddressElementConfig;
+export function useElementConfig(elementType: 'coloredObsTags', id: string): ColoredObsTagsElementConfig;
+export function useElementConfig(elementType: 'pendingItems', id: string): PendingItemsElementConfig;
+export function useElementConfig(elementType: 'admissionRequestNote', id: string): AdmissionRequestNoteElementConfig;
+export function useElementConfig(elementType, id: string): object {
+  const config = useConfig<WardConfigObject>();
+  const { t } = useTranslation();
+
+  try {
+    return config?.patientCardElements?.[elementType]?.find((elementConfig) => elementConfig?.id == id);
+  } catch (e) {
+    showNotification({
+      title: t('errorConfiguringPatientCard', 'Error configuring patient card'),
+      kind: 'error',
+      critical: true,
+      description: t(
+        'errorConfiguringPatientCardMessage',
+        'Unable to find configuration for {{elementType}}, id: {{id}}',
+        {
+          elementType,
+          id,
+        },
+      ),
+    });
+    return null;
+  }
+}
+
+export function useWardConfig(locationUuid: string): WardDefinition {
+  const { wards } = useConfig<WardConfigObject>();
+
+  const currentWardConfig = useMemo(() => {
+    const cardDefinition = wards?.find((wardDef) => {
+      return (
+        wardDef.appliedTo == null ||
+        wardDef.appliedTo?.length == 0 ||
+        wardDef.appliedTo.some((criteria) => criteria.location == locationUuid)
+      );
+    });
+
+    return cardDefinition;
+  }, [wards, locationUuid]);
+
+  if (!currentWardConfig) {
+    console.warn(
+      'No ward card configuration has `appliedTo` criteria that matches the current location. Using the default configuration.',
+    );
+    return { id: 'default-ward' };
+  }
+
+  return currentWardConfig;
+}