@bathiran212/esm-patient-chart-app 7.0.0

package/src/visit/visits-widget/past-visits-components/visit-summary.component.tsx

@@ -0,0 +1,192 @@
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import {
+  type Diagnosis,
+  DiagnosisTags,
+  Extension,
+  ExtensionSlot,
+  formatTime,
+  parseDate,
+  useAssignedExtensions,
+  useConfig,
+  type Visit,
+} from '@openmrs/esm-framework';
+import type { ChartConfig } from '../../../config-schema';
+import type { Note, Order, OrderItem } from '../visit.resource';
+import { encounterHasJsonSchemaForm } from './encounters-table/encounters-table.resource';
+import MedicationSummary from './medications-summary.component';
+import NotesSummary from './notes-summary.component';
+import TestsSummary from './tests-summary.component';
+import VisitCompletedFormsTable from './encounters-table/visit-completed-forms-table.component';
+import VisitEncountersTable from './encounters-table/visit-encounters-table.component';
+import VisitTimeline from '../single-visit-details/visit-timeline/visit-timeline.component';
+import styles from './visit-summary.scss';
+
+interface VisitSummaryProps {
+  visit: Visit;
+  patientUuid: string;
+}
+
+const visitSummaryPanelSlot = 'visit-summary-panels';
+
+const VisitSummary: React.FC<VisitSummaryProps> = ({ visit, patientUuid }) => {
+  const config = useConfig<ChartConfig>();
+  const { t } = useTranslation();
+  const extensions = useAssignedExtensions(visitSummaryPanelSlot);
+
+  const [diagnoses, notes, medications]: [Array<Diagnosis>, Array<Note>, Array<OrderItem>] = useMemo(() => {
+    // Medication Tab
+    const medications: Array<OrderItem> = [];
+    // Diagnoses in a Visit
+    const diagnoses: Array<Diagnosis> = [];
+    // Notes Tab
+    const notes: Array<Note> = [];
+
+    visit?.encounters?.forEach((enc) => {
+      if (enc.hasOwnProperty('orders')) {
+        medications.push(
+          ...enc.orders.map((order: Order) => ({
+            order,
+            provider: {
+              name: enc.encounterProviders.length ? enc.encounterProviders[0].provider.person.display : '',
+              role: enc.encounterProviders.length ? enc.encounterProviders[0].encounterRole.display : '',
+            },
+          })),
+        );
+      }
+
+      // Check if there is a diagnosis associated with this encounter
+      if (enc.hasOwnProperty('diagnoses')) {
+        if (enc.diagnoses.length > 0) {
+          const validDiagnoses = enc.diagnoses.filter((diagnosis) => !diagnosis.voided);
+          diagnoses.push(...validDiagnoses);
+        }
+      }
+
+      // Check for Visit Diagnoses and Notes
+      if (enc.hasOwnProperty('obs')) {
+        enc.obs.forEach((obs) => {
+          if (config.notesConceptUuids?.includes(obs.concept.uuid)) {
+            const encounterProvider = enc.encounterProviders[0];
+
+            // Putting all notes in a single array.
+            notes.push({
+              authorNames: [encounterProvider?.provider?.person?.display].filter(Boolean),
+              authorUuids: [encounterProvider?.provider?.uuid, encounterProvider?.provider?.person?.uuid].filter(
+                Boolean,
+              ),
+              note: obs.value as string, // TODO: add better typing check
+              provider: {
+                name: encounterProvider?.provider?.person?.display ?? '',
+                role: encounterProvider?.encounterRole?.display ?? '',
+              },
+              time: enc.encounterDatetime ? formatTime(parseDate(enc.encounterDatetime)) : '',
+              concept: obs.concept,
+            });
+          }
+        });
+      }
+    });
+
+    // Sort the diagnoses by rank, so that primary diagnoses come first
+    diagnoses.sort((a, b) => a.rank - b.rank);
+
+    // Sort medications by dateActivated DESC (newest first) to align with backend ordering
+    medications.sort((a, b) => new Date(b.order.dateActivated).getTime() - new Date(a.order.dateActivated).getTime());
+
+    return [diagnoses, notes, medications];
+  }, [config.notesConceptUuids, visit?.encounters]);
+
+  const encounterIds = useMemo(() => visit?.encounters?.map((e) => `Encounter/${e.uuid}`) ?? [], [visit?.encounters]);
+
+  const hasCompletedForms = useMemo(
+    () => visit?.encounters?.some(encounterHasJsonSchemaForm) ?? false,
+    [visit?.encounters],
+  );
+
+  return (
+    <div className={styles.summaryContainer}>
+      <p className={styles.diagnosisLabel}>{t('diagnoses', 'Diagnoses')}</p>
+      <div className={styles.diagnosesList}>
+        {diagnoses.length > 0 ? (
+          <DiagnosisTags diagnoses={diagnoses} />
+        ) : (
+          <p className={classNames(styles.bodyLong01, styles.text02)} style={{ marginBottom: '0.5rem' }}>
+            {t('noDiagnosesFound', 'No diagnoses found')}
+          </p>
+        )}
+      </div>
+      <Tabs>
+        <TabList aria-label="Visit summary tabs" className={styles.tablist}>
+          <Tab className={classNames(styles.tab, styles.bodyLong01)} id="timeline-tab">
+            {t('timeline', 'Timeline')}
+          </Tab>
+          <Tab
+            className={classNames(styles.tab, styles.bodyLong01)}
+            id="notes-tab"
+            disabled={notes.length <= 0 && config.disableEmptyTabs}
+          >
+            {t('notes', 'Notes')}
+          </Tab>
+          <Tab className={styles.tab} id="tests-tab" disabled={encounterIds.length === 0 && config.disableEmptyTabs}>
+            {t('tests', 'Tests')}
+          </Tab>
+          <Tab
+            className={styles.tab}
+            id="medications-tab"
+            disabled={medications.length <= 0 && config.disableEmptyTabs}
+          >
+            {t('medications', 'Medications')}
+          </Tab>
+          <Tab className={styles.tab} id="completed-forms-tab" disabled={!hasCompletedForms && config.disableEmptyTabs}>
+            {t('completedForms', 'Completed forms')}
+          </Tab>
+          <Tab
+            className={styles.tab}
+            id="encounters-tab"
+            disabled={visit?.encounters.length <= 0 && config.disableEmptyTabs}
+          >
+            {t('encounters_title', 'Encounters')}
+          </Tab>
+          {extensions?.map((extension, index) => (
+            <Tab key={index} className={styles.tab} id={`${extension.meta.title || index}-tab`}>
+              {t(extension.meta.title, {
+                ns: extension.moduleName,
+                defaultValue: extension.meta.title,
+              })}
+            </Tab>
+          ))}
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            <VisitTimeline visitUuid={visit.uuid} patientUuid={patientUuid} />
+          </TabPanel>
+          <TabPanel>
+            <NotesSummary notes={notes} />
+          </TabPanel>
+          <TabPanel>
+            <TestsSummary patientUuid={patientUuid} encounters={visit?.encounters} />
+          </TabPanel>
+          <TabPanel>
+            <MedicationSummary medications={medications} />
+          </TabPanel>
+          <TabPanel>
+            <VisitCompletedFormsTable visit={visit} patientUuid={patientUuid} />
+          </TabPanel>
+          <TabPanel>
+            <VisitEncountersTable visit={visit} patientUuid={patientUuid} />
+          </TabPanel>
+          <ExtensionSlot name={visitSummaryPanelSlot}>
+            <TabPanel>
+              <Extension state={{ patientUuid, visit }} />
+            </TabPanel>
+          </ExtensionSlot>
+        </TabPanels>
+      </Tabs>
+    </div>
+  );
+};
+
+export default VisitSummary;

package/src/visit/visits-widget/past-visits-components/visit-summary.scss

@@ -0,0 +1,72 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.diagnosisLabel {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+  margin-top: 5px;
+}
+
+.diagnosesList {
+  display: flex;
+  flex-flow: row wrap;
+  padding-bottom: layout.$spacing-03;
+  margin: 0 layout.$spacing-05;
+  border-bottom: 1px solid $ui-03;
+}
+
+.summaryContainer {
+  background-color: $ui-background;
+  display: grid;
+  grid-template-columns: max-content auto;
+  padding: layout.$spacing-05;
+
+  :global(.cds--tabs) {
+    min-height: 13rem;
+  }
+}
+
+.tab {
+  outline: 0;
+  outline-offset: 0;
+  min-height: 2rem !important;
+
+  &:active,
+  &:focus {
+    outline: layout.$spacing-01 solid var(--brand-03) !important;
+  }
+
+  &[aria-selected='true'] {
+    border-left: 3px solid var(--brand-03);
+    border-bottom: none;
+    font-weight: 600;
+    margin-left: 0 !important;
+  }
+
+  &[aria-selected='false'] {
+    border-bottom: none;
+    border-left: layout.$spacing-01 solid $ui-03;
+    margin-left: 0 !important;
+  }
+}
+
+.tablist {
+  :global(.cds--tab--list) {
+    flex-direction: column;
+    max-height: fit-content;
+  }
+
+  > button :global(.cds--tabs .cds--tabs__nav-link) {
+    border-bottom: none;
+  }
+}
+
+.text02 {
+  color: colors.$gray-70;
+}
+
+.bodyLong01 {
+  @include type.type-style('body-01');
+}

package/src/visit/visits-widget/past-visits-components/visit-summary.test.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { vi, describe, it, expect, test, beforeEach, type Mock } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import { screen, render } from '@testing-library/react';
+import { ExtensionSlot, getConfig, getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { type ChartConfig, esmPatientChartSchema } from '../../../config-schema';
+import { mockPatient } from 'tools';
+import { visitOverviewDetailMockData, visitOverviewDetailMockDataNotEmpty } from '__mocks__';
+import VisitSummary from './visit-summary.component';
+
+const mockExtensionSlot = ExtensionSlot as Mock;
+const mockGetConfig = vi.mocked(getConfig);
+const mockUseConfig = vi.mocked(useConfig<ChartConfig>);
+const mockVisit = visitOverviewDetailMockData.data.results[0];
+
+describe('VisitSummary', () => {
+  beforeEach(() => {
+    mockExtensionSlot.mockImplementation((ext) => ext.name);
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientChartSchema),
+      notesConceptUuids: ['162169AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', 'some-uuid2'],
+      visitDiagnosisConceptUuid: '159947AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    });
+  });
+
+  it('should display empty state for notes, test and medication summary', async () => {
+    const user = userEvent.setup();
+    mockGetConfig.mockResolvedValue({ htmlFormEntryForms: [] });
+
+    render(<VisitSummary patientUuid={mockPatient.id} visit={mockVisit} />);
+
+    expect(screen.getByText(/^Diagnoses$/i)).toBeInTheDocument();
+    expect(screen.getByText(/^No diagnoses found$/)).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /Medication/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /Tests/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /Notes/i })).toBeInTheDocument();
+
+    //should display notes tab panel
+    const notesTab = screen.getByRole('tab', { name: /Notes/i });
+
+    await user.click(notesTab);
+
+    expect(screen.getByText(/^There are no notes to display for this patient$/)).toBeInTheDocument();
+
+    // should display medication panel
+    const medicationTab = screen.getByRole('tab', { name: /Medication/i });
+
+    await user.click(medicationTab);
+
+    expect(screen.getByText(/^There are no medications to display for this patient$/)).toBeInTheDocument();
+
+    // should display tests panel with test panel extension
+    const testsTab = screen.getByRole('tab', { name: /Tests/i });
+
+    await user.click(testsTab);
+
+    expect(screen.getByText(/test-results-filtered-overview/)).toBeInTheDocument();
+  });
+
+  it('renders diagnoses tags when there are diagnoses', () => {
+    const mockVisit = visitOverviewDetailMockDataNotEmpty.data.results[0];
+
+    render(<VisitSummary patientUuid={mockPatient.id} visit={mockVisit} />);
+
+    const malariaTag = screen.getByText(/^malaria, confirmed$/i);
+    const hivTag = screen.getByText(/human immunodeficiency virus \(hiv\)/i);
+
+    expect(screen.getByText(/^diagnoses$/i)).toBeInTheDocument();
+    expect(malariaTag).toBeInTheDocument();
+    expect(hivTag).toBeInTheDocument();
+  });
+
+  it('should display notes, tests and medication summary', async () => {
+    const user = userEvent.setup();
+
+    const mockVisit = visitOverviewDetailMockDataNotEmpty.data.results[0];
+
+    render(<VisitSummary patientUuid={mockPatient.id} visit={mockVisit} />);
+
+    expect(screen.getByText(/^Diagnoses$/i)).toBeInTheDocument();
+    expect(screen.getByText(/^Malaria, confirmed$/)).toBeInTheDocument();
+    expect(screen.getByText(/HUMAN IMMUNODEFICIENCY VIRUS/i)).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /Medication/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /Tests/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /Notes/i })).toBeInTheDocument();
+
+    //should display notes tab panel
+    const notesTab = screen.getByRole('tab', { name: /Notes/i });
+    await user.click(notesTab);
+
+    expect(screen.getAllByText(/Dr James Cook/i)[0]).toBeInTheDocument();
+    expect(screen.getAllByText(/Admin/i)[0]).toBeInTheDocument();
+    expect(screen.getByText(/^Patient seems very unwell$/i)).toBeInTheDocument();
+
+    // should display medication panel
+    const medicationTab = screen.getByRole('tab', { name: /Medication/i });
+    await user.click(medicationTab);
+
+    // should display tests panel with test panel extension
+    const testsTab = screen.getByRole('tab', { name: /Tests/i });
+    await user.click(testsTab);
+
+    expect(screen.getByText(/test-results-filtered-overview/)).toBeInTheDocument();
+  });
+});

package/src/visit/visits-widget/single-visit-details/visit-timeline/visit-timeline.component.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import dayjs from 'dayjs';
+import { useTranslation } from 'react-i18next';
+import { SkeletonText } from '@carbon/react';
+import { formatDate } from '@openmrs/esm-framework';
+import { CardHeader, EmptyState } from '@openmrs/esm-patient-common-lib';
+import { useEncountersByVisit } from '../../../../clinical-views/hooks/useEncountersByVisit';
+import styles from './visit-timeline.scss';
+
+interface VisitTimelineProps {
+  patientUuid: string;
+  visitUuid: string;
+}
+
+function VisitTimeline({ patientUuid, visitUuid }: VisitTimelineProps) {
+  const { t } = useTranslation();
+  const { encounters, isLoading } = useEncountersByVisit(patientUuid, visitUuid);
+
+  if (isLoading) {
+    return (
+      <div className={styles.visitTimeline}>
+        <CardHeader title={t('timeline', 'Timeline')}>{null}</CardHeader>
+        <p className={styles.timelineHeader}>
+          <span>{t('encounter', 'Encounter')}</span> <span>&middot;</span>
+          <span>{t('provider', 'Provider')}</span> <span>&middot;</span>{' '}
+          <span>
+            {t('timeStarted', 'Time started')} <span>&mdash;</span> {t('timeCompleted', 'Time completed')}{' '}
+          </span>
+        </p>
+        <div className={styles.timelineEntries}>
+          {Array.from({ length: 3 }).map((_, index) => (
+            <p className={styles.timelineEntry} key={index}>
+              <div className={styles.timelineDot} />
+              <SkeletonText className={styles.skeleton} />
+              <span>&middot;</span>
+              <SkeletonText className={styles.skeleton} />
+              <span>&middot;</span>
+              <SkeletonText className={styles.skeleton} />
+              <span>&mdash;</span>
+              <SkeletonText className={styles.skeleton} />
+            </p>
+          ))}
+          <div className={styles.timelineLine} />
+        </div>
+      </div>
+    );
+  }
+
+  if (encounters?.length === 0) {
+    return (
+      <EmptyState
+        displayText={t('encountersForThisVisit', 'encounters for this visit')}
+        headerTitle={t('timeline', 'Timeline')}
+      />
+    );
+  }
+
+  return (
+    <div className={styles.visitTimeline}>
+      <p className={styles.timelineHeader}>
+        <span>{t('encounter', 'Encounter')}</span> <span>&middot;</span>
+        <span>{t('provider', 'Provider')}</span> <span>&middot;</span>
+        <span>{t('timeStarted', 'Time started')}</span>
+      </p>
+      <div className={styles.timelineEntries}>
+        {encounters?.map((encounter) => (
+          <p className={styles.timelineEntry} key={encounter.uuid}>
+            <div className={styles.timelineDot} />
+            <span className={styles.encounterType}>{encounter.encounterType.display}</span>
+            <span>&middot;</span>
+            {encounter.encounterProviders.length === 0 ? (
+              <span>{t('noProvider', 'No provider')}</span>
+            ) : (
+              <span>
+                {encounter.encounterProviders
+                  .map((encounterProvider) => encounterProvider.provider.person.display)
+                  .join(', ')}
+              </span>
+            )}
+            <span>&middot;</span>{' '}
+            <span>
+              {formatDate(new Date(encounter.encounterDatetime), {
+                time: dayjs(encounter.encounterDatetime).isSame(dayjs(), 'day') ? 'for today' : true,
+              })}
+            </span>
+          </p>
+        ))}
+        <div className={styles.timelineLine} />
+      </div>
+    </div>
+  );
+}
+
+export default VisitTimeline;

package/src/visit/visits-widget/single-visit-details/visit-timeline/visit-timeline.scss

@@ -0,0 +1,60 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.visitTimeline {
+  border: 1px solid colors.$gray-20;
+  background-color: colors.$white;
+  padding-top: layout.$spacing-05;
+}
+
+.timelineHeader {
+  padding: 0 layout.$spacing-10;
+  @include type.type-style('helper-text-01');
+  display: flex;
+  gap: layout.$spacing-03;
+}
+
+.timelineEntries {
+  margin: 0 layout.$spacing-08;
+  margin-top: layout.$spacing-04;
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-05;
+  margin-bottom: layout.$spacing-05;
+  position: relative;
+}
+
+.timelineEntry {
+  display: flex;
+  gap: layout.$spacing-03;
+  align-items: center;
+}
+
+.encounterType {
+  font-weight: 700;
+}
+
+.timelineDot {
+  height: 8px;
+  width: 8px;
+  background-color: colors.$blue-30;
+  border-radius: 50%;
+  display: inline-block;
+  margin-right: layout.$spacing-03;
+  z-index: 10;
+}
+
+.timelineLine {
+  position: absolute;
+  border-left: 1px solid colors.$blue-20;
+  height: 100%;
+  left: 3.4px;
+  top: 4px;
+  z-index: 9;
+}
+
+.skeleton {
+  width: 5% !important; // using hardcoded px values could be a bad idea.
+  margin-bottom: 0 !important;
+}

package/src/visit/visits-widget/visit-context/retrospective-data-date-time-picker/restrospective-date-time-picker.scss

@@ -0,0 +1,35 @@
+@use '@carbon/layout';
+
+.wrapper {
+  padding: 0 layout.$spacing-05;
+}
+
+.heading {
+  font-weight: 600;
+  margin-bottom: layout.$spacing-03;
+}
+
+.pickerWrapper {
+  display: flex;
+  align-items: center;
+}
+
+.datePicker {
+  :global(.cds--date-picker-input__wrapper) {
+    inline-size: layout.$spacing-13;
+  }
+}
+
+.timePicker {
+  display: flex;
+  align-items: baseline;
+
+  :global(.cds--form-requirement) {
+    max-width: layout.$spacing-12;
+    max-height: 0 !important;
+  }
+}
+
+.checkBox {
+  margin-bottom: layout.$spacing-05;
+}