@kenyaemr/esm-ward-app 8.1.1-pre.114 → 8.1.1-pre.116

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

@@ -1,23 +1,26 @@
-import React, { useMemo } from 'react';
 import { InlineNotification } from '@carbon/react';
+import { useAppContext, useDefineAppContext, useFeatureFlag, WorkspaceContainer } from '@openmrs/esm-framework';
+import React, { useEffect, useRef } 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 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, filterBeds } from './ward-view.resource';
+import { bedLayoutToBed } 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 classNames from 'classnames';
 
 const WardView = () => {
   const response = useWardLocation();
   const { isLoadingLocation, invalidLocation } = response;
   const { t } = useTranslation();
-  const isBedManagementModuleInstalled = useFeatureFlag('bedmanagement-module');
+
+  const wardPatientsGroupDetails = useWardPatientGrouping();
+  useDefineAppContext<WardPatientGroupDetails>('ward-patients-group', wardPatientsGroupDetails);
+  const isVertical = useFeatureFlag('ward-view-vertical-tiling');
 
   if (isLoadingLocation) {
     return <></>;
@@ -28,145 +31,134 @@ const WardView = () => {
   }
 
   return (
-    <div className={styles.wardView}>
-      <WardViewHeader />
-      <div className={styles.wardViewMain}>
-        {isBedManagementModuleInstalled ? <WardViewWithBedManagement /> : <WardViewWithoutBedManagement />}
+    <>
+      <div className={classNames(styles.wardView, { [styles.verticalTiling]: isVertical })}>
+        <WardViewHeader />
+        <WardViewMain />
       </div>
       <WorkspaceContainer overlay contextKey="ward" />
-    </div>
+    </>
   );
 };
 
-// display to use if bed management is installed
-const WardViewWithBedManagement = () => {
+const WardViewMain = () => {
   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]);
+  const isVertical = useFeatureFlag('ward-view-vertical-tiling');
 
-  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 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 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}
-            />
-          );
-        });
+  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 },
+      );
 
-    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 })
+      if (scrollToLoadMoreTrigger.current) {
+        observer.observe(scrollToLoadMoreTrigger.current);
+      }
+      return () => {
+        if (scrollToLoadMoreTrigger.current) {
+          observer.unobserve(scrollToLoadMoreTrigger.current);
         }
-      />
-    );
-  } else {
-    return (
-      <InlineNotification
-        kind="error"
-        lowContrast={true}
-        title={t('errorLoadingPatients', 'Error loading admitted patients')}
-        subtitle={errorLoadingPatients?.message}
-      />
-    );
-  }
-};
+      };
+    },
+    [scrollToLoadMoreTrigger, hasMoreInpatientAdmissions, errorLoadingInpatientAdmissions, loadMoreInpatientAdmissions],
+  );
 
-// display to use if not using bed management
-const WardViewWithoutBedManagement = () => {
-  const { inpatientAdmissions, isLoading: isLoadingPatients, error: errorLoadingPatients } = useInpatientAdmission();
-  const { t } = useTranslation();
+  if (!wardPatientsGrouping) return <></>;
 
-  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}
-        />
-      );
+  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 <>{wardPatients}</>;
-  } else if (isLoadingPatients) {
-    return <EmptyBeds />;
-  } else {
+    return <WardBed key={bed.uuid} bed={bed} wardPatients={wardPatients} />;
+  });
+
+  const wardUnassignedPatients = wardUnassignedPatientsList?.map((inpatientAdmission) => {
     return (
-      <InlineNotification
-        kind="error"
-        lowContrast={true}
-        title={t('errorLoadingPatients', 'Error loading admitted patients')}
-        subtitle={errorLoadingPatients?.message}
+      <UnassignedPatient
+        wardPatient={{
+          patient: inpatientAdmission.patient,
+          visit: inpatientAdmission.visit,
+          bed: null,
+          inpatientAdmission,
+          inpatientRequest: null,
+        }}
+        key={inpatientAdmission.patient.uuid}
       />
     );
-  }
+  });
+
+  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 = () => {

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

@@ -1,4 +1,14 @@
-import type { AdmissionLocationFetchResponse, Bed, BedLayout } from '../types';
+import { type Patient } from '@openmrs/esm-framework';
+import type {
+  AdmissionLocationFetchResponse,
+  Bed,
+  BedLayout,
+  InpatientAdmission,
+  InpatientRequest,
+  WardMetrics,
+  WardPatientGroupDetails,
+} from '../types';
+import type { TFunction } from 'i18next';
 
 // the server side has 2 slightly incompatible types for Bed
 export function bedLayoutToBed(bedLayout: BedLayout): Bed {
@@ -20,5 +30,115 @@ 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;
 }
+
+//TODO: This implementation will change when the api is ready
+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 ?? []) {
+    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 ?? []) {
+    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 });
+  }
+}

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

@@ -1,15 +1,15 @@
 @use '@carbon/layout';
+@import '~@openmrs/esm-styleguide/src/vars';
 
 .wardView {
   background-color: #e4e4e4;
-  position: absolute;
-  top: var(--omrs-topnav-height);
-  bottom: 0;
-  left: 0;
-  right: 0;
   display: flex;
   flex-direction: column;
   padding: 0 layout.$spacing-05;
+
+  &.verticalTiling {
+    height: calc(100vh - var(--omrs-topnav-height));
+  }
 }
 
 .wardViewMain {
@@ -17,5 +17,15 @@
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   display: grid;
   gap: layout.$spacing-05;
-  padding: layout.$spacing-05;
+
+  &.verticalTiling {
+    display: block;
+    column-width: 280px;
+    overflow-x: auto;
+
+    > div {
+      break-inside: avoid;
+      margin-bottom: 10px;
+    }
+  }
 }

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

@@ -1,12 +1,16 @@
-import React from 'react';
+import {
+  type ConfigSchema,
+  getDefaultsFromConfigSchema,
+  useAppContext,
+  useConfig,
+  useFeatureFlag,
+} from '@openmrs/esm-framework';
 import { screen } from '@testing-library/react';
-import { type ConfigSchema, getDefaultsFromConfigSchema, useConfig, useFeatureFlag } from '@openmrs/esm-framework';
+import React from 'react';
 import { useParams } from 'react-router-dom';
-import { mockAdmissionLocation, mockInpatientAdmissions } from '__mocks__';
 import { renderWithSwr } from 'tools';
+import { mockWardPatientGroupDetails } from '../../mock';
 import { configSchema } from '../config-schema';
-import { useAdmissionLocation } from '../hooks/useAdmissionLocation';
-import { useInpatientAdmission } from '../hooks/useInpatientAdmission';
 import useWardLocation from '../hooks/useWardLocation';
 import WardView from './ward-view.component';
 
@@ -33,29 +37,16 @@ jest.mock('react-router-dom', () => ({
 }));
 const mockUseParams = useParams as jest.Mock;
 
-jest.mock('../hooks/useAdmissionLocation', () => ({
-  useAdmissionLocation: jest.fn(),
-}));
-jest.mock('../hooks/useInpatientAdmission', () => ({
-  useInpatientAdmission: jest.fn(),
-}));
+jest.mocked(useAppContext).mockReturnValue(mockWardPatientGroupDetails());
 
-jest.mocked(useAdmissionLocation).mockReturnValue({
-  error: undefined,
-  mutate: jest.fn(),
-  isValidating: false,
-  isLoading: false,
-  admissionLocation: mockAdmissionLocation,
-});
-jest.mocked(useInpatientAdmission).mockReturnValue({
-  error: undefined,
-  mutate: jest.fn(),
-  isValidating: false,
-  isLoading: false,
-  inpatientAdmissions: mockInpatientAdmissions,
+const intersectionObserverMock = () => ({
+  observe: () => null,
 });
+window.IntersectionObserver = jest.fn().mockImplementation(intersectionObserverMock);
 
 describe('WardView', () => {
+  let replacedProperty: jest.ReplaceProperty<any> | null = null;
+
   it('renders the session location when no location provided in URL', () => {
     renderWithSwr(<WardView />);
     const header = screen.getByRole('heading', { name: 'mock location' });
@@ -103,35 +94,29 @@ describe('WardView', () => {
     expect(invalidText).toBeInTheDocument();
   });
 
-  it('screen should render warning if backend module installed and no beds configured', () => {
+  it('should render warning if backend module installed and no beds configured', () => {
     // override the default response so that no beds are returned
-    jest.mocked(useAdmissionLocation).mockReturnValue({
-      error: undefined,
-      mutate: jest.fn(),
-      isValidating: false,
-      isLoading: false,
-      admissionLocation: { ...mockAdmissionLocation, bedLayouts: [] },
-    });
-    mockUseFeatureFlag.mockReturnValueOnce(true);
+    replacedProperty = jest.replaceProperty(mockWardPatientGroupDetails(), 'bedLayouts', []);
+
+    mockUseFeatureFlag.mockReturnValue(true);
 
     renderWithSwr(<WardView />);
     const noBedsConfiguredForThisLocation = screen.queryByText('No beds configured for this location');
     expect(noBedsConfiguredForThisLocation).toBeInTheDocument();
   });
 
-  it('screen not should render warning if backend module installed and no beds configured', () => {
+  it('should not render warning if backend module installed and no beds configured', () => {
     // override the default response so that no beds are returned
-    jest.mocked(useAdmissionLocation).mockReturnValue({
-      error: undefined,
-      mutate: jest.fn(),
-      isValidating: false,
-      isLoading: false,
-      admissionLocation: { ...mockAdmissionLocation, bedLayouts: [] },
-    });
-    mockUseFeatureFlag.mockReturnValueOnce(false);
+    replacedProperty = jest.replaceProperty(mockWardPatientGroupDetails(), 'bedLayouts', []);
+    mockUseFeatureFlag.mockReturnValue(false);
 
     renderWithSwr(<WardView />);
     const noBedsConfiguredForThisLocation = screen.queryByText('No beds configured for this location');
     expect(noBedsConfiguredForThisLocation).not.toBeInTheDocument();
   });
+
+  afterEach(() => {
+    replacedProperty?.restore();
+    replacedProperty = null;
+  });
 });

package/src/ward-view-header/admission-requests-bar.component.tsx

@@ -1,13 +1,14 @@
-import React from 'react';
-import { Movement } from '@carbon/react/icons';
 import { Button, InlineNotification } from '@carbon/react';
-import { ArrowRightIcon, isDesktop, launchWorkspace, useLayoutType } from '@openmrs/esm-framework';
-import { useInpatientRequest } from '../hooks/useInpatientRequest';
+import { Movement } from '@carbon/react/icons';
+import { ArrowRightIcon, isDesktop, launchWorkspace, useAppContext, useLayoutType } from '@openmrs/esm-framework';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { type WardPatientGroupDetails } from '../types';
 import styles from './admission-requests.scss';
 
 const AdmissionRequestsBar = () => {
-  const { inpatientRequests, isLoading, error } = useInpatientRequest(['ADMIT', 'TRANSFER']);
+  const wardPatientGrouping = useAppContext<WardPatientGroupDetails>('ward-patients-group');
+  const { inpatientRequests, isLoading, error } = wardPatientGrouping?.inpatientRequestResponse ?? {};
   const { t } = useTranslation();
   const layout = useLayoutType();
 
@@ -20,7 +21,7 @@ const AdmissionRequestsBar = () => {
     return (
       <InlineNotification
         kind="error"
-        title={t('errorLoadingPatientAdmissionRequests', 'Error Loading patient admission requests')}
+        title={t('errorLoadingPatientAdmissionRequests', 'Error loading patient admission requests')}
       />
     );
   }
@@ -29,7 +30,7 @@ const AdmissionRequestsBar = () => {
     <div className={styles.admissionRequestsContainer}>
       <Movement className={styles.movementIcon} size="24" />
       <span className={styles.content}>
-        {t('admissionRequestsCount', '{{count}} admission request(s)', {
+        {t('admissionRequestsCount', '{{count}} admission request', {
           count: inpatientRequests.length,
         })}
       </span>

package/src/ward-view-header/admission-requests-bar.test.tsx

@@ -1,28 +1,15 @@
-import React from 'react';
-import userEvent from '@testing-library/user-event';
+import { launchWorkspace, useAppContext } from '@openmrs/esm-framework';
 import { screen } from '@testing-library/react';
-import { launchWorkspace } from '@openmrs/esm-framework';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
 import { renderWithSwr } from 'tools';
-import { mockInpatientRequest } from '__mocks__';
-import { useInpatientRequest } from '../hooks/useInpatientRequest';
+import { mockWardPatientGroupDetails } from '../../mock';
 import AdmissionRequestsBar from './admission-requests-bar.component';
 
-jest.mock('../hooks/useInpatientRequest', () => ({
-  useInpatientRequest: jest.fn(),
-}));
-
-const mockInpatientRequestResponse = {
-  error: undefined,
-  mutate: jest.fn(),
-  isValidating: false,
-  isLoading: false,
-  inpatientRequests: [mockInpatientRequest],
-};
-
-jest.mocked(useInpatientRequest).mockReturnValue(mockInpatientRequestResponse);
+jest.mocked(useAppContext).mockReturnValue(mockWardPatientGroupDetails());
 
 describe('Admission Requests Button', () => {
-  it('call launch workspace when clicked on manage button', async () => {
+  it('should launch workspace when clicked on manage button', async () => {
     const user = userEvent.setup();
     renderWithSwr(<AdmissionRequestsBar />);
 
@@ -30,9 +17,9 @@ describe('Admission Requests Button', () => {
     expect(launchWorkspace).toHaveBeenCalled();
   });
 
-  it('there should be one admission request', () => {
+  it('should have one admission request', () => {
     renderWithSwr(<AdmissionRequestsBar />);
 
-    expect(screen.getByText('1 admission request(s)')).toBeInTheDocument();
+    expect(screen.getByText('1 admission request')).toBeInTheDocument();
   });
 });

package/src/ward-view-header/admission-requests.scss

@@ -8,7 +8,7 @@
   align-items: center;
   padding: layout.$spacing-02 0 layout.$spacing-02 layout.$spacing-04;
   background-color: #393939;
-
+  margin-left: layout.$spacing-03;
   & > button {
     color: #78a9ff;