good to go

packages/esm-ward-app/src/beds/empty-bed-skeleton.tsx

@@ -1,12 +1,13 @@
 import { SkeletonIcon } from '@carbon/react';
 import React from 'react';
 import styles from './empty-bed.scss';
+import WardPatientSkeletonText from '../ward-patient-card/row-elements/ward-pateint-skeleton-text';
 
 const EmptyBedSkeleton = () => {
   return (
     <div className={styles.container + ' ' + styles.skeleton}>
       <SkeletonIcon />
-      <SkeletonIcon className={styles.skeletonText} />
+      <WardPatientSkeletonText />
     </div>
   );
 };

packages/esm-ward-app/src/beds/empty-bed.scss

@@ -22,7 +22,3 @@
   @include type.type-style('heading-compact-01');
   color: $text-02;
 }
-
-.skeletonText {
-  width: 6.25rem;
-}

packages/esm-ward-app/src/config-schema.ts

@@ -198,10 +198,6 @@ export interface ObsElementDefinition {
   limit: number;
   label?: string;
 }
-export interface MotherChildRowExtensionDefinition {
-  maternalWardLocations: Array<string>;
-  childrenWardLocations: Array<string>;
-}
 
 export interface IdentifierElementDefinition {
   id: string;

packages/esm-ward-app/src/ward-patient-card/card-rows/mother-child-row.extension.tsx

@@ -1,16 +1,17 @@
-import { BabyIcon, MotherIcon, useConfig } from '@openmrs/esm-framework';
+import { InlineNotification } from '@carbon/react';
+import { BabyIcon, MotherIcon } from '@openmrs/esm-framework';
+import classNames from 'classnames';
 import React from 'react';
-import { type MotherChildRowExtensionDefinition } from '../../config-schema';
+import { useTranslation } from 'react-i18next';
 import { type MothersAndChildrenSearchCriteria, useMotherAndChildren } from '../../hooks/useMotherAndChildren';
-import useWardLocation from '../../hooks/useWardLocation';
 import { type WardPatientCard } from '../../types';
+import WardPatientSkeletonText from '../row-elements/ward-pateint-skeleton-text';
 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';
-import classNames from 'classnames';
 
 const motherAndChildrenRep =
   'custom:(childAdmission,mother:(person,identifiers:full,uuid),child:(person,identifiers:full,uuid),motherAdmission)';
@@ -22,23 +23,60 @@ const motherAndChildrenRep =
  * @returns
  */
 const MotherChildRowExtension: WardPatientCard = ({ patient }) => {
-  const { maternalWardLocations: maternalLocations, childrenWardLocations: childLocations } =
-    useConfig<MotherChildRowExtensionDefinition>();
-  const { location } = useWardLocation();
+  const { t } = useTranslation();
+
+  const getChildrenRequestParams: MothersAndChildrenSearchCriteria = {
+    mothers: [patient.uuid],
+    requireMotherHasActiveVisit: true,
+    requireChildHasActiveVisit: true,
+    requireChildBornDuringMothersActiveVisit: true,
+  };
 
-  const params: MothersAndChildrenSearchCriteria = {
-    // mothers: [patient.uuid],
-    // children: [patient.uuid],
+  const getMotherRequestParams: MothersAndChildrenSearchCriteria = {
+    children: [patient.uuid],
     requireMotherHasActiveVisit: true,
     requireChildHasActiveVisit: true,
     requireChildBornDuringMothersActiveVisit: true,
   };
 
-  const { data } = useMotherAndChildren(params, true, motherAndChildrenRep);
+  const {
+    data: childrenData,
+    isLoading: isLoadingChildrenData,
+    error: childrenDataError,
+  } = useMotherAndChildren(getChildrenRequestParams, true, motherAndChildrenRep);
+  const {
+    data: motherData,
+    isLoading: isLoadingMotherData,
+    error: motherDataError,
+  } = useMotherAndChildren(getMotherRequestParams, true, motherAndChildrenRep);
+
+  if (isLoadingChildrenData || isLoadingMotherData) {
+    return (
+      <div className={wardPatientCardStyles.wardPatientCardRow}>
+        <WardPatientSkeletonText />
+      </div>
+    );
+  } else if (childrenDataError) {
+    return (
+      <InlineNotification
+        kind="warning"
+        lowContrast={true}
+        title={t('errorLoadingChildren', 'Error loading children info')}
+      />
+    );
+  } else if (motherDataError) {
+    return (
+      <InlineNotification
+        kind="warning"
+        lowContrast={true}
+        title={t('errorLoadingChildren', 'Error loading mother info')}
+      />
+    );
+  }
 
   return (
     <>
-      {data?.map(({ mother, motherAdmission, child, childAdmission }) => {
+      {[...childrenData, ...motherData]?.map(({ mother, motherAdmission, child, childAdmission }) => {
         // patient A is the patient card's patient
         const patientA = patient;
         // patient B is either the mother or the child of patient A

packages/esm-ward-app/src/ward-patient-card/row-elements/ward-pateint-skeleton-text.tsx

@@ -0,0 +1,9 @@
+import { SkeletonIcon } from '@carbon/react';
+import React from 'react';
+import styles from '../ward-patient-card.scss';
+
+const WardPatientSkeletonText = () => {
+  return <SkeletonIcon className={styles.skeletonText} />;
+};
+
+export default WardPatientSkeletonText;

packages/esm-ward-app/src/ward-patient-card/row-elements/ward-patient-coded-obs-tags.tsx

@@ -6,6 +6,7 @@ import { type ColoredObsTagsCardRowConfigObject } from '../../config-schema-exte
 import { useObs } from '../../hooks/useObs';
 import styles from '../ward-patient-card.scss';
 import { obsCustomRepresentation, useConceptToTagColorMap } from './ward-patient-obs.resource';
+import WardPatientSkeletonText from './ward-pateint-skeleton-text';
 
 interface WardPatientCodedObsTagsProps {
   config: ColoredObsTagsCardRowConfigObject;
@@ -30,7 +31,11 @@ const WardPatientCodedObsTags: React.FC<WardPatientCodedObsTagsProps> = ({ confi
   const conceptToTagColorMap = useConceptToTagColorMap(config.tags);
 
   if (isLoading) {
-    return <SkeletonText />;
+    return (
+      <div className={styles.wardPatientCardRow}>
+        <WardPatientSkeletonText />
+      </div>
+    );
   } else {
     const obsToDisplay = data?.filter((o) => {
       const matchVisit = o.encounter.visit?.uuid == visit?.uuid;

packages/esm-ward-app/src/ward-patient-card/ward-patient-card.scss

@@ -157,3 +157,7 @@
     }
   }
 }
+
+.skeletonText {
+  width: 6.25rem;
+}

packages/esm-ward-app/src/ward-view/ward-view.component.tsx

@@ -48,11 +48,7 @@ const WardViewMain = () => {
   const { location } = useWardLocation();
 
   const wardPatientsGrouping = useAppContext<WardPatientGroupDetails>('ward-patients-group');
-  const {
-    bedLayouts = [],
-    wardAdmittedPatientsWithBed = new Map(),
-    wardUnassignedPatientsList = [],
-  } = wardPatientsGrouping ?? {};
+  const { bedLayouts, wardAdmittedPatientsWithBed, wardUnassignedPatientsList } = wardPatientsGrouping ?? {};
   const { isLoading: isLoadingAdmissionLocation, error: errorLoadingAdmissionLocation } =
     wardPatientsGrouping?.admissionLocationResponse ?? {};
   const { isLoading: isLoadingInpatientAdmissions, error: errorLoadingInpatientAdmissions } =
@@ -65,7 +61,7 @@ const WardViewMain = () => {
     const { patients } = bedLayout;
     const bed = bedLayoutToBed(bedLayout);
     const wardPatients: WardPatient[] = patients.map((patient): WardPatient => {
-      const inpatientAdmission = wardAdmittedPatientsWithBed.get(patient.uuid);
+      const inpatientAdmission = wardAdmittedPatientsWithBed?.get(patient.uuid);
       if (inpatientAdmission) {
         const { patient, visit, currentInpatientRequest } = inpatientAdmission;
         return { patient, visit, bed, inpatientAdmission, inpatientRequest: currentInpatientRequest || null };
@@ -83,7 +79,7 @@ const WardViewMain = () => {
     return <WardBed key={bed.uuid} bed={bed} wardPatients={wardPatients} />;
   });
 
-  const wardUnassignedPatients = wardUnassignedPatientsList.map((inpatientAdmission) => {
+  const wardUnassignedPatients = wardUnassignedPatientsList?.map((inpatientAdmission) => {
     return (
       <UnassignedPatient
         wardPatient={{
@@ -101,7 +97,7 @@ const WardViewMain = () => {
   return (
     <div className={styles.wardViewMain}>
       {wardBeds}
-      {bedLayouts && bedLayouts.length == 0 && (
+      {bedLayouts?.length == 0 && (
         <InlineNotification
           kind="warning"
           lowContrast={true}

packages/esm-ward-app/translations/en.json

@@ -19,6 +19,7 @@
   "errorCreatingEncounter": "Failed to admit patient",
   "errorCreatingTransferRequest": "Error creating transfer request",
   "errorDischargingPatient": "Error discharging patient",
+  "errorLoadingBedDetails": "Error Loading Bed Details",
   "errorLoadingPatientAdmissionRequests": "Error Loading patient admission requests",
   "errorLoadingPatients": "Error loading admitted patients",
   "errorLoadingWardLocation": "Error loading ward location",
@@ -33,8 +34,6 @@
   "manage": "Manage",
   "nextPage": "Next page",
   "noBedsConfigured": "No beds configured for this location",
-  "unknownLocationUuid": "Unknown location uuid: {{locationUuidFromUrl}}",
-  "errorLoadingBedDetails":"Error Loading Bed Details",
   "noBedsConfiguredForLocation": "No beds configured for {{location}} location",
   "noLocationsFound": "No locations found",
   "note": "Note",