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

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 { 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';
 
 // 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);
-        }
-      }
-    }
+  // 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,12 +1,13 @@
-import { SkeletonText } from '@carbon/react';
-import { type OpenmrsResource, type Patient, translateFrom, type Visit } from '@openmrs/esm-framework';
+import { SkeletonText, Toggletip, ToggletipButton, ToggletipContent } from '@carbon/react';
+import { Information } from '@carbon/react/icons';
+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 { 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';
 
 export interface WardPatientObsProps {
   config: ObsElementDefinition;
@@ -15,14 +16,14 @@ export interface WardPatientObsProps {
 }
 
 const WardPatientObs: React.FC<WardPatientObsProps> = ({ config, patient, visit }) => {
-  const { conceptUuid, onlyWithinCurrentVisit, orderBy, limit, label, labelI18nModule: labelModule } = config;
+  const { conceptUuid, onlyWithinCurrentVisit, orderBy, limit, label } = config;
   const { data, isLoading } = useObs({ patient: patient.uuid, concept: conceptUuid }, 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 +33,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) {

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/ward-patient-card-element.component.tsx

@@ -10,6 +10,7 @@ import WardPatientIdentifier from './row-elements/ward-patient-identifier';
 import WardPatientObs from './row-elements/ward-patient-obs';
 import WardPatientTimeOnWard from './row-elements/ward-patient-time-on-ward';
 import WardPatientTimeSinceAdmission from './row-elements/ward-patient-time-since-admission';
+import WardPatientLocation from './row-elements/ward-patient-location';
 
 export interface WardPatientCardElementProps extends WardPatient {
   elementId: string;
@@ -39,6 +40,9 @@ export const WardPatientCardElement: React.FC<WardPatientCardElementProps> = ({
     case 'time-since-admission': {
       return <WardPatientTimeSinceAdmission firstAdmissionOrTransferEncounter={firstAdmissionOrTransferEncounter} />;
     }
+    case 'patient-location': {
+      return <WardPatientLocation inpatientAdmission={inpatientAdmission} />;
+    }
     default: {
       const obsConfig = obsElementDefinitions.find((elementDef) => elementDef.id === elementId);
       const idConfig = identifierElementDefinitions.find((elementDef) => elementDef.id === elementId);

package/src/ward-patient-card/ward-patient-card.component.tsx

@@ -7,6 +7,7 @@ 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 { launchPatientWorkspace, setWardPatient } from './ward-patient-resource';
 
 const WardPatientCard: WardPatientCard = (wardPatient) => {
   const { patient, bed } = wardPatient;
@@ -32,27 +33,33 @@ const WardPatientCard: WardPatientCard = (wardPatient) => {
         ))}
         <ExtensionSlot name={headerExtensionSlotName} state={wardPatient} />
       </div>
+      {footerRowElements.length > 0 && (
+        <div className={styles.wardPatientCardRow}>
+          {footerRowElements.map((elementId, i) => (
+            <WardPatientCardElement
+              key={`ward-card-${patient.uuid}-footer-${i}`}
+              elementId={elementId}
+              {...wardPatient}
+            />
+          ))}
+          <ExtensionSlot name={footerExtensionSlotName} state={wardPatient} />
+        </div>
+      )}
+      <ExtensionSlot
+        name="ward-patient-card-pending-items-slot"
+        state={wardPatient}
+        className={styles.wardPatientCardExtensionSlot}
+      />
       <ExtensionSlot
         name={rowsExtensionSlotName}
         state={wardPatient}
-        className={classNames(styles.wardPatientCardRow, styles.wardPatientCardExtensionSlot)}
+        className={classNames(styles.wardPatientCardExtensionSlot)}
       />
-      <div className={styles.wardPatientCardRow}>
-        {footerRowElements.map((elementId, i) => (
-          <WardPatientCardElement
-            key={`ward-card-${patient.uuid}-footer-${i}`}
-            elementId={elementId}
-            {...wardPatient}
-          />
-        ))}
-        <ExtensionSlot name={footerExtensionSlotName} state={wardPatient} />
-      </div>
       <button
         className={styles.wardPatientCardButton}
         onClick={() => {
-          launchWorkspace<WardPatientWorkspaceProps>('ward-patient-workspace', {
-            wardPatient,
-          });
+          setWardPatient(wardPatient);
+          launchPatientWorkspace();
         }}>
         {/* Name will not be displayed; just there for a11y */}
         {getPatientName(patient.person)}

package/src/ward-patient-card/ward-patient-card.scss

@@ -14,10 +14,6 @@
   background-color: $ui-02;
 
   position: relative; // this allows positioning the button correctly
-
-  > .wardPatientCardRow:not(:first-child) {
-    border-top: 1px colors.$gray-20 solid;
-  }
 }
 
 .wardPatientCardButton {
@@ -59,24 +55,51 @@
 .wardPatientCardRow {
   width: 100%;
   padding: layout.$spacing-04;
+  border-top: 1px colors.$gray-20 solid;
+
+  &:empty {
+    border-top: 0px;
+    display: none;
+  }
 }
 
-.wardPatientCardRow:empty {
+.wardPatientPendingOrdersRow:empty {
   display: none;
+  margin-left: layout.$spacing-04;
 }
 
 .wardPatientCardExtensionSlot {
   display: none;
+  width: 100%;
 
   &:has(div:not(:empty)) {
     display: block;
   }
 }
 
+.wardPatientCardPendingItemsRow:empty {
+  display: none;
+  margin-left: layout.$spacing-04;
+}
+
+.wardPatientCardPendingItemsRow {
+  @extend .wardPatientCardRow;
+  display: flex;
+  align-items: center;
+  flex-flow: row wrap;
+  color: $ui-02;
+  background-color: colors.$gray-80;
+}
+
 .wardPatientCardHeader {
   @extend .dotSeparatedChildren;
+  border-top: 0;
+}
+
+.wardPatientCardDispositionTypeContainer {
   display: flex;
-  flex-wrap: wrap;
+  flex-flow: row;
+  align-items: center;
 }
 
 .wardPatientName {
@@ -112,10 +135,26 @@
   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;
+}
+
+.chemistryReferenceIcon {
+  padding: layout.$spacing-02;
+  border-radius: 50%;
+  fill: $ui-03;
+  background-color: #a2191f;
+  margin-left: layout.$spacing-03;
+  margin-right: layout.$spacing-02;
+}
+
 .wardPatientAddress {
   @extend .dotSeparatedChildren;
-  display: flex;
-  flex-wrap: wrap;
   align-items: center;
   gap: layout.$spacing-02;
 }
@@ -124,7 +163,17 @@
   padding-right: layout.$spacing-02;
 }
 
+.responsiveTooltip {
+  z-index: 2;
+  & :global(.cds--tag) {
+    border: 0;
+  }
+}
+
 .dotSeparatedChildren {
+  display: flex;
+  flex-wrap: wrap;
+
   > div:not(div:first-of-type):not(:empty) {
     display: flex;
     align-items: center;
@@ -135,3 +184,7 @@
     }
   }
 }
+
+.skeletonText {
+  width: 6.25rem;
+}

package/src/ward-patient-card/ward-patient-resource.ts

@@ -0,0 +1,15 @@
+import { launchWorkspace } from '@openmrs/esm-framework';
+import { type WardPatient, type WardPatientWorkspaceProps } from '../types';
+
+//To keep track of current patient when clicked on ward-patient-card and pass
+//it as a prop to launch workspace
+let wardPatient: WardPatient = null;
+export function setWardPatient(currentWardPatient: WardPatient) {
+  wardPatient = currentWardPatient;
+}
+
+export function launchPatientWorkspace() {
+  launchWorkspace<WardPatientWorkspaceProps>('ward-patient-workspace', {
+    wardPatient,
+  });
+}