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

package/src/index.ts

@@ -12,6 +12,8 @@ import { coloredObsTagsCardRowConfigSchema } from './config-schema-extension-col
 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');
 
@@ -38,7 +40,7 @@ export const admitPatientFormWorkspace = getAsyncLifecycle(
 
 // Title for this workspace is set dynamically
 export const wardPatientWorkspace = getAsyncLifecycle(
-  () => import('./ward-patient-workspace/ward-patient.workspace'),
+  () => import('./ward-workspace/patient-details/ward-patient.workspace'),
   options,
 );
 
@@ -49,7 +51,7 @@ export const wardPatientNotesWorkspace = getAsyncLifecycle(
 );
 
 export const wardPatientActionButtonExtension = getAsyncLifecycle(
-  () => import('./ward-patient-workspace/ward-patient-action-button.extension'),
+  () => import('./ward-workspace/patient-details/ward-patient-action-button.extension'),
   options,
 );
 
@@ -68,26 +70,71 @@ export const admissionRequestNoteRowExtension = getAsyncLifecycle(
   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'),
   options,
 );
 
+// t('discharge', 'Discharge')
+export const patientDischargeWorkspace = getAsyncLifecycle(
+  () => import('./ward-workspace/patient-discharge/patient-discharge.workspace'),
+  options,
+);
+
 export const patientTransferAndSwapWorkspaceSiderailIcon = getAsyncLifecycle(
   () => import('./action-menu-buttons/transfer-workspace-siderail.component'),
   options,
 );
 
+// t('transferRequest', 'Transfer request')
+export const patientTransferRequestWorkspace = getAsyncLifecycle(
+  () => import('./ward-workspace/patient-transfer-request-workspace/patient-transfer-request.workspace'),
+  options,
+);
+
+export const patientDischargeWorkspaceSideRailIcon = getAsyncLifecycle(
+  () => import('./action-menu-buttons/discharge-workspace-siderail.component'),
+  options,
+);
+
+export const patientClinicalFormsWorkspace = getAsyncLifecycle(
+  () => import('./ward-workspace/patient-clinical-forms-workspace/patient-clinical-forms.workspace'),
+  options,
+);
+
+export const clinicalFormWorkspaceSideRailIcon = getAsyncLifecycle(
+  () => import('./action-menu-buttons/clinical-forms-workspace-siderail.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',
-    'Bed Management Module',
+    'Bed management module',
     'Enables features related to bed management / assignment. Requires the backend bed management module to be installed.',
   );
+
+  registerFeatureFlag(
+    'ward-view-vertical-tiling',
+    'Ward view vertical tiling',
+    'Enable tiling of bed cards vertically in the ward view.',
+  );
 }

package/src/location-selector/location-selector.component.tsx

@@ -24,29 +24,26 @@ export default function LocationSelector(props: LocationSelectorProps) {
   const isTablet = !isDesktop(useLayoutType());
   const [searchTerm, setSearchTerm] = useState('');
   const debouncedSearchTerm = useDebounce(searchTerm);
-  const [page, setPage] = useState(1);
   const filterCriteria: Array<Array<string>> = useMemo(() => {
     const criteria = [];
     if (debouncedSearchTerm) {
       criteria.push(['name:contains', debouncedSearchTerm]);
     }
-    criteria.push(['_count', size.toString()]);
     if (emrConfiguration) {
       criteria.push(['_tag', emrConfiguration.supportsTransferLocationTag.name]);
     }
-    if (page > 1) {
-      criteria.push(['_getpagesoffset', ((page - 1) * size).toString()]);
-    }
     return criteria;
-  }, [debouncedSearchTerm, page, emrConfiguration]);
-  const { locations, isLoading, totalLocations } = useLocations(filterCriteria, !emrConfiguration);
+  }, [debouncedSearchTerm, emrConfiguration]);
+  const {
+    data: locations,
+    isLoading,
+    totalCount,
+    currentPage,
+    totalPages,
+    goToNext,
+    goToPrevious,
+  } = useLocations(filterCriteria, size, !emrConfiguration);
 
-  const handlePageChange = useCallback(
-    ({ page: newPage }) => {
-      setPage(newPage);
-    },
-    [setPage, page],
-  );
   const handleSearch = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       setSearchTerm(event.target.value);
@@ -84,30 +81,30 @@ export default function LocationSelector(props: LocationSelectorProps) {
           </RadioButtonGroup>
         </ResponsiveWrapper>
       )}
-      {totalLocations > 5 && (
+      {totalCount > size && (
         <div className={styles.pagination}>
           <span className={styles.bodyShort01}>
             {t('showingLocations', '{{start}}-{{end}} of {{count}} locations', {
-              start: (page - 1) * size + 1,
-              end: Math.min(page * size, totalLocations),
-              count: totalLocations,
+              start: (currentPage - 1) * size + 1,
+              end: Math.min(currentPage * size, totalCount),
+              count: totalCount,
             })}
           </span>
           <div>
             <IconButton
               className={classNames(styles.button, styles.buttonLeft)}
-              disabled={page === 1}
+              disabled={currentPage === 1}
               kind="ghost"
               label={t('previousPage', 'Previous page')}
-              onClick={() => handlePageChange({ page: page - 1 })}>
+              onClick={() => goToPrevious()}>
               <ChevronLeftIcon />
             </IconButton>
             <IconButton
               className={styles.button}
-              disabled={page * size >= totalLocations}
+              disabled={currentPage >= totalPages}
               kind="ghost"
               label={t('nextPage', 'Next page')}
-              onClick={() => handlePageChange({ page: page + 1 })}>
+              onClick={() => goToNext()}>
               <ChevronRightIcon />
             </IconButton>
           </div>

package/src/routes.json

@@ -50,10 +50,30 @@
       "slot": "action-menu-ward-patient-items-slot",
       "component": "patientTransferAndSwapWorkspaceSiderailIcon"
     },
+    {
+      "name": "patient-discharge-siderail-button",
+      "slot": "action-menu-ward-patient-items-slot",
+      "component": "patientDischargeWorkspaceSideRailIcon"
+    },
+    {
+      "name": "clinical-forms-workspace-siderail-button",
+      "component": "clinicalFormWorkspaceSideRailIcon",
+      "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": "pendingItemsCardRowExtension",
+      "name": "ward-patient-pending-items-card-row",
+      "slot": "ward-patient-card-pending-items-slot"
     }
   ],
   "workspaces": [
@@ -93,6 +113,29 @@
       "type": "transfer-swap-bed-form",
       "hasOwnSidebar": true,
       "sidebarFamily": "ward-patient"
+    },
+    {
+      "name": "patient-transfer-request-workspace",
+      "component": "patientTransferRequestWorkspace",
+      "title": "transferRequest",
+      "type": "transfer-request-form"
+    },
+    {
+      "name": "patient-discharge-workspace",
+      "component": "patientDischargeWorkspace",
+      "title": "discharge",
+      "type": "ward-patient-discharge",
+      "hasOwnSidebar": true,
+      "sidebarFamily": "ward-patient"
+    },
+    {
+      "name": "ward-patient-clinical-forms-workspace",
+      "component": "patientClinicalFormsWorkspace",
+      "title": "clinicalForms",
+      "type": "ward-patient-clinical-forms",
+      "hasOwnSidebar": true,
+      "sidebarFamily": "ward-patient",
+      "width": "wider"
     }
   ]
 }

package/src/types/index.ts

@@ -9,6 +9,7 @@ import type {
   Visit,
 } from '@openmrs/esm-framework';
 import type React from 'react';
+import type { useWardPatientGrouping } from '../hooks/useWardPatientGrouping';
 
 export type WardPatientCard = React.FC<WardPatient>;
 
@@ -40,9 +41,14 @@ export type WardPatient = {
    */
   inpatientRequest: InpatientRequest;
 };
+
 export interface WardPatientWorkspaceProps extends DefaultWorkspaceProps {
   wardPatient: WardPatient;
 }
+export interface MotherAndChildrenRelationships {
+  motherByChildUuid: Map<string, Patient>;
+  childrenByMotherUuid: Map<string, Array<Patient>>;
+}
 
 // server-side types defined in openmrs-module-bedmanagement:
 
@@ -134,6 +140,19 @@ 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;
+}
+export interface WardAppContext {
+  allPatientsByPatientUuid: Map<string, Patient>;
+}
+
+export interface MotherAndChild {
+  mother: Patient;
+  child: Patient;
+  motherAdmission: InpatientAdmission;
+  childAdmission: InpatientAdmission;
 }
 
 // TODO: Move these types to esm-core
@@ -185,6 +204,12 @@ export interface EncounterRole extends OpenmrsResourceStrict {
   retired?: boolean;
 }
 
+export interface WardMetrics {
+  patients: string;
+  freeBeds: string;
+  capacity: string;
+}
+
 export interface EncounterPayload {
   encounterDatetime?: string;
   encounterType: string;
@@ -202,3 +227,12 @@ export interface ObsPayload {
   value?: string;
   groupMembers?: Array<ObsPayload>;
 }
+
+export interface MotherAndChildren {
+  childAdmission: InpatientAdmission;
+  child: Patient;
+  motherAdmission: InpatientAdmission;
+  mother: Patient;
+}
+
+export type WardPatientGroupDetails = ReturnType<typeof useWardPatientGrouping>;

package/src/ward-patient-card/card-rows/admission-request-note.extension.tsx

@@ -3,6 +3,7 @@ import { type ObsElementDefinition } from '../../config-schema';
 import { type WardPatientCard } from '../../types';
 import WardPatientObs from '../row-elements/ward-patient-obs';
 import { useConfig } from '@openmrs/esm-framework';
+import styles from '../ward-patient-card.scss';
 
 const AdmissionRequestNoteRowExtension: WardPatientCard = ({ patient, visit, inpatientAdmission }) => {
   const { conceptUuid } = useConfig<ObsElementDefinition>();
@@ -18,9 +19,13 @@ const AdmissionRequestNoteRowExtension: WardPatientCard = ({ patient, visit, inp
   // only show if the patient has not been admitted yet
   const admitted = inpatientAdmission != null;
   if (admitted) {
-    return <></>;
+    return null;
   } else {
-    return <WardPatientObs config={config} patient={patient} visit={visit} />;
+    return (
+      <div className={styles.wardPatientCardRow}>
+        <WardPatientObs config={config} patient={patient} visit={visit} />
+      </div>
+    );
   }
 };
 

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

@@ -0,0 +1,110 @@
+import { InlineNotification } from '@carbon/react';
+import { BabyIcon, MotherIcon } from '@openmrs/esm-framework';
+import classNames from 'classnames';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { type MothersAndChildrenSearchCriteria, useMotherAndChildren } from '../../hooks/useMotherAndChildren';
+import { type WardPatientCard } from '../../types';
+import WardPatientSkeletonText from '../row-elements/ward-pateint-skeleton-text';
+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';
+
+const motherAndChildrenRep =
+  'custom:(childAdmission,mother:(person,identifiers:full,uuid),child:(person,identifiers:full,uuid),motherAdmission)';
+
+/**
+ * This extension displays the mother or children of the patient in the patient card.
+ *
+ * @param param0
+ * @returns
+ */
+const MotherChildRowExtension: WardPatientCard = ({ patient }) => {
+  const { t } = useTranslation();
+
+  const getChildrenRequestParams: MothersAndChildrenSearchCriteria = {
+    mothers: [patient.uuid],
+    requireMotherHasActiveVisit: true,
+    requireChildHasActiveVisit: true,
+    requireChildBornDuringMothersActiveVisit: true,
+  };
+
+  const getMotherRequestParams: MothersAndChildrenSearchCriteria = {
+    children: [patient.uuid],
+    requireMotherHasActiveVisit: true,
+    requireChildHasActiveVisit: true,
+    requireChildBornDuringMothersActiveVisit: true,
+  };
+
+  const {
+    data: childrenData,
+    isLoading: isLoadingChildrenData,
+    error: childrenDataError,
+  } = useMotherAndChildren(getChildrenRequestParams, true, motherAndChildrenRep);
+  const {
+    data: motherData,
+    isLoading: isLoadingMotherData,
+    error: motherDataError,
+  } = useMotherAndChildren(getMotherRequestParams, true, motherAndChildrenRep);
+
+  if (isLoadingChildrenData || isLoadingMotherData) {
+    return (
+      <div className={classNames(styles.motherOrBabyRow, wardPatientCardStyles.wardPatientCardRow)}>
+        <WardPatientSkeletonText />
+      </div>
+    );
+  } else if (childrenDataError) {
+    return (
+      <InlineNotification
+        kind="warning"
+        lowContrast={true}
+        title={t('errorLoadingChildren', 'Error loading children info')}
+      />
+    );
+  } else if (motherDataError) {
+    return (
+      <InlineNotification
+        kind="warning"
+        lowContrast={true}
+        title={t('errorLoadingChildren', 'Error loading mother info')}
+      />
+    );
+  }
+
+  return (
+    <>
+      {[...childrenData, ...motherData]?.map(({ mother, motherAdmission, child, childAdmission }) => {
+        // patient A is the patient card's patient
+        const patientA = patient;
+        // patient B is either the mother or the child of patient A
+        const isPatientBTheMother = mother.uuid != patientA.uuid;
+        const patientB = isPatientBTheMother ? mother : child;
+
+        // we display patient B here
+        const Icon = isPatientBTheMother ? MotherIcon : BabyIcon;
+        const patientBAdmission = isPatientBTheMother ? motherAdmission : childAdmission;
+
+        return (
+          <div
+            key={patientB.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={patientB} />
+              <WardPatientIdentifier patient={patientB} />
+              <WardPatientAge patient={patientB} />
+              <WardPatientLocation inpatientAdmission={patientBAdmission} />
+            </div>
+          </div>
+        );
+      })}
+    </>
+  );
+};
+
+export default MotherChildRowExtension;

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-car-row.extension.tsx

@@ -0,0 +1,50 @@
+import React, { useCallback, useEffect } from 'react';
+import { type WardPatientCard } from '../../types';
+import { Hourglass } from '@carbon/react/icons';
+
+import { useConfig } from '@openmrs/esm-framework';
+import type { PendingItemsDefinition } from '../../config-schema';
+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';
+
+const PendingItemsCarRowExtension: WardPatientCard = (wardPatient) => {
+  const { orders, showPendingItems } = useConfig<PendingItemsDefinition>();
+  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 PendingItemsCarRowExtension;

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

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,12 +1,13 @@
-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 { type ColoredObsTagsCardRowConfigObject } from '../../config-schema-extension-colored-obs-tags';
 import { useObs } from '../../hooks/useObs';
 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-pateint-skeleton-text';
+import { getObsEncounterString, obsCustomRepresentation, useConceptToTagColorMap } from './ward-patient-obs.resource';
+import WardPatientResponsiveTooltip from './ward-patient-responsive-tooltip';
 
 interface WardPatientCodedObsTagsProps {
   config: ColoredObsTagsCardRowConfigObject;
@@ -25,49 +26,66 @@ interface WardPatientCodedObsTagsProps {
  * @returns
  */
 const WardPatientCodedObsTags: React.FC<WardPatientCodedObsTagsProps> = ({ config, patient, visit }) => {
-  const { conceptUuid, summaryLabel, summaryLabelColor, summaryLabelI18nModule } = config;
+  const { conceptUuid, summaryLabel, summaryLabelColor } = config;
   const { data, isLoading } = useObs({ patient: patient.uuid, concept: conceptUuid }, 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-identifier.tsx

@@ -33,15 +33,14 @@ const defaultConfig: IdentifierElementDefinition = {
 const WardPatientIdentifier: React.FC<WardPatientIdentifierProps> = ({ config: configProp, patient }) => {
   const { t } = useTranslation();
   const config = configProp ?? defaultConfig;
-  const { identifierTypeUuid, labelI18nModule: labelModule, label } = config;
+  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 ? translateFrom(labelModule ?? moduleName, label) : patientIdentifier?.identifierType?.name;
+  const labelToDisplay = label != null ? t(label) : patientIdentifier?.identifierType?.name;
   return (
     <div>
       {labelToDisplay ? <Tag>{t('identifierTypelabel', '{{label}}:', { label: labelToDisplay })}</Tag> : <></>}