(feat) O3-3223: Add configurable element to include alerts on pending…

… items to patient card (#1218)

* (feat) - O3-3222 - ward app - add patient card element to include risk factor obs within the current visit

* rename codedObs to codedObsTags

* remove orders

* feat: add pending inpatient request

* fix: fix alert message

* fix: use layout spacing

* rename WardPatientPendingTransfer

---------

Co-authored-by: Chi Bong Ho <cbho@pih.org>

packages/esm-ward-app/src/hooks/useInpatientAdmission.ts

@@ -9,10 +9,11 @@ export function useInpatientAdmission() {
   // prettier-ignore
   const customRepresentation =
     'custom:(visit,' +
-      'patient:(uuid,identifiers,voided,' +
-        'person:(uuid,display,gender,age,birthdate,birthtime,preferredName,preferredAddress,dead,deathDate)),' + 
-      'encounterAssigningToCurrentInpatientLocation:(encounterDatetime),' +
-      'firstAdmissionOrTransferEncounter:(encounterDatetime),' +
+    'patient:(uuid,identifiers,voided,' +
+    'person:(uuid,display,gender,age,birthdate,birthtime,preferredName,preferredAddress,dead,deathDate)),' +
+    'encounterAssigningToCurrentInpatientLocation:(encounterDatetime),' +
+    'currentInpatientRequest:(dispositionLocation,dispositionType,disposition:(uuid,display),dispositionEncounter:(uuid,display),dispositionObsGroup:(uuid,display),visit:(uuid),patient:(uuid)),' +
+    'firstAdmissionOrTransferEncounter:(encounterDatetime),' +
     ')';
   const { data, ...rest } = useSWR<FetchResponse<InpatientAdmissionFetchResponse>, Error>(
     location

packages/esm-ward-app/src/types/index.ts

@@ -40,6 +40,7 @@ export type WardPatient = {
    */
   inpatientRequest: InpatientRequest;
 };
+
 export interface WardPatientWorkspaceProps extends DefaultWorkspaceProps {
   wardPatient: WardPatient;
 }
@@ -134,6 +135,9 @@ 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;
 }
 
 // TODO: Move these types to esm-core

packages/esm-ward-app/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;

packages/esm-ward-app/src/ward-patient-card/ward-patient-card.component.tsx

@@ -1,12 +1,14 @@
 import { ExtensionSlot, getPatientName, launchWorkspace } from '@openmrs/esm-framework';
 import classNames from 'classnames';
 import React from 'react';
+import { Hourglass } from '@carbon/react/icons';
 import { useCurrentWardCardConfig } from '../hooks/useCurrentWardCardConfig';
 import { type WardPatientCard, type WardPatientWorkspaceProps } from '../types';
 import WardPatientBedNumber from './row-elements/ward-patient-bed-number';
 import WardPatientName from './row-elements/ward-patient-name';
 import { WardPatientCardElement } from './ward-patient-card-element.component';
 import styles from './ward-patient-card.scss';
+import WardPatientPendingTransfer from './row-elements/ward-patient-pending-transfer';
 
 const WardPatientCard: WardPatientCard = (wardPatient) => {
   const { patient, bed } = wardPatient;
@@ -32,6 +34,12 @@ const WardPatientCard: WardPatientCard = (wardPatient) => {
         ))}
         <ExtensionSlot name={headerExtensionSlotName} state={wardPatient} />
       </div>
+      {wardPatient?.inpatientRequest ? (
+        <div className={styles.wardPatientCardPendingItemsRow}>
+          <Hourglass className={styles.hourGlassIcon} size="16" />:
+          <WardPatientPendingTransfer wardPatient={wardPatient} />
+        </div>
+      ) : null}
       <ExtensionSlot
         name={rowsExtensionSlotName}
         state={wardPatient}

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

@@ -79,6 +79,21 @@
   flex-wrap: wrap;
 }
 
+.wardPatientCardPendingItemsRow {
+  @extend .wardPatientCardRow;
+  display: flex;
+  align-items: center;
+  flex-flow: row;
+  color: $ui-02;
+  background-color: colors.$gray-80;
+}
+
+.wardPatientCardDispositionTypeContainer {
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+}
+
 .wardPatientName {
   @include type.type-style('heading-compact-02');
   color: $text-02;
@@ -112,6 +127,15 @@
   align-items: center;
 }
 
+.movementIcon {
+  padding: layout.$spacing-02;
+  border-radius: 50%;
+  fill: $ui-03;
+  background-color: $color-blue-60-2;
+  margin-left: layout.$spacing-03;
+  margin-right: layout.$spacing-02;
+}
+
 .wardPatientAddress {
   @extend .dotSeparatedChildren;
   display: flex;

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

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { InlineNotification } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { WorkspaceContainer, useFeatureFlag } from '@openmrs/esm-framework';
+import { useFeatureFlag, WorkspaceContainer } from '@openmrs/esm-framework';
 import EmptyBedSkeleton from '../beds/empty-bed-skeleton';
 import { useAdmissionLocation } from '../hooks/useAdmissionLocation';
 import WardBed from './ward-bed.component';
@@ -61,8 +61,8 @@ const WardViewWithBedManagement = () => {
       const wardPatients: WardPatient[] = patients.map((patient): WardPatient => {
         const inpatientAdmission = inpatientAdmissionsByPatientUuid.get(patient.uuid);
         if (inpatientAdmission) {
-          const { patient, visit } = inpatientAdmission;
-          return { patient, visit, bed, inpatientAdmission, inpatientRequest: null };
+          const { patient, visit, currentInpatientRequest } = inpatientAdmission;
+          return { patient, visit, bed, inpatientAdmission, inpatientRequest: currentInpatientRequest || null };
         } else {
           // for some reason this patient is in a bed but not in the list of admitted patients, so we need to use the patient data from the bed endpoint
           return {