@bathiran212/esm-patient-chart-app 7.0.0

package/src/visit/visits-widget/visit-detail-overview.component.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import { useConfig } from '@openmrs/esm-framework';
+import type { ChartConfig } from '../../config-schema';
+import AllEncountersTable from './past-visits-components/encounters-table/all-encounters-table.component';
+import CompletedFormsTable from './past-visits-components/encounters-table/completed-forms-table.component';
+import PatientNotesSummary from './past-visits-components/patient-notes-summary.component';
+import VisitHistoryTable from '../visit-history-table/visit-history-table.component';
+import styles from './visit-detail-overview.scss';
+
+interface VisitOverviewComponentProps {
+  patientUuid: string;
+  patient: fhir.Patient;
+}
+
+function VisitDetailOverviewComponent({ patientUuid, patient }: VisitOverviewComponentProps) {
+  const { t } = useTranslation();
+  const [tabIndex, setTabIndex] = useState(0);
+  const { showAllEncountersTab } = useConfig<ChartConfig>();
+
+  const completedFormsTabIndex = showAllEncountersTab ? 2 : 1;
+  const notesTabIndex = showAllEncountersTab ? 3 : 2;
+
+  return (
+    <div className={styles.tabs}>
+      <Tabs onChange={({ selectedIndex }) => setTabIndex(selectedIndex)} selectedIndex={tabIndex}>
+        <TabList aria-label="Visit detail tabs" className={styles.tabList}>
+          <Tab className={styles.tab} id="visit-summaries-tab">
+            {t('Visits', 'Visits')}
+          </Tab>
+          {showAllEncountersTab ? (
+            <Tab className={styles.tab} id="all-encounters-tab">
+              {t('allEncounters', 'All encounters')}
+            </Tab>
+          ) : (
+            <></>
+          )}
+          <Tab className={styles.tab} id="completed-forms-tab">
+            {t('completedForms', 'Completed forms')}
+          </Tab>
+          <Tab className={styles.tab} id="patient-notes-tab">
+            {t('notes', 'Notes')}
+          </Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            <VisitHistoryTable patientUuid={patientUuid} patient={patient} />
+          </TabPanel>
+          {showAllEncountersTab && (
+            <TabPanel>
+              <AllEncountersTable patientUuid={patientUuid} />
+            </TabPanel>
+          )}
+          <TabPanel>
+            <CompletedFormsTable patientUuid={patientUuid} isTabActive={tabIndex === completedFormsTabIndex} />
+          </TabPanel>
+          <TabPanel>
+            <PatientNotesSummary patientUuid={patientUuid} isTabActive={tabIndex === notesTabIndex} />
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </div>
+  );
+}
+
+export default VisitDetailOverviewComponent;

package/src/visit/visits-widget/visit-detail-overview.scss

@@ -0,0 +1,301 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.visitType {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: 5px;
+}
+
+.date {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+  padding-right: 0.625rem;
+}
+
+.dateLabel {
+  padding-right: 0.313rem;
+}
+
+.displayFlex {
+  display: flex;
+  align-items: center;
+  justify-content: left;
+}
+
+.container {
+  background-color: $ui-background;
+  border: 1px solid $grey-2;
+  padding: layout.$spacing-05;
+  margin: layout.$spacing-05 0 layout.$spacing-05;
+  width: 100%;
+}
+
+.tabs > :global(.cds--tab-content) {
+  padding: 0 0 !important;
+}
+
+.tabList {
+  position: sticky;
+  top: 3rem;
+  z-index: 10;
+  background-color: $ui-01;
+  box-shadow: inset 0 -2px 0 0 $ui-03;
+}
+
+.tab {
+  height: 2.5rem;
+
+  &:active,
+  &:focus {
+    outline: none !important;
+  }
+
+  &:global(.cds--tabs__nav-item--selected) {
+    border-bottom-color: var(--brand-03);
+  }
+}
+
+.patientNotesTabList {
+  background-color: $ui-01;
+  box-shadow: inset 0 -1px 0 0 $ui-03;
+
+  :global(.cds--tab--list) {
+    flex-direction: row;
+  }
+}
+
+.patientNotesTab {
+  height: 2.5rem;
+
+  &:active,
+  &:focus {
+    outline: none !important;
+  }
+
+  &:global(.cds--tabs__nav-item--selected) {
+    border-bottom-color: var(--brand-03);
+  }
+}
+
+.header {
+  .visitInfo {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+
+.header::after {
+  content: '';
+  display: block;
+  width: layout.$spacing-07;
+  padding-top: 0.188rem;
+  border-bottom: 0.375rem solid var(--brand-03);
+}
+
+.toggleButtons {
+  margin: 0 layout.$spacing-05;
+  height: layout.$spacing-08;
+}
+
+.toggle {
+  border: 1px solid colors.$blue-30;
+
+  &:hover {
+    background-color: $color-blue-10;
+  }
+
+  &:active,
+  &:focus {
+    box-shadow: none;
+    background-color: $color-blue-10;
+  }
+
+  &:first-of-type {
+    border-radius: layout.$spacing-02 0 0 layout.$spacing-02;
+  }
+
+  &:last-of-type {
+    border-radius: 0 layout.$spacing-02 layout.$spacing-02 0;
+  }
+}
+
+.emptyStateContainer {
+  text-align: center;
+  margin: layout.$spacing-05 0;
+}
+
+.observation {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: layout.$spacing-03;
+  margin: layout.$spacing-05 layout.$spacing-05 0 0;
+}
+
+.observation > span {
+  align-self: center;
+}
+
+.flexSections {
+  display: flex;
+}
+
+.desktopTabs {
+  button {
+    height: layout.$spacing-07;
+  }
+}
+
+.tabletTabs {
+  button {
+    height: layout.$spacing-09;
+  }
+}
+
+.tabContent {
+  border-top: 1px solid $ui-03;
+  padding: layout.$spacing-05 0;
+  width: 70%;
+}
+
+.medicationRecord {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .bodyLong01 {
+    gap: layout.$spacing-02;
+    margin: layout.$spacing-02 0;
+  }
+}
+
+.medicationContainer {
+  background-color: $ui-01;
+  padding: layout.$spacing-05;
+  width: 100% !important;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.medicationContainer > div {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.medicationContainer p {
+  margin: layout.$spacing-02 0;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.dosage {
+  @include type.type-style('heading-compact-01');
+}
+
+.toggleSwitch {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  margin-bottom: layout.$spacing-02;
+}
+
+.toggleSwitch div {
+  width: 30%;
+}
+
+.noteText {
+  background-color: $ui-01;
+  padding: layout.$spacing-05;
+  width: 100% !important;
+  white-space: pre-wrap;
+}
+
+.currentUserNoteText {
+  background-color: colors.$blue-10;
+  color: colors.$blue-70;
+}
+
+.currentUserNoteMetadata {
+  color: colors.$blue-70;
+}
+
+.notePreview {
+  display: block;
+  max-inline-size: 32rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.noteTableDetails {
+  padding: layout.$spacing-05 0;
+}
+
+.metadata {
+  @include type.type-style('label-01');
+  color: $text-02;
+  margin: layout.$spacing-03 0 layout.$spacing-05;
+}
+
+.observationsEmptyState {
+  margin-top: layout.$spacing-06;
+}
+
+.loader {
+  margin: 0 auto;
+}
+
+.notesContainer {
+  margin-bottom: layout.$spacing-07;
+}
+
+.visitDetailOverviewActions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.loadMoreButton {
+  :global(.cds--inline-loading) {
+    min-height: layout.$spacing-05 !important;
+  }
+
+  :global(.cds--inline-loading__text) {
+    font-size: unset !important;
+  }
+}
+
+.label01 {
+  @include type.type-style('label-01');
+}
+
+.tag {
+  margin: 0 layout.$spacing-02 0 !important;
+  text-transform: uppercase;
+}
+
+.text02 {
+  color: colors.$gray-70;
+}
+
+.bodyLong01 {
+  @include type.type-style('body-01');
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .header {
+    .visitInfo {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+}

package/src/visit/visits-widget/visit-detail-overview.test.tsx

@@ -0,0 +1,205 @@
+import React from 'react';
+import { vi, describe, it, expect, type Mock } from 'vitest';
+import { screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { getConfig, getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { mockEncounterTypes, visitOverviewDetailMockData } from '__mocks__';
+import { mockPatient, renderWithSwr, waitForLoadingToFinish } from 'tools';
+import { esmPatientChartSchema, type ChartConfig } from '../../config-schema';
+import VisitDetailOverview from './visit-detail-overview.component';
+import { usePaginatedVisits } from './visit.resource';
+import {
+  useEncounterTypes,
+  usePaginatedEncounters,
+  useAllEncounters,
+} from './past-visits-components/encounters-table/encounters-table.resource';
+
+const mockGetConfig = getConfig as Mock;
+const mockUseConfig = vi.mocked(useConfig<ChartConfig>);
+
+const mockUseAllEncounters = vi.fn(useAllEncounters).mockReturnValue({
+  data: [],
+  isLoading: false,
+  error: undefined,
+} as any);
+
+const mockPaginatedVisitsData: ReturnType<typeof usePaginatedVisits> = {
+  data: visitOverviewDetailMockData.data.results,
+  error: null,
+  mutate: vi.fn(),
+  isValidating: false,
+  isLoading: false,
+  totalPages: 1,
+  totalCount: 1,
+  currentPage: 1,
+  currentPageSize: { current: 10 },
+  paginated: false,
+  showNextButton: false,
+  showPreviousButton: false,
+  goTo: vi.fn(),
+  goToNext: vi.fn(),
+  goToPrevious: vi.fn(),
+};
+vi.mock('./visit.resource', async () => ({
+  ...((await vi.importActual('./visit.resource')) as object),
+  usePaginatedVisits: vi.fn().mockImplementation(() => mockPaginatedVisitsData),
+}));
+const mockUsePaginatedVisits = vi.mocked(usePaginatedVisits);
+
+const mockUsePaginatedEncounters = vi.fn(usePaginatedEncounters).mockReturnValue({
+  error: null,
+  mutate: vi.fn(),
+  isValidating: false,
+  isLoading: false,
+  data: [],
+  totalPages: 0,
+  totalCount: 0,
+  currentPage: 0,
+  currentPageSize: undefined,
+  paginated: false,
+  showNextButton: false,
+  showPreviousButton: false,
+  goTo: undefined,
+  goToNext: undefined,
+  goToPrevious: undefined,
+});
+
+const mockUseEncounterTypes = vi.fn(useEncounterTypes).mockReturnValue({
+  data: mockEncounterTypes,
+  totalCount: mockEncounterTypes.length,
+  hasMore: false,
+  loadMore: vi.fn(),
+  error: undefined,
+  mutate: vi.fn(),
+  isValidating: false,
+  isLoading: false,
+  nextUri: '',
+});
+
+vi.mock('./past-visits-components/encounters-table/encounters-table.resource', async () => ({
+  ...((await vi.importActual('./past-visits-components/encounters-table/encounters-table.resource')) as object),
+  usePaginatedEncounters: () => mockUsePaginatedEncounters('patient-uuid', null, 10),
+  useAllEncounters: () => mockUseAllEncounters('patient-uuid', null),
+  useEncounterTypes: () => mockUseEncounterTypes(),
+}));
+
+describe('VisitDetailOverview', () => {
+  it('renders an empty state view if encounters data is unavailable', async () => {
+    mockUsePaginatedVisits.mockReturnValueOnce({
+      ...mockPaginatedVisitsData,
+      data: [],
+    });
+    mockGetConfig.mockResolvedValue({ htmlFormEntryForms: [] });
+
+    renderWithSwr(<VisitDetailOverview patientUuid={mockPatient.id} patient={mockPatient} />);
+
+    await waitForLoadingToFinish();
+
+    // visits table view
+    expect(screen.getByRole('heading', { name: /past visits/i })).toBeInTheDocument();
+    expect(screen.getAllByTitle(/Empty data illustration/i)[0]).toBeInTheDocument();
+    expect(screen.getAllByText(/There are no visits to display for this patient/i)[0]).toBeInTheDocument();
+  });
+
+  it('renders an error state view if there was a problem fetching visit data', async () => {
+    const error = {
+      message: 'Unauthorized',
+      response: {
+        status: 401,
+        statusText: 'Unauthorized',
+      },
+    };
+    mockUsePaginatedVisits.mockReturnValue({
+      ...mockPaginatedVisitsData,
+      data: null,
+      error,
+    });
+
+    renderWithSwr(<VisitDetailOverview patientUuid={mockPatient.id} patient={mockPatient} />);
+
+    await waitForLoadingToFinish();
+
+    // visits table view
+    expect(screen.queryByRole('table')).not.toBeInTheDocument();
+    expect(screen.getAllByText(/visits/i)[0]).toBeInTheDocument();
+    expect(screen.getByText(/Error State/i)).toBeInTheDocument();
+  });
+
+  it(`renders a summary of the patient's visits and encounters when data is available and showAllEncountersTab is true`, async () => {
+    const user = userEvent.setup();
+    mockGetConfig.mockResolvedValue({ htmlFormEntryForms: [] });
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientChartSchema),
+      showAllEncountersTab: true,
+    });
+    mockUsePaginatedVisits.mockReturnValue(mockPaginatedVisitsData);
+
+    renderWithSwr(<VisitDetailOverview patientUuid={mockPatient.id} patient={mockPatient} />);
+
+    await waitForLoadingToFinish();
+
+    const allEncountersTab = screen.getByRole('tab', { name: /All encounters/i });
+    const visitsTab = screen.getByRole('tab', { name: /visit/i });
+    const visitDetailTabs = screen.getByRole('tablist', { name: /visit detail tabs/i });
+    const notesTab = within(visitDetailTabs).getByRole('tab', { name: /notes/i });
+
+    expect(visitsTab).toBeInTheDocument();
+    expect(allEncountersTab).toBeInTheDocument();
+    expect(notesTab).toBeInTheDocument();
+    expect(visitsTab).toHaveAttribute('aria-selected', 'true');
+    expect(allEncountersTab).toHaveAttribute('aria-selected', 'false');
+
+    await user.click(notesTab);
+    expect(screen.getByRole('tab', { name: /all notes/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /my notes/i })).toBeInTheDocument();
+
+    await user.click(visitsTab);
+    await screen.getByRole('button', { name: /expand current row/i }).click();
+    const visitSummaryTabs = screen.getByRole('tablist', { name: /visit summary tabs/i });
+    expect(within(visitSummaryTabs).getByRole('tab', { name: /notes/i })).toBeInTheDocument();
+    expect(within(visitSummaryTabs).getByRole('tab', { name: /tests/i })).toBeInTheDocument();
+    expect(within(visitSummaryTabs).getByRole('tab', { name: /medications/i })).toBeInTheDocument();
+    expect(within(visitSummaryTabs).getByRole('tab', { name: /^encounters$/i })).toBeInTheDocument();
+
+    expect(screen.getByText(/no diagnoses found/i)).toBeInTheDocument();
+    expect(screen.getByText(/There are no notes to display for this patient/i)).toBeInTheDocument();
+    expect(screen.getByText(/There are no medications to display for this patient/i)).toBeInTheDocument();
+
+    await user.click(allEncountersTab);
+
+    expect(allEncountersTab).toHaveAttribute('aria-selected', 'true');
+    expect(visitsTab).toHaveAttribute('aria-selected', 'false');
+  });
+
+  it('should render only the visit summary tab when showAllEncountersTab is false', async () => {
+    mockGetConfig.mockResolvedValue({ htmlFormEntryForms: [] });
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientChartSchema),
+      showAllEncountersTab: false,
+    });
+    mockUsePaginatedVisits.mockReturnValue(mockPaginatedVisitsData);
+
+    renderWithSwr(<VisitDetailOverview patientUuid={mockPatient.id} patient={mockPatient} />);
+
+    await waitForLoadingToFinish();
+
+    const visitsTab = screen.getByRole('tab', { name: /visits/i });
+    const visitDetailTabs = screen.getByRole('tablist', { name: /visit detail tabs/i });
+
+    expect(visitsTab).toBeInTheDocument();
+    expect(within(visitDetailTabs).getByRole('tab', { name: /notes/i })).toBeInTheDocument();
+    expect(visitsTab).toHaveAttribute('aria-selected', 'true');
+    expect(screen.queryByText('/All encounters/i')).not.toBeInTheDocument();
+
+    await screen.getByRole('button', { name: /expand current row/i }).click();
+    const visitSummaryTabs = screen.getByRole('tablist', { name: /visit summary tabs/i });
+    expect(within(visitSummaryTabs).getByRole('tab', { name: /notes/i })).toBeInTheDocument();
+    expect(within(visitSummaryTabs).getByRole('tab', { name: /tests/i })).toBeInTheDocument();
+    expect(within(visitSummaryTabs).getByRole('tab', { name: /medications/i })).toBeInTheDocument();
+    expect(within(visitSummaryTabs).getByRole('tab', { name: /^encounters$/i })).toBeInTheDocument();
+
+    expect(screen.getByText(/no diagnoses found/i)).toBeInTheDocument();
+    expect(screen.getByText(/There are no notes to display for this patient/i)).toBeInTheDocument();
+    expect(screen.getByText(/There are no medications to display for this patient/i)).toBeInTheDocument();
+  });
+});

package/src/visit/visits-widget/visit.resource.tsx

@@ -0,0 +1,146 @@
+import {
+  openmrsFetch,
+  restBaseUrl,
+  type OpenmrsResource,
+  type Visit,
+  useOpenmrsInfinite,
+  useOpenmrsPagination,
+} from '@openmrs/esm-framework';
+
+const customRepresentation =
+  'custom:(uuid,location,encounters:(uuid,diagnoses:(uuid,display,rank,diagnosis,voided),form:(uuid,display,name,description,encounterType,version,resources:(uuid,display,name,valueReference)),encounterDatetime,orders:full,obs:(uuid,concept:(uuid,display,conceptClass:(uuid,display)),display,groupMembers:(uuid,concept:(uuid,display),value:(uuid,display),display),value,obsDatetime),encounterType:(uuid,display,viewPrivilege,editPrivilege),encounterProviders:(uuid,display,encounterRole:(uuid,display),provider:(uuid,person:(uuid,display)))),visitType:(uuid,name,display),startDatetime,stopDatetime,patient,attributes:(attributeType:ref,display,uuid,value)';
+
+export function useInfiniteVisits(
+  patientUuid: string,
+  params: Record<string, number | string> = {},
+  rep: string = customRepresentation,
+) {
+  const url = new URL(
+    `${window.openmrsBase}/${restBaseUrl}/visit?patient=${patientUuid}&v=${rep}`,
+    window.location.toString(),
+  );
+  for (const key in params) {
+    url.searchParams.set(key, '' + params[key]);
+  }
+
+  const { data, mutate, ...rest } = useOpenmrsInfinite<Visit>(patientUuid ? url : null);
+
+  return { visits: data, mutate, ...rest };
+}
+
+export function usePaginatedVisits(
+  patientUuid: string,
+  pageSize: number,
+  params: Record<string, number | string> = {},
+) {
+  const url = new URL(
+    `${window.openmrsBase}/${restBaseUrl}/visit?patient=${patientUuid}&v=${customRepresentation}`,
+    window.location.toString(),
+  );
+  for (const key in params) {
+    url.searchParams.set(key, '' + params[key]);
+  }
+
+  const ret = useOpenmrsPagination<Visit>(url, pageSize);
+
+  return ret;
+}
+
+export function deleteVisit(visitUuid: string) {
+  return openmrsFetch(`${restBaseUrl}/visit/${visitUuid}`, {
+    method: 'DELETE',
+  });
+}
+
+export function restoreVisit(visitUuid: string) {
+  return openmrsFetch<Visit>(`${restBaseUrl}/visit/${visitUuid}`, {
+    headers: {
+      'content-type': 'application/json',
+    },
+    method: 'POST',
+    body: { voided: false },
+  });
+}
+
+export interface Order {
+  uuid: string;
+  action?: string | null;
+  autoExpireDate?: Date | null;
+  dateActivated: string;
+  dateStopped?: Date | null;
+  fulfillerStatus?: string | null;
+  dose: number;
+  dosingInstructions: string | null;
+  dosingType?: 'org.openmrs.FreeTextDosingInstructions' | 'org.openmrs.SimpleDosingInstructions';
+  doseUnits: {
+    uuid: string;
+    display: string;
+  };
+  drug: {
+    uuid: string;
+    name: string;
+    strength: string;
+    display: string;
+  };
+  duration: number;
+  durationUnits: {
+    uuid: string;
+    display: string;
+  };
+  frequency: {
+    uuid: string;
+    display: string;
+  };
+  numRefills: number;
+  orderNumber: string;
+  orderReason: string | null;
+  orderReasonNonCoded: string | null;
+  orderer: OpenmrsResource;
+  orderType: {
+    uuid: string;
+    display: string;
+  };
+  route: {
+    uuid: string;
+    display: string;
+  };
+  quantity: number;
+  quantityUnits: OpenmrsResource;
+}
+
+export interface Note {
+  authorNames?: Array<string>;
+  authorUuids?: Array<string>;
+  concept: OpenmrsResource;
+  note: string;
+  provider: {
+    name: string;
+    role: string;
+  };
+  time: string;
+}
+
+export interface OrderItem {
+  order: Order;
+  provider: {
+    name: string;
+    role: string;
+  };
+}
+
+export interface Diagnosis {
+  certainty: string;
+  display: string;
+  encounter: OpenmrsResource;
+  links: Array<any>;
+  patient: OpenmrsResource;
+  rank: number;
+  resourceVersion: string;
+  uuid: string;
+  voided: boolean;
+  diagnosis: {
+    coded: {
+      display: string;
+    };
+  };
+}