@kenyaemr/esm-ward-app 8.1.1-pre.118 → 8.1.1-pre.121

package/src/hooks/useWardPatientGrouping.ts

@@ -21,5 +21,7 @@ export function useWardPatientGrouping() {
     admissionLocationResponse,
     inpatientAdmissionResponse,
     inpatientRequestResponse,
+    isLoading:
+      admissionLocationResponse.isLoading || inpatientAdmissionResponse.isLoading || inpatientRequestResponse.isLoading,
   };
 }

package/src/index.ts

@@ -1,19 +1,14 @@
 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';
-import { motherChildRowConfigSchema } from './config-schema-mother-child-row';
-import { pendingItemsExtensionConfigSchema } from './config-schema-pending-items-extension';
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
@@ -60,26 +55,6 @@ export const wardPatientNotesActionButtonExtension = getAsyncLifecycle(
   options,
 );
 
-export const coloredObsTagCardRowExtension = getAsyncLifecycle(
-  () => import('./ward-patient-card/card-rows/colored-obs-tags-card-row.extension'),
-  options,
-);
-
-export const admissionRequestNoteRowExtension = getAsyncLifecycle(
-  () => import('./ward-patient-card/card-rows/admission-request-note.extension'),
-  options,
-);
-
-export const motherChildRowExtension = getAsyncLifecycle(
-  () => import('./ward-patient-card/card-rows/mother-child-row.extension'),
-  options,
-);
-
-export const pendingItemsCardRowExtension = getAsyncLifecycle(
-  () => import('./ward-patient-card/card-rows/pending-items-car-row.extension'),
-  options,
-);
-
 // t('transfers', 'Transfers')
 export const patientTransferAndSwapWorkspace = getAsyncLifecycle(
   () => import('./ward-workspace/patient-transfer-bed-swap/patient-transfer-swap.workspace'),
@@ -118,13 +93,19 @@ export const clinicalFormWorkspaceSideRailIcon = getAsyncLifecycle(
   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);
-  defineExtensionConfigSchema('mother-child-card-row', motherChildRowConfigSchema);
-  defineExtensionConfigSchema('ward-patient-pending-items-card-row', pendingItemsExtensionConfigSchema);
 
   registerFeatureFlag(
     'bedmanagement-module',

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

@@ -61,19 +61,14 @@
       "slot": "action-menu-ward-patient-items-slot"
     },
     {
-      "component": "admissionRequestNoteRowExtension",
-      "name": "admission-request-note-card-row",
-      "slot": "ward-patient-card-slot"
-    },
-    {
-      "component": "motherChildRowExtension",
-      "name": "mother-child-card-row",
-      "slot": "ward-patient-card-slot"
+      "component": "defaultWardView",
+      "name": "default-ward",
+      "slot": "default-ward"
     },
     {
-      "component": "pendingItemsCardRowExtension",
-      "name": "ward-patient-pending-items-card-row",
-      "slot": "ward-patient-card-pending-items-slot"
+      "component": "maternalWardView",
+      "name": "maternal-ward",
+      "slot": "maternal-ward"
     }
   ],
   "workspaces": [

package/src/types/index.ts

@@ -11,7 +11,7 @@ import type {
 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 = {
@@ -44,10 +44,7 @@ export type WardPatient = {
 
 export interface WardPatientWorkspaceProps extends DefaultWorkspaceProps {
   wardPatient: WardPatient;
-}
-export interface MotherAndChildrenRelationships {
-  motherByChildUuid: Map<string, Patient>;
-  childrenByMotherUuid: Map<string, Array<Patient>>;
+  WardPatientHeader: React.FC<WardPatient>;
 }
 
 // server-side types defined in openmrs-module-bedmanagement:
@@ -70,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;
@@ -144,9 +149,6 @@ export interface InpatientAdmission {
   // the current in patient request
   currentInpatientRequest: InpatientRequest;
 }
-export interface WardAppContext {
-  allPatientsByPatientUuid: Map<string, Patient>;
-}
 
 export interface MotherAndChild {
   mother: Patient;
@@ -228,11 +230,24 @@ export interface ObsPayload {
   groupMembers?: Array<ObsPayload>;
 }
 
-export interface MotherAndChildren {
-  childAdmission: InpatientAdmission;
-  child: Patient;
-  motherAdmission: InpatientAdmission;
-  mother: Patient;
+export type WardPatientGroupDetails = ReturnType<typeof useWardPatientGrouping>;
+export interface WardViewContext {
+  wardPatientGroupDetails: WardPatientGroupDetails;
+  WardPatientHeader: React.FC<WardPatient>;
 }
 
-export type WardPatientGroupDetails = ReturnType<typeof useWardPatientGrouping>;
+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;

package/src/ward-patient-card/card-rows/{pending-items-car-row.extension.tsx → pending-items-row.component.tsx}

@@ -1,15 +1,19 @@
-import React, { useCallback, useEffect } from 'react';
-import { type WardPatientCard } from '../../types';
 import { Hourglass } from '@carbon/react/icons';
+import React, { useCallback, useEffect } from 'react';
+import { type WardPatient } from '../../types';
 
-import { useConfig } from '@openmrs/esm-framework';
-import type { PendingItemsDefinition } from '../../config-schema';
+import { useElementConfig } from '../../ward-view/ward-view.resource';
 import { WardPatientPendingOrder } from '../row-elements/ward-patient-pending-order.component';
-import styles from '../ward-patient-card.scss';
 import WardPatientPendingTransfer from '../row-elements/ward-patient-pending-transfer';
+import styles from '../ward-patient-card.scss';
+
+export interface PendingItemsRowProps {
+  id: string;
+  wardPatient: WardPatient;
+}
 
-const PendingItemsCarRowExtension: WardPatientCard = (wardPatient) => {
-  const { orders, showPendingItems } = useConfig<PendingItemsDefinition>();
+const PendingItemsRow: React.FC<PendingItemsRowProps> = ({ id, wardPatient }) => {
+  const { orders, showPendingItems } = useElementConfig('pendingItems', id);
   const [hasPendingOrders, setHasPendingOrders] = React.useState(false);
 
   const hasPendingItems = !!wardPatient?.inpatientRequest || hasPendingOrders;
@@ -47,4 +51,4 @@ const PendingItemsCarRowExtension: WardPatientCard = (wardPatient) => {
   );
 };
 
-export default PendingItemsCarRowExtension;
+export default PendingItemsRow;

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

@@ -2,15 +2,15 @@ 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 { type ColoredObsTagsCardRowConfigObject } from '../../config-schema-extension-colored-obs-tags';
 import { useObs } from '../../hooks/useObs';
+import { useElementConfig } from '../../ward-view/ward-view.resource';
 import styles from '../ward-patient-card.scss';
-import WardPatientSkeletonText from './ward-pateint-skeleton-text';
+import WardPatientSkeletonText from './ward-patient-skeleton-text';
 import { getObsEncounterString, obsCustomRepresentation, useConceptToTagColorMap } from './ward-patient-obs.resource';
 import WardPatientResponsiveTooltip from './ward-patient-responsive-tooltip';
 
 interface WardPatientCodedObsTagsProps {
-  config: ColoredObsTagsCardRowConfigObject;
+  id: string;
   patient: Patient;
   visit: Visit;
 }
@@ -25,11 +25,16 @@ interface WardPatientCodedObsTagsProps {
  * @param config
  * @returns
  */
-const WardPatientCodedObsTags: React.FC<WardPatientCodedObsTagsProps> = ({ config, patient, visit }) => {
-  const { conceptUuid, summaryLabel, summaryLabelColor } = config;
-  const { data, isLoading } = useObs({ patient: patient.uuid, concept: conceptUuid }, obsCustomRepresentation);
+const WardPatientCodedObsTags: React.FC<WardPatientCodedObsTagsProps> = ({ 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);
+  const conceptToTagColorMap = useConceptToTagColorMap(config?.tags ?? []);
 
   if (isLoading) {
     return (

package/src/ward-patient-card/row-elements/ward-patient-header-address.tsx

@@ -1,15 +1,15 @@
-import React from 'react';
-import styles from '../ward-patient-card.scss';
 import { type Patient } from '@openmrs/esm-framework';
-import { type AddressElementDefinition } from '../../config-schema';
+import React from 'react';
+import { useElementConfig } from '../../ward-view/ward-view.resource';
 
 export interface WardPatientAddressProps {
   patient: Patient;
-  config: AddressElementDefinition;
+  id: string;
 }
 
-const WardPatientAddress: React.FC<WardPatientAddressProps> = ({ patient, config }) => {
+const WardPatientAddress: React.FC<WardPatientAddressProps> = ({ patient, id }) => {
   const preferredAddress = patient?.person?.preferredAddress;
+  const config = useElementConfig("patientAddress", id);
 
   return (
     <>

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

@@ -1,51 +1,29 @@
+import { type Patient, type PatientIdentifier, PatientBannerPatientIdentifier } from '@openmrs/esm-framework';
 import React from 'react';
-import { type IdentifierElementDefinition } from '../../config-schema';
-import { Tag } from '@carbon/react';
-import { type Patient, translateFrom, type PatientIdentifier } from '@openmrs/esm-framework';
-import { moduleName } from '../../constant';
-import { useTranslation } from 'react-i18next';
-
-/** Sort the identifiers by preferred first. The identifier with value of true
- * takes precedence over false. If both identifiers have same preferred value,
- * sort them by most recently created or changed. */
-const identifierCompareFunction = (pi1: PatientIdentifier, pi2: PatientIdentifier) => {
-  let comp = (pi2.preferred ? 1 : 0) - (pi1.preferred ? 1 : 0);
-
-  if (comp == 0) {
-    const date1 = pi1.auditInfo.dateChanged ?? pi1.auditInfo.dateCreated;
-    const date2 = pi2.auditInfo.dateChanged ?? pi2.auditInfo.dateCreated;
-    comp = date2.localeCompare(date1);
-  }
-  return comp;
-};
+import { useElementConfig } from '../../ward-view/ward-view.resource';
 
 export interface WardPatientIdentifierProps {
   patient: Patient;
-  /** If the config is not passed, this will be the default identifier element, which uses the preferred identifier type. */
-  config?: IdentifierElementDefinition;
+  id?: string;
 }
 
-const defaultConfig: IdentifierElementDefinition = {
-  id: 'patient-identifier',
-  identifierTypeUuid: null,
-};
+const WardPatientIdentifier: React.FC<WardPatientIdentifierProps> = ({ id, patient }) => {
+  const config = useElementConfig('patientIdentifier', id);
+
+  const fhirIdentifiers: fhir.Identifier[] = patient.identifiers.map((identifier: PatientIdentifier) => ({
+    value: identifier.identifier,
+    type: {
+      text: identifier.identifierType.name,
+      coding: [
+        {
+          code: identifier.identifierType.uuid,
+        },
+      ],
+    },
+  }));
 
-const WardPatientIdentifier: React.FC<WardPatientIdentifierProps> = ({ config: configProp, patient }) => {
-  const { t } = useTranslation();
-  const config = configProp ?? defaultConfig;
-  const { identifierTypeUuid, label } = config;
-  const patientIdentifiers = patient.identifiers.filter(
-    (patientIdentifier: PatientIdentifier) =>
-      identifierTypeUuid == null || patientIdentifier.identifierType?.uuid === identifierTypeUuid,
-  );
-  patientIdentifiers.sort(identifierCompareFunction);
-  const patientIdentifier = patientIdentifiers[0];
-  const labelToDisplay = label != null ? t(label) : patientIdentifier?.identifierType?.name;
   return (
-    <div>
-      {labelToDisplay ? <Tag>{t('identifierTypelabel', '{{label}}:', { label: labelToDisplay })}</Tag> : <></>}
-      <span>{patientIdentifier?.identifier}</span>
-    </div>
+    <PatientBannerPatientIdentifier identifier={fhirIdentifiers} showIdentifierLabel={config?.showIdentifierLabel} />
   );
 };
 

package/src/ward-patient-card/row-elements/ward-patient-obs.resource.ts

@@ -1,7 +1,7 @@
 import { restBaseUrl, useOpenmrsFetchAll, type Concept } from '@openmrs/esm-framework';
-import { type TagConfigObject } from '../../config-schema-extension-colored-obs-tags';
 import { type Observation } from '../../types';
 import { type TFunction } from 'i18next';
+import { type ColoredObsTagConfig } from '../../config-schema';
 
 // prettier-ignore
 export const obsCustomRepresentation = 
@@ -13,7 +13,7 @@ export const obsCustomRepresentation =
 //  get the setMembers of a concept set
 const conceptSetCustomRepresentation = 'custom:(uuid,setMembers:(uuid))';
 
-export function useConceptToTagColorMap(tags: Array<TagConfigObject>) {
+export function useConceptToTagColorMap(tags: Array<ColoredObsTagConfig> = []) {
   // The TacConfigObject allows us to specify the mapping of
   // concept sets to colors. However, we also need to build a map of
   // concepts to colors. This function does that.

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

@@ -1,23 +1,30 @@
-import { SkeletonText, Toggletip, ToggletipButton, ToggletipContent } from '@carbon/react';
-import { Information } from '@carbon/react/icons';
+import { SkeletonText } from '@carbon/react';
 import { type OpenmrsResource, type Patient, type Visit } from '@openmrs/esm-framework';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { type ObsElementDefinition } from '../../config-schema';
+import { type ObsElementConfig } from '../../config-schema';
 import { useObs } from '../../hooks/useObs';
 import styles from '../ward-patient-card.scss';
 import { getObsEncounterString, obsCustomRepresentation } from './ward-patient-obs.resource';
 import WardPatientResponsiveTooltip from './ward-patient-responsive-tooltip';
+import { useElementConfig } from '../../ward-view/ward-view.resource';
 
 export interface WardPatientObsProps {
-  config: ObsElementDefinition;
+  id: string;
+  configOverride?: ObsElementConfig;
   patient: Patient;
   visit: Visit;
 }
 
-const WardPatientObs: React.FC<WardPatientObsProps> = ({ config, patient, visit }) => {
-  const { conceptUuid, onlyWithinCurrentVisit, orderBy, limit, label } = config;
-  const { data, isLoading } = useObs({ patient: patient.uuid, concept: conceptUuid }, obsCustomRepresentation);
+const WardPatientObs: React.FC<WardPatientObsProps> = ({ id, configOverride, patient, visit }) => {
+  const config: ObsElementConfig = useElementConfig('obs', id);
+  const configToUse = configOverride ?? config;
+  const { conceptUuid, onlyWithinCurrentVisit, orderBy, limit, label } = configToUse ?? {};
+  const { data, isLoading } = useObs(
+    { patient: patient.uuid, concept: conceptUuid },
+    conceptUuid != null,
+    obsCustomRepresentation,
+  );
   const { t } = useTranslation();
 
   if (isLoading) {
@@ -53,7 +60,7 @@ const WardPatientObs: React.FC<WardPatientObsProps> = ({ config, patient, visit
           <span className={styles.wardPatientObsLabel}>
             {labelToDisplay ? t('labelColon', '{{label}}:', { label: labelToDisplay }) : ''}
           </span>
-          {obsNodes}
+          <div className={styles.dotSeparatedChildren}>{obsNodes}</div>
         </div>
       );
     } else {