@pih/esm-commons-app 2.1.1-pre.15 → 2.1.1-pre.154

package/src/ward-app/VitalsTable.tsx

@@ -0,0 +1,361 @@
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  DataTable,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Button,
+} from '@carbon/react';
+import { restBaseUrl, useConfig, useOpenmrsFetchAll, usePagination, usePatient } from '@openmrs/esm-framework';
+import { Pagination, NumericObservation } from '@openmrs/esm-styleguide';
+import {
+  useConceptReferenceRanges,
+  calculateInterpretation,
+  type ObservationInterpretation,
+} from '../hooks/useConceptReferenceRanges';
+import dayjs from 'dayjs';
+
+interface VitalsTableProps {
+  patientUuid: string;
+  visitUuid: string;
+}
+
+interface Observation {
+  uuid: string;
+  concept: {
+    uuid: string;
+    name: {
+      display: string;
+    };
+  };
+  value: number | string | object | null;
+}
+
+interface EncounterProvider {
+  provider: {
+    person: {
+      display: string;
+    };
+  };
+}
+
+interface Encounter {
+  uuid: string;
+  display: string;
+  encounterDatetime: string;
+  encounterProviders?: EncounterProvider[];
+  obs: Observation[];
+}
+
+interface EncounterResponse {
+  results: Encounter[];
+}
+
+const customRepresentation =
+  'custom:(uuid,display,encounterDatetime,encounterProviders:(provider:(person:(display))),obs:(uuid,concept:(uuid,name:(display)),value))';
+
+const VitalsTable: React.FC<VitalsTableProps> = ({ patientUuid, visitUuid }) => {
+  const { concepts: externalConcepts } = useConfig<{ concepts: Record<string, string> }>({
+    externalModuleName: '@openmrs/esm-patient-vitals-app',
+  });
+  const { concepts: localConcepts } = useConfig<{
+    concepts: { hemoglobinUuid: string; glucoseUuid: string; fhrUuid: string; secondFhrUuid: string };
+  }>();
+  const vitalsConcepts = {
+    systolic: externalConcepts.systolicBloodPressureUuid,
+    diastolic: externalConcepts.diastolicBloodPressureUuid,
+    pulse: externalConcepts.pulseUuid,
+    temperature: externalConcepts.temperatureUuid,
+    oxygenSaturation: externalConcepts.oxygenSaturationUuid,
+    respiratoryRate: externalConcepts.respiratoryRateUuid,
+    hemoglobin: localConcepts.hemoglobinUuid,
+    glucose: localConcepts.glucoseUuid,
+    fhr: localConcepts.fhrUuid,
+    secondFhr: localConcepts.secondFhrUuid,
+  };
+  const { referenceRangeMap } = useConceptReferenceRanges(patientUuid, Object.values(vitalsConcepts));
+  const { t } = useTranslation();
+  const [showAll, setShowAll] = useState(false);
+  const { patient } = usePatient(patientUuid);
+
+  // Check if patient is less than 30 days old
+  const isNewborn = useMemo(() => {
+    if (!patient?.birthDate) return false;
+    const birthDate = dayjs(patient.birthDate);
+    const ageInDays = dayjs().diff(birthDate, 'day');
+    return ageInDays < 30;
+  }, [patient?.birthDate]);
+
+  const interpretationLabels: Record<ObservationInterpretation, string> = {
+    normal: t('normal', 'Normal'),
+    high: t('high', 'High'),
+    critically_high: t('criticallyHigh', 'Critically high'),
+    off_scale_high: t('offScaleHigh', 'Off scale high'),
+    low: t('low', 'Low'),
+    critically_low: t('criticallyLow', 'Critically low'),
+    off_scale_low: t('offScaleLow', 'Off scale low'),
+  };
+
+  interface VitalCellData {
+    value: number | string | object | null;
+    interpretation?: ObservationInterpretation;
+    conceptUuid?: string;
+  }
+
+  interface VitalRowData {
+    id: string;
+    date: string;
+    bp: { systolic?: VitalCellData; diastolic?: VitalCellData };
+    pulse?: VitalCellData;
+    temperature?: VitalCellData;
+    oxygenSaturation?: VitalCellData;
+    respiratoryRate?: VitalCellData;
+    hemoglobin?: VitalCellData;
+    glucose?: VitalCellData;
+    fhr?: VitalCellData;
+    secondFhr?: VitalCellData;
+    provider?: string;
+  }
+
+  type VitalColumnKey = Exclude<keyof VitalRowData, 'id' | 'date' | 'provider'>;
+
+  const createVitalCellData = (value: number | string | object | null, conceptUuid?: string): VitalCellData => {
+    if (value === null || value === undefined) {
+      return { value: null };
+    }
+
+    const numericValue = typeof value === 'object' ? undefined : value;
+    const interpretation = conceptUuid
+      ? calculateInterpretation(numericValue, referenceRangeMap[conceptUuid])
+      : undefined;
+
+    return {
+      value,
+      interpretation,
+      conceptUuid,
+    };
+  };
+
+  const vitalColumns: Array<{ key: VitalColumnKey; label: string; conceptUuid?: string }> = useMemo(() => {
+    let columns = [
+      { key: 'bp', label: t('bloodPressure', 'BP') },
+      { key: 'pulse', label: t('pulse', 'HR'), conceptUuid: vitalsConcepts.pulse },
+      { key: 'temperature', label: t('temperature', 'Temp'), conceptUuid: vitalsConcepts.temperature },
+      { key: 'respiratoryRate', label: t('respiratoryRate', 'RR'), conceptUuid: vitalsConcepts.respiratoryRate },
+      { key: 'oxygenSaturation', label: t('oxygenSaturation', 'O2 Sat'), conceptUuid: vitalsConcepts.oxygenSaturation },
+      { key: 'glucose', label: t('glucose', 'Glucose'), conceptUuid: vitalsConcepts.glucose },
+    ] as Array<{ key: VitalColumnKey; label: string; conceptUuid?: string }>;
+
+    // Only include hemoglobin, fhr, and secondFhr for patients 30 days or older
+    if (!isNewborn) {
+      columns.push(
+        { key: 'hemoglobin', label: t('hemoglobin', 'Hb'), conceptUuid: vitalsConcepts.hemoglobin },
+        { key: 'fhr', label: t('fetalHeartRate', 'FHR'), conceptUuid: vitalsConcepts.fhr },
+        { key: 'secondFhr', label: t('secondFetalHeartRate', '2nd FHR'), conceptUuid: vitalsConcepts.secondFhr },
+      );
+    }
+
+    return columns;
+  }, [isNewborn, vitalsConcepts, t]);
+
+  const renderVitalCell = (
+    cellData: VitalCellData | { systolic?: VitalCellData; diastolic?: VitalCellData } | undefined,
+  ) => {
+    if (!cellData) {
+      return <span>—</span>;
+    }
+
+    // Handle BP which is an object with systolic and diastolic
+    if ('systolic' in cellData) {
+      const bpData = cellData as { systolic?: VitalCellData; diastolic?: VitalCellData };
+      return (
+        <div style={{ display: 'flex', gap: '0', alignItems: 'center' }}>
+          {bpData.systolic && (
+            <NumericObservation
+              value={
+                bpData.systolic.value !== null && bpData.systolic.value !== undefined
+                  ? String(bpData.systolic.value)
+                  : ''
+              }
+              interpretation={bpData.systolic.interpretation}
+              conceptUuid={bpData.systolic.conceptUuid}
+              variant="cell"
+              patientUuid={patientUuid}
+            />
+          )}
+          <span style={{ margin: '0 -0.25rem' }}>/</span>
+          {bpData.diastolic && (
+            <NumericObservation
+              value={
+                bpData.diastolic.value !== null && bpData.diastolic.value !== undefined
+                  ? String(bpData.diastolic.value)
+                  : ''
+              }
+              interpretation={bpData.diastolic.interpretation}
+              conceptUuid={bpData.diastolic.conceptUuid}
+              variant="cell"
+              patientUuid={patientUuid}
+            />
+          )}
+        </div>
+      );
+    }
+
+    // Handle regular vitals
+    const vitalData = cellData as VitalCellData;
+    if (vitalData.value === null || vitalData.value === undefined) {
+      return <span>—</span>;
+    }
+
+    return (
+      <NumericObservation
+        value={String(vitalData.value)}
+        interpretation={vitalData.interpretation}
+        conceptUuid={vitalData.conceptUuid}
+        variant="cell"
+        patientUuid={patientUuid}
+      />
+    );
+  };
+
+  const createRowData = (encounter: Encounter): VitalRowData => {
+    const vitalsMap = encounter.obs.reduce(
+      (acc, obs) => {
+        acc[obs.concept.uuid] = obs.value;
+        return acc;
+      },
+      {} as Record<string, number | string | object | null>,
+    );
+
+    const providerName = encounter.encounterProviders?.[0]?.provider?.person?.display || '—';
+
+    return {
+      id: encounter.uuid,
+      date: dayjs(encounter.encounterDatetime).format('DD/MM/YYYY HH:mm'),
+      bp: {
+        systolic: createVitalCellData(vitalsMap[vitalsConcepts.systolic]),
+        diastolic: createVitalCellData(vitalsMap[vitalsConcepts.diastolic]),
+      },
+      pulse: createVitalCellData(vitalsMap[vitalsConcepts.pulse]),
+      temperature: createVitalCellData(vitalsMap[vitalsConcepts.temperature]),
+      oxygenSaturation: createVitalCellData(
+        vitalsMap[vitalsConcepts.oxygenSaturation],
+        vitalsConcepts.oxygenSaturation,
+      ),
+      respiratoryRate: createVitalCellData(vitalsMap[vitalsConcepts.respiratoryRate]),
+      hemoglobin: createVitalCellData(vitalsMap[vitalsConcepts.hemoglobin]),
+      glucose: createVitalCellData(vitalsMap[vitalsConcepts.glucose]),
+      fhr: createVitalCellData(vitalsMap[vitalsConcepts.fhr]),
+      secondFhr: createVitalCellData(vitalsMap[vitalsConcepts.secondFhr]),
+      provider: providerName,
+    };
+  };
+
+  const { data: vitalsData, error } = useOpenmrsFetchAll<Encounter>(
+    `${restBaseUrl}/encounter?patient=${patientUuid}&visit=${visitUuid}&order=desc&v=${customRepresentation}`,
+  );
+
+  const encounters: Encounter[] = vitalsData || [];
+
+  // Filter encounters to only include those with vitals observations
+  const encountersWithVitals = encounters.filter((encounter) => {
+    return encounter.obs.some((obs) => Object.values(vitalsConcepts).includes(obs.concept.uuid));
+  });
+
+  // Process each encounter to extract vital signs
+  const tableRows = useMemo(
+    () => encountersWithVitals.map(createRowData),
+    [encountersWithVitals, vitalsConcepts, referenceRangeMap],
+  );
+
+  const pageSize = 5;
+  const { results: paginatedVitals, currentPage, goTo } = usePagination(tableRows, pageSize);
+
+  const displayedRows = showAll ? tableRows : paginatedVitals;
+
+  if (error) {
+    return <div>{t('errorLoadingVitals', 'Error loading vitals')}</div>;
+  }
+
+  if (!vitalsData) {
+    return <div>{t('loadingVitals', 'Loading vitals...')}</div>;
+  }
+
+  const tableHeaders = [
+    { key: 'date', header: t('date', 'Date') },
+    ...vitalColumns.map((col) => ({ key: col.key, header: col.label })),
+    { key: 'provider', header: t('provider', 'Provider') },
+  ];
+
+  return (
+    <>
+      <DataTable headers={tableHeaders} rows={displayedRows} size="sm" useZebraStyles>
+        {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
+          <TableContainer>
+            <Table {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader {...getHeaderProps({ header })} key={header.key}>
+                      {header.header}
+                    </TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row) => {
+                  const rowData = displayedRows.find((r) => r.id === row.id) as VitalRowData | undefined;
+
+                  return (
+                    <TableRow {...getRowProps({ row })} key={row.id}>
+                      {row.cells.map((cell) => {
+                        if (cell.info.header === 'date' || cell.info.header === 'provider') {
+                          return <TableCell key={cell.id}>{cell.value}</TableCell>;
+                        }
+
+                        const columnKey = cell.info.header as VitalColumnKey;
+                        const cellValue = rowData?.[columnKey];
+
+                        return (
+                          <TableCell key={cell.id} style={{ padding: 0 }}>
+                            {renderVitalCell(cellValue)}
+                          </TableCell>
+                        );
+                      })}
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '1rem' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginLeft: '1rem' }}>
+          <span style={{ fontSize: '0.875rem', color: '#6f6f6f' }}>
+            {displayedRows.length} / {tableRows.length} {t('items', 'items')}
+          </span>
+          <Button kind="ghost" size="sm" onClick={() => setShowAll(!showAll)}>
+            {showAll ? t('showPaginated', 'Show Paginated') : t('showAll', 'Show All')}
+          </Button>
+        </div>
+        {!showAll && (
+          <Pagination
+            pageNumber={currentPage}
+            totalItems={tableRows.length}
+            currentItems={paginatedVitals.length}
+            pageSize={pageSize}
+            onPageNumberChange={({ page }) => goTo(page)}
+          />
+        )}
+      </div>
+    </>
+  );
+};
+
+export default VitalsTable;

package/src/ward-app/inborn-outborn-tag-row.extension.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import classNames from 'classnames';
+import { useParams } from 'react-router-dom';
+import { type Visit, useSession } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { useVisitAttribute } from '../hooks/useVisitAttribute';
+import styles from './inborn-outborn-tag-row.scss';
+
+/**
+ * Stable, non-module class on the badge so card headers can reserve space for it via a `:has()`
+ * sibling rule in openmrs-esm-patient-management (see ward-patient-card.scss /
+ * admission-request-card.scss). This class is the cross-package contract between the extension slot
+ * and the host card layout — keep it in sync with the selectors there.
+ */
+const BADGE_MARKER_CLASS = 'ward-inborn-outborn-badge';
+
+/**
+ * UUID of the visit attribute type that records whether the patient was born in this
+ * facility (Inborn) or referred from elsewhere (Outborn).
+ */
+const INBORN_OUTBORN_ATTRIBUTE_TYPE_UUID = '86f716fc-5e26-4eb1-9484-46370cff28f0';
+
+/**
+ * UUID of the NICU ward location. The Inborn/Outborn badge is only relevant on the NICU ward, so the
+ * extension renders nothing on any other ward.
+ */
+const NICU_LOCATION_UUID = '0ce2f6fb-6850-11ee-ab8d-0242ac120002';
+
+interface InbornOutbornTagRowProps {
+  /** The active visit, supplied by the extension slot's state. */
+  visit: Visit;
+}
+
+/**
+ * InbornOutbornTagRow displays a tag indicating the patient's place of birth relative to this
+ * facility, based on a boolean visit attribute on the active visit. The patient is considered
+ * "Inborn" (born here) only when the attribute's value is `true`; in every other case (the value is
+ * false, or the visit has no such attribute) they default to "Outborn" (referred in).
+ *
+ * This is a PIH-specific extension slotted into the maternal ward cards of
+ * openmrs-esm-patient-management via `maternal-ward-patient-card-header-slot`. The default visit
+ * representation used by the ward hooks does not include attribute values, so the value is fetched
+ * on demand via {@link useVisitAttribute}. Following the NICU patient card design, the badge renders
+ * as a rounded pill pinned to the top-right corner of the card: blue for Inborn, purple for Outborn.
+ * The badge is scoped to the NICU ward only (see {@link NICU_LOCATION_UUID}).
+ */
+const InbornOutbornTagRow: React.FC<InbornOutbornTagRowProps> = ({ visit }) => {
+  const { t } = useTranslation();
+  const { value, isLoading } = useVisitAttribute(visit?.uuid, INBORN_OUTBORN_ATTRIBUTE_TYPE_UUID);
+  // Resolve the ward being viewed the same way esm-ward-app does: the location UUID comes from the
+  // ward route (`.../ward/:locationUuid`), falling back to the session location when unset.
+  const { locationUuid } = useParams();
+  const { sessionLocation } = useSession();
+  const wardLocationUuid = locationUuid ?? sessionLocation?.uuid;
+
+  // Only show the badge on the NICU ward.
+  if (wardLocationUuid !== NICU_LOCATION_UUID) {
+    return null;
+  }
+
+  // Avoid flashing a (default) Outborn badge before the attribute value has loaded.
+  if (isLoading) {
+    return null;
+  }
+
+  const isInborn = value === true;
+
+  return (
+    <div className={classNames(styles.inbornOutbornBadge, BADGE_MARKER_CLASS)}>
+      {isInborn ? (
+        <span className={classNames(styles.badge, styles.inborn)}>{t('inborn', 'Inborn')}</span>
+      ) : (
+        <span className={classNames(styles.badge, styles.outborn)}>{t('outborn', 'Outborn')}</span>
+      )}
+    </div>
+  );
+};
+
+export default InbornOutbornTagRow;

package/src/ward-app/inborn-outborn-tag-row.scss

@@ -0,0 +1,57 @@
+@use '@carbon/layout';
+
+/**
+ * The extension slot wrapper and its inner `Extension` wrapper are both hardcoded to
+ * `position: relative` by @openmrs/esm-framework, which would otherwise trap the absolutely
+ * positioned badge inside that small in-flow wrapper box instead of the card. `display: contents`
+ * removes those wrapper boxes from layout so the badge anchors to the `position: relative` card and
+ * pins to its top-right corner. (Sibling/`:has()` selectors still match — `display: contents` only
+ * affects box generation, not the DOM tree.)
+ */
+:global {
+  [data-extension-slot-name='maternal-ward-patient-card-header-slot'],
+  [data-extension-slot-name='maternal-ward-patient-card-header-slot'] [data-extension-id] {
+    display: contents;
+  }
+}
+
+/**
+ * Inborn/Outborn origin badge, rendered as a rounded pill pinned to the top-right corner of the
+ * patient card (per the NICU patient card design). The card container is `position: relative`, so
+ * the badge positions against the whole card regardless of where it sits in the DOM (including when
+ * it is injected through an extension slot).
+ */
+.inbornOutbornBadge {
+  position: absolute;
+  top: 0.875rem; // 14px, matches the design
+  right: 0.875rem;
+  z-index: 2; // sit above the card's clickable overlay (::before, z-index 1)
+  margin: 0 !important; // neutralize blanket child margins applied by some card containers
+  pointer-events: none; // let clicks fall through to the underlying card button
+}
+
+// The origin badge, rendered as the design's fully-rounded pill.
+.badge {
+  display: inline-flex;
+  align-items: center;
+  height: 1.5rem; // 24px
+  min-height: 1.5rem;
+  padding: 0 0.75rem; // 12px
+  border-radius: 62.5rem;
+  font-size: 0.75rem; // 12px, matches Carbon tag
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+// Inborn: blue (matches the former Carbon `blue` tag colors).
+.inborn {
+  background-color: #d0e2ff;
+  color: #0043ce;
+}
+
+// Outborn: purple (matches the former Carbon `purple` tag colors).
+.outborn {
+  background-color: #e8daff;
+  color: #6929c4;
+}

package/src/ward-app/o2-iframe.component.tsx

@@ -1,9 +1,9 @@
 import { ArrowLeft } from '@carbon/react/icons';
 
-import React, { useCallback, useMemo, useRef, useState } from 'react';
-import styles from './o2-iframe.scss';
 import { IconButton, InlineLoading } from '@carbon/react';
+import React, { useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import styles from './o2-iframe.scss';
 
 interface O2IFrame {
   src: string;
@@ -16,9 +16,14 @@ interface O2IFrame {
    * a list of css selectors defining elements to be made un-clickable within the iframe
    */
   elementsToDisable?: string[];
+
+  /**
+   * JavaScript code to inject into the iframe to run
+   */
+  customJavaScript?: string;
 }
 
-const O2IFrame: React.FC<O2IFrame> = ({ src, elementsToHide, elementsToDisable }) => {
+const O2IFrame: React.FC<O2IFrame> = ({ src, elementsToHide, elementsToDisable, customJavaScript = '' }) => {
   const iframeRef = useRef<HTMLIFrameElement>();
   const [isIframeLoading, setIsIframeLoading] = useState(true);
   const [isGoingBack, setIsGoingBack] = useState(false);
@@ -32,7 +37,7 @@ const O2IFrame: React.FC<O2IFrame> = ({ src, elementsToHide, elementsToDisable }
 
     return `@media screen {
         ${toHide}
-        ${toDisable}
+        ${toDisable} 
       }`;
   }, [elementsToHide, elementsToDisable]);
 
@@ -48,6 +53,10 @@ const O2IFrame: React.FC<O2IFrame> = ({ src, elementsToHide, elementsToDisable }
     const styleTag = contentDocument.createElement('style');
     styleTag.innerHTML = customCss;
     contentDocument.head.appendChild(styleTag);
+
+    const scriptTag = contentDocument.createElement('script');
+    scriptTag.innerHTML = customJavaScript;
+    contentDocument.body.appendChild(scriptTag);
   };
 
   const goBack = () => {

package/src/ward-app/o2-pregnancy-infant-dashboard.extension.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useActivePatientEnrollment } from '../hooks/useProgramEnrollment';
 import O2IFrame from './o2-iframe.component';
+import styles from './o2-pregnancy-infant-dashboard.scss';
 
 /**
  * Extension to display either the O2 pregnancy program or infant program dashboard,
@@ -30,6 +31,9 @@ const O2PregnancyInfantProgramDashboard: React.FC<{ patientUuid: string }> = ({
     '.pregnancy\\.dashboard\\.ancFollowupEncounters',
     '.pregnancy\\.dashboard\\.riskFactors a.right',
     '.pregnancy\\.dashboard\\.temperature a.right',
+    '.pregnancy\\.dashboard\\.postpartumDailyProgressEncounters',
+    '.pregnancy\\.dashboard\\.laborAndDeliverySummaryEncounters',
+    '.pregnancy\\.dashboard\\.maternalAdmissionEncounters',
     '.patient-location',
     '.pregnancy\\.dashboard\\.currentEnrollment',
     '.infant\\.dashboard\\.newbornAssesmentEncounters',
@@ -48,19 +52,34 @@ const O2PregnancyInfantProgramDashboard: React.FC<{ patientUuid: string }> = ({
   if (isLoading) {
     return <InlineLoading />;
   } else if (inInfantProgram) {
-    const src = `${window.openmrsBase}/coreapps/clinicianfacing/patient.page?patientId=${patientUuid}&dashboard=${infantProgramUuid}`;
-    return <O2IFrame key={patientUuid} {...{ src, elementsToDisable, elementsToHide }} />;
+    const infantProgramUrl = `${window.openmrsBase}/coreapps/clinicianfacing/patient.page?patientId=${patientUuid}&dashboard=${infantProgramUuid}`;
+    return (
+      <>
+        <div className={styles.patientChartLinkContainer}>
+          <a href={infantProgramUrl}>{t('fullInfantDashboard', 'Full Infant Dashboard')}</a>
+        </div>
+        <O2IFrame key={patientUuid} {...{ src: infantProgramUrl, elementsToDisable, elementsToHide }} />
+      </>
+    );
   } else if (inPregnancyProgram) {
-    const src = `${window.openmrsBase}/coreapps/clinicianfacing/patient.page?patientId=${patientUuid}&dashboard=${pregnancyProgramUuid}`;
-    return <O2IFrame key={patientUuid} {...{ src, elementsToDisable, elementsToHide }} />;
+    const pregnancyProgramUrl = `${window.openmrsBase}/coreapps/clinicianfacing/patient.page?patientId=${patientUuid}&dashboard=${pregnancyProgramUuid}`;
+    return (
+      <>
+        <div className={styles.patientChartLinkContainer}>
+          <a href={pregnancyProgramUrl}>{t('fullPregnancyDashboard', 'Full Pregnancy Dashboard')}</a>
+        </div>
+        <O2IFrame key={patientUuid} {...{ src: pregnancyProgramUrl, elementsToDisable, elementsToHide }} />
+      </>
+    );
   } else {
+    const patientChartUrl = `${window.openmrsBase}/coreapps/clinicianfacing/patient.page?patientId=${patientUuid}`;
     return (
-      <div>
-        {t(
-          'patientNotEnrolledInInfantOrPregnancyProgram',
-          'Patient not enrolled in either Infant or Pregnancy Program',
-        )}
-      </div>
+      <>
+        <div className={styles.patientChartLinkContainer}>
+          <a href={patientChartUrl}>{t('fullPatientChart', 'Full Patient Chart')}</a>
+        </div>
+        <O2IFrame key={patientUuid} {...{ src: patientChartUrl, elementsToDisable, elementsToHide }} />
+      </>
     );
   }
 };

package/src/ward-app/o2-pregnancy-infant-dashboard.scss

@@ -0,0 +1,5 @@
+@use '@carbon/layout';
+
+.patientChartLinkContainer {
+  padding: layout.$spacing-05;
+}

package/src/ward-app/o2-visit-summary-action-button.component.tsx

@@ -0,0 +1,17 @@
+import { ActionMenuButton2, CalendarHeatMapIcon } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+export default function WardPatientActionButton() {
+  const { t } = useTranslation();
+
+  return (
+    <ActionMenuButton2
+      icon={(props) => <CalendarHeatMapIcon {...props} />}
+      label={t('visitSummary', 'Visit summary')}
+      workspaceToLaunch={{
+        workspaceName: 'o2-visit-summary-workspace',
+      }}
+    />
+  );
+}