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

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

@@ -1,66 +1,28 @@
-import { ExtensionSlot, getPatientName, launchWorkspace } from '@openmrs/esm-framework';
-import classNames from 'classnames';
-import React from 'react';
-import { useCurrentWardCardConfig } from '../hooks/useCurrentWardCardConfig';
-import { type WardPatientCard, type WardPatientWorkspaceProps } from '../types';
-import WardPatientBedNumber from './row-elements/ward-patient-bed-number';
-import WardPatientName from './row-elements/ward-patient-name';
-import { WardPatientCardElement } from './ward-patient-card-element.component';
+import { getPatientName, launchWorkspace, useAppContext } from '@openmrs/esm-framework';
+import React, { type ReactNode } from 'react';
+import { type WardViewContext, type WardPatient,type PatientWorkspaceAdditionalProps } from '../types';
 import styles from './ward-patient-card.scss';
-import { launchPatientWorkspace, setWardPatient } from './ward-patient-resource';
 
-const WardPatientCard: WardPatientCard = (wardPatient) => {
-  const { patient, bed } = wardPatient;
-  const { id, headerRowElements, footerRowElements } = useCurrentWardCardConfig();
+interface Props {
+  children: ReactNode;
+  wardPatient: WardPatient;
+}
 
-  const headerExtensionSlotName =
-    id == 'default' ? 'ward-patient-card-header-slot' : `ward-patient-card-header-${id}-slot`;
-  const rowsExtensionSlotName = id == 'default' ? 'ward-patient-card-slot' : `ward-patient-card-${id}-slot`;
-  const footerExtensionSlotName =
-    id == 'default' ? 'ward-patient-card-footer-slot' : `ward-patient-card-footer-${id}-slot`;
+const WardPatientCard: React.FC<Props> = ({ children, wardPatient }) => {
+  const { patient } = wardPatient;
+  const { WardPatientHeader } = useAppContext<WardViewContext>('ward-view-context') ?? {};
 
   return (
     <div className={styles.wardPatientCard}>
-      <div className={classNames(styles.wardPatientCardRow, styles.wardPatientCardHeader)}>
-        {bed ? <WardPatientBedNumber bed={bed} /> : null}
-        <WardPatientName patient={patient} />
-        {headerRowElements.map((elementId, i) => (
-          <WardPatientCardElement
-            key={`ward-card-${patient.uuid}-header-${i}`}
-            elementId={elementId}
-            {...wardPatient}
-          />
-        ))}
-        <ExtensionSlot name={headerExtensionSlotName} state={wardPatient} />
-      </div>
-      {footerRowElements.length > 0 && (
-        <div className={styles.wardPatientCardRow}>
-          {footerRowElements.map((elementId, i) => (
-            <WardPatientCardElement
-              key={`ward-card-${patient.uuid}-footer-${i}`}
-              elementId={elementId}
-              {...wardPatient}
-            />
-          ))}
-          <ExtensionSlot name={footerExtensionSlotName} state={wardPatient} />
-        </div>
-      )}
-      <ExtensionSlot
-        name="ward-patient-card-pending-items-slot"
-        state={wardPatient}
-        className={styles.wardPatientCardExtensionSlot}
-      />
-      <ExtensionSlot
-        name={rowsExtensionSlotName}
-        state={wardPatient}
-        className={classNames(styles.wardPatientCardExtensionSlot)}
-      />
+      {children}
       <button
         className={styles.wardPatientCardButton}
         onClick={() => {
-          setWardPatient(wardPatient);
-          launchPatientWorkspace();
-        }}>
+          launchWorkspace<PatientWorkspaceAdditionalProps>('ward-patient-workspace', {
+            wardPatient,
+            WardPatientHeader
+          });
+         }}>
         {/* Name will not be displayed; just there for a11y */}
         {getPatientName(patient.person)}
       </button>

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

@@ -56,6 +56,7 @@
   width: 100%;
   padding: layout.$spacing-04;
   border-top: 1px colors.$gray-20 solid;
+  background-color: colors.$white;
 
   &:empty {
     border-top: 0px;
@@ -174,7 +175,7 @@
   display: flex;
   flex-wrap: wrap;
 
-  > div:not(div:first-of-type):not(:empty) {
+  > *:not(*:first-of-type):not(:empty) {
     display: flex;
     align-items: center;
 
@@ -188,3 +189,8 @@
 .skeletonText {
   width: 6.25rem;
 }
+
+.unassignedPatient {
+  display: flex;
+  flex-direction: column;
+}

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

@@ -0,0 +1,42 @@
+import { useAppContext } from '@openmrs/esm-framework';
+import React from 'react';
+import WardBed from '../../beds/ward-bed.component';
+import { type WardPatient, type WardViewContext } from '../../types';
+import { bedLayoutToBed } from '../ward-view.resource';
+import DefaultWardPatientCard from './default-ward-patient-card.component';
+
+function DefaultWardBeds() {
+  const {wardPatientGroupDetails} = useAppContext<WardViewContext>('ward-view-context') ?? {};
+  const { bedLayouts, wardAdmittedPatientsWithBed } = wardPatientGroupDetails ?? {};
+
+  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,
+        };
+      }
+    });
+    const patientCards = wardPatients.map(wardPatient => (
+      <DefaultWardPatientCard 
+        key={wardPatient.patient.uuid}
+        {...wardPatient} />
+    ));
+    return <WardBed key={bed.uuid} bed={bed} patientCards={patientCards} />;
+  });
+
+  return <>{wardBeds}</>;
+}
+
+export default DefaultWardBeds;

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

@@ -0,0 +1,32 @@
+import classNames from 'classnames';
+import React from 'react';
+import WardPatientAge from '../../ward-patient-card/row-elements/ward-patient-age';
+import WardPatientBedNumber from '../../ward-patient-card/row-elements/ward-patient-bed-number';
+import WardPatientIdentifier from '../../ward-patient-card/row-elements/ward-patient-identifier';
+import WardPatientName from '../../ward-patient-card/row-elements/ward-patient-name';
+import WardPatientTimeOnWard from '../../ward-patient-card/row-elements/ward-patient-time-on-ward';
+import WardPatientTimeSinceAdmission from '../../ward-patient-card/row-elements/ward-patient-time-since-admission';
+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 { patient, bed, inpatientAdmission } = wardPatient;
+  const { encounterAssigningToCurrentInpatientLocation, firstAdmissionOrTransferEncounter } = inpatientAdmission ?? {};
+
+  return (
+    <div className={classNames(styles.wardPatientCardRow, styles.wardPatientCardHeader)}>
+      {bed ? <WardPatientBedNumber bed={bed} /> : null}
+      <WardPatientName patient={patient} />
+      <WardPatientIdentifier id="patient-identifier" patient={patient} />
+      <WardPatientGender patient={patient} />
+      <WardPatientAge patient={patient} />
+      <WardPatientTimeSinceAdmission firstAdmissionOrTransferEncounter={firstAdmissionOrTransferEncounter} />
+      <WardPatientTimeOnWard
+        encounterAssigningToCurrentInpatientLocation={encounterAssigningToCurrentInpatientLocation}
+      />
+    </div>
+  );
+};
+
+export default DefaultWardPatientCardHeader;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { type WardPatientCardType } from '../../types';
+import AdmissionRequestNoteRow from '../../ward-patient-card/card-rows/admission-request-note-row.component';
+import PendingItemsRow from '../../ward-patient-card/card-rows/pending-items-row.component';
+import WardPatientCard from '../../ward-patient-card/ward-patient-card.component';
+import styles from '../../ward-patient-card/ward-patient-card.scss';
+import DefaultWardPatientCardHeader from './default-ward-patient-card-header.component';
+
+const DefaultWardPatientCard: WardPatientCardType = (wardPatient) => {
+  const { bed } = wardPatient;
+
+  const card = (
+    <WardPatientCard wardPatient={wardPatient}>
+      <DefaultWardPatientCardHeader {...wardPatient} />
+      <PendingItemsRow id={'pending-items'} wardPatient={wardPatient} />
+      <AdmissionRequestNoteRow id={'admission-request-note'} wardPatient={wardPatient} />
+    </WardPatientCard>
+  );
+
+  if (bed) {
+    return card;
+  } else {
+    return (
+      <div className={styles.unassignedPatient}>
+        <div key={'unassigned-bed-pt-' + wardPatient.patient.uuid}>{card}</div>
+      </div>
+    );
+  }
+};
+
+export default DefaultWardPatientCard;

package/src/ward-view/default-ward/default-ward-pending-patients.component.tsx

@@ -0,0 +1,52 @@
+import { ErrorState, useAppContext } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { type WardViewContext, type InpatientRequest } from '../../types';
+import AdmissionRequestCard from '../../ward-workspace/admission-request-card/admission-request-card.component';
+import WardPatientSkeletonText from '../../ward-patient-card/row-elements/ward-patient-skeleton-text';
+import AdmissionRequestNoteRow from '../../ward-patient-card/card-rows/admission-request-note-row.component';
+
+function DefaultWardPendingPatients() {
+  const { wardPatientGroupDetails } = useAppContext<WardViewContext>('ward-view-context') ?? {};
+  const { t } = useTranslation();
+  const { inpatientRequestResponse } = wardPatientGroupDetails ?? {};
+  const {
+    inpatientRequests,
+    isLoading: isLoadingInpatientRequests,
+    error: errorFetchingInpatientRequests,
+  } = inpatientRequestResponse ?? {};
+
+  return isLoadingInpatientRequests ? (
+    <WardPatientSkeletonText />
+  ) : errorFetchingInpatientRequests ? (
+    <ErrorState headerTitle={t('admissionRequests', 'Admission requests')} error={errorFetchingInpatientRequests} />
+  ) : (
+    <>
+      {inpatientRequests?.map((request: InpatientRequest, i) => {
+        const wardPatient = {
+          patient: request.patient,
+          visit: request.visit,
+          bed: null,
+          inpatientRequest: request,
+          inpatientAdmission: null,
+        };
+
+        return (
+          <AdmissionRequestCard
+            key={`admission-request-card-${i}`}
+            wardPatient={{
+              patient: request.patient,
+              visit: request.visit,
+              bed: null,
+              inpatientRequest: request,
+              inpatientAdmission: null,
+            }}>
+            <AdmissionRequestNoteRow id={'admission-request-note'} wardPatient={wardPatient} />
+          </AdmissionRequestCard>
+        );
+      })}
+    </>
+  );
+}
+
+export default DefaultWardPendingPatients;

package/src/ward-view/default-ward/default-ward-unassigned-patients.component.tsx

@@ -0,0 +1,32 @@
+import { useAppContext } from '@openmrs/esm-framework';
+import React from 'react';
+import { type WardViewContext } from '../../types';
+import DefaultWardPatientCard from './default-ward-patient-card.component';
+
+/**
+ * Renders a list of patients in the ward that are admitted but not assigned a bed
+ * @returns
+ */
+function DefaultWardUnassignedPatients() {
+  const {wardPatientGroupDetails} = useAppContext<WardViewContext>('ward-view-context') ?? {};
+  const { wardUnassignedPatientsList } = wardPatientGroupDetails ?? {};
+
+  const wardUnassignedPatients = wardUnassignedPatientsList?.map((inpatientAdmission) => {
+    return (
+      <DefaultWardPatientCard
+        {...{
+          patient: inpatientAdmission.patient,
+          visit: inpatientAdmission.visit,
+          bed: null,
+          inpatientAdmission,
+          inpatientRequest: inpatientAdmission.currentInpatientRequest,
+        }}
+        key={inpatientAdmission.patient.uuid}
+      />
+    );
+  });
+
+  return <>{wardUnassignedPatients}</>;
+}
+
+export default DefaultWardUnassignedPatients;

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

@@ -0,0 +1,31 @@
+import { useDefineAppContext } from '@openmrs/esm-framework';
+import React from 'react';
+import { useWardPatientGrouping } from '../../hooks/useWardPatientGrouping';
+import { type WardViewContext } from '../../types';
+import WardViewHeader from '../../ward-view-header/ward-view-header.component';
+import Ward from '../ward.component';
+import DefaultWardBeds from './default-ward-beds.component';
+import DefaultWardPendingPatients from './default-ward-pending-patients.component';
+import DefaultWardUnassignedPatients from './default-ward-unassigned-patients.component';
+import DefaultWardPatientCardHeader from './default-ward-patient-card-header.component';
+
+const DefaultWardView = () => {
+  const wardPatientGroupDetails = useWardPatientGrouping();
+  useDefineAppContext<WardViewContext>('ward-view-context', {
+    wardPatientGroupDetails,
+    WardPatientHeader: DefaultWardPatientCardHeader
+  });
+
+  const wardBeds = <DefaultWardBeds />;
+  const wardUnassignedPatients = <DefaultWardUnassignedPatients />;
+  const wardPendingPatients = <DefaultWardPendingPatients />;
+
+  return (
+    <>
+      <WardViewHeader {...{ wardPendingPatients }} />
+      <Ward {...{ wardBeds, wardUnassignedPatients }} />
+    </>
+  );
+};
+
+export default DefaultWardView;

package/src/ward-view/materal-ward/maternal-ward-beds.component.tsx

@@ -0,0 +1,65 @@
+import { useAppContext } from '@openmrs/esm-framework';
+import React from 'react';
+import WardBed from '../../beds/ward-bed.component';
+import { type MotherChildRelationships, type WardPatient, type WardViewContext } from '../../types';
+import { bedLayoutToBed } from '../ward-view.resource';
+import MaternalWardPatientCard from './maternal-ward-patient-card.component';
+
+const MaternalWardBeds: React.FC<MotherChildRelationships> = (motherChildRelationships) => {
+  const { motherByChildUuid } = motherChildRelationships ?? {};
+  const { wardPatientGroupDetails } = useAppContext<WardViewContext>('ward-view-context') ?? {};
+  const { bedLayouts, wardAdmittedPatientsWithBed } = wardPatientGroupDetails ?? {};
+
+  const wardBeds = bedLayouts?.map((bedLayout) => {
+    const { patients: patientsInCurrentBed } = bedLayout;
+    const bed = bedLayoutToBed(bedLayout);
+    const childrenInSameBedByMotherUuid = new Map<string, WardPatient[]>();
+
+    const wardPatients: WardPatient[] = patientsInCurrentBed
+      .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,
+            inpatientRequest: null,
+          };
+        }
+      })
+      .filter((wardPatient) => {
+        // filter out any child patient whose mother is also assigned to the same bed
+        // and put the child in childrenInSameBedByMotherUuid
+        const patientUuid = wardPatient.patient.uuid;
+        const { patient: mother } = motherByChildUuid?.get(patientUuid) ?? {};
+        const motherInSameBed = patientsInCurrentBed.some((p) => p.uuid == mother?.uuid);
+        if (motherInSameBed) {
+          if (!childrenInSameBedByMotherUuid.has(mother.uuid)) {
+            childrenInSameBedByMotherUuid.set(mother.uuid, []);
+          }
+          childrenInSameBedByMotherUuid.get(mother.uuid).push(wardPatient);
+        }
+        return !motherInSameBed;
+      });
+
+    const patientCards = wardPatients.map((wardPatient) => (
+      <MaternalWardPatientCard
+        key={wardPatient.patient.uuid}
+        wardPatient={wardPatient}
+        childrenOfWardPatientInSameBed={childrenInSameBedByMotherUuid.get(wardPatient.patient.uuid)}
+      />
+    ));
+
+    return <WardBed key={bed.uuid} bed={bed} patientCards={patientCards} />;
+  });
+
+  return <>{wardBeds}</>;
+};
+
+export default MaternalWardBeds;

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

@@ -0,0 +1,30 @@
+import classNames from 'classnames';
+import React from 'react';
+import { type WardPatientCardType } from '../../types';
+import WardPatientAge from '../../ward-patient-card/row-elements/ward-patient-age';
+import WardPatientBedNumber from '../../ward-patient-card/row-elements/ward-patient-bed-number';
+import WardPatientAddress from '../../ward-patient-card/row-elements/ward-patient-header-address';
+import WardPatientIdentifier from '../../ward-patient-card/row-elements/ward-patient-identifier';
+import WardPatientName from '../../ward-patient-card/row-elements/ward-patient-name';
+import WardPatientObs from '../../ward-patient-card/row-elements/ward-patient-obs';
+import WardPatientTimeSinceAdmission from '../../ward-patient-card/row-elements/ward-patient-time-since-admission';
+import styles from '../../ward-patient-card/ward-patient-card.scss';
+
+const MaternalWardPatientCardHeader: WardPatientCardType = (wardPatient) => {
+  const { patient, bed, visit, inpatientAdmission } = wardPatient;
+  const { firstAdmissionOrTransferEncounter } = inpatientAdmission ?? {};
+
+  return (
+    <div className={classNames(styles.wardPatientCardRow, styles.wardPatientCardHeader)}>
+      {bed ? <WardPatientBedNumber bed={bed} /> : null}
+      <WardPatientName patient={patient} />
+      <WardPatientIdentifier id="patient-identifier" patient={patient} />
+      <WardPatientAge patient={patient} />
+      <WardPatientAddress id={'patient-address'} patient={patient} />
+      <WardPatientObs id={'admission-reason'} patient={patient} visit={visit} />
+      <WardPatientTimeSinceAdmission firstAdmissionOrTransferEncounter={firstAdmissionOrTransferEncounter} />
+    </div>
+  );
+};
+
+export default MaternalWardPatientCardHeader;

package/src/ward-view/materal-ward/maternal-ward-patient-card.component.tsx

@@ -0,0 +1,93 @@
+import { Tag } from '@carbon/react';
+import classNames from 'classnames';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { type WardPatient } from '../../types';
+import CodedObsTagsRow from '../../ward-patient-card/card-rows/coded-obs-tags-row.component';
+import MotherChildRow from '../../ward-patient-card/card-rows/mother-child-row.component';
+import PendingItemsRow from '../../ward-patient-card/card-rows/pending-items-row.component';
+import WardPatientObs from '../../ward-patient-card/row-elements/ward-patient-obs';
+import WardPatientTimeOnWard from '../../ward-patient-card/row-elements/ward-patient-time-on-ward';
+import WardPatientCard from '../../ward-patient-card/ward-patient-card.component';
+import styles from '../../ward-patient-card/ward-patient-card.scss';
+import MaternalWardPatientCardHeader from './maternal-ward-patient-card-header.component';
+import maternalWardPatientCardStyles from './maternal-ward-patient-card.scss';
+
+export interface MaternalWardPatientCardProps {
+  /**
+   * the patient to render. Note that this patient can be a mother or a child
+   */
+  wardPatient: WardPatient;
+
+  /**
+   * Children of the wardPatient occupying the same bed. A non-empty array implies that the wardPatient
+   * is a mother.
+   */
+  childrenOfWardPatientInSameBed: WardPatient[];
+}
+
+/**
+ * One major different between MaternalWardPatientCard vs DefaultWardPatientCard, besides the
+ * different elements being rendered, is that it renders just not the patient card for the patient,
+ * but also those of the the patient's children in same bed. This is done to ensure that the children's
+ * patient cards are always rendered right below the mother's.
+ *
+ * @param param0
+ * @returns
+ */
+const MaternalWardPatientCard: React.FC<MaternalWardPatientCardProps> = (props) => {
+  const { wardPatient, childrenOfWardPatientInSameBed } = props;
+  const { patient, visit, bed, inpatientAdmission } = wardPatient;
+  const { encounterAssigningToCurrentInpatientLocation } = inpatientAdmission ?? {};
+
+  const card = (
+    <>
+      <WardPatientCard wardPatient={wardPatient}>
+        <MaternalWardPatientCardHeader {...wardPatient} />
+        <div className={classNames(styles.wardPatientCardRow, styles.dotSeparatedChildren)}>
+          <WardPatientTimeOnWard
+            encounterAssigningToCurrentInpatientLocation={encounterAssigningToCurrentInpatientLocation}
+          />
+          <WardPatientObs id={'gravida'} patient={patient} visit={visit} />
+        </div>
+        <PendingItemsRow id={'pending-items'} wardPatient={wardPatient} />
+        <CodedObsTagsRow id="pregnancy-complications" {...wardPatient} />
+        <MotherChildRow {...props} />
+      </WardPatientCard>
+      {childrenOfWardPatientInSameBed?.map((childWardPatient) => {
+        return (
+          <React.Fragment key={childWardPatient.patient.uuid}>
+            <MotherChildBedShareDivider />
+            <WardPatientCard wardPatient={childWardPatient}>
+              <MaternalWardPatientCardHeader {...childWardPatient} />
+              <PendingItemsRow id={'pending-items'} wardPatient={childWardPatient} />
+            </WardPatientCard>
+          </React.Fragment>
+        );
+      })}
+    </>
+  );
+
+  if (bed) {
+    return card;
+  } else {
+    return (
+      <div className={styles.unassignedPatient}>
+        <div key={'unassigned-bed-pt-' + wardPatient.patient.uuid}>{card}</div>
+      </div>
+    );
+  }
+};
+
+const MotherChildBedShareDivider = () => {
+  const { t } = useTranslation();
+  return (
+    <div className={maternalWardPatientCardStyles.motherChildBedDivider}>
+      <div className={maternalWardPatientCardStyles.motherChildBedDividerLine}></div>
+      <Tag type="purple">{t('motherChildBedShare', 'Mother / Child')}</Tag>
+      <div className={maternalWardPatientCardStyles.motherChildBedDividerLine}></div>
+    </div>
+  );
+};
+
+export default MaternalWardPatientCard;

package/src/{beds/occupied-bed.scss → ward-view/materal-ward/maternal-ward-patient-card.scss}

@@ -1,14 +1,8 @@
 @use '@carbon/layout';
 @use '@openmrs/esm-styleguide/src/vars';
+@use '@carbon/type';
 
-.occupiedBed {
-  display: flex;
-  flex-direction: column;
-  background-color: vars.$ui-02;
-  height: fit-content;
-}
-
-.bedDivider {
+.motherChildBedDivider {
   background-color: vars.$ui-02;
   color: vars.$text-02;
   padding: layout.$spacing-01;
@@ -17,8 +11,8 @@
   justify-content: space-between;
 }
 
-.bedDividerLine {
+.motherChildBedDividerLine {
   height: 1px;
-  background-color: vars.$ui-05;
   width: 30%;
+  border-top: 1px dashed vars.$ui-05;
 }

package/src/ward-view/materal-ward/maternal-ward-patient-card.test.tsx

@@ -0,0 +1,47 @@
+import { getDefaultsFromConfigSchema, useAppContext, useConfig } from '@openmrs/esm-framework';
+import { screen } from '@testing-library/react';
+import { mockPatientAlice, mockVisitAlice } from '__mocks__';
+import React from 'react';
+import { renderWithSwr } from 'tools';
+import { mockInpatientAdmissionAlice } from '../../../../../__mocks__/inpatient-admission';
+import { mockWardBeds } from '../../../../../__mocks__/wardBeds.mock';
+import { mockWardViewContext } from '../../../mock';
+import { configSchema, type WardConfigObject } from '../../config-schema';
+import { type WardPatient, type WardViewContext } from '../../types';
+import MaternalWardPatientCard from './maternal-ward-patient-card.component';
+
+jest.mocked(useAppContext<WardViewContext>).mockReturnValue(mockWardViewContext);
+
+const defaultConfig: WardConfigObject = getDefaultsFromConfigSchema(configSchema);
+
+jest.mocked(useConfig).mockReturnValue(defaultConfig);
+
+describe('MaternalWardPatientCard', () => {
+  it('renders a patient with no child', () => {
+    const alice: WardPatient = {
+      patient: mockPatientAlice,
+      bed: mockWardBeds[0],
+      inpatientAdmission: mockInpatientAdmissionAlice,
+      visit: mockVisitAlice,
+      inpatientRequest: null,
+    };
+    renderWithSwr(<MaternalWardPatientCard wardPatient={alice} childrenOfWardPatientInSameBed={[]} />);
+
+    const patientName = screen.queryByText('Alice Johnson');
+    expect(patientName).toBeInTheDocument();
+  });
+
+  it('renders a patient with another child in same bed', () => {
+    const alice: WardPatient = {
+      patient: mockPatientAlice,
+      bed: mockWardBeds[0],
+      inpatientAdmission: mockInpatientAdmissionAlice,
+      visit: mockVisitAlice,
+      inpatientRequest: null,
+    };
+    renderWithSwr(<MaternalWardPatientCard wardPatient={alice} childrenOfWardPatientInSameBed={[alice]} />);
+
+    const bedDivider = screen.queryByText('Mother / Child');
+    expect(bedDivider).toBeInTheDocument();
+  });
+});

package/src/ward-view/materal-ward/maternal-ward-pending-patients.component.tsx

@@ -0,0 +1,48 @@
+import { ErrorState, useAppContext } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { type InpatientRequest, type WardViewContext } from '../../types';
+import AdmissionRequestNoteRow from '../../ward-patient-card/card-rows/admission-request-note-row.component';
+import CodedObsTagsRow from '../../ward-patient-card/card-rows/coded-obs-tags-row.component';
+import MotherChildRow from '../../ward-patient-card/card-rows/mother-child-row.component';
+import WardPatientSkeletonText from '../../ward-patient-card/row-elements/ward-patient-skeleton-text';
+import AdmissionRequestCard from '../../ward-workspace/admission-request-card/admission-request-card.component';
+
+function MaternalWardPendingPatients() {
+  const { wardPatientGroupDetails } = useAppContext<WardViewContext>('ward-view-context') ?? {};
+  const { t } = useTranslation();
+  const { inpatientRequestResponse } = wardPatientGroupDetails ?? {};
+  const {
+    inpatientRequests,
+    isLoading: isLoadingInpatientRequests,
+    error: errorFetchingInpatientRequests,
+  } = inpatientRequestResponse ?? {};
+
+  return isLoadingInpatientRequests ? (
+    <WardPatientSkeletonText />
+  ) : errorFetchingInpatientRequests ? (
+    <ErrorState headerTitle={t('admissionRequests', 'Admission requests')} error={errorFetchingInpatientRequests} />
+  ) : (
+    <>
+      {inpatientRequests?.map((request: InpatientRequest, i) => {
+        const wardPatient = {
+          patient: request.patient,
+          visit: request.visit,
+          bed: null,
+          inpatientRequest: request,
+          inpatientAdmission: null,
+        };
+
+        return (
+          <AdmissionRequestCard key={`admission-request-card-${i}`} wardPatient={wardPatient}>
+            <CodedObsTagsRow id="pregnancy-complications" {...wardPatient} />
+            <MotherChildRow wardPatient={wardPatient} childrenOfWardPatientInSameBed={[]} />
+            <AdmissionRequestNoteRow id={'admission-request-note'} wardPatient={wardPatient} />
+          </AdmissionRequestCard>
+        );
+      })}
+    </>
+  );
+}
+
+export default MaternalWardPendingPatients;