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

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

@@ -0,0 +1,22 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.motherOrBabyRow {
+  display: flex;
+}
+
+.motherOrBabyRowElementsDiv {
+  flex: 1;
+}
+
+.motherOrBabyIconDiv {
+  display: flex;
+  align-items: center;
+}
+
+.motherOrBabyIcon {
+  padding: layout.$spacing-02;
+  border-radius: 50%;
+  background-color: $grey-2;
+  margin-right: layout.$spacing-03;
+}

package/src/ward-patient-card/card-rows/pending-items-row.component.tsx

@@ -0,0 +1,54 @@
+import { Hourglass } from '@carbon/react/icons';
+import React, { useCallback, useEffect } from 'react';
+import { type WardPatient } from '../../types';
+
+import { useElementConfig } from '../../ward-view/ward-view.resource';
+import { WardPatientPendingOrder } from '../row-elements/ward-patient-pending-order.component';
+import WardPatientPendingTransfer from '../row-elements/ward-patient-pending-transfer';
+import styles from '../ward-patient-card.scss';
+
+export interface PendingItemsRowProps {
+  id: string;
+  wardPatient: WardPatient;
+}
+
+const PendingItemsRow: React.FC<PendingItemsRowProps> = ({ id, wardPatient }) => {
+  const { orders, showPendingItems } = useElementConfig('pendingItems', id);
+  const [hasPendingOrders, setHasPendingOrders] = React.useState(false);
+
+  const hasPendingItems = !!wardPatient?.inpatientRequest || hasPendingOrders;
+
+  const handlePendingOrderCount = useCallback((count: number) => {
+    if (count > 0) {
+      setHasPendingOrders(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!orders?.orderTypes?.length) {
+      setHasPendingOrders(false);
+    }
+  }, [orders]);
+
+  return (
+    <div className={styles.wardPatientCardPendingItemsRow}>
+      {showPendingItems && hasPendingItems ? (
+        <>
+          <Hourglass className={styles.hourGlassIcon} size="16" />:
+        </>
+      ) : null}
+      {orders?.orderTypes.map(({ uuid, label }) => (
+        <WardPatientPendingOrder
+          key={`pending-order-type-${uuid}`}
+          wardPatient={wardPatient}
+          orderUuid={uuid}
+          label={label}
+          onOrderCount={handlePendingOrderCount}
+        />
+      ))}
+      {wardPatient?.inpatientRequest ? <WardPatientPendingTransfer wardPatient={wardPatient} /> : null}
+    </div>
+  );
+};
+
+export default PendingItemsRow;

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

@@ -6,7 +6,7 @@ export interface WardPatientAgeProps {
 }
 
 const WardPatientAge: React.FC<WardPatientAgeProps> = ({ patient }) => {
-  return <div>{age(patient.person?.birthdate)}</div>;
+  return patient.person?.birthdate ? <div>{age(patient.person.birthdate)}</div> : null;
 };
 
 export default WardPatientAge;

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

@@ -1,15 +1,16 @@
-import { SkeletonText, Tag } from '@carbon/react';
-import { type Patient, translateFrom, type Visit, type OpenmrsResource } from '@openmrs/esm-framework';
-import React from 'react';
+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 { moduleName } from '../../constant';
 import { useObs } from '../../hooks/useObs';
+import { useElementConfig } from '../../ward-view/ward-view.resource';
 import styles from '../ward-patient-card.scss';
-import { obsCustomRepresentation, useConceptToTagColorMap } from './ward-patient-obs.resource';
-import { type ColoredObsTagsCardRowConfigObject } from '../../config-schema-extension-colored-obs-tags';
+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;
 }
@@ -24,50 +25,72 @@ interface WardPatientCodedObsTagsProps {
  * @param config
  * @returns
  */
-const WardPatientCodedObsTags: React.FC<WardPatientCodedObsTagsProps> = ({ config, patient, visit }) => {
-  const { conceptUuid, summaryLabel, summaryLabelColor, summaryLabelI18nModule } = 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 { data: conceptToTagColorMap } = useConceptToTagColorMap(config.tags);
+  const conceptToTagColorMap = useConceptToTagColorMap(config?.tags ?? []);
 
   if (isLoading) {
-    return <SkeletonText />;
+    return (
+      <div className={styles.wardPatientCardRow}>
+        <WardPatientSkeletonText />
+      </div>
+    );
   } else {
-    const obsToDisplay = data?.data?.results?.filter((o) => {
+    const obsToDisplay = data?.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
+      return matchVisit;
     });
 
-    const summaryLabelToDisplay =
-      summaryLabel != null
-        ? translateFrom(summaryLabelI18nModule ?? moduleName, summaryLabel)
-        : obsToDisplay?.[0]?.concept?.display;
+    const summaryLabelToDisplay = summaryLabel != null ? t(summaryLabel) : obsToDisplay?.[0]?.concept?.display;
 
-    const obsNodes = obsToDisplay?.map((o) => {
-      const { display, uuid } = o.value as OpenmrsResource;
+    // 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 (
-          <Tag type={color} key={`ward-coded-obs-tag-${o.uuid}`}>
-            {display}
-          </Tag>
-        );
-      } else {
-        return null;
-      }
-    });
+        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);
 
-    const obsWithNoTagCount = obsNodes.filter((o) => o == null).length;
-    if (obsNodes?.length > 0 || obsWithNoTagCount > 0) {
+    if (coloredOpsTags?.length > 0 || summaryTagTooltipText.length > 0) {
       return (
-        <div>
+        <div className={styles.wardPatientCardRow}>
           <span className={styles.wardPatientObsLabel}>
-            {obsNodes}
-            {obsWithNoTagCount > 0 ? (
-              <Tag type={summaryLabelColor}>
-                {t('countItems', '{{count}} {{item}}', { count: obsWithNoTagCount, item: summaryLabelToDisplay })}
-              </Tag>
+            {coloredOpsTags}
+            {summaryTagTooltipText.length > 0 ? (
+              <WardPatientResponsiveTooltip tooltipContent={summaryTagTooltipText}>
+                <Tag type={summaryLabelColor}>
+                  {t('countItems', '{{count}} {{item}}', {
+                    count: summaryTagTooltipText.length,
+                    item: summaryLabelToDisplay,
+                  })}
+                </Tag>
+              </WardPatientResponsiveTooltip>
             ) : null}
           </span>
         </div>

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,52 +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, labelI18nModule: labelModule, 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 ? translateFrom(labelModule ?? moduleName, 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-location.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { type InpatientAdmission } from '../../types';
+
+export interface WardPatientIdentifierProps {
+  inpatientAdmission: InpatientAdmission;
+}
+
+const WardPatientLocation: React.FC<WardPatientIdentifierProps> = ({ inpatientAdmission }) => {
+  const locationDisplay = inpatientAdmission?.encounterAssigningToCurrentInpatientLocation.location?.display;
+  return locationDisplay ? (
+    <div>
+      <span>{locationDisplay}</span>
+    </div>
+  ) : (
+    <></>
+  );
+};
+
+export default WardPatientLocation;

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

@@ -1,52 +1,56 @@
-import { openmrsFetch, restBaseUrl, type Concept } from '@openmrs/esm-framework';
-import useSWRImmutable from 'swr/immutable';
-import { type TagConfigObject } from '../../config-schema-extension-colored-obs-tags';
+import { restBaseUrl, useOpenmrsFetchAll, type Concept } from '@openmrs/esm-framework';
+import { type Observation } from '../../types';
+import { type TFunction } from 'i18next';
+import { type ColoredObsTagConfig } from '../../config-schema';
 
 // prettier-ignore
 export const obsCustomRepresentation = 
   'custom:(uuid,display,obsDatetime,value,' + 
     'concept:(uuid,display),' + 
-    'encounter:(uuid,display,' + 
+    'encounter:(uuid,display,encounterType,encounterDatetime,' + 
       'visit:(uuid,display)))';
 
 //  get the setMembers of a concept set
 const conceptSetCustomRepresentation = 'custom:(uuid,setMembers:(uuid))';
 
-export function useConceptToTagColorMap(tags: Array<TagConfigObject>) {
-  // 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 tags) {
-      const { color, appliedToConceptSets } = tag;
-      for (const answer of appliedToConceptSets ?? []) {
-        if (!conceptSetToTagColorMap.has(answer)) {
-          conceptSetToTagColorMap.set(answer, color);
-        }
-      }
-    }
+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.
 
-    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));
-            }
-          }
-        }
+  // TODO: We should cache this map to be re-usable app-wide
+  const conceptSetToTagColorMap = new Map<string, string>();
+  for (const tag of tags) {
+    const { color, appliedToConceptSets } = tag;
+    for (const answer of appliedToConceptSets ?? []) {
+      if (!conceptSetToTagColorMap.has(answer)) {
+        conceptSetToTagColorMap.set(answer, color);
       }
-
-      return conceptToTagColorMap;
-    });
-  };
+    }
+  }
 
   const conceptSetUuids = tags.flatMap((tag) => tag.appliedToConceptSets);
   const apiUrl = `${restBaseUrl}/concept?references=${conceptSetUuids.join()}&v=${conceptSetCustomRepresentation}`;
-  const conceptToTagColorMap = useSWRImmutable(apiUrl, fetchAndMap);
+  const { data: conceptSets } = useOpenmrsFetchAll<Concept>(apiUrl);
+
+  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;
 }
+
+export function getObsEncounterString(obs: Observation, t: TFunction) {
+  return t('encounterDisplay', '{{encounterType}} {{encounterDate}}', {
+    encounterType: obs.encounter.encounterType.display,
+    encounterDate: new Date(obs.encounter.encounterDatetime).toLocaleDateString(),
+    interpolation: { escapeValue: false },
+  });
+}

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

@@ -1,28 +1,36 @@
 import { SkeletonText } from '@carbon/react';
-import { type OpenmrsResource, type Patient, translateFrom, type Visit } from '@openmrs/esm-framework';
+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 { moduleName } from '../../constant';
-import { obsCustomRepresentation } from './ward-patient-obs.resource';
+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, labelI18nModule: labelModule } = 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) {
     return <SkeletonText />;
   } else {
-    const obsToDisplay = data?.data?.results
+    const obsToDisplay = data
       ?.filter((o) => {
         const matchVisit = !onlyWithinCurrentVisit || o.encounter.visit?.uuid == visit?.uuid;
         return matchVisit;
@@ -32,13 +40,18 @@ const WardPatientObs: React.FC<WardPatientObsProps> = ({ config, patient, visit
       })
       ?.slice(0, limit == 0 ? Number.MAX_VALUE : limit);
 
-    const labelToDisplay =
-      label != null ? translateFrom(labelModule ?? moduleName, label) : obsToDisplay?.[0]?.concept?.display;
+    const labelToDisplay = label != null ? t(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>;
+
+      const tooltipContent = getObsEncounterString(o, t);
+      return (
+        <WardPatientResponsiveTooltip key={o.uuid} tooltipContent={tooltipContent}>
+          <span title={tooltipContent}>{display} </span>
+        </WardPatientResponsiveTooltip>
+      );
     });
 
     if (obsNodes?.length > 0) {
@@ -47,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 {

package/src/ward-patient-card/row-elements/ward-patient-pending-order.component.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect } from 'react';
+import { ChemistryReference } from '@carbon/react/icons';
+import styles from '../ward-patient-card.scss';
+import { useTranslation } from 'react-i18next';
+import { type WardPatient } from '../../types';
+import { usePatientPendingOrders } from '../../hooks/usePatientPendingOrders';
+
+export interface WardPatientPendingOrderProps {
+  wardPatient: WardPatient;
+  orderUuid: string;
+  label: string;
+  onOrderCount: (count: number) => void; // New prop for notifying parent
+}
+
+export const WardPatientPendingOrder: React.FC<WardPatientPendingOrderProps> = ({
+  wardPatient,
+  orderUuid,
+  label,
+  onOrderCount,
+}) => {
+  const { t } = useTranslation();
+  const { count, isLoading } = usePatientPendingOrders(
+    wardPatient?.patient?.uuid,
+    orderUuid,
+    wardPatient?.visit?.startDatetime.split('T')[0],
+  );
+
+  useEffect(() => {
+    if (!isLoading) {
+      onOrderCount(count); // Notify parent when count is available
+    }
+  }, [count, isLoading, onOrderCount]);
+
+  if (isLoading || !count || count == 0) {
+    return null;
+  }
+
+  const labelToDisplay = label ? t(label) : t('Orders', 'Orders');
+  return (
+    <div className={styles.wardPatientCardDispositionTypeContainer}>
+      <ChemistryReference className={styles.chemistryReferenceIcon} size="24" />
+      {count} {labelToDisplay}
+    </div>
+  );
+};

package/src/ward-patient-card/row-elements/ward-patient-pending-transfer.tsx

@@ -0,0 +1,38 @@
+import React, { useMemo } from 'react';
+import { Movement } from '@carbon/react/icons';
+import styles from '../ward-patient-card.scss';
+import { useTranslation } from 'react-i18next';
+import { type WardPatient } from '../../types';
+
+export interface WardPatientTransferProps {
+  wardPatient: WardPatient;
+}
+
+const WardPatientPendingTransfer: React.FC<WardPatientTransferProps> = ({ wardPatient }) => {
+  const { t } = useTranslation();
+
+  const { dispositionType, dispositionLocation } = wardPatient?.inpatientRequest;
+  const message = useMemo(() => {
+    if (dispositionType === 'TRANSFER') {
+      if (dispositionLocation) {
+        return t('transferToDispositionLocation', 'Transfer to {{location}}', { location: dispositionLocation.name });
+      }
+      return t('pendingTransfer', 'Pending Transfer');
+    }
+    if (dispositionType === 'DISCHARGE') {
+      return t('pendingDischarge', 'Pending Discharge');
+    }
+    return '';
+  }, [dispositionType, dispositionLocation]);
+
+  if (!(dispositionType === 'TRANSFER' || dispositionType === 'DISCHARGE')) return null;
+
+  return (
+    <div className={styles.wardPatientCardDispositionTypeContainer}>
+      <Movement className={styles.movementIcon} size="24" />
+      {message}
+    </div>
+  );
+};
+
+export default WardPatientPendingTransfer;

package/src/ward-patient-card/row-elements/ward-patient-responsive-tooltip.tsx

@@ -0,0 +1,32 @@
+import { Toggletip, ToggletipButton, ToggletipContent, Tooltip } from '@carbon/react';
+import { isDesktop, useLayoutType } from '@openmrs/esm-framework';
+import React, { type ReactNode } from 'react';
+import styles from '../ward-patient-card.scss';
+
+interface WardPatientResponsiveTooltipProps {
+  children: ReactNode;
+  tooltipContent: ReactNode;
+}
+
+/**
+ * This component acts as a Tooltip on desktop and a Toggletip on mobile.
+ */
+const WardPatientResponsiveTooltip: React.FC<WardPatientResponsiveTooltipProps> = ({ children, tooltipContent }) => {
+  const layout = useLayoutType();
+  if (isDesktop(layout)) {
+    return (
+      <Tooltip description={tooltipContent} className={styles.responsiveTooltip}>
+        {children}
+      </Tooltip>
+    );
+  } else {
+    return (
+      <Toggletip className={styles.responsiveTooltip}>
+        <ToggletipButton>{children}</ToggletipButton>
+        <ToggletipContent>{tooltipContent}</ToggletipContent>
+      </Toggletip>
+    );
+  }
+};
+
+export default WardPatientResponsiveTooltip;

package/src/ward-patient-card/row-elements/ward-patient-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;