@kenyaemr/esm-ward-app 8.1.1-pre.124 → 8.1.2-pre.152

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.0","emrapi":"^2.0.0 || 2.0.0-SNAPSHOT"},"optionalBackendDependencies":{"bedmanagement":{"version":"^6.0.0 || 6.0.0-SNAPSHOT","feature":{"flagName":"bedmanagement-module","label":"Ward App Patient Service","description":"This module, if installed, provides services for managing patients admitted to the ward."}}},"extensions":[{"name":"ward-dashboard-link","component":"wardDashboardLink","slot":"homepage-dashboard-slot","meta":{"name":"ward","slot":"ward-dashboard-slot","title":"Wards"}},{"component":"root","name":"ward-dashboard","slot":"ward-dashboard-slot"},{"component":"wardPatientActionButtonExtension","name":"ward-patient-action-button","slot":"action-menu-ward-patient-items-slot"},{"component":"wardPatientNotesActionButtonExtension","name":"ward-inpatient-notes-form-action-button","slot":"action-menu-ward-patient-items-slot"},{"component":"coloredObsTagCardRowExtension","name":"colored-obs-tags-card-row","slot":"ward-patient-card-slot"},{"name":"transfer-swap-patient-siderail-button","slot":"action-menu-ward-patient-items-slot","component":"patientTransferAndSwapWorkspaceSiderailIcon"},{"name":"patient-discharge-siderail-button","slot":"action-menu-ward-patient-items-slot","component":"patientDischargeWorkspaceSideRailIcon"},{"name":"clinical-forms-workspace-siderail-button","component":"clinicalFormWorkspaceSideRailIcon","slot":"action-menu-ward-patient-items-slot"},{"component":"defaultWardView","name":"default-ward","slot":"default-ward"},{"component":"maternalWardView","name":"maternal-ward","slot":"maternal-ward"}],"workspaces":[{"name":"admission-requests-workspace","component":"admissionRequestWorkspace","title":"admissionRequests","type":"admission-requests"},{"name":"ward-patient-notes-workspace","component":"wardPatientNotesWorkspace","type":"ward-patient-notes","title":"inpatientNotesWorkspaceTitle","sidebarFamily":"ward-patient","hasOwnSidebar":true},{"name":"admit-patient-form-workspace","component":"admitPatientFormWorkspace","title":"admissionRequests","type":"admission-requests"},{"name":"ward-patient-workspace","component":"wardPatientWorkspace","type":"ward","title":"Ward Patient","width":"extra-wide","hasOwnSidebar":true,"sidebarFamily":"ward-patient"},{"name":"patient-transfer-swap-workspace","component":"patientTransferAndSwapWorkspace","title":"transfers","type":"transfer-swap-bed-form","hasOwnSidebar":true,"sidebarFamily":"ward-patient"},{"name":"patient-transfer-request-workspace","component":"patientTransferRequestWorkspace","title":"transferRequest","type":"transfer-request-form"},{"name":"patient-discharge-workspace","component":"patientDischargeWorkspace","title":"discharge","type":"ward-patient-discharge","hasOwnSidebar":true,"sidebarFamily":"ward-patient"},{"name":"ward-patient-clinical-forms-workspace","component":"patientClinicalFormsWorkspace","title":"clinicalForms","type":"ward-patient-clinical-forms","hasOwnSidebar":true,"sidebarFamily":"ward-patient","width":"wider"}],"version":"8.1.1-pre.124"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.0","emrapi":"^2.0.0 || 2.0.0-SNAPSHOT"},"optionalBackendDependencies":{"bedmanagement":{"version":"^6.0.0 || 6.0.0-SNAPSHOT","feature":{"flagName":"bedmanagement-module","label":"Ward App Patient Service","description":"This module, if installed, provides services for managing patients admitted to the ward."}}},"extensions":[{"name":"ward-dashboard-link","component":"wardDashboardLink","slot":"homepage-dashboard-slot","meta":{"name":"ward","slot":"ward-dashboard-slot","title":"Wards"}},{"component":"root","name":"ward-dashboard","slot":"ward-dashboard-slot"},{"component":"wardPatientActionButtonExtension","name":"ward-patient-action-button","slot":"action-menu-ward-patient-items-slot"},{"component":"wardPatientNotesActionButtonExtension","name":"ward-inpatient-notes-form-action-button","slot":"action-menu-ward-patient-items-slot"},{"component":"coloredObsTagCardRowExtension","name":"colored-obs-tags-card-row","slot":"ward-patient-card-slot"},{"name":"transfer-swap-patient-siderail-button","slot":"action-menu-ward-patient-items-slot","component":"patientTransferAndSwapWorkspaceSiderailIcon"},{"name":"patient-discharge-siderail-button","slot":"action-menu-ward-patient-items-slot","component":"patientDischargeWorkspaceSideRailIcon"},{"name":"clinical-forms-workspace-siderail-button","component":"clinicalFormWorkspaceSideRailIcon","slot":"action-menu-ward-patient-items-slot"},{"component":"defaultWardView","name":"default-ward","slot":"default-ward"},{"component":"maternalWardView","name":"maternal-ward","slot":"maternal-ward"}],"workspaces":[{"name":"admission-requests-workspace","component":"admissionRequestWorkspace","title":"admissionRequests","type":"admission-requests"},{"name":"ward-patient-notes-workspace","component":"wardPatientNotesWorkspace","type":"ward-patient-notes","title":"inpatientNotesWorkspaceTitle","sidebarFamily":"ward-patient","hasOwnSidebar":true,"groups":["ward-patient"]},{"name":"admit-patient-form-workspace","component":"admitPatientFormWorkspace","title":"admissionRequests","type":"admission-requests"},{"name":"ward-patient-workspace","component":"wardPatientWorkspace","type":"ward","title":"Ward patient","width":"extra-wide","hasOwnSidebar":true,"sidebarFamily":"ward-patient","groups":["ward-patient"]},{"name":"patient-transfer-swap-workspace","component":"patientTransferAndSwapWorkspace","title":"transfers","type":"transfer-swap-bed-form","hasOwnSidebar":true,"sidebarFamily":"ward-patient","groups":["ward-patient"]},{"name":"patient-transfer-request-workspace","component":"patientTransferRequestWorkspace","title":"transferRequest","type":"transfer-request-form"},{"name":"patient-discharge-workspace","component":"patientDischargeWorkspace","title":"discharge","type":"ward-patient-discharge","hasOwnSidebar":true,"sidebarFamily":"ward-patient","groups":["ward-patient"]},{"name":"ward-patient-clinical-forms-workspace","component":"patientClinicalFormsWorkspace","title":"clinicalForms","type":"ward-patient-clinical-forms","hasOwnSidebar":true,"sidebarFamily":"ward-patient","width":"wider","groups":["ward-patient"]},{"name":"cancel-admission-request-workspace","component":"cancelAdmissionRequestWorkspace","title":"cancelAdmissionRequest","type":"cancel-admission-request","sidebarFamily":"ward-patient"}],"version":"8.1.2-pre.152"}

package/mock.tsx

@@ -1,4 +1,4 @@
-import { mockAdmissionLocation, mockInpatientAdmissions, mockInpatientRequest } from '__mocks__';
+import { mockAdmissionLocation, mockInpatientAdmissions, mockInpatientRequests } from '__mocks__';
 import { useAdmissionLocation } from './src/hooks/useAdmissionLocation';
 import { useInpatientAdmission } from './src/hooks/useInpatientAdmission';
 import { createAndGetWardPatientGrouping } from './src/ward-view/ward-view.resource';
@@ -38,22 +38,23 @@ const mockInpatientAdmissionResponse = jest.mocked(useInpatientAdmission).mockRe
 });
 
 const mockInpatientRequestResponse = jest.mocked(useInpatientRequest).mockReturnValue({
-  inpatientRequests: mockInpatientRequest,
+  inpatientRequests: mockInpatientRequests,
   hasMore: false,
   loadMore: jest.fn(),
   isValidating: false,
   isLoading: false,
   error: undefined,
   mutate: jest.fn(),
-  totalCount: mockInpatientRequest.length,
+  totalCount: mockInpatientRequests.length,
 });
 
 export const mockWardPatientGroupDetails = jest.mocked(useWardPatientGrouping).mockReturnValue({
   admissionLocationResponse: mockAdmissionLocationResponse(),
   inpatientAdmissionResponse: mockInpatientAdmissionResponse(),
   inpatientRequestResponse: mockInpatientRequestResponse(),
-  ...createAndGetWardPatientGrouping(mockInpatientAdmissions, mockAdmissionLocation, mockInpatientRequest),
+  ...createAndGetWardPatientGrouping(mockInpatientAdmissions, mockAdmissionLocation, mockInpatientRequests),
   isLoading: false,
+  mutate: jest.fn(),
 });
 
 export const mockWardViewContext: WardViewContext = {

package/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@kenyaemr/esm-ward-app",
-  "version": "8.0.0",
+  "version": "8.0.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@kenyaemr/esm-ward-app",
-      "version": "8.0.0",
+      "version": "8.0.2",
       "license": "MPL-2.0",
       "dependencies": {
         "@carbon/react": "~1.37.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-ward-app",
-  "version": "8.1.1-pre.124",
+  "version": "8.1.2-pre.152",
   "description": "Ward and bed management module for O3",
   "browser": "dist/kenyaemr-esm-ward-app.js",
   "main": "src/index.ts",
@@ -37,11 +37,11 @@
     "url": "https://github.com/openmrs/openmrs-esm-patient-management/issues"
   },
   "dependencies": {
-    "@carbon/react": "~1.37.0",
+    "@carbon/react": "^1.71.0",
     "lodash-es": "^4.17.15"
   },
   "peerDependencies": {
-    "@openmrs/esm-framework": "5.x",
+    "@openmrs/esm-framework": "6.x",
     "react": "^18.1.0",
     "react-i18next": "11.x",
     "react-router-dom": "6.x",
@@ -50,5 +50,5 @@
   "devDependencies": {
     "webpack": "^5.74.0"
   },
-  "stableVersion": "8.1.0"
+  "stableVersion": "8.0.2"
 }

package/src/action-menu-buttons/clinical-forms-workspace-siderail.component.tsx

@@ -29,7 +29,7 @@ const ClinicalFormsWorkspaceSideRailIcon: React.FC = () => {
       label={t('clinicalForms', 'Clinical forms')}
       iconDescription={t('clinicalForms', 'Clinical forms')}
       handler={launchPatientWorkspaceCb}
-      type="ward-patient-clinical-form"
+      type="ward-patient-clinical-forms"
     />
   );
 };

package/src/action-menu-buttons/discharge-workspace-siderail.component.tsx

@@ -14,7 +14,7 @@ export default function PatientDischargeSideRailIcon() {
       label={t('discharge', 'Discharge')}
       iconDescription={t('discharge', 'Discharge')}
       handler={handler}
-      type="patient-discharge-workspace"
+      type="ward-patient-discharge"
     />
   );
 }

package/src/beds/bed-share-divider.component.tsx

@@ -0,0 +1,21 @@
+import { SkeletonText, Tag } from '@carbon/react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './bed-share-divider.scss';
+
+interface BedShareDividerProps {
+  isLoading?: boolean;
+}
+
+const BedShareDivider: React.FC<BedShareDividerProps> = ({ isLoading }) => {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.bedDivider}>
+      <div className={styles.bedDividerLine}></div>
+      {isLoading ? <SkeletonText /> : <Tag>{t('bedShare', 'Bed share')}</Tag>}
+      <div className={styles.bedDividerLine}></div>
+    </div>
+  );
+};
+
+export default BedShareDivider;

package/src/beds/bed-share-divider.scss

@@ -0,0 +1,18 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+@use '@carbon/type';
+
+.bedDivider {
+  background-color: $ui-02;
+  color: $text-02;
+  padding: layout.$spacing-01;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.bedDividerLine {
+  height: 1px;
+  background-color: $ui-05;
+  width: 30%;
+}

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

@@ -2,40 +2,30 @@ import React, { type ReactNode } from 'react';
 import { type Bed } from '../types';
 import EmptyBed from './empty-bed.component';
 import styles from './ward-bed.scss';
-import { useTranslation } from 'react-i18next';
-import { Tag } from '@carbon/react';
+import BedShareDivider from './bed-share-divider.component';
 
 export interface WardBedProps {
   patientCards: Array<ReactNode>;
   bed: Bed;
+  isLoadingDivider?: boolean;
 }
 
-const WardBed: React.FC<WardBedProps> = ({ bed, patientCards }) => {
-  return patientCards?.length > 0 ? <OccupiedBed bed={bed} patientCards={patientCards} /> : <EmptyBed bed={bed} />;
+const WardBed: React.FC<WardBedProps> = (props) => {
+  const { bed, patientCards } = props;
+  return patientCards?.length > 0 ? <OccupiedBed {...props} /> : <EmptyBed bed={bed} />;
 };
 
-const OccupiedBed: React.FC<WardBedProps> = ({ patientCards }) => {
+const OccupiedBed: React.FC<WardBedProps> = ({ patientCards, isLoadingDivider }) => {
   // interlace patient card with bed dividers between each of them
   const patientCardsWithDividers = patientCards.flatMap((patientCard, index) => {
     if (index == 0) {
       return [patientCard];
     } else {
-      return [<BedShareDivider key={'divider-' + index} />, patientCard];
+      return [<BedShareDivider key={'divider-' + index} isLoading={isLoadingDivider} />, patientCard];
     }
   });
 
   return <div className={styles.occupiedBed}>{patientCardsWithDividers}</div>;
 };
 
-const BedShareDivider = () => {
-  const { t } = useTranslation();
-  return (
-    <div className={styles.bedDivider}>
-      <div className={styles.bedDividerLine}></div>
-      <Tag>{t('bedShare', 'Bed share')}</Tag>
-      <div className={styles.bedDividerLine}></div>
-    </div>
-  );
-};
-
 export default WardBed;

package/src/beds/ward-bed.scss

@@ -9,20 +9,6 @@
   height: fit-content;
 }
 
-.bedDivider {
-  background-color: vars.$ui-02;
-  color: vars.$text-02;
-  padding: layout.$spacing-01;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.bedDividerLine {
-  height: 1px;
-  background-color: vars.$ui-05;
-  width: 30%;
-}
 .emptyBed {
   display: flex;
   gap: layout.$spacing-04;
@@ -42,4 +28,4 @@
 .emptyBedText {
   @include type.type-style('heading-compact-01');
   color: vars.$text-02;
-}
+}

package/src/beds/ward-bed.test.tsx

@@ -64,7 +64,7 @@ describe('Ward bed', () => {
   it('renders a single bed with patient details', () => {
     render(
       <WardBed
-        patientCards={[<DefaultWardPatientCard key={mockPatientAlice.uuid} {...mockWardPatientAliceProps} />]}
+        patientCards={[<DefaultWardPatientCard key={mockPatientAlice.uuid} wardPatient={mockWardPatientAliceProps} />]}
         bed={mockBed}
       />,
     );
@@ -79,8 +79,8 @@ describe('Ward bed', () => {
       <WardBed
         bed={mockBed}
         patientCards={[
-          <DefaultWardPatientCard key={mockPatientAlice.uuid} {...mockWardPatientAliceProps} />,
-          <DefaultWardPatientCard key={mockPatientBrian.uuid} {...mockWardPatientBrianProps} />,
+          <DefaultWardPatientCard key={mockPatientAlice.uuid} wardPatient={mockWardPatientAliceProps} />,
+          <DefaultWardPatientCard key={mockPatientBrian.uuid} wardPatient={mockWardPatientAliceProps} />,
         ]}
       />,
     );

package/src/config-schema.ts

@@ -254,6 +254,11 @@ export const configSchema: ConfigSchema = {
       },
     },
   },
+  hideWorkspaceVitalsLinks: {
+    _description: 'Configure whether to hide vital history and record vital links in the ward patient workspace.',
+    _type: Type.Boolean,
+    _default: false,
+  },
 };
 
 export interface WardConfigObject {
@@ -266,6 +271,7 @@ export interface WardConfigObject {
     admissionRequestNote: Array<AdmissionRequestNoteElementConfig>;
   };
   wards: Array<WardDefinition>;
+  hideWorkspaceVitalsLinks: boolean;
 }
 
 export interface PendingItemsElementConfig {

package/src/hooks/useEmrConfiguration.ts

@@ -39,6 +39,10 @@ interface EmrApiConfigurationResponse {
     excludedEncounterTypes: Array<string>;
     uuid: string;
   }>;
+  bedAssignmentEncounterType: OpenmrsResource;
+  cancelADTRequestEncounterType: OpenmrsResource;
+  denyAdmissionConcept: OpenmrsResource;
+  admissionDecisionConcept: OpenmrsResource;
   // There are many more keys to this object, but we only need these for now
   // Add more keys as needed
 }
@@ -94,6 +98,10 @@ const customRepProps = [
   ['unknownPatientPersonAttributeType', 'ref'],
   ['supportsVisitsLocationTag', '(uuid,display,name,links)'],
   ['transferForm', 'ref'],
+  ['bedAssignmentEncounterType', 'ref'],
+  ['cancelADTRequestEncounterType', 'ref'],
+  ['admissionDecisionConcept', 'ref'],
+  ['denyAdmissionConcept', 'ref'],
 ];
 
 const customRep = `custom:${customRepProps.map((prop) => prop.join(':')).join(',')}`;

package/src/index.ts

@@ -88,6 +88,12 @@ export const patientClinicalFormsWorkspace = getAsyncLifecycle(
   options,
 );
 
+// t('cancelAdmissionRequest', 'Cancel admission request')
+export const cancelAdmissionRequestWorkspace = getAsyncLifecycle(
+  () => import('./ward-workspace/cancel-admission-request-workspace/cancel-admission-request.workspace'),
+  options,
+);
+
 export const clinicalFormWorkspaceSideRailIcon = getAsyncLifecycle(
   () => import('./action-menu-buttons/clinical-forms-workspace-siderail.component'),
   options,
@@ -112,10 +118,4 @@ export function startupApp() {
     'Bed management module',
     'Enables features related to bed management / assignment. Requires the backend bed management module to be installed.',
   );
-
-  registerFeatureFlag(
-    'ward-view-vertical-tiling',
-    'Ward view vertical tiling',
-    'Enable tiling of bed cards vertically in the ward view.',
-  );
 }

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

@@ -15,10 +15,11 @@ import useEmrConfiguration from '../hooks/useEmrConfiguration';
 import useLocations from '../hooks/useLocations';
 import styles from './location-selector.scss';
 
-interface LocationSelectorProps extends RadioButtonGroupProps {}
+interface LocationSelectorProps extends RadioButtonGroupProps {
+  paginationSize?: number;
+}
 
-export default function LocationSelector(props: LocationSelectorProps) {
-  const size = 5;
+export default function LocationSelector({ paginationSize = 15, ...props }: LocationSelectorProps) {
   const { t } = useTranslation();
   const { emrConfiguration, isLoadingEmrConfiguration } = useEmrConfiguration();
   const isTablet = !isDesktop(useLayoutType());
@@ -42,7 +43,7 @@ export default function LocationSelector(props: LocationSelectorProps) {
     totalPages,
     goToNext,
     goToPrevious,
-  } = useLocations(filterCriteria, size, !emrConfiguration);
+  } = useLocations(filterCriteria, paginationSize, !emrConfiguration);
 
   const handleSearch = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -81,12 +82,12 @@ export default function LocationSelector(props: LocationSelectorProps) {
           </RadioButtonGroup>
         </ResponsiveWrapper>
       )}
-      {totalCount > size && (
+      {totalCount > paginationSize && (
         <div className={styles.pagination}>
           <span className={styles.bodyShort01}>
             {t('showingLocations', '{{start}}-{{end}} of {{count}} locations', {
-              start: (currentPage - 1) * size + 1,
-              end: Math.min(currentPage * size, totalCount),
+              start: (currentPage - 1) * paginationSize + 1,
+              end: Math.min(currentPage * paginationSize, totalCount),
               count: totalCount,
             })}
           </span>

package/src/root.component.tsx

@@ -15,8 +15,6 @@ const Root: React.FC = () => {
           <Route path="/:locationUuid" element={<WardView />} />
         </Routes>
       </BrowserRouter>
-      
-      <WorkspaceContainer overlay contextKey="ward" />
     </main>
   );
 };

package/src/routes.json

@@ -84,7 +84,9 @@
       "type": "ward-patient-notes",
       "title": "inpatientNotesWorkspaceTitle",
       "sidebarFamily": "ward-patient",
-      "hasOwnSidebar": true
+      "hasOwnSidebar": true,
+      "groups": ["ward-patient"]
+
     },
     {
       "name": "admit-patient-form-workspace",
@@ -96,10 +98,11 @@
       "name": "ward-patient-workspace",
       "component": "wardPatientWorkspace",
       "type": "ward",
-      "title": "Ward Patient",
+      "title": "Ward patient",
       "width": "extra-wide",
       "hasOwnSidebar": true,
-      "sidebarFamily": "ward-patient"
+      "sidebarFamily": "ward-patient",
+      "groups": ["ward-patient"]
     },
     {
       "name": "patient-transfer-swap-workspace",
@@ -107,7 +110,9 @@
       "title": "transfers",
       "type": "transfer-swap-bed-form",
       "hasOwnSidebar": true,
-      "sidebarFamily": "ward-patient"
+      "sidebarFamily": "ward-patient",
+      "groups": ["ward-patient"]
+
     },
     {
       "name": "patient-transfer-request-workspace",
@@ -121,7 +126,8 @@
       "title": "discharge",
       "type": "ward-patient-discharge",
       "hasOwnSidebar": true,
-      "sidebarFamily": "ward-patient"
+      "sidebarFamily": "ward-patient",
+      "groups": ["ward-patient"]
     },
     {
       "name": "ward-patient-clinical-forms-workspace",
@@ -130,7 +136,15 @@
       "type": "ward-patient-clinical-forms",
       "hasOwnSidebar": true,
       "sidebarFamily": "ward-patient",
-      "width": "wider"
+      "width": "wider",
+      "groups": ["ward-patient"]
+    },
+    {
+      "name": "cancel-admission-request-workspace",
+      "component": "cancelAdmissionRequestWorkspace",
+      "title": "cancelAdmissionRequest",
+      "type": "cancel-admission-request",
+      "sidebarFamily": "ward-patient"
     }
   ]
 }

package/src/types/index.ts

@@ -11,7 +11,11 @@ import type {
 import type React from 'react';
 import type { useWardPatientGrouping } from '../hooks/useWardPatientGrouping';
 
-export type WardPatientCardType = React.FC<WardPatient>;
+interface WardPatientCardProps {
+  wardPatient: WardPatient;
+}
+
+export type WardPatientCardType = React.FC<WardPatientCardProps>;
 
 // WardPatient is a patient admitted to a ward, and/or in a bed on a ward
 export type WardPatient = {
@@ -44,7 +48,7 @@ export type WardPatient = {
 
 export interface WardPatientWorkspaceProps extends DefaultWorkspaceProps {
   wardPatient: WardPatient;
-  WardPatientHeader: React.FC<WardPatient>;
+  WardPatientHeader: WardPatientCardType;
 }
 
 // server-side types defined in openmrs-module-bedmanagement:
@@ -226,14 +230,14 @@ export interface EncounterPayload {
 
 export interface ObsPayload {
   concept: Concept | string;
-  value?: string;
+  value?: string | OpenmrsResource;
   groupMembers?: Array<ObsPayload>;
 }
 
 export type WardPatientGroupDetails = ReturnType<typeof useWardPatientGrouping>;
 export interface WardViewContext {
   wardPatientGroupDetails: WardPatientGroupDetails;
-  WardPatientHeader: React.FC<WardPatient>;
+  WardPatientHeader: WardPatientCardType;
 }
 
 export interface PatientAndAdmission {
@@ -244,6 +248,7 @@ export interface PatientAndAdmission {
 export interface MotherChildRelationships {
   motherByChildUuid: Map<string, PatientAndAdmission>;
   childrenByMotherUuid: Map<string, PatientAndAdmission[]>;
+  isLoading: boolean;
 }
 
 export interface MaternalWardViewContext {

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

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

package/src/ward-patient-card/row-elements/ward-patient-pending-transfer.tsx

@@ -1,8 +1,10 @@
 import React, { useMemo } from 'react';
+import { IconButton } from '@carbon/react';
 import { Movement } from '@carbon/react/icons';
-import styles from '../ward-patient-card.scss';
 import { useTranslation } from 'react-i18next';
-import { type WardPatient } from '../../types';
+import { CloseOutlineIcon, launchWorkspace, useAppContext } from '@openmrs/esm-framework';
+import { type WardPatientWorkspaceProps, type WardViewContext, type WardPatient } from '../../types';
+import styles from '../ward-patient-card.scss';
 
 export interface WardPatientTransferProps {
   wardPatient: WardPatient;
@@ -10,6 +12,7 @@ export interface WardPatientTransferProps {
 
 const WardPatientPendingTransfer: React.FC<WardPatientTransferProps> = ({ wardPatient }) => {
   const { t } = useTranslation();
+  const { WardPatientHeader } = useAppContext<WardViewContext>('ward-view-context') ?? {};
 
   const { dispositionType, dispositionLocation } = wardPatient?.inpatientRequest;
   const message = useMemo(() => {
@@ -23,14 +26,29 @@ const WardPatientPendingTransfer: React.FC<WardPatientTransferProps> = ({ wardPa
       return t('pendingDischarge', 'Pending Discharge');
     }
     return '';
-  }, [dispositionType, dispositionLocation]);
+  }, [dispositionType, dispositionLocation, t]);
+
+  const launchCancelAdmissionForm = () => {
+    launchWorkspace<WardPatientWorkspaceProps>('cancel-admission-request-workspace', {
+      wardPatient,
+      WardPatientHeader,
+    });
+  };
 
   if (!(dispositionType === 'TRANSFER' || dispositionType === 'DISCHARGE')) return null;
 
   return (
     <div className={styles.wardPatientCardDispositionTypeContainer}>
-      <Movement className={styles.movementIcon} size="24" />
+      <Movement className={styles.movementIcon} size={24} />
       {message}
+      <IconButton
+        label={t('cancel', 'Cancel')}
+        kind={'secondary'}
+        className={styles.cancelTransferRequestButton}
+        size={'sm'}
+        onClick={launchCancelAdmissionForm}>
+        <CloseOutlineIcon />
+      </IconButton>
     </div>
   );
 };

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

@@ -1,7 +1,8 @@
-import { getPatientName, launchWorkspace, useAppContext } from '@openmrs/esm-framework';
+import { getPatientName, useAppContext, launchWorkspaceGroup } from '@openmrs/esm-framework';
 import React, { type ReactNode } from 'react';
-import { type WardViewContext, type WardPatient,type PatientWorkspaceAdditionalProps } from '../types';
+import { type WardViewContext, type WardPatient } from '../types';
 import styles from './ward-patient-card.scss';
+import { getPatientChartStore } from '@openmrs/esm-patient-common-lib';
 
 interface Props {
   children: ReactNode;
@@ -18,11 +19,28 @@ const WardPatientCard: React.FC<Props> = ({ children, wardPatient }) => {
       <button
         className={styles.wardPatientCardButton}
         onClick={() => {
-          launchWorkspace<PatientWorkspaceAdditionalProps>('ward-patient-workspace', {
-            wardPatient,
-            WardPatientHeader
+          launchWorkspaceGroup('ward-patient', {
+            state: {
+              wardPatient,
+              WardPatientHeader,
+            },
+            onWorkspaceGroupLaunch: () => {
+              const store = getPatientChartStore();
+              store.setState({
+                patientUuid: patient.uuid,
+              });
+            },
+            workspaceToLaunch: {
+              name: 'ward-patient-workspace',
+            },
+            workspaceGroupCleanup: () => {
+              const store = getPatientChartStore();
+              store.setState({
+                patientUuid: undefined,
+              });
+            },
           });
-         }}>
+        }}>
         {/* Name will not be displayed; just there for a11y */}
         {getPatientName(patient.person)}
       </button>

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

@@ -145,6 +145,12 @@
   margin-right: layout.$spacing-02;
 }
 
+.cancelTransferRequestButton {
+  fill: $ui-03;
+  margin-left: layout.$spacing-02;
+  z-index: 2;
+}
+
 .chemistryReferenceIcon {
   padding: layout.$spacing-02;
   border-radius: 50%;

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

@@ -6,7 +6,7 @@ import { bedLayoutToBed } from '../ward-view.resource';
 import DefaultWardPatientCard from './default-ward-patient-card.component';
 
 function DefaultWardBeds() {
-  const {wardPatientGroupDetails} = useAppContext<WardViewContext>('ward-view-context') ?? {};
+  const { wardPatientGroupDetails } = useAppContext<WardViewContext>('ward-view-context') ?? {};
   const { bedLayouts, wardAdmittedPatientsWithBed } = wardPatientGroupDetails ?? {};
 
   const wardBeds = bedLayouts?.map((bedLayout) => {
@@ -28,10 +28,8 @@ function DefaultWardBeds() {
         };
       }
     });
-    const patientCards = wardPatients.map(wardPatient => (
-      <DefaultWardPatientCard 
-        key={wardPatient.patient.uuid}
-        {...wardPatient} />
+    const patientCards = wardPatients.map((wardPatient) => (
+      <DefaultWardPatientCard key={wardPatient.patient.uuid} {...{ wardPatient }} />
     ));
     return <WardBed key={bed.uuid} bed={bed} patientCards={patientCards} />;
   });

package/src/ward-view/default-ward/default-ward-patient-card-header.component.tsx

@@ -10,7 +10,7 @@ import styles from '../../ward-patient-card/ward-patient-card.scss';
 import { type WardPatientCardType } from '../../types';
 import WardPatientGender from '../../ward-patient-card/row-elements/ward-patient-gender.component';
 
-const DefaultWardPatientCardHeader: WardPatientCardType = (wardPatient) => {
+const DefaultWardPatientCardHeader: WardPatientCardType = ({ wardPatient }) => {
   const { patient, bed, inpatientAdmission } = wardPatient;
   const { encounterAssigningToCurrentInpatientLocation, firstAdmissionOrTransferEncounter } = inpatientAdmission ?? {};