@kenyaemr/esm-ward-app 8.0.1-pre.99 → 8.0.3-pre.131

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

@@ -1,59 +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';
 
-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>
-      <ExtensionSlot
-        name={rowsExtensionSlotName}
-        state={wardPatient}
-        className={classNames(styles.wardPatientCardRow, styles.wardPatientCardExtensionSlot)}
-      />
-      <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>
+      {children}
       <button
         className={styles.wardPatientCardButton}
         onClick={() => {
-          launchWorkspace<WardPatientWorkspaceProps>('ward-patient-workspace', {
+          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

@@ -14,10 +14,6 @@
   background-color: $ui-02;
 
   position: relative; // this allows positioning the button correctly
-
-  > .wardPatientCardRow:not(:first-child) {
-    border-top: 1px colors.$gray-20 solid;
-  }
 }
 
 .wardPatientCardButton {
@@ -59,24 +55,52 @@
 .wardPatientCardRow {
   width: 100%;
   padding: layout.$spacing-04;
+  border-top: 1px colors.$gray-20 solid;
+  background-color: colors.$white;
+
+  &:empty {
+    border-top: 0px;
+    display: none;
+  }
 }
 
-.wardPatientCardRow:empty {
+.wardPatientPendingOrdersRow:empty {
   display: none;
+  margin-left: layout.$spacing-04;
 }
 
 .wardPatientCardExtensionSlot {
   display: none;
+  width: 100%;
 
   &:has(div:not(:empty)) {
     display: block;
   }
 }
 
+.wardPatientCardPendingItemsRow:empty {
+  display: none;
+  margin-left: layout.$spacing-04;
+}
+
+.wardPatientCardPendingItemsRow {
+  @extend .wardPatientCardRow;
+  display: flex;
+  align-items: center;
+  flex-flow: row wrap;
+  color: $ui-02;
+  background-color: colors.$gray-80;
+}
+
 .wardPatientCardHeader {
   @extend .dotSeparatedChildren;
+  border-top: 0;
+}
+
+.wardPatientCardDispositionTypeContainer {
   display: flex;
-  flex-wrap: wrap;
+  flex-flow: row;
+  align-items: center;
 }
 
 .wardPatientName {
@@ -112,10 +136,26 @@
   align-items: center;
 }
 
+.movementIcon {
+  padding: layout.$spacing-02;
+  border-radius: 50%;
+  fill: $ui-03;
+  background-color: $color-blue-60-2;
+  margin-left: layout.$spacing-03;
+  margin-right: layout.$spacing-02;
+}
+
+.chemistryReferenceIcon {
+  padding: layout.$spacing-02;
+  border-radius: 50%;
+  fill: $ui-03;
+  background-color: #a2191f;
+  margin-left: layout.$spacing-03;
+  margin-right: layout.$spacing-02;
+}
+
 .wardPatientAddress {
   @extend .dotSeparatedChildren;
-  display: flex;
-  flex-wrap: wrap;
   align-items: center;
   gap: layout.$spacing-02;
 }
@@ -124,8 +164,18 @@
   padding-right: layout.$spacing-02;
 }
 
+.responsiveTooltip {
+  z-index: 2;
+  & :global(.cds--tag) {
+    border: 0;
+  }
+}
+
 .dotSeparatedChildren {
-  > div:not(div:first-of-type):not(:empty) {
+  display: flex;
+  flex-wrap: wrap;
+
+  > *:not(*:first-of-type):not(:empty) {
     display: flex;
     align-items: center;
 
@@ -135,3 +185,12 @@
     }
   }
 }
+
+.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,13 +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;
-}
-
-.bedDivider {
+.motherChildBedDivider {
   background-color: vars.$ui-02;
   color: vars.$text-02;
   padding: layout.$spacing-01;
@@ -16,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;
 }