@openmrs/esm-ward-app 7.0.1-pre.59 → 7.1.0

package/src/ward-patient-card/ward-patient-card.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { type WardPatientCardProps } from '../types';
+import { usePatientCardRows } from './ward-patient-card-row.resources';
+import styles from './ward-patient-card.scss';
+import { getPatientName, launchWorkspace } from '@openmrs/esm-framework';
+import { type WardPatientWorkspaceProps } from '../ward-patient-workspace/ward-patient.workspace';
+
+const WardPatientCard: React.FC<WardPatientCardProps> = (props) => {
+  const { locationUuid } = useParams();
+  const patientCardRows = usePatientCardRows(locationUuid);
+
+  return (
+    <div className={styles.wardPatientCard}>
+      {patientCardRows.map((WardPatientCardRow, i) => (
+        <WardPatientCardRow key={i} {...props} />
+      ))}
+      <button
+        className={styles.wardPatientCardButton}
+        onClick={() =>
+          launchWorkspace<WardPatientWorkspaceProps>('ward-patient-workspace', { patientUuid: props.patient.uuid })
+        }>
+        {/* Name will not be displayed; just there for a11y */}
+        {getPatientName(props.patient.person)}
+      </button>
+    </div>
+  );
+};
+
+export default WardPatientCard;

package/src/ward-patient-workspace/ward-patient-action-button.extension.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { UserAvatarIcon } from '@openmrs/esm-framework';
+import { ActionMenuButton, launchWorkspace } from '@openmrs/esm-framework';
+
+export default function WardPatientActionButton() {
+  const { t } = useTranslation();
+
+  return (
+    <ActionMenuButton
+      getIcon={(props) => <UserAvatarIcon {...props} />}
+      label={t('Patient', 'patient')}
+      iconDescription={t('Patient', 'patient')}
+      handler={() => launchWorkspace('ward-patient-workspace')}
+      type={'ward'}
+    />
+  );
+}

package/src/ward-patient-workspace/ward-patient.style.scss

@@ -0,0 +1,11 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+
+.workspaceContainer {
+  min-height: var(--desktop-workspace-window-height);
+}
+
+.headerPatientDetail {
+  @include type.type-style('body-compact-02');
+  margin: 0 spacing.$spacing-02;
+}

package/src/ward-patient-workspace/ward-patient.workspace.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { InlineNotification } from '@carbon/react';
+import { InlineLoading } from '@carbon/react';
+import {
+  type DefaultWorkspaceProps,
+  ExtensionSlot,
+  attach,
+  getPatientName,
+  usePatient,
+  age,
+} from '@openmrs/esm-framework';
+import styles from './ward-patient.style.scss';
+
+attach('ward-patient-workspace-header-slot', 'patient-vitals-info');
+
+export interface WardPatientWorkspaceProps extends DefaultWorkspaceProps {
+  patientUuid: string;
+}
+
+export default function WardPatientWorkspace({ patientUuid, setTitle }: WardPatientWorkspaceProps) {
+  const { t } = useTranslation();
+  const { patient, isLoading, error } = usePatient(patientUuid);
+
+  useEffect(() => {
+    if (isLoading) {
+      setTitle(t('wardPatientWorkspaceTitle', 'Ward Patient'), <InlineLoading />);
+    } else if (patient) {
+      setTitle(getPatientName(patient), <PatientWorkspaceTitle patient={patient} />);
+    } else if (error) {
+      setTitle(t('wardPatientWorkspaceTitle', 'Ward Patient'));
+    }
+  }, [patient]);
+
+  return (
+    <div className={styles.workspaceContainer}>
+      {isLoading ? (
+        <InlineLoading />
+      ) : patient ? (
+        <WardPatientWorkspaceView patient={patient} />
+      ) : error ? (
+        <InlineNotification>{error.message}</InlineNotification>
+      ) : (
+        <InlineNotification>
+          {t('failedToLoadPatientWorkspace', 'Ward patient workspace has failed to load.')}
+        </InlineNotification>
+      )}
+    </div>
+  );
+}
+
+interface WardPatientWorkspaceViewProps {
+  patient: fhir.Patient;
+}
+
+function WardPatientWorkspaceView({ patient }: WardPatientWorkspaceViewProps) {
+  const extensionSlotState = useMemo(() => ({ patient, patientUuid: patient.id }), [patient]);
+
+  return (
+    <>
+      <div>
+        <ExtensionSlot name="ward-patient-workspace-header-slot" state={extensionSlotState} />
+      </div>
+      <div>
+        <ExtensionSlot name="ward-patient-workspace-content-slot" state={extensionSlotState} />
+      </div>
+    </>
+  );
+}
+
+function PatientWorkspaceTitle({ patient }: { patient: fhir.Patient }) {
+  return (
+    <>
+      <div>{getPatientName(patient)} &nbsp;</div>
+      <div className={styles.headerPatientDetail}>&middot; &nbsp; {patient.gender}</div>
+      <div className={styles.headerPatientDetail}>&middot; &nbsp; {age(patient.birthDate)}</div>
+    </>
+  );
+}

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

@@ -1,15 +1,15 @@
-import { type Patient } from '@openmrs/esm-framework';
+import { type Visit, type Patient } from '@openmrs/esm-framework';
 import React from 'react';
-import EmptyBed from '../empty-beds/empty-bed.component';
-import { type Bed } from '../types';
-
-interface WardBedProps {
+import EmptyBed from '../beds/empty-bed.component';
+import { type WardPatient, type Bed } from '../types';
+import OccupiedBed from '../beds/occupied-bed.component';
+export interface WardBedProps {
+  wardPatients: Array<WardPatient>;
   bed: Bed;
-  patients: Patient[];
 }
 
-const WardBed = ({ bed, patients }: WardBedProps) => {
-  return <>{patients?.length > 0 ? <div></div> : <EmptyBed bed={bed} />}</>;
+const WardBed: React.FC<WardBedProps> = ({ bed, wardPatients }) => {
+  return wardPatients?.length > 0 ? <OccupiedBed bed={bed} wardPatients={wardPatients} /> : <EmptyBed bed={bed} />;
 };
 
 export default WardBed;

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

@@ -1,67 +1,100 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { InlineNotification } from '@carbon/react';
-import { useLocations, useSession, type Location } from '@openmrs/esm-framework';
-
 import { useTranslation } from 'react-i18next';
-import { useParams } from 'react-router-dom';
+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 } from './ward-view.resource';
+import { bedLayoutToBed, filterBeds } from './ward-view.resource';
 import styles from './ward-view.scss';
-import EmptyBedSkeleton from '../empty-beds/empty-bed-skeleton';
+import WardViewHeader from '../ward-view-header/ward-view-header.component';
+import { type AdmittedPatient, type WardPatient } from '../types';
+import { useAdmittedPatients } from '../hooks/useAdmittedPatients';
+import useWardLocation from '../hooks/useWardLocation';
 
 const WardView = () => {
-  const { locationUuid: locationUuidFromUrl } = useParams();
-  const { sessionLocation } = useSession();
-  const allLocations = useLocations();
+  const response = useWardLocation();
+  const { isLoadingLocation, errorFetchingLocation, invalidLocation } = response;
+
   const { t } = useTranslation();
-  const locationFromUrl = allLocations.find((l) => l.uuid === locationUuidFromUrl);
+  const isBedManagementModuleInstalled = useFeatureFlag('bedmanagement-module');
+
+  //TODO:Display patients with admitted status (based on their observations) that have no beds assigned
+  if (!isBedManagementModuleInstalled || isLoadingLocation) {
+    return <></>;
+  }
 
-  const invalidLocation = locationUuidFromUrl && !locationFromUrl;
-  const location = (locationFromUrl ?? sessionLocation) as any as Location;
+  if (invalidLocation) {
+    return <InlineNotification kind="error" title={t('invalidLocationSpecified', 'Invalid location specified')} />;
+  }
 
   return (
     <div className={styles.wardView}>
-      <div className={styles.wardViewHeader}>
-        <h4>{location?.display}</h4>
-      </div>
+      <WardViewHeader />
       <div className={styles.wardViewMain}>
-        {invalidLocation ? (
-          <InlineNotification
-            kind="error"
-            lowContrast={true}
-            title={t('invalidLocationSpecified', 'Invalid location specified')}
-            subtitle={t('unknownLocationUuid', 'Unknown location uuid: {{locationUuidFromUrl}}', {
-              locationUuidFromUrl,
-            })}
-          />
-        ) : (
-          <WardViewByLocation location={location} />
-        )}
+        <WardViewByLocation />
       </div>
+      <WorkspaceContainer overlay contextKey="ward" />
     </div>
   );
 };
 
-const WardViewByLocation = ({ location }: { location: Location }) => {
-  const { admissionLocation, isLoading, error } = useAdmissionLocation(location.uuid);
+const WardViewByLocation = () => {
+  const { location } = useWardLocation();
+  const {
+    admissionLocation,
+    isLoading: isLoadingLocation,
+    error: errorLoadingLocation,
+  } = useAdmissionLocation(location?.uuid);
+  const {
+    admittedPatients,
+    isLoading: isLoadingPatients,
+    error: errorLoadingPatients,
+  } = useAdmittedPatients(location.uuid);
   const { t } = useTranslation();
+  const admittedPatientsByUuid = useMemo(() => {
+    const map = new Map<string, AdmittedPatient>();
+    for (const admittedPatient of admittedPatients ?? []) {
+      map.set(admittedPatient.patient.uuid, admittedPatient);
+    }
+    return map;
+  }, [admittedPatients]);
+
+  if (admissionLocation != null && admittedPatients != null) {
+    const bedLayouts = filterBeds(admissionLocation);
 
-  if (admissionLocation) {
-    // admissionLocation.bedLayouts can contain row+column positions with no bed,
-    // filter out layout positions with no real bed
-    let collator = new Intl.Collator([], { numeric: true });
-    const bedLayouts = admissionLocation.bedLayouts
-      .filter((bl) => bl.bedId)
-      .sort((bedA, bedB) => collator.compare(bedA.bedNumber, bedB.bedNumber));
+    const wardBeds = bedLayouts.map((bedLayout, i) => {
+      const { patients } = bedLayout;
+      const bed = bedLayoutToBed(bedLayout);
+      const wardPatients: WardPatient[] = patients.map((patient) => {
+        const admittedPatient = admittedPatientsByUuid.get(patient.uuid);
+
+        if (admittedPatient) {
+          // ideally, we can just use the patient object within admittedPatient
+          // and not need the one from bedLayouts, however, the emr api
+          // does not respect custom representation right now and does not return
+          // all required fields for the patient object
+          // TODO: change after this is done. https://openmrs.atlassian.net/browse/EA-192
+          return { ...admittedPatient, patient, admitted: true };
+        }
+
+        // patient assigned a bed but *not* admitted
+        // TODO: get the patient's visit and current location
+        return {
+          patient,
+          visit: null,
+          admitted: true,
+          currentLocation: null,
+          timeSinceAdmissionInMinutes: null,
+          timeAtInpatientLocationInMinutes: null,
+        };
+      });
+      return <WardBed key={bed.uuid} bed={bed} wardPatients={wardPatients} />;
+    });
 
     return (
       <>
-        {bedLayouts.map((bedLayout, i) => {
-          const { patient } = bedLayout;
-          const bed = bedLayoutToBed(bedLayout);
-          return <WardBed key={bed.uuid} bed={bed} patients={patient ? [patient] : null} />;
-        })}
+        {wardBeds}
         {bedLayouts.length == 0 && (
           <InlineNotification
             kind="warning"
@@ -71,7 +104,7 @@ const WardViewByLocation = ({ location }: { location: Location }) => {
         )}
       </>
     );
-  } else if (isLoading) {
+  } else if (isLoadingLocation || isLoadingPatients) {
     return (
       <>
         {Array(20)
@@ -81,18 +114,27 @@ const WardViewByLocation = ({ location }: { location: Location }) => {
           ))}
       </>
     );
-  } else {
+  } else if (errorLoadingLocation) {
     return (
       <InlineNotification
         kind="error"
         lowContrast={true}
         title={t('errorLoadingWardLocation', 'Error loading ward location')}
         subtitle={
-          error?.message ??
+          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}
+      />
+    );
   }
 };
 

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

@@ -1,4 +1,4 @@
-import { type Bed, type BedLayout } from '../types';
+import type { AdmissionLocation, Bed, BedLayout } from '../types';
 
 // the server side has 2 slightly incompatible types for Bed
 export function bedLayoutToBed(bedLayout: BedLayout): Bed {
@@ -12,3 +12,13 @@ export function bedLayoutToBed(bedLayout: BedLayout): Bed {
     status: bedLayout.status,
   };
 }
+
+export function filterBeds(admissionLocation: AdmissionLocation): BedLayout[] {
+  // admissionLocation.bedLayouts can contain row+column positions with no bed,
+  // filter out layout positions with no real bed
+  let collator = new Intl.Collator([], { numeric: true });
+  const bedLayouts = admissionLocation.bedLayouts
+    .filter((bl) => bl.bedId)
+    .sort((bedA, bedB) => collator.compare(bedA.bedNumber, bedB.bedNumber));
+  return bedLayouts;
+}

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

@@ -12,10 +12,6 @@
   padding: 0 spacing.$spacing-05;
 }
 
-.wardViewHeader {
-  margin: spacing.$spacing-05 0;
-}
-
 .wardViewMain {
   background-color: #e4e4e4;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

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

@@ -1,31 +1,44 @@
-import { getDefaultsFromConfigSchema, useConfig, useSession } from '@openmrs/esm-framework';
-import { screen } from '@testing-library/react';
 import React from 'react';
+import { screen } from '@testing-library/react';
+import {
+  type Person,
+  type ConfigSchema,
+  getDefaultsFromConfigSchema,
+  useConfig,
+  useFeatureFlag,
+} from '@openmrs/esm-framework';
 import { useParams } from 'react-router-dom';
-import { mockLocations } from '../../../../__mocks__/locations.mock';
 import { mockAdmissionLocation } from '../../../../__mocks__/wards.mock';
 import { renderWithSwr } from '../../../../tools/test-utils';
 import { configSchema } from '../config-schema';
 import { useAdmissionLocation } from '../hooks/useAdmissionLocation';
+import { mockPatientAlice } from '../../../../__mocks__/patient.mock';
+import { useAdmittedPatients } from '../hooks/useAdmittedPatients';
+import useWardLocation from '../hooks/useWardLocation';
 import WardView from './ward-view.component';
 
-jest.mocked(useConfig).mockReturnValue({
-  ...getDefaultsFromConfigSchema(configSchema),
+jest.replaceProperty(mockPatientAlice.person as Person, 'preferredName', {
+  uuid: '',
+  givenName: 'Alice',
+  familyName: 'Johnson',
 });
 
-const mockedSessionLocation = { uuid: 'abcd', display: 'mock location', links: [] };
-jest.mocked(useSession).mockReturnValue({
-  sessionLocation: mockedSessionLocation,
-  authenticated: true,
-  sessionId: 'sessionId',
+jest.mocked(useConfig).mockReturnValue({
+  ...getDefaultsFromConfigSchema<ConfigSchema>(configSchema),
 });
 
-jest.mock('@openmrs/esm-framework', () => {
-  return {
-    ...jest.requireActual('@openmrs/esm-framework'),
-    useLocations: jest.fn().mockImplementation(() => mockLocations.data.results),
-  };
-});
+const mockedUseFeatureFlag = useFeatureFlag as jest.Mock;
+
+jest.mock('../hooks/useWardLocation', () =>
+  jest.fn().mockReturnValue({
+    location: { uuid: 'abcd', display: 'mock location' },
+    isLoadingLocation: false,
+    errorFetchingLocation: null,
+    invalidLocation: false,
+  }),
+);
+
+const mockedUseWardLocation = useWardLocation as jest.Mock;
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -36,6 +49,10 @@ const mockedUseParams = useParams as jest.Mock;
 jest.mock('../hooks/useAdmissionLocation', () => ({
   useAdmissionLocation: jest.fn(),
 }));
+jest.mock('../hooks/useAdmittedPatients', () => ({
+  useAdmittedPatients: jest.fn(),
+}));
+
 jest.mocked(useAdmissionLocation).mockReturnValue({
   error: undefined,
   mutate: jest.fn(),
@@ -43,19 +60,25 @@ jest.mocked(useAdmissionLocation).mockReturnValue({
   isLoading: false,
   admissionLocation: mockAdmissionLocation,
 });
+jest.mocked(useAdmittedPatients).mockReturnValue({
+  error: undefined,
+  mutate: jest.fn(),
+  isValidating: false,
+  isLoading: false,
+  admittedPatients: [],
+});
 
 describe('WardView:', () => {
   it('renders the session location when no location provided in URL', () => {
     renderWithSwr(<WardView />);
-    const header = screen.getByRole('heading', { name: mockedSessionLocation.display });
+    const header = screen.getByRole('heading', { name: 'mock location' });
     expect(header).toBeInTheDocument();
   });
 
   it('renders the location provided in URL', () => {
-    const locationToUse = mockLocations.data.results[0];
-    mockedUseParams.mockReturnValueOnce({ locationUuid: locationToUse.uuid });
+    mockedUseParams.mockReturnValueOnce({ locationUuid: 'abcd' });
     renderWithSwr(<WardView />);
-    const header = screen.getByRole('heading', { name: locationToUse.display });
+    const header = screen.getByRole('heading', { name: 'mock location' });
     expect(header).toBeInTheDocument();
   });
 
@@ -64,4 +87,25 @@ describe('WardView:', () => {
     const emptyBedCards = await screen.findAllByText(/empty bed/i);
     expect(emptyBedCards).toHaveLength(3);
   });
+
+  it('renders notification for invalid location uuid', () => {
+    mockedUseWardLocation.mockReturnValueOnce({
+      location: null,
+      isLoadingLocation: false,
+      errorFetchingLocation: null,
+      invalidLocation: true,
+    });
+
+    renderWithSwr(<WardView />);
+    const notification = screen.getByRole('status');
+    expect(notification).toBeInTheDocument();
+    const invalidText = screen.getByText('Invalid location specified');
+    expect(invalidText).toBeInTheDocument();
+  });
+
+  it('screen should be empty if backend module is not installed', () => {
+    mockedUseFeatureFlag.mockReturnValueOnce(false);
+    const { container } = renderWithSwr(<WardView />);
+    expect(container).toBeEmptyDOMElement();
+  });
 });

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

@@ -0,0 +1,50 @@
+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 { useTranslation } from 'react-i18next';
+import useWardLocation from '../hooks/useWardLocation';
+import styles from './admission-requests.scss';
+
+const AdmissionRequestsBar = () => {
+  const { location } = useWardLocation();
+  const { inpatientRequests, isLoading, error } = useInpatientRequest(location?.uuid);
+  const admissionRequests = inpatientRequests?.filter((request) => request.type == 'ADMISSION');
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+
+  if (isLoading || !admissionRequests?.length) {
+    return null;
+  }
+
+  if (error) {
+    console.error(error);
+    return (
+      <InlineNotification
+        kind="error"
+        title={t('errorLoadingPatientAdmissionRequests', 'Error Loading patient admission requests')}
+      />
+    );
+  }
+
+  return (
+    <div className={styles.admissionRequestsContainer}>
+      <Movement className={styles.movementIcon} size="24" />
+      <span className={styles.content}>
+        {t('admissionRequestsCount', '{{count}} admission requests', {
+          count: admissionRequests.length,
+        })}
+      </span>
+      <Button
+        onClick={() => launchWorkspace('admission-requests-workspace', { admissionRequests })}
+        renderIcon={ArrowRightIcon}
+        kind="ghost"
+        size={isDesktop(layout) ? 'sm' : 'lg'}>
+        {t('manage', 'Manage')}
+      </Button>
+    </div>
+  );
+};
+
+export default AdmissionRequestsBar;

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { renderWithSwr } from '../../../../tools/test-utils';
+import { screen } from '@testing-library/react';
+import { launchWorkspace } from '@openmrs/esm-framework';
+import AdmissionRequestsBar from './admission-requests-bar.component';
+import { mockInpatientRequest } from '../../../../__mocks__/ward-patient';
+import { useInpatientRequest } from '../hooks/useInpatientRequest';
+
+jest.mock('@openmrs/esm-framework', () => {
+  return {
+    ...jest.requireActual('@openmrs/esm-framework'),
+    launchWorkspace: jest.fn(),
+  };
+});
+
+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);
+
+describe('Admission Requests Button', () => {
+  it('call launch workspace when clicked on manage button', async () => {
+    const user = userEvent.setup();
+    renderWithSwr(<AdmissionRequestsBar />);
+
+    await user.click(screen.getByRole('button', { name: /manage/i }));
+    expect(launchWorkspace).toHaveBeenCalled();
+  });
+
+  it('there should be one admission request', () => {
+    renderWithSwr(<AdmissionRequestsBar />);
+
+    expect(screen.getByText('1 admission requests')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,33 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.admissionRequestsContainer {
+  background-color: $color-gray-70;
+  display: flex;
+  align-items: center;
+  padding: spacing.$spacing-02 0 spacing.$spacing-02 spacing.$spacing-04;
+  background-color: #393939;
+
+  & > button {
+    color: #78a9ff;
+
+    svg {
+      fill: #78a9ff !important;
+    }
+  }
+}
+
+.movementIcon {
+  padding: spacing.$spacing-02;
+  border-radius: 50%;
+  fill: $ui-03;
+  background-color: $color-blue-60-2;
+  margin-right: spacing.$spacing-03;
+}
+
+.content {
+  @include type.type-style('heading-compact-01');
+  color: $ui-02;
+  margin-right: spacing.$spacing-03;
+}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import styles from './ward-view-header.scss';
+import AdmissionRequestsBar from './admission-requests-bar.component';
+import useWardLocation from '../hooks/useWardLocation';
+
+interface WardViewHeaderProps {}
+
+const WardViewHeader: React.FC<WardViewHeaderProps> = () => {
+  const { location } = useWardLocation();
+  return (
+    <div className={styles.wardViewHeader}>
+      <h4>{location?.display}</h4>
+      <AdmissionRequestsBar />
+    </div>
+  );
+};
+
+export default WardViewHeader;

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

@@ -0,0 +1,8 @@
+@use '@carbon/styles/scss/spacing';
+
+.wardViewHeader {
+  margin: spacing.$spacing-05 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}