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

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import styles from './ward-metric.scss';
+import { SkeletonPlaceholder } from '@carbon/react';
+
+interface WardMetricProps {
+  metricName: string;
+  metricValue: string;
+  isLoading: boolean;
+}
+const WardMetric: React.FC<WardMetricProps> = ({ metricName, metricValue, isLoading }) => {
+ 
+  return (
+    <div className={styles.metric}>
+     <span className={styles.metricName}>{metricName}</span>
+      {isLoading ? (
+        <SkeletonPlaceholder className={styles.skeleton} />
+      ) : (
+        <span className={styles.metricValue}>{metricValue}</span>
+      )}
+    </div>
+  );
+};
+
+export default WardMetric;

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

@@ -0,0 +1,25 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.metric {
+  margin-left: spacing.$spacing-05;
+  display: flex;
+  align-items: end;
+  gap: 5px;
+}
+
+.metricName {
+  @include type.type-style('helper-text-01');
+  color: $color-gray-70;
+}
+
+.metricValue {
+  @include type.type-style('heading-03');
+  line-height: revert;
+}
+
+.skeleton {
+  height: 15px;
+  width: 15px;
+}

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import styles from './ward-metrics.scss';
+import { useBeds } from '../hooks/useBeds';
+import { showNotification, useAppContext, useFeatureFlag } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import {
+  getWardMetricNameTranslation,
+  getWardMetrics,
+  getWardMetricValueTranslation,
+} from '../ward-view/ward-view.resource';
+import WardMetric from './ward-metric.component';
+import type { WardPatientGroupDetails } from '../types';
+import useWardLocation from '../hooks/useWardLocation';
+
+const wardMetrics = [{ name: 'patients' }, { name: 'freeBeds' }, { name: 'capacity' }];
+
+const WardMetrics = () => {
+  const { location } = useWardLocation();
+  const { t } = useTranslation();
+  const isBedManagementModuleInstalled = useFeatureFlag('bedmanagement-module');
+  const wardPatientGroup = useAppContext<WardPatientGroupDetails>('ward-patients-group');
+  const { admissionLocationResponse, inpatientAdmissionResponse, inpatientRequestResponse, bedLayouts } =
+    wardPatientGroup || {};
+  const { isLoading, error } = admissionLocationResponse ?? {};
+  const isDataLoading =
+    admissionLocationResponse?.isLoading ||
+    inpatientAdmissionResponse?.isLoading ||
+    inpatientRequestResponse?.isLoading;
+  if (!wardPatientGroup) return <></>;
+
+  if (error) {
+    showNotification({
+      kind: 'error',
+      title: t('errorLoadingBedDetails', 'Error loading bed details'),
+      description: error.message,
+    });
+  }
+
+  const wardMetricValues = getWardMetrics(bedLayouts, wardPatientGroup);
+  return (
+    <div className={styles.metricsContainer}>
+      {isBedManagementModuleInstalled ? (
+        wardMetrics.map((wardMetric) => {
+          return (
+            <WardMetric
+              metricName={getWardMetricNameTranslation(wardMetric.name, t)}
+              metricValue={getWardMetricValueTranslation(wardMetric.name, t, wardMetricValues[wardMetric.name])}
+              isLoading={!!isLoading || !!isDataLoading}
+              key={wardMetric.name}
+            />
+          );
+        })
+      ) : (
+        <WardMetric
+          metricName={getWardMetricNameTranslation('patients', t)}
+          metricValue={'--'}
+          isLoading={false}
+          key={'patients'}
+        />
+      )}
+      {isBedManagementModuleInstalled && (
+        <WardMetric
+          metricName={getWardMetricNameTranslation('pendingOut', t)}
+          metricValue={
+            error
+              ? '--'
+              : getWardMetricValueTranslation('pendingOut', t, wardPatientGroup?.wardPatientPendingCount?.toString())
+          }
+          isLoading={!!isDataLoading}
+          key="pending"
+        />
+      )}
+    </div>
+  );
+};
+
+export default WardMetrics;

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

@@ -0,0 +1,8 @@
+@use '@carbon/styles/scss/spacing';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.metricsContainer {
+  display: flex;
+  align-items: end;
+  margin-left: auto;
+}

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

@@ -0,0 +1,91 @@
+import React from 'react';
+import WardMetrics from './ward-metrics.component';
+import { renderWithSwr } from '../../../../tools/test-utils';
+import {
+  createAndGetWardPatientGrouping,
+  getInpatientAdmissionsUuidMap,
+  getWardMetrics,
+} from '../ward-view/ward-view.resource';
+import { useAdmissionLocation } from '../hooks/useAdmissionLocation';
+import { mockAdmissionLocation, mockInpatientAdmissions, mockInpatientRequest } from '__mocks__';
+import { useInpatientAdmission } from '../hooks/useInpatientAdmission';
+import useWardLocation from '../hooks/useWardLocation';
+import { screen } from '@testing-library/react';
+import { useAppContext } from '@openmrs/esm-framework';
+
+const wardMetrics = [
+  { name: 'patients', key: 'patients', defaultTranslation: 'Patients' },
+  { name: 'freeBeds', key: 'freeBeds', defaultTranslation: 'Free beds' },
+  { name: 'capacity', key: 'capacity', defaultTranslation: 'Capacity' },
+];
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: jest.fn().mockReturnValue({}),
+}));
+
+jest.mock('../hooks/useWardLocation', () =>
+  jest.fn().mockReturnValue({
+    location: { uuid: 'abcd', display: 'mock location' },
+    isLoadingLocation: false,
+    errorFetchingLocation: null,
+    invalidLocation: false,
+  }),
+);
+
+jest.mock('../hooks/useBeds', () => ({
+  useBeds: jest.fn(),
+}));
+
+jest.mock('../hooks/useAdmissionLocation', () => ({
+  useAdmissionLocation: jest.fn(),
+}));
+jest.mock('../hooks/useInpatientAdmission', () => ({
+  useInpatientAdmission: jest.fn(),
+}));
+
+jest.mock('../hooks/useInpatientRequest', () => ({
+  useInpatientRequest: jest.fn(),
+}));
+
+const mockUseWardLocation = jest.mocked(useWardLocation);
+
+const mockAdmissionLocationResponse = jest.mocked(useAdmissionLocation).mockReturnValue({
+  error: undefined,
+  mutate: jest.fn(),
+  isValidating: false,
+  isLoading: false,
+  admissionLocation: mockAdmissionLocation,
+});
+const mockInpatientAdmissionResponse = jest.mocked(useInpatientAdmission).mockReturnValue({
+  error: undefined,
+  mutate: jest.fn(),
+  isValidating: false,
+  isLoading: false,
+  inpatientAdmissions: mockInpatientAdmissions,
+});
+
+const inpatientAdmissionsUuidMap = getInpatientAdmissionsUuidMap(mockInpatientAdmissions);
+const mockWardPatientGroupDetails = {
+  admissionLocationResponse: mockAdmissionLocationResponse(),
+  inpatientAdmissionResponse: mockInpatientAdmissionResponse(),
+  ...createAndGetWardPatientGrouping(mockInpatientAdmissions, mockAdmissionLocation, mockInpatientRequest),
+};
+jest.mocked(useAppContext).mockReturnValue(mockWardPatientGroupDetails);
+describe('Ward Metrics', () => {
+  it('Should display metrics of in the ward ', () => {
+    mockUseWardLocation.mockReturnValueOnce({
+      location: null,
+      isLoadingLocation: false,
+      errorFetchingLocation: null,
+      invalidLocation: true,
+    });
+    const { bedLayouts } = mockWardPatientGroupDetails;
+    const bedMetrics = getWardMetrics(bedLayouts, mockWardPatientGroupDetails);
+    renderWithSwr(<WardMetrics />);
+    for (let [key, value] of Object.entries(bedMetrics)) {
+      const fieldName = wardMetrics.find((metric) => metric.name == key)?.defaultTranslation;
+      expect(screen.getByText(fieldName!)).toBeInTheDocument();
+    }
+  });
+});

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

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

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

@@ -4,5 +4,4 @@
   margin: layout.$spacing-05 0;
   display: flex;
   align-items: center;
-  justify-content: space-between;
 }

package/src/ward-workspace/admission-request-card/admission-request-card-actions.component.tsx

@@ -2,11 +2,12 @@ import { Button } from '@carbon/react';
 import { ArrowRightIcon, launchWorkspace, useLayoutType } from '@openmrs/esm-framework';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import type { WardPatientCard } from '../../types';
+import type { WardPatientWorkspaceProps, WardPatientCard } from '../../types';
 import type { AdmitPatientFormWorkspaceProps } from '../admit-patient-form-workspace/types';
 import styles from './admission-request-card.scss';
 
-const AdmissionRequestCardActions: WardPatientCard = ({ patient, inpatientRequest }) => {
+const AdmissionRequestCardActions: WardPatientCard = (wardPatient) => {
+  const { patient, inpatientRequest } = wardPatient;
   const { dispositionType } = inpatientRequest;
   const { t } = useTranslation();
   const responsiveSize = useLayoutType() === 'tablet' ? 'lg' : 'md';
@@ -14,9 +15,16 @@ const AdmissionRequestCardActions: WardPatientCard = ({ patient, inpatientReques
     () => launchWorkspace<AdmitPatientFormWorkspaceProps>('admit-patient-form-workspace', { patient, dispositionType }),
     [],
   );
+
+  const launchPatientTransferForm = useCallback(() => {
+    launchWorkspace<WardPatientWorkspaceProps>('patient-transfer-request-workspace', {
+      wardPatient,
+    });
+  }, [wardPatient]);
+
   return (
     <div className={styles.admissionRequestActionBar}>
-      <Button kind="ghost" size={responsiveSize}>
+      <Button kind="ghost" size={responsiveSize} onClick={launchPatientTransferForm}>
         {t('transferElsewhere', 'Transfer elsewhere')}
       </Button>
       <Button kind="ghost" renderIcon={ArrowRightIcon} size={responsiveSize} onClick={launchPatientAdmissionForm}>

package/src/ward-workspace/admission-request-card/admission-request-card-header.component.tsx

@@ -1,12 +1,11 @@
 import { ExtensionSlot, formatDatetime, getLocale } from '@openmrs/esm-framework';
 import classNames from 'classnames';
 import React from 'react';
-import WardPatientWorkspaceBanner from '../patient-banner/patient-banner.component';
-import styles from './admission-request-card.scss';
-import type WardPatientCard from '../../ward-patient-card/ward-patient-card.component';
 import { useCurrentWardCardConfig } from '../../hooks/useCurrentWardCardConfig';
-import { WardPatientCardElement } from '../../ward-patient-card/ward-patient-card-element.component';
 import WardPatientName from '../../ward-patient-card/row-elements/ward-patient-name';
+import { WardPatientCardElement } from '../../ward-patient-card/ward-patient-card-element.component';
+import type WardPatientCard from '../../ward-patient-card/ward-patient-card.component';
+import styles from './admission-request-card.scss';
 
 const AdmissionRequestCardHeader: WardPatientCard = (wardPatient) => {
   const { inpatientRequest } = wardPatient;
@@ -42,7 +41,7 @@ const AdmissionRequestCardHeader: WardPatientCard = (wardPatient) => {
       <ExtensionSlot
         name={rowsExtensionSlotName}
         state={extensionSlotState}
-        className={styles.admissionRequestCardRow}
+        className={styles.admissionRequestCardExtensionSlot}
       />
     </div>
   );

package/src/ward-workspace/admission-request-card/admission-request-card.scss

@@ -25,10 +25,14 @@
   }
 }
 
-.admissionRequestCardRow {
-  padding: layout.$spacing-05;
-  margin: layout.$spacing-03;
-  background-color: white;
+.admissionRequestCardExtensionSlot {
+  display: none;
+
+  &:has(div:not(:empty)) {
+    display: block;  
+    margin: layout.$spacing-03 0;
+    background-color: white;
+  }
 }
 
 .admissionEncounterDetails {

package/src/ward-workspace/admission-request-workspace/admission-requests-workspace.test.tsx

@@ -23,12 +23,15 @@ mockUseWardLocation.mockReturnValue({
   invalidLocation: false,
 });
 
-const mockInpatientRequestResponse = {
+const mockInpatientRequestResponse: ReturnType<typeof useInpatientRequest> = {
   error: undefined,
   mutate: jest.fn(),
   isValidating: false,
   isLoading: false,
-  inpatientRequests: [mockInpatientRequest],
+  inpatientRequests: mockInpatientRequest,
+  totalCount: 1,
+  hasMore: false,
+  loadMore: jest.fn(),
 };
 
 jest.mocked(useInpatientRequest).mockReturnValue(mockInpatientRequestResponse);
@@ -43,6 +46,8 @@ const workspaceProps = {
 describe('Admission Requests Workspace', () => {
   it('should render a admission request card', () => {
     renderWithSwr(<AdmissionRequestsWorkspace {...workspaceProps} />);
-    expect(screen.getByText(mockInpatientRequest.patient.person?.preferredName?.display as string)).toBeInTheDocument();
+    expect(
+      screen.getByText(mockInpatientRequest[0].patient.person?.preferredName?.display as string),
+    ).toBeInTheDocument();
   });
 });

package/src/ward-workspace/admission-request-workspace/admission-requests.workspace.tsx

@@ -9,6 +9,8 @@ import { type InpatientRequest } from '../../types';
 
 interface AdmissionRequestsWorkspaceProps {}
 const AdmissionRequestsWorkspace: React.FC<AdmissionRequestsWorkspaceProps> = () => {
+  // note: useAppContext() does not work here for some reason, so we call `useInpatientRequest`
+  // directly. See: https://openmrs.atlassian.net/browse/O3-4020
   const {
     inpatientRequests,
     isLoading: isLoadingInpatientRequests,

package/src/ward-workspace/admit-patient-form-workspace/admit-patient-form.test.tsx

@@ -1,21 +1,17 @@
-import React from 'react';
+import { openmrsFetch, showSnackbar, useAppContext, useFeatureFlag, useSession } from '@openmrs/esm-framework';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { mockAdmissionLocation, mockLocationInpatientWard, mockPatientAlice } from '../../../../../__mocks__';
 import { renderWithSwr } from '../../../../../tools';
-import AdmitPatientFormWorkspace from './admit-patient-form.workspace';
-import {
-  mockAdmissionLocation,
-  mockInpatientRequest,
-  mockLocationInpatientWard,
-  mockPatientAlice,
-} from '../../../../../__mocks__';
-import type { DispositionType } from '../../types';
-import type { AdmitPatientFormWorkspaceProps } from './types';
+import { mockWardPatientGroupDetails } from '../../../mock';
 import { useAdmissionLocation } from '../../hooks/useAdmissionLocation';
-import { openmrsFetch, provide, showSnackbar, useFeatureFlag, useSession } from '@openmrs/esm-framework';
 import useEmrConfiguration from '../../hooks/useEmrConfiguration';
-import useWardLocation from '../../hooks/useWardLocation';
 import { useInpatientRequest } from '../../hooks/useInpatientRequest';
+import useWardLocation from '../../hooks/useWardLocation';
+import type { DispositionType } from '../../types';
+import AdmitPatientFormWorkspace from './admit-patient-form.workspace';
+import type { AdmitPatientFormWorkspaceProps } from './types';
 
 jest.mock('../../hooks/useAdmissionLocation', () => ({
   useAdmissionLocation: jest.fn(),
@@ -29,15 +25,23 @@ jest.mock('../../hooks/useInpatientRequest', () => ({
   useInpatientRequest: jest.fn(),
 }));
 
-const mockedUseInpatientRequest = jest.mocked(useInpatientRequest);
+jest.mock('../../hooks/useWardPatientGrouping', () => ({
+  useWardPatientGrouping: jest.fn(),
+}));
+
+jest.mock('../../hooks/useInpatientAdmission', () => ({
+  useInpatientAdmission: jest.fn(),
+}));
+
 const mockedUseEmrConfiguration = jest.mocked(useEmrConfiguration);
 const mockedUseWardLocation = jest.mocked(useWardLocation);
 const mockedOpenmrsFetch = jest.mocked(openmrsFetch);
-const mockedUseAdmissionLocation = jest.mocked(useAdmissionLocation);
 const mockedUseFeatureFlag = jest.mocked(useFeatureFlag);
 const mockedShowSnackbar = jest.mocked(showSnackbar);
 const mockedUseSession = jest.mocked(useSession);
 
+jest.mocked(useAppContext).mockReturnValue(mockWardPatientGroupDetails());
+
 const mockWorkspaceProps: AdmitPatientFormWorkspaceProps = {
   patient: mockPatientAlice,
   closeWorkspace: jest.fn(),
@@ -45,24 +49,19 @@ const mockWorkspaceProps: AdmitPatientFormWorkspaceProps = {
   promptBeforeClosing: jest.fn(),
   setTitle: jest.fn(),
   dispositionType: 'ADMIT',
+  setCancelTitle: jest.fn(),
+  setCancelMessage: jest.fn(),
+  setCancelConfirmText: jest.fn(),
 };
 
 function renderAdmissionForm(dispositionType: DispositionType = 'ADMIT') {
   renderWithSwr(<AdmitPatientFormWorkspace {...{ ...mockWorkspaceProps, dispositionType }} />);
 }
 
-const mockedMutateInpatientRequest = jest.fn();
-
 describe('Testing AdmitPatientForm', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    mockedUseAdmissionLocation.mockReturnValue({
-      isLoading: false,
-      isValidating: false,
-      admissionLocation: mockAdmissionLocation,
-      mutate: jest.fn(),
-      error: undefined,
-    });
+
     mockedUseSession.mockReturnValue({
       currentProvider: {
         uuid: 'current-provider-uuid',
@@ -91,13 +90,6 @@ describe('Testing AdmitPatientForm', () => {
       },
       mutateEmrConfiguration: jest.fn(),
     });
-    mockedUseInpatientRequest.mockReturnValue({
-      mutate: mockedMutateInpatientRequest,
-      error: undefined,
-      inpatientRequests: [mockInpatientRequest],
-      isLoading: false,
-      isValidating: false,
-    });
     mockedUseWardLocation.mockReturnValue({
       location: mockLocationInpatientWard,
       invalidLocation: false,
@@ -157,30 +149,14 @@ describe('Testing AdmitPatientForm', () => {
 
   it('should render admit patient form if bed management module is present, but no beds are configured', () => {
     mockedUseFeatureFlag.mockReturnValue(true);
-    mockedUseAdmissionLocation.mockReturnValueOnce({
-      isLoading: false,
-      isValidating: false,
-      admissionLocation: {
-        ...mockAdmissionLocation,
-        totalBeds: 0,
-        bedLayouts: [],
-      },
-      mutate: jest.fn(),
-      error: null,
-    });
+    const replacedProperty = jest.replaceProperty(mockWardPatientGroupDetails(), 'bedLayouts', []);
     renderAdmissionForm();
     expect(screen.getByText('Select a bed')).toBeInTheDocument();
-    expect(screen.getByText('No beds configured for Inpatient Ward location')).toBeInTheDocument();
+    expect(screen.getByText(/No beds configured/i)).toBeInTheDocument();
+    replacedProperty.restore();
   });
 
   it('should submit the form, create encounter and submit bed', async () => {
-    mockedUseAdmissionLocation.mockReturnValueOnce({
-      isLoading: false,
-      isValidating: false,
-      admissionLocation: mockAdmissionLocation,
-      mutate: jest.fn(),
-      error: null,
-    });
     // @ts-ignore - we only need these two keys for now
     mockedOpenmrsFetch.mockResolvedValue({
       ok: true,
@@ -290,17 +266,6 @@ describe('Testing AdmitPatientForm', () => {
   });
 
   it('should admit patient if no beds are configured', async () => {
-    mockedUseAdmissionLocation.mockReturnValueOnce({
-      isLoading: false,
-      isValidating: false,
-      admissionLocation: {
-        ...mockAdmissionLocation,
-        totalBeds: 0,
-        bedLayouts: [],
-      },
-      mutate: jest.fn(),
-      error: null,
-    });
     // @ts-ignore - we only need these two keys for now
     mockedOpenmrsFetch.mockResolvedValue({
       ok: true,
@@ -313,7 +278,7 @@ describe('Testing AdmitPatientForm', () => {
     const admitButton = screen.getByRole('button', { name: 'Admit' });
     expect(admitButton).toBeEnabled();
     await user.click(admitButton);
-    expect(mockedOpenmrsFetch).toHaveBeenCalledTimes(1);
+    expect(mockedOpenmrsFetch).toHaveBeenCalledTimes(2);
     expect(mockedOpenmrsFetch).toHaveBeenCalledWith('/ws/rest/v1/encounter', {
       method: 'POST',
       headers: {
@@ -332,6 +297,9 @@ describe('Testing AdmitPatientForm', () => {
         ],
       },
     });
+    expect(mockedOpenmrsFetch).toHaveBeenCalledWith(`/ws/rest/v1/beds/1?patientUuid=${mockPatientAlice.uuid}`, {
+      method: 'DELETE',
+    });
     expect(mockedShowSnackbar).toHaveBeenCalledWith({
       kind: 'success',
       subtitle: 'Patient admitted successfully to Inpatient Ward',

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

@@ -1,19 +1,16 @@
+import { Button, ButtonSet, Column, Dropdown, DropdownSkeleton, Form, InlineNotification, Row } from '@carbon/react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { showSnackbar, useAppContext, useFeatureFlag, useSession } from '@openmrs/esm-framework';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { z } from 'zod';
 import { Controller, useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
 import { useTranslation } from 'react-i18next';
-import { Button, ButtonSet, Column, Dropdown, DropdownSkeleton, Form, InlineNotification, Row } from '@carbon/react';
-import { showSnackbar, useFeatureFlag, useSession } from '@openmrs/esm-framework';
-import { filterBeds } from '../../ward-view/ward-view.resource';
-import type { BedLayout, DispositionType } from '../../types';
-import { assignPatientToBed, createEncounter } from '../../ward.resource';
-import { useAdmissionLocation } from '../../hooks/useAdmissionLocation';
-import { useInpatientRequest } from '../../hooks/useInpatientRequest';
+import { z } from 'zod';
 import useEmrConfiguration from '../../hooks/useEmrConfiguration';
 import useWardLocation from '../../hooks/useWardLocation';
-import type { AdmitPatientFormWorkspaceProps } from './types';
+import type { BedLayout, WardPatientGroupDetails } from '../../types';
+import { assignPatientToBed, createEncounter, removePatientFromBed } from '../../ward.resource';
 import styles from './admit-patient-form.scss';
+import type { AdmitPatientFormWorkspaceProps } from './types';
 
 const AdmitPatientFormWorkspace: React.FC<AdmitPatientFormWorkspaceProps> = ({
   patient,
@@ -26,11 +23,13 @@ const AdmitPatientFormWorkspace: React.FC<AdmitPatientFormWorkspaceProps> = ({
   const { location } = useWardLocation();
   const { currentProvider } = useSession();
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const { mutate: mutateInpatientRequest } = useInpatientRequest();
   const { emrConfiguration, isLoadingEmrConfiguration, errorFetchingEmrConfiguration } = useEmrConfiguration();
   const [showErrorNotifications, setShowErrorNotifications] = useState(false);
-  const { isLoading, admissionLocation, mutate: mutateAdmissionLocation } = useAdmissionLocation();
-  const beds = useMemo(() => (isLoading ? [] : filterBeds(admissionLocation)), [admissionLocation]);
+  const wardPatientGrouping = useAppContext<WardPatientGroupDetails>('ward-patients-group');
+  const { isLoading, mutate: mutateAdmissionLocation } = wardPatientGrouping?.admissionLocationResponse ?? {};
+  const { mutate: mutateInpatientRequest } = wardPatientGrouping?.inpatientRequestResponse ?? {};
+  const { mutate: mutateInpatientAdmission } = wardPatientGrouping?.inpatientAdmissionResponse ?? {};
+  const beds = isLoading ? [] : wardPatientGrouping?.bedLayouts ?? [];
   const isBedManagementModuleInstalled = useFeatureFlag('bedmanagement-module');
   const getBedRepresentation = useCallback((bedLayout: BedLayout) => {
     const bedNumber = bedLayout.bedNumber;
@@ -92,8 +91,15 @@ const AdmitPatientFormWorkspace: React.FC<AdmitPatientFormWorkspaceProps> = ({
             if (response.ok) {
               if (bedSelected) {
                 return assignPatientToBed(values.bedId, patient.uuid, response.data.uuid);
+              } else {
+                const bed = wardPatientGrouping.bedLayouts.find((bedLayout) =>
+                  bedLayout.patients.some((p) => p.uuid == patient.uuid),
+                );
+                if (bed) {
+                  return removePatientFromBed(bed.bedId, patient.uuid);
+                }
+                return response;
               }
-              return response;
             }
           },
           (err: Error) => {
@@ -134,9 +140,6 @@ const AdmitPatientFormWorkspace: React.FC<AdmitPatientFormWorkspaceProps> = ({
                   }),
                 });
               }
-              mutateAdmissionLocation();
-              mutateInpatientRequest();
-              closeWorkspaceWithSavedChanges();
             }
           },
           () => {
@@ -148,16 +151,28 @@ const AdmitPatientFormWorkspace: React.FC<AdmitPatientFormWorkspaceProps> = ({
                 'Patient admitted successfully but fail to assign bed to patient',
               ),
             });
-            mutateAdmissionLocation();
-            mutateInpatientRequest();
-            closeWorkspaceWithSavedChanges();
           },
         )
         .finally(() => {
           setIsSubmitting(false);
+          mutateAdmissionLocation();
+          mutateInpatientRequest();
+          mutateInpatientAdmission();
+          closeWorkspaceWithSavedChanges();
         });
     },
-    [beds, patient, emrConfiguration, location, closeWorkspaceWithSavedChanges, dispositionType, currentProvider],
+    [
+      beds,
+      patient,
+      emrConfiguration,
+      location,
+      closeWorkspaceWithSavedChanges,
+      dispositionType,
+      currentProvider,
+      mutateAdmissionLocation,
+      mutateInpatientRequest,
+      mutateInpatientAdmission,
+    ],
   );
 
   const onError = useCallback((values) => {
@@ -165,6 +180,7 @@ const AdmitPatientFormWorkspace: React.FC<AdmitPatientFormWorkspaceProps> = ({
     setIsSubmitting(false);
   }, []);
 
+  if (!wardPatientGrouping) return <></>;
   return (
     <Form control={control} className={styles.form} onSubmit={handleSubmit(onSubmit, onError)}>
       <div className={styles.formContent}>

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

@@ -8,10 +8,10 @@ import WardPatientName from '../../ward-patient-card/row-elements/ward-patient-n
 
 const WardPatientWorkspaceBanner = (wardPatient: WardPatient) => {
   const { headerRowElements } = useCurrentWardCardConfig();
-  const { patient, bed, visit } = wardPatient;
+  const { patient, bed } = wardPatient;
 
-  if (!(patient && visit)) {
-    console.warn('Patient details and visit details were not received by the workspace');
+  if (!patient) {
+    console.warn('Patient details were not received by the ward workspace');
     return null;
   }