@kenyaemr/esm-ward-app 8.1.1-pre.118 → 8.1.1-pre.119

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,26 +1,20 @@
 import { InlineNotification } from '@carbon/react';
-import { useAppContext, useDefineAppContext, useFeatureFlag, WorkspaceContainer } from '@openmrs/esm-framework';
-import React, { useEffect, useRef } from 'react';
+import { ExtensionSlot, useFeatureFlag } from '@openmrs/esm-framework';
+import classNames from 'classnames';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
-import EmptyBedSkeleton from '../beds/empty-bed-skeleton';
-import UnassignedPatient from '../beds/unassigned-patient.component';
 import useWardLocation from '../hooks/useWardLocation';
-import { useWardPatientGrouping } from '../hooks/useWardPatientGrouping';
-import { type WardPatient, type WardPatientGroupDetails } from '../types';
-import WardViewHeader from '../ward-view-header/ward-view-header.component';
-import WardBed from './ward-bed.component';
-import { bedLayoutToBed } from './ward-view.resource';
+import { useWardConfig } from './ward-view.resource';
 import styles from './ward-view.scss';
-import classNames from 'classnames';
 
-const WardView = () => {
+const WardView: React.FC<{}> = () => {
   const response = useWardLocation();
-  const { isLoadingLocation, invalidLocation } = response;
+  const { isLoadingLocation, invalidLocation, location } = response;
   const { t } = useTranslation();
 
-  const wardPatientsGroupDetails = useWardPatientGrouping();
-  useDefineAppContext<WardPatientGroupDetails>('ward-patients-group', wardPatientsGroupDetails);
+  const locationUuid = location?.uuid;
   const isVertical = useFeatureFlag('ward-view-vertical-tiling');
+  const wardConfig = useWardConfig(locationUuid);
 
   if (isLoadingLocation) {
     return <></>;
@@ -30,147 +24,13 @@ const WardView = () => {
     return <InlineNotification kind="error" title={t('invalidLocationSpecified', 'Invalid location specified')} />;
   }
 
-  return (
-    <>
-      <div className={classNames(styles.wardView, { [styles.verticalTiling]: isVertical })}>
-        <WardViewHeader />
-        <WardViewMain />
-      </div>
-      <WorkspaceContainer overlay contextKey="ward" />
-    </>
-  );
-};
-
-const WardViewMain = () => {
-  const { location } = useWardLocation();
-  const { t } = useTranslation();
-  const isVertical = useFeatureFlag('ward-view-vertical-tiling');
-
-  const wardPatientsGrouping = useAppContext<WardPatientGroupDetails>('ward-patients-group');
-  const { bedLayouts, wardAdmittedPatientsWithBed, wardUnassignedPatientsList } = wardPatientsGrouping ?? {};
-  const { isLoading: isLoadingAdmissionLocation, error: errorLoadingAdmissionLocation } =
-    wardPatientsGrouping?.admissionLocationResponse ?? {};
-  const {
-    isLoading: isLoadingInpatientAdmissions,
-    error: errorLoadingInpatientAdmissions,
-    hasMore: hasMoreInpatientAdmissions,
-    loadMore: loadMoreInpatientAdmissions,
-  } = wardPatientsGrouping?.inpatientAdmissionResponse ?? {};
-  const isBedManagementModuleInstalled = useFeatureFlag('bedmanagement-module');
-
-  const scrollToLoadMoreTrigger = useRef<HTMLDivElement>(null);
-  useEffect(
-    function scrollToLoadMore() {
-      const observer = new IntersectionObserver(
-        (entries) => {
-          entries.forEach((entry) => {
-            if (entry.isIntersecting) {
-              if (hasMoreInpatientAdmissions && !errorLoadingInpatientAdmissions && !isLoadingInpatientAdmissions) {
-                loadMoreInpatientAdmissions();
-              }
-            }
-          });
-        },
-        { threshold: 1 },
-      );
-
-      if (scrollToLoadMoreTrigger.current) {
-        observer.observe(scrollToLoadMoreTrigger.current);
-      }
-      return () => {
-        if (scrollToLoadMoreTrigger.current) {
-          observer.unobserve(scrollToLoadMoreTrigger.current);
-        }
-      };
-    },
-    [scrollToLoadMoreTrigger, hasMoreInpatientAdmissions, errorLoadingInpatientAdmissions, loadMoreInpatientAdmissions],
-  );
-
-  if (!wardPatientsGrouping) return <></>;
-
-  const wardBeds = bedLayouts?.map((bedLayout) => {
-    const { patients } = bedLayout;
-    const bed = bedLayoutToBed(bedLayout);
-    const wardPatients: WardPatient[] = patients.map((patient): WardPatient => {
-      const inpatientAdmission = wardAdmittedPatientsWithBed.get(patient.uuid);
-      if (inpatientAdmission) {
-        const { patient, visit, currentInpatientRequest } = inpatientAdmission;
-        return { patient, visit, bed, inpatientAdmission, inpatientRequest: currentInpatientRequest || 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 wardUnassignedPatients = wardUnassignedPatientsList?.map((inpatientAdmission) => {
-    return (
-      <UnassignedPatient
-        wardPatient={{
-          patient: inpatientAdmission.patient,
-          visit: inpatientAdmission.visit,
-          bed: null,
-          inpatientAdmission,
-          inpatientRequest: null,
-        }}
-        key={inpatientAdmission.patient.uuid}
-      />
-    );
-  });
+  const wardId = wardConfig.id;
 
   return (
-    <div className={classNames(styles.wardViewMain, { [styles.verticalTiling]: isVertical })}>
-      {wardBeds}
-      {bedLayouts?.length == 0 && isBedManagementModuleInstalled && (
-        <InlineNotification
-          kind="warning"
-          lowContrast={true}
-          title={t('noBedsConfigured', 'No beds configured for this location')}
-        />
-      )}
-      {wardUnassignedPatients}
-      {(isLoadingAdmissionLocation || isLoadingInpatientAdmissions) && <EmptyBeds />}
-      {errorLoadingAdmissionLocation && (
-        <InlineNotification
-          kind="error"
-          lowContrast={true}
-          title={t('errorLoadingWardLocation', 'Error loading ward location')}
-          subtitle={
-            errorLoadingAdmissionLocation?.message ??
-            t('invalidWardLocation', 'Invalid ward location: {{location}}', { location: location.display })
-          }
-        />
-      )}
-      {errorLoadingInpatientAdmissions && (
-        <InlineNotification
-          kind="error"
-          lowContrast={true}
-          title={t('errorLoadingPatients', 'Error loading admitted patients')}
-          subtitle={errorLoadingInpatientAdmissions?.message}
-        />
-      )}
-      <div ref={scrollToLoadMoreTrigger}></div>
+    <div className={classNames(styles.wardView, { [styles.verticalTiling]: isVertical })}>
+      <ExtensionSlot name={wardId} />
     </div>
   );
 };
 
-const EmptyBeds = () => {
-  return (
-    <>
-      {Array(20)
-        .fill(0)
-        .map((_, i) => (
-          <EmptyBedSkeleton key={i} />
-        ))}
-    </>
-  );
-};
-
 export default WardView;

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

@@ -1,4 +1,16 @@
-import { type Patient } from '@openmrs/esm-framework';
+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,
@@ -8,7 +20,7 @@ import type {
   WardMetrics,
   WardPatientGroupDetails,
 } from '../types';
-import type { TFunction } from 'i18next';
+import { useTranslation } from 'react-i18next';
 
 // the server side has 2 slightly incompatible types for Bed
 export function bedLayoutToBed(bedLayout: BedLayout): Bed {
@@ -34,7 +46,6 @@ export function filterBeds(admissionLocation: AdmissionLocationFetchResponse): B
   return bedLayouts;
 }
 
-//TODO: This implementation will change when the api is ready
 export function getWardMetrics(bedLayouts: BedLayout[], wardPatientGroup: WardPatientGroupDetails): WardMetrics {
   const bedMetrics = {
     patients: '--',
@@ -43,7 +54,7 @@ export function getWardMetrics(bedLayouts: BedLayout[], wardPatientGroup: WardPa
   };
   if (bedLayouts == null || bedLayouts.length == 0) return bedMetrics;
   const total = bedLayouts.length;
-  const occupiedBeds = bedLayouts.filter((bed) => bed.patients.length>0);
+  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;
@@ -57,7 +68,10 @@ export function getWardMetrics(bedLayouts: BedLayout[], wardPatientGroup: WardPa
 export function getInpatientAdmissionsUuidMap(inpatientAdmissions: InpatientAdmission[]) {
   const map = new Map<string, InpatientAdmission>();
   for (const inpatientAdmission of inpatientAdmissions ?? []) {
-    map.set(inpatientAdmission.patient.uuid, inpatientAdmission);
+    // TODO: inpatientAdmission is undefined sometimes, why?
+    if (inpatientAdmission) {
+      map.set(inpatientAdmission.patient.uuid, inpatientAdmission);
+    }
   }
   return map;
 }
@@ -103,7 +117,10 @@ export function createAndGetWardPatientGrouping(
   const totalPatientsCount = allWardPatientUuids.size;
 
   for (const inpatientRequest of inpatientRequests ?? []) {
-    allWardPatientUuids.add(inpatientRequest.patient.uuid);
+    // TODO: inpatientRequest is undefined sometimes, why?
+    if (inpatientRequest) {
+      allWardPatientUuids.add(inpatientRequest.patient.uuid);
+    }
   }
 
   return {
@@ -142,3 +159,58 @@ export function getWardMetricValueTranslation(name: string, t: TFunction, value:
       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;
+}

package/src/ward-view/ward-view.scss

@@ -22,6 +22,7 @@
     display: block;
     column-width: 280px;
     overflow-x: auto;
+    height: calc(100% - 4rem);
 
     > div {
       break-inside: avoid;

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

@@ -9,9 +9,11 @@ import { screen } from '@testing-library/react';
 import React from 'react';
 import { useParams } from 'react-router-dom';
 import { renderWithSwr } from 'tools';
-import { mockWardPatientGroupDetails } from '../../mock';
+import { mockWardPatientGroupDetails, mockWardViewContext } from '../../mock';
 import { configSchema } from '../config-schema';
 import useWardLocation from '../hooks/useWardLocation';
+import { type WardViewContext } from '../types';
+import DefaultWardView from './default-ward/default-ward-view.component';
 import WardView from './ward-view.component';
 
 jest.mocked(useConfig).mockReturnValue({
@@ -37,7 +39,7 @@ jest.mock('react-router-dom', () => ({
 }));
 const mockUseParams = useParams as jest.Mock;
 
-jest.mocked(useAppContext).mockReturnValue(mockWardPatientGroupDetails());
+jest.mocked(useAppContext<WardViewContext>).mockReturnValue(mockWardViewContext);
 
 const intersectionObserverMock = () => ({
   observe: () => null,
@@ -48,33 +50,33 @@ describe('WardView', () => {
   let replacedProperty: jest.ReplaceProperty<any> | null = null;
 
   it('renders the session location when no location provided in URL', () => {
-    renderWithSwr(<WardView />);
+    renderWithSwr(<DefaultWardView />);
     const header = screen.getByRole('heading', { name: 'mock location' });
     expect(header).toBeInTheDocument();
   });
 
   it('renders the location provided in URL', () => {
     mockUseParams.mockReturnValueOnce({ locationUuid: 'abcd' });
-    renderWithSwr(<WardView />);
+    renderWithSwr(<DefaultWardView />);
     const header = screen.getByRole('heading', { name: 'mock location' });
     expect(header).toBeInTheDocument();
   });
 
   it('renders the correct number of occupied and empty beds', async () => {
-    renderWithSwr(<WardView />);
+    renderWithSwr(<DefaultWardView />);
     const emptyBedCards = await screen.findAllByText(/empty bed/i);
     expect(emptyBedCards).toHaveLength(3);
   });
 
   it('renders admitted patient without bed', async () => {
-    renderWithSwr(<WardView />);
+    renderWithSwr(<DefaultWardView />);
     const admittedPatientWithoutBed = screen.queryByText('Brian Johnson');
     expect(admittedPatientWithoutBed).toBeInTheDocument();
   });
 
   it('renders all admitted patients even if bed management module not installed', async () => {
     mockUseFeatureFlag.mockReturnValueOnce(false);
-    renderWithSwr(<WardView />);
+    renderWithSwr(<DefaultWardView />);
     const admittedPatientWithoutBed = screen.queryByText('Brian Johnson');
     expect(admittedPatientWithoutBed).toBeInTheDocument();
   });
@@ -100,7 +102,7 @@ describe('WardView', () => {
 
     mockUseFeatureFlag.mockReturnValue(true);
 
-    renderWithSwr(<WardView />);
+    renderWithSwr(<DefaultWardView />);
     const noBedsConfiguredForThisLocation = screen.queryByText('No beds configured for this location');
     expect(noBedsConfiguredForThisLocation).toBeInTheDocument();
   });

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

@@ -0,0 +1,106 @@
+import { InlineNotification } from '@carbon/react';
+import { useAppContext, useFeatureFlag } from '@openmrs/esm-framework';
+import classNames from 'classnames';
+import React, { useEffect, useRef, type ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import EmptyBedSkeleton from '../beds/empty-bed-skeleton';
+import useWardLocation from '../hooks/useWardLocation';
+import { type WardViewContext } from '../types';
+import styles from './ward-view.scss';
+
+const Ward = ({ wardBeds, wardUnassignedPatients }: { wardBeds: ReactNode; wardUnassignedPatients: ReactNode }) => {
+  const { location } = useWardLocation();
+  const { t } = useTranslation();
+  const isVertical = useFeatureFlag('ward-view-vertical-tiling');
+
+  const {wardPatientGroupDetails} = useAppContext<WardViewContext>('ward-view-context') ?? {};
+  const { bedLayouts } = wardPatientGroupDetails ?? {};
+  const { isLoading: isLoadingAdmissionLocation, error: errorLoadingAdmissionLocation } =
+  wardPatientGroupDetails?.admissionLocationResponse ?? {};
+  const {
+    isLoading: isLoadingInpatientAdmissions,
+    error: errorLoadingInpatientAdmissions,
+    hasMore: hasMoreInpatientAdmissions,
+    loadMore: loadMoreInpatientAdmissions,
+  } = wardPatientGroupDetails?.inpatientAdmissionResponse ?? {};
+  const isBedManagementModuleInstalled = useFeatureFlag('bedmanagement-module');
+
+  const scrollToLoadMoreTrigger = useRef<HTMLDivElement>(null);
+  useEffect(
+    function scrollToLoadMore() {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              if (hasMoreInpatientAdmissions && !errorLoadingInpatientAdmissions && !isLoadingInpatientAdmissions) {
+                loadMoreInpatientAdmissions();
+              }
+            }
+          });
+        },
+        { threshold: 1 },
+      );
+
+      if (scrollToLoadMoreTrigger.current) {
+        observer.observe(scrollToLoadMoreTrigger.current);
+      }
+      return () => {
+        if (scrollToLoadMoreTrigger.current) {
+          observer.unobserve(scrollToLoadMoreTrigger.current);
+        }
+      };
+    },
+    [scrollToLoadMoreTrigger, hasMoreInpatientAdmissions, errorLoadingInpatientAdmissions, loadMoreInpatientAdmissions],
+  );
+
+  if (!wardPatientGroupDetails) return <></>;
+
+  return (
+    <div className={classNames(styles.wardViewMain, { [styles.verticalTiling]: isVertical })}>
+      {wardBeds}
+      {bedLayouts?.length == 0 && isBedManagementModuleInstalled && (
+        <InlineNotification
+          kind="warning"
+          lowContrast={true}
+          title={t('noBedsConfigured', 'No beds configured for this location')}
+        />
+      )}
+      {wardUnassignedPatients}
+      {(isLoadingAdmissionLocation || isLoadingInpatientAdmissions) && <EmptyBeds />}
+      {errorLoadingAdmissionLocation && (
+        <InlineNotification
+          kind="error"
+          lowContrast={true}
+          title={t('errorLoadingWardLocation', 'Error loading ward location')}
+          subtitle={
+            errorLoadingAdmissionLocation?.message ??
+            t('invalidWardLocation', 'Invalid ward location: {{location}}', { location: location.display })
+          }
+        />
+      )}
+      {errorLoadingInpatientAdmissions && (
+        <InlineNotification
+          kind="error"
+          lowContrast={true}
+          title={t('errorLoadingPatients', 'Error loading admitted patients')}
+          subtitle={errorLoadingInpatientAdmissions?.message}
+        />
+      )}
+      <div ref={scrollToLoadMoreTrigger}></div>
+    </div>
+  );
+};
+
+const EmptyBeds = () => {
+  return (
+    <>
+      {Array(20)
+        .fill(0)
+        .map((_, i) => (
+          <EmptyBedSkeleton key={i} />
+        ))}
+    </>
+  );
+};
+
+export default Ward;