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

package/src/hooks/useObs.ts

@@ -1,21 +1,17 @@
-import useSWR from 'swr';
+import { restBaseUrl, useOpenmrsFetchAll } from '@openmrs/esm-framework';
 import { type Observation } from '../types';
-import { type Link, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 
 interface ObsSearchCriteria {
   patient: string;
   concept: string;
 }
 
-export function useObs(criteria?: ObsSearchCriteria, representation = 'default') {
+export function useObs(criteria?: ObsSearchCriteria, fetch: boolean = true, representation = 'default') {
   const params = new URLSearchParams({
     ...criteria,
     v: representation,
   });
 
   const apiUrl = `${restBaseUrl}/obs?${params}`;
-  return useSWR<{ data: { results: Array<Observation>; totalCount: number; links: Array<Link> } }, Error>(
-    apiUrl,
-    openmrsFetch,
-  );
+  return useOpenmrsFetchAll<Observation>(fetch ? apiUrl : null);
 }

package/src/hooks/usePatientPendingOrders.ts

@@ -0,0 +1,16 @@
+import { type FetchResponse, openmrsFetch, type OpenmrsResource, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+
+export function usePatientPendingOrders(patientUuid: string, orderTypeUUid: string, visitStartDate: string) {
+  const apiUrl =
+    patientUuid && orderTypeUUid && visitStartDate
+      ? `${restBaseUrl}/order?includeNullFulfillerStatus=true&patient=${patientUuid}&orderTypes=${orderTypeUUid}&activatedOnOrAfterDate=${visitStartDate}`
+      : null;
+  const { data, ...rest } = useSWR<FetchResponse<{ results: Array<OpenmrsResource> }>, Error>(apiUrl, openmrsFetch);
+
+  return {
+    orders: data?.data.results,
+    count: data?.data.results.length,
+    ...rest,
+  };
+}

package/src/hooks/useWardPatientGrouping.ts

@@ -0,0 +1,32 @@
+import { useMemo } from 'react';
+import { createAndGetWardPatientGrouping } from '../ward-view/ward-view.resource';
+import { useAdmissionLocation } from './useAdmissionLocation';
+import { useInpatientAdmission } from './useInpatientAdmission';
+import { useInpatientRequest } from './useInpatientRequest';
+
+export function useWardPatientGrouping() {
+  const admissionLocationResponse = useAdmissionLocation();
+  const inpatientAdmissionResponse = useInpatientAdmission();
+  const inpatientRequestResponse = useInpatientRequest();
+
+  const { data: inpatientAdmissions } = inpatientAdmissionResponse;
+  const { admissionLocation } = admissionLocationResponse;
+  const { inpatientRequests } = inpatientRequestResponse;
+
+  const groupings = useMemo(() => {
+    return { ...createAndGetWardPatientGrouping(inpatientAdmissions, admissionLocation, inpatientRequests) };
+  }, [admissionLocation, inpatientAdmissions, inpatientRequests]) as ReturnType<typeof createAndGetWardPatientGrouping>;
+  return {
+    ...groupings,
+    admissionLocationResponse,
+    inpatientAdmissionResponse,
+    inpatientRequestResponse,
+    isLoading:
+      admissionLocationResponse.isLoading || inpatientAdmissionResponse.isLoading || inpatientRequestResponse.isLoading,
+    mutate() {
+      admissionLocationResponse?.mutate();
+      inpatientAdmissionResponse?.mutate();
+      inpatientRequestResponse?.mutate();
+    },
+  };
+}

package/src/index.ts

@@ -1,14 +1,11 @@
 import {
   defineConfigSchema,
-  defineExtensionConfigSchema,
   getAsyncLifecycle,
   getSyncLifecycle,
   registerBreadcrumbs,
   registerFeatureFlag,
 } from '@openmrs/esm-framework';
 import { configSchema } from './config-schema';
-import { admissionRequestNoteRowConfigSchema } from './config-schema-admission-request-note';
-import { coloredObsTagsCardRowConfigSchema } from './config-schema-extension-colored-obs-tags';
 import { moduleName } from './constant';
 import { createDashboardLink } from './createDashboardLink.component';
 import rootComponent from './root.component';
@@ -38,7 +35,7 @@ export const admitPatientFormWorkspace = getAsyncLifecycle(
 
 // Title for this workspace is set dynamically
 export const wardPatientWorkspace = getAsyncLifecycle(
-  () => import('./ward-patient-workspace/ward-patient.workspace'),
+  () => import('./ward-workspace/patient-details/ward-patient.workspace'),
   options,
 );
 
@@ -49,7 +46,7 @@ export const wardPatientNotesWorkspace = getAsyncLifecycle(
 );
 
 export const wardPatientActionButtonExtension = getAsyncLifecycle(
-  () => import('./ward-patient-workspace/ward-patient-action-button.extension'),
+  () => import('./ward-workspace/patient-details/ward-patient-action-button.extension'),
   options,
 );
 
@@ -58,36 +55,67 @@ export const wardPatientNotesActionButtonExtension = getAsyncLifecycle(
   options,
 );
 
-export const coloredObsTagCardRowExtension = getAsyncLifecycle(
-  () => import('./ward-patient-card/card-rows/colored-obs-tags-card-row.extension'),
+// t('transfers', 'Transfers')
+export const patientTransferAndSwapWorkspace = getAsyncLifecycle(
+  () => import('./ward-workspace/patient-transfer-bed-swap/patient-transfer-swap.workspace'),
   options,
 );
 
-export const admissionRequestNoteRowExtension = getAsyncLifecycle(
-  () => import('./ward-patient-card/card-rows/admission-request-note.extension'),
+// t('discharge', 'Discharge')
+export const patientDischargeWorkspace = getAsyncLifecycle(
+  () => import('./ward-workspace/patient-discharge/patient-discharge.workspace'),
   options,
 );
 
-// t('transfers', 'Transfers')
-export const patientTransferAndSwapWorkspace = getAsyncLifecycle(
-  () => import('./ward-workspace/patient-transfer-bed-swap/patient-transfer-swap.workspace'),
+export const patientTransferAndSwapWorkspaceSiderailIcon = getAsyncLifecycle(
+  () => import('./action-menu-buttons/transfer-workspace-siderail.component'),
   options,
 );
 
-export const patientTransferAndSwapWorkspaceSiderailIcon = getAsyncLifecycle(
-  () => import('./action-menu-buttons/transfer-workspace-siderail.component'),
+// t('transferRequest', 'Transfer request')
+export const patientTransferRequestWorkspace = getAsyncLifecycle(
+  () => import('./ward-workspace/patient-transfer-request-workspace/patient-transfer-request.workspace'),
+  options,
+);
+
+export const patientDischargeWorkspaceSideRailIcon = getAsyncLifecycle(
+  () => import('./action-menu-buttons/discharge-workspace-siderail.component'),
+  options,
+);
+
+export const patientClinicalFormsWorkspace = getAsyncLifecycle(
+  () => import('./ward-workspace/patient-clinical-forms-workspace/patient-clinical-forms.workspace'),
+  options,
+);
+
+export const clinicalFormWorkspaceSideRailIcon = getAsyncLifecycle(
+  () => import('./action-menu-buttons/clinical-forms-workspace-siderail.component'),
+  options,
+);
+
+export const defaultWardView = getAsyncLifecycle(
+  () => import('./ward-view/default-ward/default-ward-view.component'),
+  options,
+);
+
+export const maternalWardView = getAsyncLifecycle(
+  () => import('./ward-view/materal-ward/maternal-ward-view.component'),
   options,
 );
 
 export function startupApp() {
   registerBreadcrumbs([]);
   defineConfigSchema(moduleName, configSchema);
-  defineExtensionConfigSchema('colored-obs-tags-card-row', coloredObsTagsCardRowConfigSchema);
-  defineExtensionConfigSchema('admission-request-note-card-row', admissionRequestNoteRowConfigSchema);
 
   registerFeatureFlag(
     'bedmanagement-module',
-    'Bed Management Module',
+    '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

@@ -24,29 +24,26 @@ export default function LocationSelector(props: LocationSelectorProps) {
   const isTablet = !isDesktop(useLayoutType());
   const [searchTerm, setSearchTerm] = useState('');
   const debouncedSearchTerm = useDebounce(searchTerm);
-  const [page, setPage] = useState(1);
   const filterCriteria: Array<Array<string>> = useMemo(() => {
     const criteria = [];
     if (debouncedSearchTerm) {
       criteria.push(['name:contains', debouncedSearchTerm]);
     }
-    criteria.push(['_count', size.toString()]);
     if (emrConfiguration) {
       criteria.push(['_tag', emrConfiguration.supportsTransferLocationTag.name]);
     }
-    if (page > 1) {
-      criteria.push(['_getpagesoffset', ((page - 1) * size).toString()]);
-    }
     return criteria;
-  }, [debouncedSearchTerm, page, emrConfiguration]);
-  const { locations, isLoading, totalLocations } = useLocations(filterCriteria, !emrConfiguration);
+  }, [debouncedSearchTerm, emrConfiguration]);
+  const {
+    data: locations,
+    isLoading,
+    totalCount,
+    currentPage,
+    totalPages,
+    goToNext,
+    goToPrevious,
+  } = useLocations(filterCriteria, size, !emrConfiguration);
 
-  const handlePageChange = useCallback(
-    ({ page: newPage }) => {
-      setPage(newPage);
-    },
-    [setPage, page],
-  );
   const handleSearch = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       setSearchTerm(event.target.value);
@@ -84,30 +81,30 @@ export default function LocationSelector(props: LocationSelectorProps) {
           </RadioButtonGroup>
         </ResponsiveWrapper>
       )}
-      {totalLocations > 5 && (
+      {totalCount > size && (
         <div className={styles.pagination}>
           <span className={styles.bodyShort01}>
             {t('showingLocations', '{{start}}-{{end}} of {{count}} locations', {
-              start: (page - 1) * size + 1,
-              end: Math.min(page * size, totalLocations),
-              count: totalLocations,
+              start: (currentPage - 1) * size + 1,
+              end: Math.min(currentPage * size, totalCount),
+              count: totalCount,
             })}
           </span>
           <div>
             <IconButton
               className={classNames(styles.button, styles.buttonLeft)}
-              disabled={page === 1}
+              disabled={currentPage === 1}
               kind="ghost"
               label={t('previousPage', 'Previous page')}
-              onClick={() => handlePageChange({ page: page - 1 })}>
+              onClick={() => goToPrevious()}>
               <ChevronLeftIcon />
             </IconButton>
             <IconButton
               className={styles.button}
-              disabled={page * size >= totalLocations}
+              disabled={currentPage >= totalPages}
               kind="ghost"
               label={t('nextPage', 'Next page')}
-              onClick={() => handlePageChange({ page: page + 1 })}>
+              onClick={() => goToNext()}>
               <ChevronRightIcon />
             </IconButton>
           </div>

package/src/root.component.tsx

@@ -1,3 +1,4 @@
+import { WorkspaceContainer } from '@openmrs/esm-framework';
 import React from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import WardView from './ward-view/ward-view.component';
@@ -14,6 +15,8 @@ const Root: React.FC = () => {
           <Route path="/:locationUuid" element={<WardView />} />
         </Routes>
       </BrowserRouter>
+      
+      <WorkspaceContainer overlay contextKey="ward" />
     </main>
   );
 };

package/src/routes.json

@@ -51,9 +51,24 @@
       "component": "patientTransferAndSwapWorkspaceSiderailIcon"
     },
     {
-      "component": "admissionRequestNoteRowExtension",
-      "name": "admission-request-note-card-row",
-      "slot": "ward-patient-card-slot"
+      "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": [
@@ -93,6 +108,29 @@
       "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"
     }
   ]
 }

package/src/types/index.ts

@@ -9,8 +9,9 @@ import type {
   Visit,
 } from '@openmrs/esm-framework';
 import type React from 'react';
+import type { useWardPatientGrouping } from '../hooks/useWardPatientGrouping';
 
-export type WardPatientCard = React.FC<WardPatient>;
+export type WardPatientCardType = React.FC<WardPatient>;
 
 // WardPatient is a patient admitted to a ward, and/or in a bed on a ward
 export type WardPatient = {
@@ -40,8 +41,10 @@ export type WardPatient = {
    */
   inpatientRequest: InpatientRequest;
 };
+
 export interface WardPatientWorkspaceProps extends DefaultWorkspaceProps {
   wardPatient: WardPatient;
+  WardPatientHeader: React.FC<WardPatient>;
 }
 
 // server-side types defined in openmrs-module-bedmanagement:
@@ -64,6 +67,14 @@ export interface Bed {
   status: BedStatus;
 }
 
+export interface BedDetail {
+  bedId: number;
+  bedNumber: number;
+  bedType: BedType;
+  physicalLocation: Location;
+  patients: Array<Patient>;
+}
+
 export interface BedLayout {
   rowNumber: number;
   columnNumber: number;
@@ -134,6 +145,16 @@ export interface InpatientAdmission {
   // the first encounter of the visit that is of encounterType "Admission" or "Transfer",
   // regardless of the admission location
   firstAdmissionOrTransferEncounter: Encounter;
+
+  // the current in patient request
+  currentInpatientRequest: InpatientRequest;
+}
+
+export interface MotherAndChild {
+  mother: Patient;
+  child: Patient;
+  motherAdmission: InpatientAdmission;
+  childAdmission: InpatientAdmission;
 }
 
 // TODO: Move these types to esm-core
@@ -185,6 +206,12 @@ export interface EncounterRole extends OpenmrsResourceStrict {
   retired?: boolean;
 }
 
+export interface WardMetrics {
+  patients: string;
+  freeBeds: string;
+  capacity: string;
+}
+
 export interface EncounterPayload {
   encounterDatetime?: string;
   encounterType: string;
@@ -202,3 +229,25 @@ export interface ObsPayload {
   value?: string;
   groupMembers?: Array<ObsPayload>;
 }
+
+export type WardPatientGroupDetails = ReturnType<typeof useWardPatientGrouping>;
+export interface WardViewContext {
+  wardPatientGroupDetails: WardPatientGroupDetails;
+  WardPatientHeader: React.FC<WardPatient>;
+}
+
+export interface PatientAndAdmission {
+  patient: Patient;
+  currentAdmission: InpatientAdmission;
+}
+
+export interface MotherChildRelationships {
+  motherByChildUuid: Map<string, PatientAndAdmission>;
+  childrenByMotherUuid: Map<string, PatientAndAdmission[]>;
+}
+
+export interface MaternalWardViewContext {
+  motherChildRelationships: MotherChildRelationships;
+}
+
+export type PatientWorkspaceAdditionalProps = Omit<WardPatientWorkspaceProps, keyof DefaultWorkspaceProps>;

package/src/ward-patient-card/card-rows/admission-request-note-row.component.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { type ObsElementConfig } from '../../config-schema';
+import { type WardPatient } from '../../types';
+import { useElementConfig } from '../../ward-view/ward-view.resource';
+import WardPatientObs from '../row-elements/ward-patient-obs';
+import styles from '../ward-patient-card.scss';
+
+interface AdmissionRequestNoteRowProps {
+  wardPatient: WardPatient;
+  id: string;
+}
+
+const AdmissionRequestNoteRow: React.FC<AdmissionRequestNoteRowProps> = ({ id, wardPatient }) => {
+  const { patient, visit, inpatientAdmission } = wardPatient;
+  const { conceptUuid } = useElementConfig('admissionRequestNote', id) ?? {};
+  const config: ObsElementConfig = {
+    conceptUuid,
+    limit: 0,
+    id: 'admission-note',
+    onlyWithinCurrentVisit: true,
+    orderBy: 'ascending',
+    label: 'Admission Note',
+  };
+
+  // only show if the patient has not been admitted yet
+  const admitted = inpatientAdmission != null;
+  if (admitted) {
+    return null;
+  } else {
+    return (
+      <div className={styles.wardPatientCardRow}>
+        <WardPatientObs id={id} configOverride={config} patient={patient} visit={visit} />
+      </div>
+    );
+  }
+};
+
+export default AdmissionRequestNoteRow;

package/src/ward-patient-card/card-rows/coded-obs-tags-row.component.tsx

@@ -0,0 +1,108 @@
+import { Tag } from '@carbon/react';
+import { type OpenmrsResource, type Patient, type Visit } from '@openmrs/esm-framework';
+import React, { type ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useObs } from '../../hooks/useObs';
+import { useElementConfig } from '../../ward-view/ward-view.resource';
+import styles from '../ward-patient-card.scss';
+import WardPatientSkeletonText from '../row-elements/ward-patient-skeleton-text';
+import {
+  getObsEncounterString,
+  obsCustomRepresentation,
+  useConceptToTagColorMap,
+} from '../row-elements/ward-patient-obs.resource';
+import WardPatientResponsiveTooltip from '../row-elements/ward-patient-responsive-tooltip';
+
+interface WardPatientCodedObsTagsRowProps {
+  id: string;
+  patient: Patient;
+  visit: Visit;
+}
+
+/**
+ * The WardPatientCodedObsTags displays observations of coded values of a particular concept in the active visit as tags.
+ * Typically, these are taken from checkbox fields from a form. Each answer value can either be configured
+ * to show as its own tag, or collapsed into a summary tag show the number of these values present.
+ *
+ * This is a rather specialized element;
+ * for a more general display of obs value, use WardPatientObs instead.
+ * @param config
+ * @returns
+ */
+const CodedObsTagsRow: React.FC<WardPatientCodedObsTagsRowProps> = ({ id, patient, visit }) => {
+  const config = useElementConfig('coloredObsTags', id);
+  const { conceptUuid, summaryLabel, summaryLabelColor } = config ?? {};
+  const { data, isLoading } = useObs(
+    { patient: patient.uuid, concept: conceptUuid },
+    conceptUuid != null,
+    obsCustomRepresentation,
+  );
+  const { t } = useTranslation();
+  const conceptToTagColorMap = useConceptToTagColorMap(config?.tags ?? []);
+
+  if (isLoading) {
+    return (
+      <div className={styles.wardPatientCardRow}>
+        <WardPatientSkeletonText />
+      </div>
+    );
+  } else {
+    const obsToDisplay = data?.filter((o) => {
+      const matchVisit = o.encounter.visit?.uuid == visit?.uuid;
+      return matchVisit;
+    });
+
+    const summaryLabelToDisplay = summaryLabel != null ? t(summaryLabel) : obsToDisplay?.[0]?.concept?.display;
+
+    // for each obs configured to be displayed with a color, we create a tag for it
+    // for other obs not configured, we create a single summary tag for all of them.
+    const summaryTagTooltipText: ReactNode[] = [];
+    const coloredOpsTags = obsToDisplay
+      ?.map((o) => {
+        const { display, uuid } = o.value as OpenmrsResource;
+
+        const color = conceptToTagColorMap?.get(uuid);
+        if (color) {
+          return (
+            <WardPatientResponsiveTooltip tooltipContent={getObsEncounterString(o, t)}>
+              <Tag type={color} key={`ward-coded-obs-tag-${o.uuid}`}>
+                {display}
+              </Tag>
+            </WardPatientResponsiveTooltip>
+          );
+        } else {
+          summaryTagTooltipText.push(
+            <div key={uuid}>
+              {display} ({getObsEncounterString(o, t)})
+            </div>,
+          );
+          return null;
+        }
+      })
+      .filter((o) => o != null);
+
+    if (coloredOpsTags?.length > 0 || summaryTagTooltipText.length > 0) {
+      return (
+        <div className={styles.wardPatientCardRow}>
+          <span className={styles.wardPatientObsLabel}>
+            {coloredOpsTags}
+            {summaryTagTooltipText.length > 0 ? (
+              <WardPatientResponsiveTooltip tooltipContent={summaryTagTooltipText}>
+                <Tag type={summaryLabelColor}>
+                  {t('countItems', '{{count}} {{item}}', {
+                    count: summaryTagTooltipText.length,
+                    item: summaryLabelToDisplay,
+                  })}
+                </Tag>
+              </WardPatientResponsiveTooltip>
+            ) : null}
+          </span>
+        </div>
+      );
+    } else {
+      return null;
+    }
+  }
+};
+
+export default CodedObsTagsRow;

package/src/ward-patient-card/card-rows/mother-child-row.component.tsx

@@ -0,0 +1,84 @@
+import { BabyIcon, MotherIcon, type Patient, useAppContext } from '@openmrs/esm-framework';
+import classNames from 'classnames';
+import React from 'react';
+import { type InpatientAdmission, type MaternalWardViewContext } from '../../types';
+import { type MaternalWardPatientCardProps } from '../../ward-view/materal-ward/maternal-ward-patient-card.component';
+import WardPatientAge from '../row-elements/ward-patient-age';
+import WardPatientIdentifier from '../row-elements/ward-patient-identifier';
+import WardPatientLocation from '../row-elements/ward-patient-location';
+import WardPatientName from '../row-elements/ward-patient-name';
+import wardPatientCardStyles from '../ward-patient-card.scss';
+import styles from './mother-child-row.scss';
+
+/**
+ * This component displays the mother or children of the patient in the patient card. The patient's child is
+ * not displayed if it is in the same bed as the patient
+ *
+ * @param param0
+ * @returns
+ */
+const MotherChildRow: React.FC<MaternalWardPatientCardProps> = ({ wardPatient, childrenOfWardPatientInSameBed }) => {
+  const { patient } = wardPatient;
+
+  const { motherChildRelationships } = useAppContext<MaternalWardViewContext>('maternal-ward-view-context') ?? {};
+
+  const { childrenByMotherUuid, motherByChildUuid } = motherChildRelationships ?? {};
+
+  const motherOfPatient = motherByChildUuid?.get(patient.uuid);
+  const childrenOfPatient = childrenByMotherUuid?.get(patient.uuid);
+  const childrenOfPatientNotInSameBed = childrenOfPatient?.filter((child) => {
+    return !childrenOfWardPatientInSameBed?.some((childInSameBed) => childInSameBed.patient.uuid == child.patient.uuid);
+  });
+
+  return (
+    <>
+      {motherOfPatient && (
+        <MotherOrChild
+          otherPatient={motherOfPatient.patient}
+          otherPatientAdmission={motherOfPatient.currentAdmission}
+          isOtherPatientTheMother={true}
+        />
+      )}
+      {childrenOfPatientNotInSameBed?.map((childOfPatient) => (
+        <MotherOrChild
+          key={childOfPatient.patient.uuid}
+          otherPatient={childOfPatient.patient}
+          otherPatientAdmission={childOfPatient.currentAdmission}
+          isOtherPatientTheMother={false}
+        />
+      ))}
+    </>
+  );
+};
+
+interface MotherOrChildProp {
+  otherPatient: Patient;
+  otherPatientAdmission: InpatientAdmission;
+  isOtherPatientTheMother: boolean;
+}
+
+const MotherOrChild: React.FC<MotherOrChildProp> = ({
+  otherPatient,
+  otherPatientAdmission,
+  isOtherPatientTheMother,
+}) => {
+  const Icon = isOtherPatientTheMother ? MotherIcon : BabyIcon;
+
+  return (
+    <div
+      key={otherPatient.uuid}
+      className={classNames(styles.motherOrBabyRow, wardPatientCardStyles.wardPatientCardRow)}>
+      <div className={styles.motherOrBabyIconDiv}>
+        <Icon className={styles.motherOrBabyIcon} size={24} />
+      </div>
+      <div className={classNames(styles.motherOrBabyRowElementsDiv, wardPatientCardStyles.dotSeparatedChildren)}>
+        <WardPatientName patient={otherPatient} />
+        <WardPatientIdentifier id="patient-identifier" patient={otherPatient} />
+        <WardPatientAge patient={otherPatient} />
+        <WardPatientLocation inpatientAdmission={otherPatientAdmission} />
+      </div>
+    </div>
+  );
+};
+
+export default MotherChildRow;