@palladium-ethiopia/esm-clinical-workflow-app 5.4.2-pre.26 → 5.4.2-pre.31

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":"^2.24.0"},"pages":[],"extensions":[{"name":"clinical-workflow-triage-dashboard-link","component":"triageDashboardLink","slot":"homepage-dashboard-slot","order":0,"meta":{"name":"clinical-workflow-triage","slot":"clinical-workflow-triage-dashboard-slot","title":"clinical-workflow-triage"}},{"name":"clinical-workflow-triage-dashboard","component":"triageDashboard","slot":"clinical-workflow-triage-dashboard-slot"},{"name":"ewf-mru-dashboard-link","component":"mruLeftPanelLink","slot":"homepage-dashboard-slot","order":1,"meta":{"name":"mru","title":"MRU","path":"mru","slot":"mru-dashboard-slot"}},{"name":"ewf-mru-dashboard","component":"mruDashboard","slot":"mru-dashboard-slot","online":true,"offline":false},{"name":"patient-scoreboard-link","component":"patientScoreboardLink","slot":"homepage-dashboard-slot","order":1,"meta":{"name":"patient-scoreboard","title":"Patient Scoreboard","path":"patient-scoreboard","slot":"patient-scoreboard-slot"}},{"name":"patient-scoreboard","component":"patientScoreboard","slot":"patient-scoreboard-slot","online":true,"offline":false},{"name":"past-visits-detail-overview-shadow","slot":"patient-chart-encounters-dashboard-slot","component":"pastVisitsDetailOverviewShadow","order":0,"meta":{"title":"Visits","view":"visits"},"online":true,"offline":true}],"workspaces":[{"name":"triage-workspace","component":"triageWorkspace","title":"Triage Form","canMaximize":true,"type":"clinical-form"},{"name":"patient-registration-workspace","component":"patientRegistrationWorkspace","title":"Patient Registration","canMaximize":true,"type":"registration-form"},{"name":"billing-information-workspace","component":"billingInformationWorkspace","title":"Billing Information Workspace","type":"clinical-form"}],"workspaces2":[{"name":"clinical-workflow-patient-form-entry-workspace","component":"@openmrs/esm-patient-forms-app#exportedPatientFormEntryWorkspace","window":"clinical-workflow-window"},{"name":"visit-notes-form-shadow-workspace","component":"visitNotesFormWorkspace","window":"visit-note-shadow"}],"workspaceWindows2":[{"name":"clinical-workflow-window","group":"clinical-workflow-group","width":"wider","canMaximize":true},{"name":"visit-note-shadow","group":"patient-chart","icon":"visitNoteActionButton","order":3}],"workspaceGroups2":[{"name":"clinical-workflow-group","overlay":true,"persistence":"closable"}],"version":"5.4.2-pre.26"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":"^2.24.0"},"pages":[],"extensions":[{"name":"clinical-workflow-triage-dashboard-link","component":"triageDashboardLink","slot":"homepage-dashboard-slot","order":0,"meta":{"name":"clinical-workflow-triage","slot":"clinical-workflow-triage-dashboard-slot","title":"clinical-workflow-triage"}},{"name":"clinical-workflow-triage-dashboard","component":"triageDashboard","slot":"clinical-workflow-triage-dashboard-slot"},{"name":"ewf-mru-dashboard-link","component":"mruLeftPanelLink","slot":"homepage-dashboard-slot","order":1,"meta":{"name":"mru","title":"MRU","path":"mru","slot":"mru-dashboard-slot"}},{"name":"ewf-mru-dashboard","component":"mruDashboard","slot":"mru-dashboard-slot","online":true,"offline":false},{"name":"patient-scoreboard-link","component":"patientScoreboardLink","slot":"homepage-dashboard-slot","order":1,"meta":{"name":"patient-scoreboard","title":"Patient Scoreboard","path":"patient-scoreboard","slot":"patient-scoreboard-slot"}},{"name":"patient-scoreboard","component":"patientScoreboard","slot":"patient-scoreboard-slot","online":true,"offline":false},{"name":"past-visits-detail-overview-shadow","slot":"patient-chart-encounters-dashboard-slot","component":"pastVisitsDetailOverviewShadow","order":0,"meta":{"title":"Visits","view":"visits"},"online":true,"offline":true},{"name":"queue-table-transfer-column","component":"queueTableTransferColumn","slot":"queue-table-transfer-status-slot"},{"name":"transfer-notes-overview-widget","component":"transferNotesOverview","slot":"patient-chart-summary-dashboard-slot","meta":{"fullWidth":false},"order":6}],"workspaces":[{"name":"triage-workspace","component":"triageWorkspace","title":"Triage Form","canMaximize":true,"type":"clinical-form"},{"name":"patient-registration-workspace","component":"patientRegistrationWorkspace","title":"Patient Registration","canMaximize":true,"type":"registration-form"},{"name":"billing-information-workspace","component":"billingInformationWorkspace","title":"Billing Information Workspace","type":"clinical-form"}],"workspaces2":[{"name":"clinical-workflow-patient-form-entry-workspace","component":"@openmrs/esm-patient-forms-app#exportedPatientFormEntryWorkspace","window":"clinical-workflow-window"},{"name":"patient-transfer-form-entry-workspace","component":"@openmrs/esm-patient-forms-app#exportedPatientFormEntryWorkspace","window":"patient-transfer"},{"name":"visit-notes-form-shadow-workspace","component":"visitNotesFormWorkspace","window":"visit-note-shadow"}],"workspaceWindows2":[{"name":"clinical-workflow-window","group":"clinical-workflow-group","width":"wider","canMaximize":true},{"name":"visit-note-shadow","group":"patient-chart","icon":"visitNoteActionButton","order":3},{"name":"patient-transfer","group":"patient-chart","icon":"patientTransferActionButton","order":4,"width":"wider","canMaximize":true}],"workspaceGroups2":[{"name":"clinical-workflow-group","overlay":true,"persistence":"closable"}],"modals":[{"name":"confirm-transfer-dialog","component":"confirmTransferDialog"},{"name":"patient-transfer-details-modal","component":"patientTransferDetailsModal"}],"version":"5.4.2-pre.31"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@palladium-ethiopia/esm-clinical-workflow-app",
-  "version": "5.4.2-pre.26",
+  "version": "5.4.2-pre.31",
   "description": "Express workflow app for OpenMRS 3",
   "keywords": [
     "openmrs",

package/src/config-schema.ts

@@ -95,6 +95,21 @@ export const configSchema = {
     _description: "UUID for the 'Drug' order type to fetch medications",
     _default: '131168f4-15f5-102d-96e4-000c29c2a5d7',
   },
+  patientTransferFormUuid: {
+    _type: Type.UUID,
+    _description: 'UUID of the patient transfer form',
+    _default: '94d5788f-6aaf-4ef6-b56e-1c71749cfa3e',
+  },
+  transferEncounterTypeUuid: {
+    _type: Type.UUID,
+    _description: 'UUID of the Intra-Hospital Transfer encounter type',
+    _default: '7b68d557-85ef-4fc8-b767-4fa4f5eb5c23',
+  },
+  transferNoteConceptUuid: {
+    _type: Type.UUID,
+    _description: 'UUID of the Transfer Note concept',
+    _default: 'f4162fe3-f7e3-4062-9bb3-aa1a4b1044a5',
+  },
 };
 
 export type ClinicalWorkflowConfig = {
@@ -115,6 +130,9 @@ export type ClinicalWorkflowConfig = {
   identifierSourceUuid: string;
   defaultIdentifierTypeUuid: string;
   medicoLegalCasesAttributeTypeUuid: string;
+  patientTransferFormUuid: string;
+  transferEncounterTypeUuid: string;
+  transferNoteConceptUuid: string;
 };
 
 export interface VisitNoteConfig {
@@ -164,4 +182,7 @@ export interface ChartConfig {
   }>;
   otherConceptUuid: string;
   drugOrderTypeUUID: string;
+  patientTransferFormUuid: string;
+  transferEncounterTypeUuid: string;
+  transferNoteConceptUuid: string;
 }

package/src/index.ts

@@ -7,6 +7,7 @@ import { spaBasePath } from './constants';
 import BillingInformationWorkspace from './mru/billing-information/billing-information.workspace';
 import PatientScoreboard from './patient-scoreboard/patient-scoreboard.component';
 import visitNotesActionButtonExtension from './patient-notes/visit-note-action-button.extension';
+import patientTransferActionButtonExtension from './patient-transfer/patient-transfer-action-button.extension';
 import pastVisitsOverviewComponent from './patient-chart/visit/visits-widget/visit-detail-overview.component';
 
 const moduleName = '@ethiopia/esm-clinical-workflow-app';
@@ -71,6 +72,13 @@ export const patientScoreboard = getSyncLifecycle(PatientScoreboard, options);
 
 export const visitNoteActionButton = getSyncLifecycle(visitNotesActionButtonExtension, options);
 
+export const patientTransferActionButton = getSyncLifecycle(patientTransferActionButtonExtension, options);
+
+export const confirmTransferDialog = getAsyncLifecycle(
+  () => import('./patient-transfer/confirm-transfer-dialog.modal'),
+  options,
+);
+
 export const visitNotesFormWorkspace = getAsyncLifecycle(
   () => import('./patient-notes/visit-notes-form-shadow.workspace'),
   options,
@@ -80,3 +88,18 @@ export const pastVisitsDetailOverviewShadow = getSyncLifecycle(pastVisitsOvervie
   featureName: 'visits-detail-overview',
   moduleName,
 });
+
+export const queueTableTransferColumn = getAsyncLifecycle(
+  () => import('./patient-transfer/queue-table-transfer-column.component'),
+  options,
+);
+
+export const patientTransferDetailsModal = getAsyncLifecycle(
+  () => import('./patient-transfer/transfer-details.modal'),
+  options,
+);
+
+export const transferNotesOverview = getAsyncLifecycle(
+  () => import('./patient-transfer/transfer-notes-overview.extension'),
+  options,
+);

package/src/patient-chart/visit/visit-history-table/diagnosis-tags.module.scss

@@ -32,7 +32,7 @@
 .tagContent {
   display: flex;
   align-items: center;
-  gap: layout.$spacing-02; 
+  gap: layout.$spacing-02;
   width: 100%;
 }
 

package/src/patient-notes/visit-notes-form.scss

@@ -27,7 +27,7 @@
 
 .diagnosisList {
   background-color: colors.$white;
-  max-height: layout.rem(320px); 
+  max-height: layout.rem(320px);
   overflow-y: auto;
   border: 1px solid colors.$gray-20;
   display: flex;
@@ -160,10 +160,10 @@
 }
 
 .diagnoserrorOutline {
-  max-width: layout.rem(320px); 
+  max-width: layout.rem(320px);
 
   :global(.cds--search-input):focus {
-    outline: 2px solid colors.$red-60; 
+    outline: 2px solid colors.$red-60;
   }
 
   :global(.cds--search-magnifier) {
@@ -265,7 +265,7 @@
   border-radius: 2px;
   transition: all 0.1s ease;
   cursor: pointer;
-  min-height: layout.$spacing-08; 
+  min-height: layout.$spacing-08;
 
   &:hover {
     background-color: colors.$gray-10;
@@ -287,11 +287,11 @@
   min-width: layout.$spacing-07;
   flex-shrink: 0;
   padding: layout.$spacing-02 layout.$spacing-03;
-  height: layout.$spacing-07; 
+  height: layout.$spacing-07;
 }
 
 .certaintyDropdown {
-  position: relative; 
+  position: relative;
   z-index: 10;
   margin-top: layout.$spacing-02;
   background: colors.$white;
@@ -443,11 +443,11 @@
 
   .diagnosisRow {
     padding: layout.$spacing-03;
-    min-height: layout.$spacing-09; 
+    min-height: layout.$spacing-09;
   }
 
   .certaintyOption {
     padding: layout.$spacing-03;
     min-height: layout.$spacing-09;
   }
-}
+}

package/src/patient-transfer/confirm-transfer-dialog.modal.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { showModal, type Visit } from '@openmrs/esm-framework';
+
+interface ConfirmTransferDialogProps {
+  closeModal: () => void;
+  activeVisit: Visit;
+}
+
+const ConfirmTransferDialog: React.FC<ConfirmTransferDialogProps> = ({ closeModal, activeVisit }) => {
+  const { t } = useTranslation();
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  const handleConfirm = () => {
+    if (isProcessing) {
+      return;
+    }
+    setIsProcessing(true);
+
+    // 1. Initiate closing the current modal
+    closeModal();
+
+    // 2. The "Double Frame" Guarantee:
+    // First rAF: Wait for the close command to be acknowledged
+    window.requestAnimationFrame(() => {
+      // Second rAF: Wait for the browser to actually remove the element and repaint
+      window.requestAnimationFrame(() => {
+        const dispose = showModal('transition-patient-to-latest-queue-modal', {
+          activeVisit,
+          closeModal: () => {
+            setIsProcessing(false);
+            dispose();
+          },
+        });
+      });
+    });
+  };
+
+  return (
+    <>
+      <ModalHeader closeModal={closeModal}>{t('transferFormSaved', 'Patient transfer form saved')}</ModalHeader>
+      <ModalBody>
+        <p>{t('moveToQueueQuestion', 'Do you want to move the patient to a queue now?')}</p>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal} size="lg">
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button autoFocus kind="primary" onClick={handleConfirm} size="lg" disabled={isProcessing}>
+          {t('yesMoveToQueue', 'Yes, move to queue')}
+        </Button>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default ConfirmTransferDialog;

package/src/patient-transfer/patient-transfer-action-button.extension.tsx

@@ -0,0 +1,126 @@
+import React, { type ComponentProps, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ArrowsHorizontal } from '@carbon/react/icons';
+import { ActionMenuButton2, Encounter, launchWorkspace2, showModal, useConfig } from '@openmrs/esm-framework';
+import {
+  useStartVisitIfNeeded,
+  type PatientChartWorkspaceActionButtonProps,
+  type PatientWorkspaceGroupProps,
+} from '@openmrs/esm-patient-common-lib';
+import type { ClinicalWorkflowConfig } from '../config-schema';
+
+const PatientTransferActionButton: React.FC<PatientChartWorkspaceActionButtonProps> = (props) => {
+  const { t } = useTranslation();
+  const config = useConfig<ClinicalWorkflowConfig>();
+
+  const groupProps = props?.groupProps;
+  const patientUuid = groupProps?.patientUuid ?? '';
+  const patient = groupProps?.patient;
+  const visitContext = groupProps?.visitContext;
+  const mutateVisitContext = groupProps?.mutateVisitContext;
+  const transferFormUuid = config?.patientTransferFormUuid;
+
+  const startVisitIfNeeded = useStartVisitIfNeeded(patientUuid);
+
+  const handlePostResponse = useCallback(
+    (encounter: Encounter) => {
+      if (!visitContext) {
+        return;
+      }
+
+      // Show confirmation dialog asking if physician wants to move patient to queue
+      const dispose = showModal('confirm-transfer-dialog', {
+        activeVisit: visitContext,
+        closeModal: () => dispose(),
+      });
+    },
+    [visitContext],
+  );
+
+  const handleLaunchWorkspace = useCallback(async () => {
+    const didStartVisit = await startVisitIfNeeded();
+    if (!didStartVisit) {
+      return;
+    }
+
+    if (!visitContext?.uuid || !visitContext?.visitType?.uuid) {
+      console.error('Invalid visit context: visit UUID or visit type UUID is missing');
+      return;
+    }
+
+    if (!patient) {
+      console.error('Patient data is not available');
+      return;
+    }
+
+    launchWorkspace2<
+      {
+        form: { visitUuid: string; uuid: string; visitTypeUuid: string };
+        encounterUuid: string;
+        handlePostResponse?: (encounter: Encounter) => void;
+      },
+      {
+        patient: typeof patient;
+        patientUuid: string;
+        visitContext: typeof visitContext;
+        mutateVisitContext: typeof mutateVisitContext | null;
+      },
+      PatientWorkspaceGroupProps
+    >(
+      'patient-transfer-form-entry-workspace',
+      {
+        form: {
+          visitUuid: visitContext.uuid,
+          uuid: transferFormUuid ?? '',
+          visitTypeUuid: visitContext.visitType.uuid,
+        },
+        encounterUuid: '',
+        handlePostResponse,
+      },
+      {
+        patient: patient!,
+        patientUuid,
+        visitContext,
+        mutateVisitContext: mutateVisitContext || null,
+      },
+    );
+  }, [
+    patientUuid,
+    patient,
+    visitContext,
+    mutateVisitContext,
+    transferFormUuid,
+    handlePostResponse,
+    startVisitIfNeeded,
+  ]);
+
+  if (!groupProps?.patientUuid || !patient) {
+    return null;
+  }
+
+  return (
+    <ActionMenuButton2
+      icon={(iconProps: ComponentProps<typeof ArrowsHorizontal>) => <ArrowsHorizontal {...iconProps} />}
+      label={t('transferPatient', 'Transfer Patient')}
+      workspaceToLaunch={{
+        workspaceName: 'patient-form-entry-workspace' as const,
+        workspaceProps: {
+          form: {
+            uuid: transferFormUuid ?? '',
+            display: t('transferPatient', 'Transfer Patient'),
+            name: 'Transfer Patient',
+          },
+          encounterUuid: '',
+        },
+      }}
+      onBeforeWorkspaceLaunch={async () => {
+        handleLaunchWorkspace().catch((error) => {
+          console.error('Error launching transfer form workspace:', error);
+        });
+        return false;
+      }}
+    />
+  );
+};
+
+export default PatientTransferActionButton;

package/src/patient-transfer/queue-table-transfer-column.component.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Button, Tag } from '@carbon/react';
+import { showModal } from '@openmrs/esm-framework';
+import { useTransferData } from './transfer-data.resource';
+import type { QueueEntry } from '../types';
+
+interface QueueTableTransferColumnProps {
+  queueEntry: QueueEntry;
+}
+
+/**
+ * Queue table column component that displays transfer status
+ * and allows viewing transfer details in a modal
+ */
+const QueueTableTransferColumn: React.FC<QueueTableTransferColumnProps> = ({ queueEntry }) => {
+  const { transferData, isLoading } = useTransferData(queueEntry.visit?.uuid, queueEntry.patient?.uuid);
+
+  if (isLoading) {
+    return <span>...</span>;
+  }
+
+  if (!transferData) {
+    return <Tag type="gray">No Transfer</Tag>;
+  }
+
+  const handleViewTransfer = () => {
+    const dispose = showModal('patient-transfer-details-modal', {
+      transferData,
+      closeModal: () => dispose(),
+    });
+  };
+
+  return (
+    <Button kind="ghost" size="sm" onClick={handleViewTransfer}>
+      View Transfer
+    </Button>
+  );
+};
+
+export default QueueTableTransferColumn;

package/src/patient-transfer/transfer-data.resource.ts

@@ -0,0 +1,66 @@
+import { openmrsFetch, restBaseUrl, useConfig, type Encounter, type Obs } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { useMemo } from 'react';
+import type { ClinicalWorkflowConfig } from '../config-schema';
+
+export interface TransferData {
+  uuid: string;
+  encounterDatetime: string;
+  transferDate: string;
+  fromLocation: string;
+  note: string;
+}
+
+export function useTransferData(visitUuid: string, patientUuid: string) {
+  const config = useConfig<ClinicalWorkflowConfig>();
+  const { transferEncounterTypeUuid, transferNoteConceptUuid } = config;
+  const url = visitUuid
+    ? `${restBaseUrl}/encounter?patient=${patientUuid}&visit=${visitUuid}&encounterType=${transferEncounterTypeUuid}&v=custom:(uuid,encounterDatetime,location:(uuid,display),obs:(uuid,concept:(uuid,display),value,obsDatetime))`
+    : null;
+
+  const { data, error, isLoading } = useSWR<{ data: { results: Encounter[] } }>(url, openmrsFetch);
+
+  const transferData = useMemo(() => {
+    if (!data?.data?.results?.length) {
+      return null;
+    }
+
+    const sortedResults = data.data.results.sort(
+      (a, b) => new Date(b.encounterDatetime).getTime() - new Date(a.encounterDatetime).getTime(),
+    );
+    const transferEncounter = sortedResults[0];
+
+    return parseTransferEncounter(transferEncounter, transferNoteConceptUuid);
+  }, [data, transferNoteConceptUuid]);
+
+  return {
+    transferData,
+    isLoading,
+    error,
+  };
+}
+
+function parseTransferEncounter(encounter: Encounter, transferNoteConceptUuid: string): TransferData {
+  const obs = encounter.obs || [];
+
+  return {
+    uuid: encounter.uuid,
+    encounterDatetime: encounter.encounterDatetime,
+    transferDate: encounter.encounterDatetime,
+    fromLocation: encounter.location?.display || 'Not specified',
+    note: findObsValue(obs, transferNoteConceptUuid) || 'Not specified',
+  };
+}
+
+function findObsValue(obs: Obs[], conceptUuid: string): string {
+  const observation = obs.find((o) => o.concept?.uuid === conceptUuid);
+  if (!observation) {
+    return '';
+  }
+
+  if (typeof observation.value === 'object' && observation.value !== null) {
+    return (observation.value as any).display || String(observation.value);
+  }
+
+  return String(observation.value || '');
+}

package/src/patient-transfer/transfer-details.modal.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { ModalBody, ModalHeader, Button, ModalFooter } from '@carbon/react';
+import { formatDate, parseDate } from '@openmrs/esm-framework';
+import type { TransferData } from './transfer-data.resource';
+import styles from './transfer-details.scss';
+
+interface TransferDetailsModalProps {
+  transferData: TransferData;
+  closeModal: () => void;
+}
+
+const TransferDetailsModal: React.FC<TransferDetailsModalProps> = ({ transferData, closeModal }) => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <ModalHeader closeModal={closeModal} title={t('patientTransferInformation', 'Patient Transfer Information')} />
+      <ModalBody>
+        <div className={styles.container}>
+          <div style={{ marginBottom: '1rem' }}>
+            <strong>{t('transferDate', 'Transfer Date')}:</strong>{' '}
+            {formatDate(parseDate(transferData.transferDate), { mode: 'wide' })}
+          </div>
+          <div style={{ marginBottom: '1rem' }}>
+            <strong>{t('fromLocation', 'Transfer From')}:</strong> {transferData.fromLocation}
+          </div>
+          <div style={{ marginBottom: '1rem' }}>
+            <strong>{t('transferNote', 'Transfer Note')}:</strong> {transferData.note}
+          </div>
+        </div>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {t('close', 'Close')}
+        </Button>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default TransferDetailsModal;

package/src/patient-transfer/transfer-details.scss

@@ -0,0 +1,18 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.container {
+  padding: layout.$spacing-05;
+}
+
+.header {
+  margin-bottom: layout.$spacing-06;
+
+  h3 {
+    @include type.type-style('heading-03');
+    font-weight: 600;
+    margin: 0;
+  }
+}

package/src/patient-transfer/transfer-notes-overview.extension.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { DataTableSkeleton, InlineLoading } from '@carbon/react';
+import { useLayoutType } from '@openmrs/esm-framework';
+import { CardHeader, EmptyState, ErrorState, usePatientChartStore } from '@openmrs/esm-patient-common-lib';
+import { useTransferNotes } from './transfer-notes.resource';
+import TransferNotesTable from './transfer-notes-table.component';
+import styles from './transfer-notes-overview.scss';
+
+interface TransferNotesOverviewProps {
+  patientUuid: string;
+  patient: fhir.Patient;
+  basePath: string;
+}
+
+/**
+ * This extension displays transfer notes in the patient chart.
+ * It only shows transfer notes from the current visit.
+ * It uses the patient chart store and MUST only be mounted within the patient chart.
+ */
+const TransferNotesOverview: React.FC<TransferNotesOverviewProps> = ({ patientUuid, patient, basePath }) => {
+  const pageSize = 5;
+  const { t } = useTranslation();
+  const pageUrl = `\${openmrsSpaBase}/patient/${patient.id}/chart/Forms & Notes`;
+  const urlLabel = t('seeAll', 'See all');
+
+  // Get current visit from patient chart store
+  const { visitContext } = usePatientChartStore(patientUuid);
+  const visitUuid = visitContext?.uuid || null;
+
+  const displayText = t('transferNotes', 'Transfer notes');
+  const headerTitle = t('transferNotes', 'Transfer notes');
+  const { transferNotes, error, isLoading, isValidating } = useTransferNotes(patientUuid, visitUuid);
+  const layout = useLayoutType();
+  const isDesktop = layout === 'large-desktop' || layout === 'small-desktop';
+
+  // Don't show the widget if there's no current visit
+  if (!visitUuid) {
+    return null;
+  }
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" compact={isDesktop} zebra />;
+  }
+  if (error) {
+    return <ErrorState error={error} headerTitle={headerTitle} />;
+  }
+  // Only show the widget if there are transfer notes for the current visit
+  if (!transferNotes?.length) {
+    return null;
+  }
+
+  return (
+    <div className={styles.widgetCard}>
+      <CardHeader title={headerTitle}>
+        <span>{isValidating ? <InlineLoading /> : null}</span>
+      </CardHeader>
+      <TransferNotesTable notes={transferNotes} pageSize={pageSize} urlLabel={urlLabel} pageUrl={pageUrl} />
+    </div>
+  );
+};
+
+export default TransferNotesOverview;

package/src/patient-transfer/transfer-notes-overview.scss

@@ -0,0 +1,88 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.widgetCard {
+  background-color: $ui-background;
+  border: 1px solid colors.$gray-20;
+  position: relative;
+}
+
+.tableContainer {
+  padding: 0 layout.$spacing-05;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  margin: layout.$spacing-03;
+}
+
+.copy {
+  @include type.type-style('body-01');
+  display: flex;
+  flex-direction: column;
+}
+
+.content {
+  @include type.type-style('body-01');
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.observationRow {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: layout.$spacing-03;
+  padding-bottom: layout.$spacing-03;
+  border-bottom: 1px solid colors.$gray-20;
+
+  &:last-of-type {
+    margin-bottom: 0;
+    padding-bottom: 0;
+    border-bottom: none;
+  }
+}
+
+.observationLabel {
+  @include type.type-style('label-01');
+  font-weight: 600;
+  margin-bottom: layout.$spacing-02;
+  color: $text-02;
+  letter-spacing: 0.01em;
+}
+
+.observationValue {
+  @include type.type-style('body-01');
+  white-space: pre-wrap;
+  word-break: break-word;
+  line-height: 1.5;
+}
+
+.metadata {
+  @include type.type-style('label-01');
+  color: $text-02;
+  margin-top: layout.$spacing-05;
+  padding-top: layout.$spacing-03;
+  border-top: 1px solid colors.$gray-20;
+}
+
+.expandedRow {
+  > td {
+    padding-left: layout.$spacing-08 !important;
+  }
+
+  > td > div {
+    max-height: max-content !important;
+  }
+
+  th[colspan] td[colspan] > div:first-child {
+    padding: 0 layout.$spacing-05;
+  }
+}
+
+.hiddenRow {
+  display: none;
+}
+