@kenyaemr/esm-ward-app 7.0.2-pre.66 → 7.0.2-pre.68

package/src/beds/occupied-bed.test.tsx

@@ -5,6 +5,7 @@ import { mockAdmissionLocation } from '../../../../__mocks__/wards.mock';
 import { bedLayoutToBed, filterBeds } from '../ward-view/ward-view.resource';
 import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
 import { configSchema, defaultPatientCardElementConfig } from '../config-schema';
+import { mockAdmittedPatient } from '../../../../__mocks__/ward-patient';
 
 const defaultConfig = getDefaultsFromConfigSchema(configSchema);
 
@@ -13,22 +14,22 @@ jest.mocked(useConfig).mockReturnValue(defaultConfig);
 const mockBedLayouts = filterBeds(mockAdmissionLocation);
 
 const mockBedToUse = mockBedLayouts[0];
-jest.replaceProperty(mockBedToUse.patient.person, 'preferredName', {
+jest.replaceProperty(mockBedToUse.patients[0].person, 'preferredName', {
   uuid: '',
   givenName: 'Alice',
   familyName: 'Johnson',
 });
-const mockPatient = mockBedToUse.patient;
 const mockBed = bedLayoutToBed(mockBedToUse);
 
 describe('Occupied bed: ', () => {
   it('renders a single bed with patient details', () => {
-    render(<OccupiedBed patients={[mockPatient]} bed={mockBed} />);
+    const mockPatient = mockAdmittedPatient.patient;
+    render(<OccupiedBed wardPatients={[{ ...mockAdmittedPatient, admitted: true }]} bed={mockBed} />);
     const patientName = screen.getByText('Alice Johnson');
     expect(patientName).toBeInTheDocument();
     const patientAge = `${mockPatient.person.age} yrs`;
     expect(screen.getByText(patientAge)).toBeInTheDocument();
-    const defaultAddressFields = defaultPatientCardElementConfig.addressFields;
+    const defaultAddressFields = defaultPatientCardElementConfig.address.addressFields;
     defaultAddressFields.forEach((addressField) => {
       const addressFieldValue = mockPatient.person.preferredAddress[addressField] as string;
       expect(screen.getByText(addressFieldValue)).toBeInTheDocument();
@@ -36,7 +37,15 @@ describe('Occupied bed: ', () => {
   });
 
   it('renders a divider for shared patients', () => {
-    render(<OccupiedBed patients={[mockPatient, mockPatient]} bed={mockBed} />);
+    render(
+      <OccupiedBed
+        wardPatients={[
+          { ...mockAdmittedPatient, admitted: true },
+          { ...mockAdmittedPatient, admitted: true },
+        ]}
+        bed={mockBed}
+      />,
+    );
     const bedShareText = screen.getByTitle('Bed share');
     expect(bedShareText).toBeInTheDocument();
   });

package/src/config-schema.ts

@@ -15,7 +15,11 @@ const defaultWardPatientCard: WardPatientCardDefinition = {
 const defaultPatientAddressFields: Array<keyof PersonAddress> = ['cityVillage', 'country'];
 
 export const defaultPatientCardElementConfig: PatientCardElementConfig = {
-  addressFields: defaultPatientAddressFields,
+  address: {
+    addressFields: defaultPatientAddressFields,
+  },
+  obs: null,
+  codedObsTags: null,
 };
 
 export const builtInPatientCardElements: PatientCardElementType[] = [
@@ -23,7 +27,6 @@ export const builtInPatientCardElements: PatientCardElementType[] = [
   'patient-name',
   'patient-age',
   'patient-address',
-  'admission-time',
 ];
 
 export const configSchema: ConfigSchema = {
@@ -43,10 +46,92 @@ export const configSchema: ConfigSchema = {
           _validators: [validators.oneOf(patientCardElementTypes)],
         },
         config: {
-          addressFields: {
-            _type: Type.Array,
-            _description: 'For patientCardElementType "patient-address", defining which address fields to show',
-            _default: defaultPatientAddressFields,
+          address: {
+            _description: 'Config for the patientCardElementType "patient-address"',
+            addressFields: {
+              _type: Type.Array,
+              _description: 'defines which address fields to show',
+              _default: defaultPatientAddressFields,
+            },
+          },
+          obs: {
+            _description: 'Config for the patientCardElementType "patient-obs"',
+            conceptUuid: {
+              _type: Type.UUID,
+              _description: 'Required. Identifies the concept to use to identify the desired observations.',
+              _default: null,
+            },
+            label: {
+              _type: Type.String,
+              _description:
+                "Optional. The custom label or i18n key to the translated label to display. If not provided, defaults to the concept's name. (Note that this can be set to an empty string to not show a label)",
+              _default: null,
+            },
+            labelI18nModule: {
+              _type: Type.String,
+              _description: 'Optional. The custom module to use for translation of the label',
+              _default: null,
+            },
+            orderBy: {
+              _type: Type.String,
+              _description:
+                "Optional. One of 'ascending' or 'descending', specifying whether to display the obs by obsDatetime ascendingly or descendingly. Defaults to ascending.",
+              _default: 'descending',
+              _validators: [validators.oneOf(['ascending', 'descending'])],
+            },
+            limit: {
+              _type: Type.Number,
+              _description: 'Optional. Limits the max number of obs to display. Unlimited by default.',
+              _default: null,
+            },
+            onlyWithinCurrentVisit: {
+              _type: Type.Boolean,
+              _description:
+                'Optional. If true, limits display to only observations within current visit. Defaults to false',
+              _default: false,
+            },
+          },
+          codedObsTags: {
+            _description: 'Config for the patientCardElementType "patient-coded-obs-tags"',
+            conceptUuid: {
+              _type: Type.UUID,
+              _description: 'Required. Identifies the concept to use to identify the desired observations.',
+              _default: null,
+            },
+            summaryLabel: {
+              _type: Type.String,
+              _description: `Optional. The custom label or i18n key to the translated label to display for the summary tag. The summary tag shows the count of the number of answers that are present but not configured to show as their own tags. If not provided, defaults to the name of the concept.`,
+              _default: null,
+            },
+            summaryLabelI18nModule: {
+              _type: Type.String,
+              _description: 'Optional. The custom module to use for translation of the summary label',
+              _default: null,
+            },
+            summaryLabelColor: {
+              _type: Type.String,
+              _description:
+                'The color of the summary tag. See https://react.carbondesignsystem.com/?path=/docs/components-tag--overview for a list of supported colors',
+              _default: null,
+            },
+            tags: {
+              _description: `An array specifying concept sets and color. Observations with coded values that are members of the specified concept sets will be displayed as their own tags with the specified color. Any observation with coded values not belonging to any concept sets specified will be summarized as a count in the summary tag. If a concept set is listed multiple times, the first matching applied-to rule takes precedence.`,
+              _type: Type.Array,
+              _elements: {
+                color: {
+                  _type: Type.String,
+                  _description:
+                    'Color of the tag. See https://react.carbondesignsystem.com/?path=/docs/components-tag--overview for a list of supported colors.',
+                },
+                appliedToConceptSets: {
+                  _type: Type.Array,
+                  _description: `The concept sets which the color applies to. Observations with coded values that are members of the specified concept sets will be displayed as their own tag with the specified color. If an observation's coded value belongs to multiple concept sets, the first matching applied-to rule takes precedence.`,
+                  _elements: {
+                    _type: Type.UUID,
+                  },
+                },
+              },
+            },
           },
         },
       },
@@ -133,4 +218,85 @@ export interface PatientAddressElementConfig {
   addressFields: Array<keyof PersonAddress>;
 }
 
-export type PatientCardElementConfig = {} & PatientAddressElementConfig;
+export interface PatientObsElementConfig {
+  /**
+   * Required. Identifies the concept to use to identify the desired observations.
+   */
+  conceptUuid: string;
+
+  /**
+   * Optional. The custom label or i18n key to the translated label to display. If not provided, defaults to the concept's name.
+   * (Note that this can be set to an empty string to not show a label)
+   */
+  label?: string;
+
+  /**
+   * Optional. The custom module to use for translation of the label
+   */
+  labelI18nModule?: string;
+
+  /**
+   * Optional. One of 'ascending' or 'descending', specifying whether to display the obs by obsDatetime ascendingly or descendingly. Defaults to descending.
+   */
+  orderBy?: 'ascending' | 'descending';
+
+  /**
+   * Optional. Limits the max number of obs to display. Unlimited by default.
+   */
+  limit?: number;
+
+  /**
+   * Optional. If true, limits display to only observations within current visit
+   */
+  onlyWithinCurrentVisit?: boolean;
+}
+
+export interface PatientCodedObsTagsElementConfig {
+  /**
+   * Required. Identifies the concept to use to identify the desired observations.
+   */
+  conceptUuid: string;
+
+  /**
+   * Optional. The custom label or i18n key to the translated label to display for the summary tag. The summary tag
+   * shows the count of the number of answers that are present but not configured to show as their own tags. If not
+   * provided, defaults to the name of the concept.
+   */
+  summaryLabel?: string;
+  /**
+   * Optional. The custom module to use for translation of the summary label
+   */
+  summaryLabelI18nModule?: string;
+
+  /**
+   * The color of the summary tag.
+   * See https://react.carbondesignsystem.com/?path=/docs/components-tag--overview for a list of supported colors
+   */
+  summaryLabelColor?: string;
+
+  /**
+   * An array specifying concept sets and color. Observations with coded values that are members of the specified concept sets
+   * will be displayed as their own tags with the specified color. Any observation with coded values not belonging to
+   * any concept sets specified will be summarized as a count in the summary tag. If a concept set is listed multiple times,
+   * the first matching applied-to rule takes precedence.
+   */
+  tags: Array<{
+    /**
+     * Color of the tag. See https://react.carbondesignsystem.com/?path=/docs/components-tag--overview for a list of supported colors.
+     */
+    color: string;
+
+    /**
+     * The concept sets which the color applies to. Observations with coded values that are members of the specified concept sets
+     * will be displayed as their own tag with the specified color.
+     * If an observation's coded value belongs to multiple concept sets, the first matching applied-to rule takes precedence.
+     */
+    appliedToConceptSets: Array<string>;
+  }>;
+}
+
+export type PatientCardElementConfig = {
+  address: PatientAddressElementConfig;
+  obs: PatientObsElementConfig;
+  codedObsTags: PatientCodedObsTagsElementConfig;
+};

package/src/constant.ts

@@ -0,0 +1 @@
+export const moduleName = '@openmrs/esm-ward-app';

package/src/hooks/useAdmittedPatients.ts

@@ -0,0 +1,13 @@
+import useSWR from 'swr';
+import { type AdmittedPatient } from '../types';
+import { openmrsFetch } from '@openmrs/esm-framework';
+
+export function useAdmittedPatients(locationUuid: string) {
+  const apiUrl = `/ws/rest/emrapi/inpatient/visits?currentLocation=${locationUuid}`;
+  const { data, ...rest } = useSWR<{ data: AdmittedPatient[] }, Error>(apiUrl, openmrsFetch);
+
+  return {
+    admittedPatients: data?.data ?? null,
+    ...rest,
+  };
+}

package/src/hooks/useConcept.ts

@@ -0,0 +1,11 @@
+import { type Concept, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWRImmutable from 'swr/immutable';
+
+export function useConcepts(uuids: string[], rep = 'default') {
+  const apiUrl = `${restBaseUrl}/concept?references=${uuids.join()}&v=${rep}`;
+  const { data, ...rest } = useSWRImmutable<{ data: { results: Array<Concept> } }, Error>(apiUrl, openmrsFetch);
+  return {
+    concepts: data?.data?.results,
+    ...rest,
+  };
+}

package/src/hooks/useInpatientRequest.ts

@@ -0,0 +1,13 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import type { InpatientRequest } from '../types';
+
+export function useInpatientRequest(locationUuid: string) {
+  const apiUrl = `/ws/rest/emrapi/inpatient/admissionRequests?admissionLocation=${locationUuid}`;
+  const { data, ...rest } = useSWR<{ data: Array<InpatientRequest> }, Error>(apiUrl, openmrsFetch);
+
+  return {
+    inpatientRequests: data?.data || null,
+    ...rest,
+  };
+}

package/src/hooks/useObs.ts

@@ -0,0 +1,21 @@
+import useSWR from 'swr';
+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') {
+  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,
+  );
+}

package/src/index.ts

@@ -1,6 +1,7 @@
 import { defineConfigSchema, getSyncLifecycle, registerBreadcrumbs, registerFeatureFlag } from '@openmrs/esm-framework';
 import { configSchema } from './config-schema';
 import rootComponent from './root.component';
+import admissionRequestsWorkspace from "./ward-workspace/admission-requests-workspace.component"
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
@@ -13,6 +14,7 @@ const options = {
 
 export const root = getSyncLifecycle(rootComponent, options);
 
+export const admissionRequestWorkspace = getSyncLifecycle(admissionRequestsWorkspace, options);
 export function startupApp() {
   registerBreadcrumbs([]);
   defineConfigSchema(moduleName, configSchema);

package/src/routes.json

@@ -1,11 +1,12 @@
 {
   "$schema": "https://json.openmrs.org/routes.schema.json",
   "backendDependencies": {
-    "webservices.rest": "^2.2.0"
+    "webservices.rest": "^2.2.0",
+    "emrapi": "^2.0.0 || 2.0.0-SNAPSHOT"
   },
   "optionalBackendDependencies":{
      "bedmanagement":{
-      "version": "^5.14.0 || 5.14.0-SNAPSHOT",
+      "version": "^6.0.0 || 6.0.0-SNAPSHOT",
       "feature": {
         "flagName": "bedmanagement-module",
         "label":"Ward App Patient Service",
@@ -13,7 +14,13 @@
       }
      }
   },
-  "extensions": [
+   "workspaces": [
+    {
+      "name":"admission-requests-cards",
+      "component": "admissionRequestWorkspace",
+      "title":"admissionRequests",
+       "type":"admission-requests"
+    }
   ],
   "pages": [
     {

package/src/types/index.ts

@@ -10,6 +10,7 @@ import type React from 'react';
 
 export interface WardPatientCardProps {
   patient: Patient;
+  visit: Visit;
   bed: Bed;
 }
 
@@ -21,10 +22,16 @@ export const patientCardElementTypes = [
   'patient-name',
   'patient-age',
   'patient-address',
+  'patient-obs',
+  'patient-coded-obs-tags',
   'admission-time',
 ] as const;
 export type PatientCardElementType = (typeof patientCardElementTypes)[number];
 
+// a Ward Patient can either be a patient that is already admitted or a
+// patient that is awaiting admission
+export type WardPatient = (AdmittedPatient & { admitted: true }) | (InpatientRequest & { admitted: false });
+
 // server-side types defined in openmrs-module-bedmanagement:
 
 export interface AdmissionLocation {
@@ -52,7 +59,7 @@ export interface BedLayout {
   status: BedStatus;
   bedType: BedType;
   location: string;
-  patient: Patient;
+  patients: Patient[];
   bedTagMaps: BedTagMap[];
 }
 
@@ -76,6 +83,36 @@ interface BedTagMap {
 
 export type BedStatus = 'AVAILABLE' | 'OCCUPIED';
 
+// server-side types defined in openmrs-module-emrapi:
+
+export type DispositionType = 'ADMISSION' | 'TRANSFER' | 'DISCHARGE';
+
+// InpatientRequest[] returned by:
+// GET /rest/emrapi/inpatient/admissionRequests
+// GET /rest/emrapi/inpatient/transferRequests
+// GET /rest/emrapi/inpatient/admissionAndTransferRequests
+export interface InpatientRequest {
+  patient: Patient;
+  visit: Visit;
+  type: DispositionType;
+
+  // as of now, these fields are not included in the backend
+  encounter?: Encounter;
+  dispositionObs?: Observation;
+  dispositionLocation?: Location;
+  dispositionDate?: Date;
+}
+
+// AdmittedPatient[] returned by:
+// GET /rest/emrapi/inpatient/visits
+export interface AdmittedPatient {
+  patient: Patient;
+  visit: Visit;
+  currentLocation: Location;
+  timeSinceAdmissionInMinutes: number;
+  timeAtInpatientLocationInMinutes: number;
+}
+
 // TODO: Move these types to esm-core
 export interface Observation extends OpenmrsResourceStrict {
   concept: OpenmrsResource;
@@ -83,6 +120,7 @@ export interface Observation extends OpenmrsResourceStrict {
   obsDatetime: string;
   accessionNumber: string;
   obsGroup: Observation;
+  value: number | string | boolean | OpenmrsResource;
   valueCodedName: OpenmrsResource; // ConceptName
   groupMembers: Array<Observation>;
   comment: string;
@@ -98,7 +136,7 @@ export interface Encounter extends OpenmrsResourceStrict {
   location?: Location;
   form?: OpenmrsResource;
   encounterType?: EncounterType;
-  obs?: Observation;
+  obs?: Array<Observation>;
   orders?: any;
   voided?: boolean;
   visit?: Visit;

package/src/ward-patient-card/row-elements/ward-patient-bed-number.tsx

@@ -3,6 +3,9 @@ import styles from '../ward-patient-card.scss';
 import { type WardPatientCardElement } from '../../types';
 
 const WardPatientBedNumber: WardPatientCardElement = ({ bed }) => {
+  if (!bed) {
+    return <></>;
+  }
   return (
     <div className={styles.bedNumberBox}>
       <span className={styles.wardPatientBedNumber}>{bed.bedNumber}</span>

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

@@ -0,0 +1,80 @@
+import { SkeletonText, Tag } from '@carbon/react';
+import { translateFrom, type OpenmrsResource } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { type PatientCodedObsTagsElementConfig } from '../../config-schema';
+import { moduleName } from '../../constant';
+import { useObs } from '../../hooks/useObs';
+import { type WardPatientCardElement } from '../../types';
+import styles from '../ward-patient-card.scss';
+import { obsCustomRepresentation, useConceptToTagColorMap } from './ward-patient-obs.resource';
+
+/**
+ * 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 wardPatientCodedObsTags = (config: PatientCodedObsTagsElementConfig) => {
+  const WardPatientCodedObsTags: WardPatientCardElement = ({ patient, visit }) => {
+    const { conceptUuid, summaryLabel, summaryLabelColor, summaryLabelI18nModule } = config;
+    const { data, isLoading } = useObs({ patient: patient.uuid, concept: conceptUuid }, obsCustomRepresentation);
+    const { t } = useTranslation();
+    const { data: conceptToTagColorMap } = useConceptToTagColorMap(config);
+
+    if (isLoading) {
+      return <SkeletonText />;
+    } else {
+      const obsToDisplay = data?.data?.results?.filter((o) => {
+        const matchVisit = o.encounter.visit?.uuid == visit?.uuid;
+        return matchVisit || visit == null; // TODO: remove visit == null hack when server API supports returning visit
+      });
+
+      const summaryLabelToDisplay =
+        summaryLabel != null
+          ? translateFrom(summaryLabelI18nModule ?? moduleName, summaryLabel)
+          : obsToDisplay?.[0]?.concept?.display;
+
+      const obsNodes = obsToDisplay?.map((o) => {
+        const { display, uuid } = o.value as OpenmrsResource;
+
+        const color = conceptToTagColorMap?.get(uuid);
+        if (color) {
+          return (
+            <Tag type={color} key={uuid}>
+              {display}
+            </Tag>
+          );
+        } else {
+          return null;
+        }
+      });
+
+      const obsWithNoTagCount = obsNodes.filter((o) => o == null).length;
+      if (obsNodes?.length > 0 || obsWithNoTagCount > 0) {
+        return (
+          <div>
+            <span className={styles.wardPatientObsLabel}>
+              {obsNodes}
+              {obsWithNoTagCount > 0 ? (
+                <Tag type={summaryLabelColor}>
+                  {t('countItems', '{{count}} {{item}}', { count: obsWithNoTagCount, item: summaryLabelToDisplay })}
+                </Tag>
+              ) : null}
+            </span>
+          </div>
+        );
+      } else {
+        return null;
+      }
+    }
+  };
+
+  return WardPatientCodedObsTags;
+};
+
+export default wardPatientCodedObsTags;

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

@@ -0,0 +1,52 @@
+import { openmrsFetch, restBaseUrl, type Concept } from '@openmrs/esm-framework';
+import useSWRImmutable from 'swr/immutable';
+import { type PatientCodedObsTagsElementConfig } from '../../config-schema';
+
+// prettier-ignore
+export const obsCustomRepresentation = 
+  'custom:(uuid,display,obsDatetime,value,' + 
+    'concept:(uuid,display),' + 
+    'encounter:(uuid,display,' + 
+      'visit:(uuid,display)))';
+
+//  get the setMembers of a concept set
+const conceptSetCustomRepresentation = 'custom:(uuid,setMembers:(uuid))';
+
+export function useConceptToTagColorMap(codedObsTagsConfig: PatientCodedObsTagsElementConfig) {
+  // fetch the members of the concept sets and process the data
+  // to return conceptToTagColorMap (wrapped in a promise).
+  // Let swr cache the result of this function.
+  const fetchAndMap = (url: string) => {
+    const conceptSetToTagColorMap = new Map<string, string>();
+    for (const tag of codedObsTagsConfig.tags) {
+      const { color, appliedToConceptSets } = tag;
+      for (const answer of appliedToConceptSets ?? []) {
+        if (!conceptSetToTagColorMap.has(answer)) {
+          conceptSetToTagColorMap.set(answer, color);
+        }
+      }
+    }
+
+    return openmrsFetch<{ results: Array<Concept> }>(url).then((data) => {
+      const conceptSets = data.data.results;
+      const conceptToTagColorMap = new Map<string, string>();
+      if (conceptSets) {
+        for (const conceptSet of conceptSets) {
+          for (const concept of conceptSet.setMembers) {
+            if (!conceptToTagColorMap.has(concept.uuid)) {
+              conceptToTagColorMap.set(concept.uuid, conceptSetToTagColorMap.get(conceptSet.uuid));
+            }
+          }
+        }
+      }
+
+      return conceptToTagColorMap;
+    });
+  };
+
+  const conceptSetUuids = codedObsTagsConfig.tags.flatMap((tag) => tag.appliedToConceptSets);
+  const apiUrl = `${restBaseUrl}/concept?references=${conceptSetUuids.join()}&v=${conceptSetCustomRepresentation}`;
+  const conceptToTagColorMap = useSWRImmutable(apiUrl, fetchAndMap);
+
+  return conceptToTagColorMap;
+}

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

@@ -0,0 +1,58 @@
+import { SkeletonText, Tag } from '@carbon/react';
+import { type OpenmrsResource, translateFrom } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { type PatientObsElementConfig } from '../../config-schema';
+import { useObs } from '../../hooks/useObs';
+import { type WardPatientCardElement } from '../../types';
+import styles from '../ward-patient-card.scss';
+import { moduleName } from '../../constant';
+import { obsCustomRepresentation } from './ward-patient-obs.resource';
+
+const wardPatientObs = (config: PatientObsElementConfig) => {
+  const WardPatientObs: WardPatientCardElement = ({ patient, visit }) => {
+    const { conceptUuid, onlyWithinCurrentVisit, orderBy, limit, label, labelI18nModule: labelModule } = config;
+    const { data, isLoading } = useObs({ patient: patient.uuid, concept: conceptUuid }, obsCustomRepresentation);
+    const { t } = useTranslation();
+
+    if (isLoading) {
+      return <SkeletonText />;
+    } else {
+      const obsToDisplay = data?.data?.results
+        ?.filter((o) => {
+          const matchVisit = !onlyWithinCurrentVisit || o.encounter.visit?.uuid == visit?.uuid;
+          return matchVisit;
+        })
+        ?.sort((obsA, obsB) => {
+          return (orderBy == 'descending' ? -1 : 1) * obsA.obsDatetime.localeCompare(obsB.obsDatetime);
+        })
+        ?.slice(0, limit ?? Number.MAX_VALUE);
+
+      const labelToDisplay =
+        label != null ? translateFrom(labelModule ?? moduleName, label) : obsToDisplay?.[0]?.concept?.display;
+
+      const obsNodes = obsToDisplay?.map((o) => {
+        const { value } = o;
+        const display: any = (value as OpenmrsResource)?.display ?? o.value;
+        return <span key={o.uuid}> {display} </span>;
+      });
+
+      if (obsNodes?.length > 0) {
+        return (
+          <div>
+            <span className={styles.wardPatientObsLabel}>
+              {labelToDisplay ? t('labelColon', '{{label}}:', { label: labelToDisplay }) : ''}
+            </span>
+            {obsNodes}
+          </div>
+        );
+      } else {
+        return null;
+      }
+    }
+  };
+
+  return WardPatientObs;
+};
+
+export default wardPatientObs;