(feat) O3-3604: Add notes history section on inpatient notes workspace

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

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { type Encounter, type Bed } from '../types';
+import { type Bed, type Encounter } from '../types';
 import { WardPatientCardElement } from './ward-patient-card-element.component';
 import { useCurrentWardCardConfig } from '../hooks/useCurrentWardCardConfig';
 import styles from './ward-patient-card.scss';

packages/esm-ward-app/src/ward-workspace/ward-patient-notes/form/notes-form.component.tsx

@@ -13,7 +13,7 @@ import {
   translateFrom,
   useSession,
 } from '@openmrs/esm-framework';
-import { savePatientNote } from './notes-form.resource';
+import { savePatientNote } from '../notes.resource';
 import styles from './notes-form.scss';
 import { moduleName } from '../../../constant';
 import useEmrConfiguration from '../../../hooks/useEmrConfiguration';

packages/esm-ward-app/src/ward-workspace/ward-patient-notes/form/notes-form.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
 import { createErrorHandler, ResponsiveWrapper, showSnackbar, translateFrom, useSession } from '@openmrs/esm-framework';
-import { savePatientNote } from './notes-form.resource';
+import { savePatientNote } from '../notes.resource';
 import PatientNotesForm from './notes-form.component';
 import { emrConfigurationMock, mockPatient, mockSession } from '__mocks__';
 import useEmrConfiguration from '../../../hooks/useEmrConfiguration';
@@ -24,7 +24,7 @@ const mockedTranslateFrom = jest.mocked(translateFrom);
 const mockedResponsiveWrapper = jest.mocked(ResponsiveWrapper);
 const mockedUseSession = jest.mocked(useSession);
 
-jest.mock('./notes-form.resource', () => ({
+jest.mock('../notes.resource', () => ({
   savePatientNote: jest.fn(),
 }));
 

packages/esm-ward-app/src/ward-workspace/ward-patient-notes/history/note.component.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { type PatientNote } from '../types';
+import { SkeletonText, Tag, Tile } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import dayjs from 'dayjs';
+import styles from './styles.scss';
+
+export const InPatientNoteSkeleton: React.FC = () => {
+  return (
+    <Tile className={styles.noteTile} data-testid="in-patient-note-skeleton">
+      <div className={styles.noteHeader}>
+        <SkeletonText heading width="30%" />
+        <SkeletonText width="20%" />
+      </div>
+      <SkeletonText width="15%" />
+      <SkeletonText width="100%" />
+      <SkeletonText width="80%" />
+    </Tile>
+  );
+};
+
+interface InPatientNoteProps {
+  note: PatientNote;
+}
+
+const InPatientNote: React.FC<InPatientNoteProps> = ({ note }) => {
+  const { t } = useTranslation();
+  const formattedDate = note.encounterNoteRecordedAt
+    ? dayjs(note.encounterNoteRecordedAt).format('dddd, D MMM YYYY')
+    : '';
+  const formattedTime = note.encounterNoteRecordedAt ? dayjs(note.encounterNoteRecordedAt).format('HH:mm') : '';
+
+  return (
+    <Tile className={styles.noteTile}>
+      <div className={styles.noteHeader}>
+        <span className={styles.noteProviderRole}>{t('note', 'Note')}</span>
+        <span className={styles.noteDateAndTime}>
+          {formattedDate}, {formattedTime}
+        </span>
+      </div>
+      {note.diagnoses &&
+        note.diagnoses.split(',').map((diagnosis, index) => (
+          <Tag key={index} type="red">
+            {diagnosis.trim()}
+          </Tag>
+        ))}
+      <div className={styles.noteBody}>{note.encounterNote}</div>
+      <div className={styles.noteProviderName}>{note.encounterProvider}</div>
+    </Tile>
+  );
+};
+
+export default InPatientNote;

packages/esm-ward-app/src/ward-workspace/ward-patient-notes/history/notes-container.component.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { type PatientUuid } from '@openmrs/esm-framework';
+import { usePatientNotes } from '../notes.resource';
+import InPatientNote, { InPatientNoteSkeleton } from './note.component';
+import styles from './styles.scss';
+import { InlineNotification } from '@carbon/react';
+import useEmrConfiguration from '../../../hooks/useEmrConfiguration';
+
+interface PatientNotesHistoryProps {
+  patientUuid: PatientUuid;
+}
+
+const PatientNotesHistory: React.FC<PatientNotesHistoryProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  const { emrConfiguration, isLoadingEmrConfiguration, errorFetchingEmrConfiguration } = useEmrConfiguration();
+
+  const { patientNotes, isLoadingPatientNotes, errorFetchingPatientNotes } = usePatientNotes(
+    patientUuid,
+    emrConfiguration?.visitNoteEncounterType?.uuid,
+    emrConfiguration?.consultFreeTextCommentsConcept.uuid,
+  );
+
+  const isLoading = isLoadingPatientNotes || isLoadingEmrConfiguration;
+
+  if (!isLoading && patientNotes.length === 0 && !errorFetchingPatientNotes) return null;
+
+  return (
+    <div className={styles.notesContainer}>
+      <div className={styles.notesContainerHeader}>
+        <div className={styles.notesContainerTitle}>History</div>
+      </div>
+      {isLoading ? [1, 2, 3, 4].map((item, index) => <InPatientNoteSkeleton key={index} />) : null}
+      {patientNotes.map((patientNote) => (
+        <InPatientNote key={patientNote.id} note={patientNote} />
+      ))}
+      {errorFetchingPatientNotes && (
+        <InlineNotification
+          kind="error"
+          title={t('patientNotesDidntLoad', "Patient notes didn't load")}
+          subtitle={t(
+            'fetchingPatientNotesFailed',
+            'Fetching patient notes failed. Try refreshing the page or contact your system administrator.',
+          )}
+          lowContrast
+          hideCloseButton
+        />
+      )}
+    </div>
+  );
+};
+
+export default PatientNotesHistory;

packages/esm-ward-app/src/ward-workspace/ward-patient-notes/history/notes-container.test.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import PatientNotesHistory from './notes-container.component';
+import { usePatientNotes } from '../notes.resource';
+import useEmrConfiguration from '../../../hooks/useEmrConfiguration';
+import { emrConfigurationMock } from '__mocks__';
+
+const mockedUseEmrConfiguration = jest.mocked(useEmrConfiguration);
+
+jest.mock('../../../hooks/useEmrConfiguration', () => jest.fn());
+
+jest.mock('../notes.resource', () => ({
+  usePatientNotes: jest.fn(),
+}));
+
+const mockPatientUuid = 'sample-patient-uuid';
+
+const mockPatientNotes = [
+  {
+    id: 'note-1',
+    diagnoses: '',
+    encounterDate: '2024-08-01',
+    encounterNote: 'Patient shows improvement with current medication.',
+    encounterNoteRecordedAt: '2024-08-01T12:34:56Z',
+    encounterProvider: 'Dr. John Doe',
+    encounterProviderRole: 'Endocrinologist',
+  },
+  {
+    id: 'note-2',
+    diagnoses: '',
+    encounterDate: '2024-08-02',
+    encounterNote: 'Blood pressure is slightly elevated. Consider adjusting medication.',
+    encounterNoteRecordedAt: '2024-08-02T14:22:00Z',
+    encounterProvider: 'Dr. Jane Smith',
+    encounterProviderRole: 'Cardiologist',
+  },
+];
+
+describe('PatientNotesHistory', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  test('displays loading skeletons when loading', () => {
+    mockedUseEmrConfiguration.mockReturnValue({
+      emrConfiguration: emrConfigurationMock,
+      mutateEmrConfiguration: jest.fn(),
+      isLoadingEmrConfiguration: false,
+      errorFetchingEmrConfiguration: null,
+    });
+
+    usePatientNotes.mockReturnValue({
+      patientNotes: [],
+      isLoadingPatientNotes: true,
+    });
+
+    render(<PatientNotesHistory patientUuid={mockPatientUuid} />);
+
+    expect(screen.getAllByTestId('in-patient-note-skeleton')).toHaveLength(4);
+  });
+
+  test('displays patient notes when available', () => {
+    mockedUseEmrConfiguration.mockReturnValue({
+      emrConfiguration: emrConfigurationMock,
+      mutateEmrConfiguration: jest.fn(),
+      isLoadingEmrConfiguration: false,
+      errorFetchingEmrConfiguration: null,
+    });
+
+    usePatientNotes.mockReturnValue({
+      patientNotes: mockPatientNotes,
+      isLoadingPatientNotes: false,
+    });
+
+    render(<PatientNotesHistory patientUuid={mockPatientUuid} />);
+
+    expect(screen.getByText('History')).toBeInTheDocument();
+
+    expect(screen.getByText('Patient shows improvement with current medication.')).toBeInTheDocument();
+    expect(screen.getByText('Dr. John Doe')).toBeInTheDocument();
+    expect(screen.getByText('Blood pressure is slightly elevated. Consider adjusting medication.')).toBeInTheDocument();
+    expect(screen.getByText('Dr. Jane Smith')).toBeInTheDocument();
+  });
+});

packages/esm-ward-app/src/ward-workspace/ward-patient-notes/history/styles.scss

@@ -0,0 +1,62 @@
+@use '@carbon/layout';
+@use '@carbon/colors';
+@import '@carbon/styles/scss/type';
+@import '@openmrs/esm-styleguide/src/vars';
+
+.notesContainer {
+  margin: layout.$spacing-04;
+}
+
+.notesContainerHeader {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-02;
+}
+
+.notesContainerTitle {
+  font-weight: 600;
+  font-size: layout.$spacing-05;
+  color: #393939;
+}
+
+.noteTile {
+  padding: layout.$spacing-04;
+  margin-bottom: layout.$spacing-04;
+}
+
+.noteHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: layout.$spacing-04;
+}
+
+.noteProviderRole {
+  flex-grow: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: $text-02;
+}
+
+.noteBody {
+  font-size: 0.875rem;
+  color: $text-02;
+}
+
+.noteDateAndTime {
+  font-size: layout.$spacing-04;
+  color: $text-02;
+}
+
+.noteProviderName {
+  font-size: layout.$spacing-04;
+  margin-top: layout.$spacing-04;
+  color: $text-02;
+}
+
+.noteSkeletonContainer {
+  height: layout.$spacing-13;
+}

packages/esm-ward-app/src/ward-workspace/ward-patient-notes/notes.resource.ts

@@ -0,0 +1,66 @@
+import { type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { type PatientNote, type UsePatientNotes, type VisitEncountersFetchResponse } from './types';
+import { type EncounterPayload } from '../../types';
+import { useMemo } from 'react';
+
+export function savePatientNote(payload: EncounterPayload, abortController: AbortController = new AbortController()) {
+  return openmrsFetch(`${restBaseUrl}/encounter`, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+    body: payload,
+    signal: abortController.signal,
+  });
+}
+
+export function usePatientNotes(patientUuid: string, encounterType: string, conceptUuid: string): UsePatientNotes {
+  const customRepresentation =
+    'custom:(uuid,display,encounterDatetime,patient,obs,' +
+    'encounterProviders:(uuid,display,' +
+    'encounterRole:(uuid,display),' +
+    'provider:(uuid,person:(uuid,display))),' +
+    'diagnoses';
+  const encountersApiUrl = `${restBaseUrl}/encounter?patient=${patientUuid}&encounterType=${encounterType}&v=${customRepresentation}`;
+
+  const { data, error, isLoading, isValidating, mutate } = useSWR<FetchResponse<VisitEncountersFetchResponse>, Error>(
+    patientUuid && encounterType ? encountersApiUrl : null,
+    openmrsFetch,
+  );
+
+  const patientNotes: Array<PatientNote> | null = useMemo(
+    () =>
+      data
+        ? data.data.results
+            .map((encounter) => {
+              const noteObs = encounter.obs.find((obs) => obs.concept.uuid === conceptUuid);
+
+              return {
+                id: encounter.uuid,
+                diagnoses: encounter.diagnoses.map((d) => d.display).join(', '),
+                encounterDate: encounter.encounterDatetime,
+                encounterNote: noteObs ? noteObs.value : '',
+                encounterNoteRecordedAt: noteObs ? noteObs.obsDatetime : '',
+                encounterProvider: encounter.encounterProviders.map((ep) => ep.provider.person.display).join(', '),
+                encounterProviderRole: encounter.encounterProviders.map((ep) => ep.encounterRole.display).join(', '),
+              };
+            })
+            .sort(
+              (a, b) => new Date(b.encounterNoteRecordedAt).getTime() - new Date(a.encounterNoteRecordedAt).getTime(),
+            )
+        : [],
+    [data, conceptUuid],
+  );
+
+  return useMemo(
+    () => ({
+      patientNotes,
+      errorFetchingPatientNotes: error,
+      isLoadingPatientNotes: isLoading,
+      isValidatingPatientNotes: isValidating,
+      mutatePatientNotes: mutate,
+    }),
+    [patientNotes, isLoading, isValidating, mutate, error],
+  );
+}