@kenyaemr/esm-ward-app 8.1.2-pre.214 → 8.5.1-pre.18

package/src/hooks/useWardLocation.ts

@@ -1,24 +1,37 @@
 import { type Location, useSession } from '@openmrs/esm-framework';
-import { useParams } from 'react-router-dom';
+import { last } from 'lodash-es';
 import useLocation from './useLocation';
 
-export default function useWardLocation(): {
+const isUUID = (value?: string) => {
+  const regex = /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/;
+  return regex.test(value);
+};
+
+export default function useWardLocation(overrideLocation?: string): {
   location: Location;
   isLoadingLocation: boolean;
   errorFetchingLocation: Error | undefined;
   invalidLocation: boolean;
 } {
-  const { locationUuid: locationUuidFromUrl } = useParams();
+  // useParams not retriving uuid since its rendered on extension slot and lacks route context
+  // UseLocation also throwing and expeption
+  const { pathname } = window.location;
+  const segement = last(pathname.split('/'));
+  let locationUuidFromUrl: string;
+  if (isUUID(segement)) {
+    locationUuidFromUrl = segement;
+  }
+
   const { sessionLocation } = useSession();
   const {
     data: locationResponse,
     isLoading: isLoadingLocation,
     error: errorFetchingLocation,
-  } = useLocation(locationUuidFromUrl ? locationUuidFromUrl : null);
+  } = useLocation(overrideLocation ? overrideLocation : locationUuidFromUrl ? locationUuidFromUrl : null);
   const invalidLocation = locationUuidFromUrl && errorFetchingLocation;
 
   return {
-    location: locationUuidFromUrl ? locationResponse?.data : sessionLocation,
+    location: locationUuidFromUrl || overrideLocation ? locationResponse?.data : sessionLocation,
     isLoadingLocation,
     errorFetchingLocation,
     invalidLocation,

package/src/hooks/useWardPatientGrouping.ts

@@ -3,30 +3,83 @@ import { createAndGetWardPatientGrouping } from '../ward-view/ward-view.resource
 import { useAdmissionLocation } from './useAdmissionLocation';
 import { useInpatientAdmission } from './useInpatientAdmission';
 import { useInpatientRequest } from './useInpatientRequest';
+import { useInpatientAdmissionByPatients } from './useInpatientAdmissionByPatients';
+import useWardLocation from './useWardLocation';
 
-export function useWardPatientGrouping() {
-  const admissionLocationResponse = useAdmissionLocation();
-  const inpatientAdmissionResponse = useInpatientAdmission();
-  const inpatientRequestResponse = useInpatientRequest();
+export function useWardPatientGrouping(overrideLocation?: string) {
+  const admissionLocationResponse = useAdmissionLocation(undefined, overrideLocation);
+  const inpatientAdmissionAtCurrentLocationResponse = useInpatientAdmission(overrideLocation);
+  const inpatientRequestResponse = useInpatientRequest(undefined, undefined, overrideLocation);
+  const { location: currentLocation } = useWardLocation(overrideLocation);
 
-  const { data: inpatientAdmissions } = inpatientAdmissionResponse;
+  const { data: inpatientAdmissions } = inpatientAdmissionAtCurrentLocationResponse;
   const { admissionLocation } = admissionLocationResponse;
   const { inpatientRequests } = inpatientRequestResponse;
 
+  // set of patients that are not in current ward, that we still
+  // need to fetch info about their current location because they either:
+  // - have a pending admission request to the current ward, or
+  // - have a bed assignment in current ward but somehow not admitted (edge case)
+  const patientsNotInCurrentWard = useMemo(() => {
+    if (admissionLocation && inpatientAdmissions && inpatientRequests) {
+      const _patientsNotInCurrentWard = new Set<string>();
+
+      for (const bedLayout of admissionLocation.bedLayouts) {
+        for (const bedPatient of bedLayout.patients) {
+          _patientsNotInCurrentWard.add(bedPatient.uuid);
+        }
+      }
+      for (const inpatientRequest of inpatientRequests) {
+        _patientsNotInCurrentWard.add(inpatientRequest.patient.uuid);
+      }
+
+      for (const admission of inpatientAdmissions) {
+        _patientsNotInCurrentWard.delete(admission.patient.uuid);
+      }
+
+      return _patientsNotInCurrentWard;
+    } else {
+      return null;
+    }
+  }, [admissionLocation, inpatientAdmissions, inpatientRequests]);
+
+  const inpatientAdmissionsAtOtherLocationsResponse = useInpatientAdmissionByPatients(
+    patientsNotInCurrentWard ? Array.from(patientsNotInCurrentWard) : null,
+  );
+  const { data: inpatientAdmissionsAtOtherLocations } = inpatientAdmissionsAtOtherLocationsResponse;
+
   const groupings = useMemo(() => {
-    return { ...createAndGetWardPatientGrouping(inpatientAdmissions, admissionLocation, inpatientRequests) };
-  }, [admissionLocation, inpatientAdmissions, inpatientRequests]) as ReturnType<typeof createAndGetWardPatientGrouping>;
+    return {
+      ...createAndGetWardPatientGrouping(
+        inpatientAdmissions,
+        admissionLocation,
+        inpatientRequests,
+        inpatientAdmissionsAtOtherLocations,
+        currentLocation,
+      ),
+    };
+  }, [
+    admissionLocation,
+    inpatientAdmissions,
+    inpatientRequests,
+    inpatientAdmissionsAtOtherLocations,
+    currentLocation,
+  ]) as ReturnType<typeof createAndGetWardPatientGrouping>;
   return {
     ...groupings,
     admissionLocationResponse,
-    inpatientAdmissionResponse,
+    inpatientAdmissionResponse: inpatientAdmissionAtCurrentLocationResponse,
     inpatientRequestResponse,
     isLoading:
-      admissionLocationResponse.isLoading || inpatientAdmissionResponse.isLoading || inpatientRequestResponse.isLoading,
+      admissionLocationResponse.isLoading ||
+      inpatientAdmissionAtCurrentLocationResponse.isLoading ||
+      inpatientRequestResponse.isLoading ||
+      inpatientAdmissionsAtOtherLocationsResponse.isLoading,
     mutate() {
       admissionLocationResponse?.mutate();
-      inpatientAdmissionResponse?.mutate();
+      inpatientAdmissionAtCurrentLocationResponse?.mutate();
       inpatientRequestResponse?.mutate();
+      inpatientAdmissionsAtOtherLocationsResponse?.mutate();
     },
   };
 }

package/src/index.ts

@@ -8,20 +8,20 @@ import {
 import { configSchema } from './config-schema';
 import { moduleName } from './constant';
 import { createDashboardLink } from './createDashboardLink.component';
-import rootComponent from './root.component';
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
-
 const options = {
   featureName: 'ward',
   moduleName,
 };
 
-export const root = getSyncLifecycle(rootComponent, options);
+export const root = getAsyncLifecycle(() => import('./root.component'), options);
 
 export const wardDashboardLink = getSyncLifecycle(createDashboardLink({ name: 'ward', title: 'wards' }), options);
 
+export const wardView = getAsyncLifecycle(() => import('./ward-view/ward-view.component'), options);
+
 // t('admissionRequests', 'Admission Requests')
 export const admissionRequestWorkspace = getAsyncLifecycle(
   () => import('./ward-workspace/admission-request-workspace/admission-requests.workspace'),
@@ -63,7 +63,7 @@ export const patientTransferAndSwapWorkspace = getAsyncLifecycle(
 
 // t('discharge', 'Discharge')
 export const patientDischargeWorkspace = getAsyncLifecycle(
-  () => import('./ward-workspace/patient-discharge/patient-discharge.workspace'),
+  () => import('./ward-workspace/kenya-emr-patient-discharge/patient-discharge.workspace'),
   options,
 );
 
@@ -99,6 +99,21 @@ export const clinicalFormWorkspaceSideRailIcon = getAsyncLifecycle(
   options,
 );
 
+export const admissionRequestsWorkspaceSideRailIcon = getAsyncLifecycle(
+  () => import('./ward-workspace/admission-request-workspace/admission-requests-action-button.extension'),
+  options,
+);
+
+export const createAdmissionEncounterWorkspaceSideRailIcon = getAsyncLifecycle(
+  () => import('./ward-workspace/create-admission-encounter/create-admission-encounter-action-button.extension'),
+  options,
+);
+
+export const createAdmissionEncounterWorkspace = getAsyncLifecycle(
+  () => import('./ward-workspace/create-admission-encounter/create-admission-encounter.workspace'),
+  options,
+);
+
 export const defaultWardView = getAsyncLifecycle(
   () => import('./ward-view/default-ward/default-ward-view.component'),
   options,
@@ -109,6 +124,11 @@ export const maternalWardView = getAsyncLifecycle(
   options,
 );
 
+export const wardPatientWorkspaceBanner = getAsyncLifecycle(
+  () => import('./ward-workspace/patient-banner/patient-banner.component'),
+  options,
+);
+
 export function startupApp() {
   registerBreadcrumbs([]);
   defineConfigSchema(moduleName, configSchema);

package/src/location-selector/location-selector.component.tsx

@@ -10,16 +10,42 @@ import {
   ResponsiveWrapper,
   useDebounce,
   useLayoutType,
+  type Location,
 } from '@openmrs/esm-framework';
 import useEmrConfiguration from '../hooks/useEmrConfiguration';
 import useLocations from '../hooks/useLocations';
 import styles from './location-selector.scss';
+import { type ControllerRenderProps } from 'react-hook-form';
 
 interface LocationSelectorProps extends RadioButtonGroupProps {
   paginationSize?: number;
+
+  /**
+   * If provided, limits the locations to child locations of the given ancestor location.
+   */
+  ancestorLocation?: Location;
+
+  /**
+   * a list of locations that should be filtered from the location selector
+   */
+  excludeLocations?: Location[];
+
+  field: ControllerRenderProps<
+    {
+      note?: string;
+      location?: string;
+      transferType?: string;
+    },
+    'location'
+  >;
 }
 
-export default function LocationSelector({ paginationSize = 15, ...props }: LocationSelectorProps) {
+export default function LocationSelector({
+  paginationSize = 15,
+  ancestorLocation,
+  excludeLocations: locationsToFilter,
+  field,
+}: LocationSelectorProps) {
   const { t } = useTranslation();
   const { emrConfiguration, isLoadingEmrConfiguration } = useEmrConfiguration();
   const isTablet = !isDesktop(useLayoutType());
@@ -31,10 +57,15 @@ export default function LocationSelector({ paginationSize = 15, ...props }: Loca
       criteria.push(['name:contains', debouncedSearchTerm]);
     }
     if (emrConfiguration) {
+      // limit to locations tagged as transfer locations
       criteria.push(['_tag', emrConfiguration.supportsTransferLocationTag.name]);
     }
+    if (ancestorLocation) {
+      // limit to locations that are "part of" the facility where the patient has an active visit
+      criteria.push(['partof:below', ancestorLocation.uuid]);
+    }
     return criteria;
-  }, [debouncedSearchTerm, emrConfiguration]);
+  }, [debouncedSearchTerm, emrConfiguration, ancestorLocation]);
   const {
     data: locations,
     isLoading,
@@ -45,6 +76,8 @@ export default function LocationSelector({ paginationSize = 15, ...props }: Loca
     goToPrevious,
   } = useLocations(filterCriteria, paginationSize, !emrConfiguration);
 
+  const filteredLocations = locations?.filter((l) => !locationsToFilter?.some((fl) => fl.uuid === l.id));
+
   const handleSearch = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       setSearchTerm(event.target.value);
@@ -71,9 +104,9 @@ export default function LocationSelector({ paginationSize = 15, ...props }: Loca
         </div>
       ) : (
         <ResponsiveWrapper>
-          <RadioButtonGroup {...props} className={styles.radioButtonGroup} orientation="vertical">
-            {locations?.length > 0 ? (
-              locations?.map((location) => (
+          <RadioButtonGroup {...field} className={styles.radioButtonGroup} orientation="vertical">
+            {filteredLocations?.length > 0 ? (
+              filteredLocations?.map((location) => (
                 <RadioButton key={location.id} labelText={location.name} value={location.id} />
               ))
             ) : (

package/src/root.component.tsx

@@ -1,7 +1,7 @@
-import { WorkspaceContainer } from '@openmrs/esm-framework';
 import React from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import WardView from './ward-view/ward-view.component';
+import WardsLineList from './ward-view/linelist-wards/WardsLineList';
 
 const Root: React.FC = () => {
   // t('wards', 'Wards')
@@ -11,7 +11,7 @@ const Root: React.FC = () => {
     <main>
       <BrowserRouter basename={wardViewBasename}>
         <Routes>
-          <Route path="/" element={<WardView />} />
+          <Route path="/" element={<WardsLineList />} />
           <Route path="/:locationUuid" element={<WardView />} />
         </Routes>
       </BrowserRouter>

package/src/routes.json

@@ -30,6 +30,11 @@
       "name": "ward-dashboard",
       "slot": "ward-dashboard-slot"
     },
+    {
+      "component": "wardView",
+      "name": "ward-view",
+      "slot": "ward-view-slot"
+    },
     {
       "component": "wardPatientActionButtonExtension",
       "name": "ward-patient-action-button",
@@ -60,6 +65,16 @@
       "component": "clinicalFormWorkspaceSideRailIcon",
       "slot": "action-menu-ward-patient-items-slot"
     },
+    {
+      "name": "admission-requests-workspace-siderail-button",
+      "component": "admissionRequestsWorkspaceSideRailIcon",
+      "slot": "action-menu-ward-patient-admission-requests-items-slot"
+    },
+    {
+      "name": "create-admission-request-workspace-siderail-button",
+      "component": "createAdmissionEncounterWorkspaceSideRailIcon",
+      "slot": "action-menu-ward-patient-admission-requests-items-slot"
+    },
     {
       "component": "defaultWardView",
       "name": "default-ward",
@@ -69,6 +84,11 @@
       "component": "maternalWardView",
       "name": "maternal-ward",
       "slot": "maternal-ward"
+    },
+    {
+      "component": "wardPatientWorkspaceBanner",
+      "name": "ward-patient-workspace-banner",
+      "slot": "ward-workspace-patient-banner-slot"
     }
   ],
   "workspaces": [
@@ -76,17 +96,21 @@
       "name": "admission-requests-workspace",
       "component": "admissionRequestWorkspace",
       "title": "admissionRequests",
-      "type": "admission-requests"
+      "type": "pending-admission-requests",
+      "width": "wider"
+    },
+    {
+      "name": "create-admission-encounter-workspace",
+      "component": "createAdmissionEncounterWorkspace",
+      "title": "admitPatient",
+      "type": "patient-search-workspace",
+      "width": "wider"
     },
     {
       "name": "ward-patient-notes-workspace",
       "component": "wardPatientNotesWorkspace",
       "type": "ward-patient-notes",
-      "title": "inpatientNotesWorkspaceTitle",
-      "sidebarFamily": "ward-patient",
-      "hasOwnSidebar": true,
-      "groups": ["ward-patient"]
-
+      "title": "inpatientNotesWorkspaceTitle"
     },
     {
       "name": "admit-patient-form-workspace",
@@ -99,20 +123,13 @@
       "component": "wardPatientWorkspace",
       "type": "ward",
       "title": "Ward patient",
-      "width": "extra-wide",
-      "hasOwnSidebar": true,
-      "sidebarFamily": "ward-patient",
-      "groups": ["ward-patient"]
+      "width": "extra-wide"
     },
     {
       "name": "patient-transfer-swap-workspace",
       "component": "patientTransferAndSwapWorkspace",
       "title": "transfers",
-      "type": "transfer-swap-bed-form",
-      "hasOwnSidebar": true,
-      "sidebarFamily": "ward-patient",
-      "groups": ["ward-patient"]
-
+      "type": "transfer-swap-bed-form"
     },
     {
       "name": "patient-transfer-request-workspace",
@@ -124,27 +141,44 @@
       "name": "patient-discharge-workspace",
       "component": "patientDischargeWorkspace",
       "title": "discharge",
-      "type": "ward-patient-discharge",
-      "hasOwnSidebar": true,
-      "sidebarFamily": "ward-patient",
-      "groups": ["ward-patient"]
+      "width": "extra-wide",
+      "canMaximize": true,
+      "type": "ward-patient-discharge"
     },
     {
       "name": "ward-patient-clinical-forms-workspace",
       "component": "patientClinicalFormsWorkspace",
       "title": "clinicalForms",
       "type": "ward-patient-clinical-forms",
-      "hasOwnSidebar": true,
-      "sidebarFamily": "ward-patient",
-      "width": "wider",
-      "groups": ["ward-patient"]
+      "width": "wider"
     },
     {
       "name": "cancel-admission-request-workspace",
       "component": "cancelAdmissionRequestWorkspace",
       "title": "cancelAdmissionRequest",
-      "type": "cancel-admission-request",
-      "sidebarFamily": "ward-patient"
+      "type": "cancel-admission-request"
+    }
+  ],
+  "workspaceGroups": [
+    {
+      "name": "ward-patient",
+      "members": [
+        "ward-patient-workspace",
+        "ward-patient-notes-workspace",
+        "patient-transfer-swap-workspace",
+        "patient-discharge-workspace",
+        "ward-patient-clinical-forms-workspace",
+        "add-drug-order",
+        "order-basket",
+        "add-lab-order"
+      ]
+    },
+    {
+      "name": "ward-patient-admission-requests",
+      "members": [
+        "admission-requests-workspace",
+        "create-admission-encounter-workspace"
+      ]
     }
   ]
-}
+}

package/src/types/index.ts

@@ -15,16 +15,20 @@ interface WardPatientCardProps {
   wardPatient: WardPatient;
 }
 
-export type WardPatientCardType = React.FC<WardPatientCardProps>;
+export type WardPatientCardType = React.ComponentType<WardPatientCardProps>;
 
 // WardPatient is a patient admitted to a ward, and/or in a bed on a ward
 export type WardPatient = {
   /**
-   * The patient and their current visit. These values are taken either
-   * from either the inpatientAdmission object, the inpatientRequest object
+   * Taken either from the inpatientAdmission object, the inpatientRequest object
    * or the admissionLocation object (which contains the bed)
    */
   patient: Patient;
+
+  /**
+   * Taken either from the inpatientAdmission object, the inpatientRequest object
+   * or the admissionLocation object (which contains the bed)
+   */
   visit: Visit;
 
   /**
@@ -48,7 +52,6 @@ export type WardPatient = {
 
 export interface WardPatientWorkspaceProps extends DefaultWorkspaceProps {
   wardPatient: WardPatient;
-  WardPatientHeader: WardPatientCardType;
 }
 
 // server-side types defined in openmrs-module-bedmanagement:
@@ -73,7 +76,7 @@ export interface Bed {
 
 export interface BedDetail {
   bedId: number;
-  bedNumber: number;
+  bedNumber: string;
   bedType: BedType;
   physicalLocation: Location;
   patients: Array<Patient>;
@@ -152,6 +155,8 @@ export interface InpatientAdmission {
 
   // the current in patient request
   currentInpatientRequest: InpatientRequest;
+
+  currentInpatientLocation: Location;
 }
 
 export interface MotherAndChild {
@@ -237,7 +242,10 @@ export interface ObsPayload {
 export type WardPatientGroupDetails = ReturnType<typeof useWardPatientGrouping>;
 export interface WardViewContext {
   wardPatientGroupDetails: WardPatientGroupDetails;
-  WardPatientHeader: WardPatientCardType;
+  WardPatientHeader: React.ComponentType<WardPatientCardProps>;
+  [key: string]: unknown;
+  [key: number]: unknown;
+  [key: symbol]: unknown;
 }
 
 export interface PatientAndAdmission {
@@ -253,6 +261,9 @@ export interface MotherChildRelationships {
 
 export interface MaternalWardViewContext {
   motherChildRelationships: MotherChildRelationships;
+  [key: string]: unknown;
+  [key: number]: unknown;
+  [key: symbol]: unknown;
 }
 
 export type PatientWorkspaceAdditionalProps = Omit<WardPatientWorkspaceProps, keyof DefaultWorkspaceProps>;

package/src/ward-patient-card/card-rows/admission-request-note-row.component.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { type ObsElementConfig } from '../../config-schema';
 import { type WardPatient } from '../../types';
 import { useElementConfig } from '../../ward-view/ward-view.resource';
-import WardPatientObs from '../row-elements/ward-patient-obs';
+import WardPatientObs from '../row-elements/ward-patient-obs.component';
 import styles from '../ward-patient-card.scss';
 
 interface AdmissionRequestNoteRowProps {

package/src/ward-patient-card/card-rows/coded-obs-tags-row.component.tsx

@@ -1,17 +1,17 @@
+import React, { type ReactNode } from 'react';
 import { Tag } from '@carbon/react';
 import { type OpenmrsResource, type Patient, type Visit } from '@openmrs/esm-framework';
-import React, { type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useObs } from '../../hooks/useObs';
 import { useElementConfig } from '../../ward-view/ward-view.resource';
-import styles from '../ward-patient-card.scss';
-import WardPatientSkeletonText from '../row-elements/ward-patient-skeleton-text';
 import {
   getObsEncounterString,
   obsCustomRepresentation,
   useConceptToTagColorMap,
 } from '../row-elements/ward-patient-obs.resource';
-import WardPatientResponsiveTooltip from '../row-elements/ward-patient-responsive-tooltip';
+import WardPatientSkeletonText from '../row-elements/ward-patient-skeleton-text.component';
+import WardPatientResponsiveTooltip from '../row-elements/ward-patient-responsive-tooltip.component';
+import styles from '../ward-patient-card.scss';
 
 interface WardPatientCodedObsTagsRowProps {
   id: string;

package/src/ward-patient-card/card-rows/mother-child-row.component.tsx

@@ -1,12 +1,12 @@
-import { BabyIcon, MotherIcon, type Patient, useAppContext } from '@openmrs/esm-framework';
-import classNames from 'classnames';
 import React from 'react';
+import classNames from 'classnames';
+import { BabyIcon, MotherIcon, type Patient, useAppContext } from '@openmrs/esm-framework';
 import { type InpatientAdmission, type MaternalWardViewContext } from '../../types';
 import { type MaternalWardPatientCardProps } from '../../ward-view/materal-ward/maternal-ward-patient-card.component';
-import WardPatientAge from '../row-elements/ward-patient-age';
-import WardPatientIdentifier from '../row-elements/ward-patient-identifier';
-import WardPatientLocation from '../row-elements/ward-patient-location';
-import WardPatientName from '../row-elements/ward-patient-name';
+import WardPatientAge from '../row-elements/ward-patient-age.component';
+import WardPatientIdentifier from '../row-elements/ward-patient-identifier.component';
+import WardPatientLocation from '../row-elements/ward-patient-location.component';
+import WardPatientName from '../row-elements/ward-patient-name.component';
 import wardPatientCardStyles from '../ward-patient-card.scss';
 import styles from './mother-child-row.scss';
 

package/src/ward-patient-card/card-rows/pending-items-row.component.tsx

@@ -1,10 +1,9 @@
-import { Hourglass } from '@carbon/react/icons';
 import React, { useCallback, useEffect } from 'react';
+import { Hourglass } from '@carbon/react/icons';
 import { type WardPatient } from '../../types';
-
 import { useElementConfig } from '../../ward-view/ward-view.resource';
 import { WardPatientPendingOrder } from '../row-elements/ward-patient-pending-order.component';
-import WardPatientPendingTransfer from '../row-elements/ward-patient-pending-transfer';
+import WardPatientPendingTransfer from '../row-elements/ward-patient-pending-transfer.component';
 import styles from '../ward-patient-card.scss';
 
 export interface PendingItemsRowProps {

package/src/ward-patient-card/row-elements/{ward-patient-coded-obs-tags.tsx → ward-patient-coded-obs-tags.component.tsx}

@@ -1,13 +1,13 @@
-import { Tag } from '@carbon/react';
-import { type OpenmrsResource, type Patient, type Visit } from '@openmrs/esm-framework';
 import React, { type ReactNode } from 'react';
+import { getObsEncounterString, obsCustomRepresentation, useConceptToTagColorMap } from './ward-patient-obs.resource';
+import { type OpenmrsResource, type Patient, type Visit } from '@openmrs/esm-framework';
+import { Tag } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { useObs } from '../../hooks/useObs';
 import { useElementConfig } from '../../ward-view/ward-view.resource';
+import WardPatientSkeletonText from './ward-patient-skeleton-text.component';
+import WardPatientResponsiveTooltip from './ward-patient-responsive-tooltip.component';
 import styles from '../ward-patient-card.scss';
-import WardPatientSkeletonText from './ward-patient-skeleton-text';
-import { getObsEncounterString, obsCustomRepresentation, useConceptToTagColorMap } from './ward-patient-obs.resource';
-import WardPatientResponsiveTooltip from './ward-patient-responsive-tooltip';
 
 interface WardPatientCodedObsTagsProps {
   id: string;

package/src/ward-patient-card/row-elements/{ward-patient-header-address.tsx → ward-patient-header-address.component.tsx}

@@ -1,5 +1,5 @@
-import { type Patient } from '@openmrs/esm-framework';
 import React from 'react';
+import { type Patient } from '@openmrs/esm-framework';
 import { useElementConfig } from '../../ward-view/ward-view.resource';
 
 export interface WardPatientAddressProps {
@@ -9,7 +9,7 @@ export interface WardPatientAddressProps {
 
 const WardPatientAddress: React.FC<WardPatientAddressProps> = ({ patient, id }) => {
   const preferredAddress = patient?.person?.preferredAddress;
-  const config = useElementConfig("patientAddress", id);
+  const config = useElementConfig('patientAddress', id);
 
   return (
     <>

package/src/ward-patient-card/row-elements/{ward-patient-identifier.tsx → ward-patient-identifier.component.tsx}

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type Patient, type PatientIdentifier, PatientBannerPatientIdentifiers } from '@openmrs/esm-framework';
 import { useElementConfig } from '../../ward-view/ward-view.resource';
+import styles from './ward-patient-identifier.scss';
 
 export interface WardPatientIdentifierProps {
   patient: Patient;
@@ -23,7 +24,12 @@ const WardPatientIdentifier: React.FC<WardPatientIdentifierProps> = ({ id, patie
   }));
 
   return (
-    <PatientBannerPatientIdentifiers identifiers={fhirIdentifiers} showIdentifierLabel={config?.showIdentifierLabel} />
+    <div className={styles.wardPatientIdentifierWrapper}>
+      <PatientBannerPatientIdentifiers
+        identifiers={fhirIdentifiers}
+        showIdentifierLabel={config?.showIdentifierLabel}
+      />
+    </div>
   );
 };
 

package/src/ward-patient-card/row-elements/ward-patient-identifier.scss

@@ -0,0 +1,3 @@
+.wardPatientIdentifierWrapper {
+  display: contents;
+}