@bathiran212/esm-patient-chart-app 7.0.0

package/src/clinical-views/encounter-list/tag.component.test.tsx

@@ -0,0 +1,307 @@
+import React from 'react';
+import { vi, describe, it, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { renderTag } from './tag.component';
+import { type ConfigConcepts, type Encounter, type Observation } from '../types';
+
+describe('Tag component', () => {
+  const mockConfig: ConfigConcepts = {
+    trueConceptUuid: 'true-uuid',
+    falseConceptUuid: 'false-uuid',
+    otherConceptUuid: 'other-uuid',
+  };
+
+  const mockStatusColorMappings = {
+    'status-uuid-1': 'green',
+    'status-uuid-2': 'red',
+  };
+
+  const createMockEncounter = (obsValue: Observation['value']): Encounter => ({
+    uuid: 'encounter-uuid',
+    encounterDatetime: '2024-01-01',
+    encounterType: {
+      uuid: 'encounter-type-uuid',
+      name: 'Test Encounter',
+    },
+    obs: [
+      {
+        uuid: 'obs-uuid',
+        concept: {
+          uuid: 'test-concept-uuid',
+          name: 'Test Concept',
+        },
+        value: obsValue,
+        obsDatetime: '2024-01-01',
+      },
+    ],
+    encounterProviders: [],
+    form: undefined,
+    patient: {
+      uuid: 'patient-uuid',
+      display: 'Test Patient',
+      age: 30,
+      birthDate: '1994-01-01',
+    },
+    location: {
+      uuid: 'location-uuid',
+      display: 'Test Location',
+      name: 'Test Location',
+    },
+  });
+
+  it('should render "--" when columnStatus is "--"', () => {
+    const mockEncounter = createMockEncounter('--');
+    const view = renderTag(mockEncounter, 'non-existent-concept', mockStatusColorMappings, mockConfig);
+    expect(view).toBe('--');
+  });
+
+  it('should render a Tag component with the correct text content', () => {
+    const mockEncounter = createMockEncounter({
+      uuid: 'status-uuid-1',
+      name: {
+        name: 'Active',
+        display: 'Active',
+      },
+    });
+
+    render(
+      <div data-testid="tag-wrapper">
+        {renderTag(mockEncounter, 'test-concept-uuid', mockStatusColorMappings, mockConfig)}
+      </div>,
+    );
+
+    expect(screen.getByText('Active')).toBeInTheDocument();
+  });
+
+  it('should not have a title attribute when rendering a Tag', () => {
+    const mockEncounter = createMockEncounter({
+      uuid: 'status-uuid-1',
+      name: {
+        name: 'Active',
+        display: 'Active',
+      },
+    });
+
+    const { container } = render(
+      <div data-testid="tag-wrapper">
+        {renderTag(mockEncounter, 'test-concept-uuid', mockStatusColorMappings, mockConfig)}
+      </div>,
+    );
+
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const tag = container.querySelector('.cds--tag');
+    expect(tag).not.toHaveAttribute('title');
+    expect(screen.getByText('Active')).toBeInTheDocument();
+  });
+
+  it('should apply the correct color type based on status color mappings', () => {
+    const mockEncounter = createMockEncounter({
+      uuid: 'status-uuid-2',
+      name: {
+        name: 'Inactive',
+        display: 'Inactive',
+      },
+    });
+
+    const { container } = render(
+      <div data-testid="tag-wrapper">
+        {renderTag(mockEncounter, 'test-concept-uuid', mockStatusColorMappings, mockConfig)}
+      </div>,
+    );
+
+    expect(screen.getByText('Inactive')).toBeInTheDocument();
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const tag = container.querySelector('.cds--tag');
+    expect(tag).toHaveClass('cds--tag--red');
+  });
+
+  it('should render with minimum width style', () => {
+    const mockEncounter = createMockEncounter({
+      uuid: 'status-uuid-1',
+      name: {
+        name: 'Active',
+        display: 'Active',
+      },
+    });
+
+    const { container } = render(
+      <div data-testid="tag-wrapper">
+        {renderTag(mockEncounter, 'test-concept-uuid', mockStatusColorMappings, mockConfig)}
+      </div>,
+    );
+
+    expect(screen.getByText('Active')).toBeInTheDocument();
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const tag = container.querySelector('.cds--tag');
+    expect(tag).toHaveStyle({ minWidth: '80px' });
+  });
+
+  it('should handle string values correctly', () => {
+    const mockEncounter = createMockEncounter('Completed');
+
+    render(
+      <div data-testid="tag-wrapper">
+        {renderTag(mockEncounter, 'test-concept-uuid', mockStatusColorMappings, mockConfig)}
+      </div>,
+    );
+
+    expect(screen.getByText('Completed')).toBeInTheDocument();
+  });
+
+  it('should render Tag without color type when uuid is not in statusColorMappings', () => {
+    const mockEncounter = createMockEncounter({
+      uuid: 'unmapped-uuid',
+      name: {
+        name: 'Unmapped Status',
+        display: 'Unmapped Status',
+      },
+    });
+
+    const { container } = render(
+      <div data-testid="tag-wrapper">
+        {renderTag(mockEncounter, 'test-concept-uuid', mockStatusColorMappings, mockConfig)}
+      </div>,
+    );
+
+    expect(screen.getByText('Unmapped Status')).toBeInTheDocument();
+
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const tag = container.querySelector('.cds--tag');
+    expect(tag).toBeInTheDocument();
+    const allColorClasses = Object.values(mockStatusColorMappings).map((color) => `cds--tag--${color}`);
+    allColorClasses.forEach((colorClass) => {
+      expect(tag).not.toHaveClass(colorClass);
+    });
+  });
+
+  it('should render Tag without color type when value is a string', () => {
+    const mockEncounter = createMockEncounter('String Value');
+
+    const { container } = render(
+      <div data-testid="tag-wrapper">
+        {renderTag(mockEncounter, 'test-concept-uuid', mockStatusColorMappings, mockConfig)}
+      </div>,
+    );
+
+    expect(screen.getByText('String Value')).toBeInTheDocument();
+
+    // String values don't have uuid, so no color type should be applied
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const tag = container.querySelector('.cds--tag');
+    expect(tag).toBeInTheDocument();
+    const allColorClasses = Object.values(mockStatusColorMappings).map((color) => `cds--tag--${color}`);
+    allColorClasses.forEach((colorClass) => {
+      expect(tag).not.toHaveClass(colorClass);
+    });
+  });
+
+  it('should render Tag without color type when observation value object lacks uuid property', () => {
+    // Create an observation value without uuid property (edge case)
+    const mockEncounter: Encounter = {
+      uuid: 'encounter-uuid',
+      encounterDatetime: '2024-01-01',
+      encounterType: {
+        uuid: 'encounter-type-uuid',
+        name: 'Test Encounter',
+      },
+      obs: [
+        {
+          uuid: 'obs-uuid',
+          concept: {
+            uuid: 'test-concept-uuid',
+            name: 'Test Concept',
+          },
+          value: {
+            name: {
+              name: 'Status Without UUID',
+              display: 'Status Without UUID',
+            },
+            // Missing uuid property - using type assertion for test case
+          } as Observation['value'],
+          obsDatetime: '2024-01-01',
+        },
+      ],
+      encounterProviders: [],
+      form: undefined,
+      patient: {
+        uuid: 'patient-uuid',
+        display: 'Test Patient',
+        age: 30,
+        birthDate: '1994-01-01',
+      },
+      location: {
+        uuid: 'location-uuid',
+        display: 'Test Location',
+        name: 'Test Location',
+      },
+    };
+
+    const { container } = render(
+      <div data-testid="tag-wrapper">
+        {renderTag(mockEncounter, 'test-concept-uuid', mockStatusColorMappings, mockConfig)}
+      </div>,
+    );
+
+    expect(screen.getByText('Status Without UUID')).toBeInTheDocument();
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const tag = container.querySelector('.cds--tag');
+    const allColorClasses = Object.values(mockStatusColorMappings).map((color) => `cds--tag--${color}`);
+    allColorClasses.forEach((colorClass) => {
+      expect(tag).not.toHaveClass(colorClass);
+    });
+  });
+
+  it('should handle empty statusColorMappings', () => {
+    const emptyMappings = {};
+    const mockEncounter = createMockEncounter({
+      uuid: 'status-uuid-1',
+      name: {
+        name: 'Active',
+        display: 'Active',
+      },
+    });
+
+    const { container } = render(
+      <div data-testid="tag-wrapper">{renderTag(mockEncounter, 'test-concept-uuid', emptyMappings, mockConfig)}</div>,
+    );
+
+    expect(screen.getByText('Active')).toBeInTheDocument();
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const tag = container.querySelector('.cds--tag');
+    expect(tag).toBeInTheDocument();
+    // With empty mappings, verify no color classes from mockStatusColorMappings are applied
+    const allColorClasses = Object.values(mockStatusColorMappings).map((color) => `cds--tag--${color}`);
+    allColorClasses.forEach((colorClass) => {
+      expect(tag).not.toHaveClass(colorClass);
+    });
+  });
+
+  it('should handle when findObs returns undefined (no observation found)', () => {
+    const mockEncounter: Encounter = {
+      uuid: 'encounter-uuid',
+      encounterDatetime: '2024-01-01',
+      encounterType: {
+        uuid: 'encounter-type-uuid',
+        name: 'Test Encounter',
+      },
+      obs: [], // No observations
+      encounterProviders: [],
+      form: undefined,
+      patient: {
+        uuid: 'patient-uuid',
+        display: 'Test Patient',
+        age: 30,
+        birthDate: '1994-01-01',
+      },
+      location: {
+        uuid: 'location-uuid',
+        display: 'Test Location',
+        name: 'Test Location',
+      },
+    };
+
+    const view = renderTag(mockEncounter, 'non-existent-concept', mockStatusColorMappings, mockConfig);
+    // When no observation is found, getObsFromEncounter returns '--'
+    expect(view).toBe('--');
+  });
+});

package/src/clinical-views/encounter-list/tag.component.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Tag } from '@carbon/react';
+import { getObsFromEncounter, findObs } from '../utils/helpers';
+import { type ConfigConcepts, type Encounter } from '../types';
+
+export const renderTag = (
+  encounter: Encounter,
+  concept: string,
+  statusColorMappings: Record<string, string>,
+  config: ConfigConcepts,
+) => {
+  const columnStatus = getObsFromEncounter({ encounter, obsConcept: concept, config });
+  const columnStatusObs = findObs(encounter, concept);
+
+  if (columnStatus === '--') {
+    return '--';
+  }
+
+  return (
+    <Tag
+      type={
+        typeof columnStatusObs?.value === 'object' && 'uuid' in columnStatusObs.value
+          ? (statusColorMappings[columnStatusObs.value.uuid] as
+              | 'red'
+              | 'magenta'
+              | 'purple'
+              | 'blue'
+              | 'cyan'
+              | 'teal'
+              | 'green'
+              | 'gray'
+              | 'cool-gray'
+              | 'warm-gray'
+              | 'high-contrast'
+              | 'outline')
+          : undefined
+      }
+      style={{ minWidth: '80px' }}
+    >
+      {typeof columnStatus === 'string' ? columnStatus : ''}
+    </Tag>
+  );
+};

package/src/clinical-views/encounter-tile/clinical-views-summary.component.tsx

@@ -0,0 +1,40 @@
+import React, { memo, useMemo } from 'react';
+
+import { useTranslation } from 'react-i18next';
+import { useConfig } from '@openmrs/esm-framework';
+import { getEncounterTileColumns } from '../utils';
+import { EncounterTile } from './encounter-tile.component';
+import { type MenuCardProps } from '../types';
+
+interface OverviewListProps {
+  patientUuid: string;
+}
+
+const ClinicalViewsSummary: React.FC<OverviewListProps> = memo(({ patientUuid }) => {
+  const { tileDefinitions, trueConceptUuid, falseConceptUuid, otherConceptUuid } = useConfig();
+
+  const { t } = useTranslation();
+
+  const tilesData = useMemo(() => {
+    const configConcepts = {
+      trueConceptUuid,
+      falseConceptUuid,
+      otherConceptUuid,
+    };
+
+    return tileDefinitions?.map((tile: MenuCardProps) => ({
+      title: t(tile.tileHeader),
+      columns: getEncounterTileColumns(tile, configConcepts),
+    }));
+  }, [tileDefinitions, t, trueConceptUuid, falseConceptUuid, otherConceptUuid]);
+
+  return tilesData?.length > 0 ? (
+    <>
+      {tilesData.map((tile, index) => (
+        <EncounterTile key={index} patientUuid={patientUuid} columns={tile.columns} headerTitle={tile.title} />
+      ))}
+    </>
+  ) : null;
+});
+
+export default ClinicalViewsSummary;

package/src/clinical-views/encounter-tile/encounter-tile.component.tsx

@@ -0,0 +1,94 @@
+import React, { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { CodeSnippetSkeleton, Tile, Layer, Grid, Column } from '@carbon/react';
+import { isNil } from 'lodash-es';
+import { NumericObservation, useLayoutType } from '@openmrs/esm-framework';
+import { useLastEncounter } from '../hooks';
+import type { EncounterTileColumn, EncounterTileProps } from '../types';
+import { withUnit, getConceptUnitsFromEncounter } from '../utils/concept-utils';
+import styles from './tile.scss';
+
+export const EncounterTile = memo(({ patientUuid, columns, headerTitle }: EncounterTileProps) => {
+  const isTablet = useLayoutType() === 'tablet';
+  const columnSpan = columns.length > 0 ? Math.floor(16 / columns.length) : 16;
+
+  return (
+    <Layer className={styles.layer}>
+      <Tile className={styles.tile}>
+        <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
+          <h4 className={styles.title}>{headerTitle}</h4>
+        </div>
+        <Grid fullWidth>
+          {columns.map((column, index) => (
+            <Column
+              key={`${column.encounterTypeUuid}-${column.title}-${index}`}
+              sm={columnSpan}
+              md={columnSpan}
+              lg={columnSpan}
+              span={columnSpan}
+            >
+              <EncounterData patientUuid={patientUuid} column={column} />
+            </Column>
+          ))}
+        </Grid>
+      </Tile>
+    </Layer>
+  );
+});
+
+const EncounterData: React.FC<{
+  patientUuid: string;
+  column: EncounterTileColumn;
+}> = ({ patientUuid, column }) => {
+  const { t } = useTranslation();
+  const { lastEncounter, isLoading, error, isValidating } = useLastEncounter(patientUuid, column.encounterTypeUuid);
+  const units = getConceptUnitsFromEncounter(lastEncounter, column.concept);
+  const summaryUnits = column.summaryConcept?.primaryConcept
+    ? getConceptUnitsFromEncounter(lastEncounter, column.summaryConcept.primaryConcept)
+    : null;
+  const obsValue = column.getObsValue(lastEncounter);
+  const summaryValue =
+    column.hasSummary === true && column.getSummaryObsValue && typeof column.getSummaryObsValue === 'function'
+      ? column.getSummaryObsValue(lastEncounter)
+      : null;
+
+  if (isLoading || isValidating) {
+    return <CodeSnippetSkeleton type="multi" className="skeleton" />;
+  }
+
+  if (error || lastEncounter === undefined) {
+    return (
+      <>
+        <span className={styles.tileTitle}>{t(column.title)}</span>
+        <span className={styles.tileValue}>{error?.message}</span>
+      </>
+    );
+  }
+
+  const isNumericObs = typeof obsValue === 'number' && column.concept;
+  const showObsValue = !(obsValue === '--' && summaryValue !== '--' && !isNil(summaryValue));
+
+  return (
+    <>
+      {showObsValue && isNumericObs ? (
+        <NumericObservation
+          value={obsValue}
+          unit={units}
+          label={t(column.header)}
+          conceptUuid={column.concept}
+          patientUuid={patientUuid}
+          variant="card"
+        />
+      ) : (
+        <>
+          <span className={styles.tileTitle}>{t(column.header)}</span>
+          {showObsValue && <div className={styles.tileValue}>{withUnit(obsValue, units)}</div>}
+        </>
+      )}
+
+      {!isNil(summaryValue) && summaryValue !== '--' && (
+        <div className={styles.tileValue}>{withUnit(summaryValue, summaryUnits)}</div>
+      )}
+    </>
+  );
+};

package/src/clinical-views/encounter-tile/tile.scss

@@ -0,0 +1,82 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.title {
+  @include type.type-style('productive-heading-03');
+}
+
+.title:after {
+  content: '';
+  display: block;
+  width: layout.$spacing-07;
+  padding-top: layout.$spacing-01;
+  border-bottom: layout.$spacing-03 solid $brand-teal-01;
+}
+
+.tileTitle {
+  @include type.type-style('body-long-01');
+  @include type.type-style('label-01');
+  color: $text-02;
+  display: block;
+}
+
+.tileValue {
+  margin: layout.$spacing-04 0 layout.$spacing-04;
+  display: block;
+}
+
+.tileBox {
+  width: 25%;
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  gap: layout.$spacing-05;
+  justify-content: space-around;
+}
+
+.desktopHeading {
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+  }
+}
+
+.tabletHeading {
+  h4 {
+    @include type.type-style('heading-03');
+    color: $text-02;
+  }
+}
+
+.desktopHeading,
+.tabletHeading {
+  text-align: left;
+  text-transform: capitalize;
+  margin-bottom: layout.$spacing-05;
+
+  h4:after {
+    content: '';
+    display: block;
+    width: layout.$spacing-07;
+    padding-top: layout.$spacing-01;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+}
+
+.heading:after {
+  content: '';
+  display: block;
+  width: layout.$spacing-07;
+  padding-top: layout.$spacing-01;
+  border-bottom: 0.375rem solid var(--brand-03);
+}
+
+.tile {
+  border: 1px solid $ui-03;
+  margin-bottom: layout.$spacing-03;
+}
+
+[data-extension-id='clinical-views-summary'] {
+  height: auto;
+}

package/src/clinical-views/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './useEncounterRows';
+export * from './useFormsJson';
+export * from './useLastEncounter';

package/src/clinical-views/hooks/useEncounterRows.ts

@@ -0,0 +1,60 @@
+import { useCallback, useEffect, useState } from 'react';
+import useSWR from 'swr';
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { type Encounter } from '../types';
+
+export const encounterRepresentation =
+  'custom:(uuid,encounterDatetime,encounterType,location:(uuid,name),' +
+  'patient:(uuid,display,age,identifiers,person),encounterProviders:(uuid,provider:(uuid,name)),' +
+  'obs:(uuid,obsDatetime,voided,groupMembers,concept:(uuid,name:(uuid,name)),value:(uuid,name:(uuid,name),' +
+  'names:(uuid,conceptNameType,name))),form:(uuid,name),visit:(uuid,startDatetime,stopDatetime,visitType:(uuid,display)))';
+
+interface EncounterResponse {
+  results: Encounter[];
+  totalCount?: number;
+}
+
+export function useEncounterRows(
+  patientUuid: string,
+  encounterType: string,
+  encounterFilter: (encounter) => boolean,
+  afterFormSaveAction: () => void,
+  pageSize?: number,
+  currentPage?: number,
+) {
+  const startIndex = (currentPage - 1) * pageSize;
+  const [encounters, setEncounters] = useState([]);
+  const url = `${restBaseUrl}/encounter?encounterType=${encounterType}&patient=${patientUuid}&v=${encounterRepresentation}&totalCount=true&limit=${pageSize}&startIndex=${startIndex}`;
+
+  const { data: response, error, isLoading, mutate } = useSWR<{ data: EncounterResponse }, Error>(url, openmrsFetch);
+
+  useEffect(() => {
+    if (response) {
+      response.data.results.sort(
+        (a, b) => new Date(b.encounterDatetime).getTime() - new Date(a.encounterDatetime).getTime(),
+      );
+
+      if (encounterFilter) {
+        setEncounters(response.data.results.filter((encounter) => encounterFilter(encounter)));
+      } else {
+        setEncounters([...response.data.results]);
+      }
+    }
+  }, [encounterFilter, response]);
+
+  const onFormSave = useCallback(() => {
+    mutate();
+    if (afterFormSaveAction) {
+      afterFormSaveAction();
+    }
+  }, [afterFormSaveAction, mutate]);
+
+  return {
+    encounters,
+    total: response?.data?.totalCount,
+    isLoading,
+    error,
+    onFormSave,
+    mutate,
+  };
+}

package/src/clinical-views/hooks/useEncountersByVisit.ts

@@ -0,0 +1,13 @@
+import { type Encounter, restBaseUrl, useOpenmrsFetchAll } from '@openmrs/esm-framework';
+
+export function useEncountersByVisit(patientUuid: string, visitUuid: string) {
+  const customRepresentation =
+    'custom:(uuid,encounterType:(uuid,display),encounterProviders:(provider:(person:(display))),encounterDatetime,visit:(uuid))';
+  const url = `${restBaseUrl}/encounter?patient=${patientUuid}&order=desc&visit=${visitUuid}&v=${customRepresentation}`;
+  const { data: encounters, ...rest } = useOpenmrsFetchAll<Encounter>(url);
+
+  return {
+    encounters,
+    ...rest,
+  };
+}

package/src/clinical-views/hooks/useFormsJson.ts

@@ -0,0 +1,15 @@
+import useSWR from 'swr';
+
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { type Form } from '../types';
+
+export function useFormsJson(formUuid: string) {
+  const url = `${restBaseUrl}/form/${formUuid}`;
+  const { data, isLoading, error } = useSWR<{ data: Form }, Error>(formUuid ? url : null, openmrsFetch);
+
+  return {
+    formsJson: data?.data ?? null,
+    isLoading,
+    error,
+  };
+}

package/src/clinical-views/hooks/useLastEncounter.ts

@@ -0,0 +1,29 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { type Encounter } from '../types';
+import useSWR from 'swr';
+
+const encounterRepresentation =
+  'custom:(uuid,encounterDatetime,encounterType,location:(uuid,name),' +
+  'patient:(uuid,display,age,identifiers,person),encounterProviders:(uuid,provider:(uuid,name)),' +
+  'obs:(uuid,obsDatetime,voided,groupMembers,concept:(uuid,display,units,name:(uuid,name)),value:(uuid,name:(uuid,name,display),' +
+  'names:(uuid,conceptNameType,name,display))),form:(uuid,name))';
+
+export function useLastEncounter(patientUuid: string, encounterType: string) {
+  const query = `encounterType=${encounterType}&patient=${patientUuid}`;
+  const endpointUrl =
+    patientUuid && encounterType
+      ? `/ws/rest/v1/encounter?${query}&v=${encounterRepresentation}&limit=1&order=desc&startIndex=0`
+      : null;
+
+  const { data, error, isLoading, isValidating } = useSWR<{ data: { results: Array<Encounter> } }, Error>(
+    endpointUrl,
+    openmrsFetch,
+  );
+
+  return {
+    lastEncounter: data?.data.results?.length > 0 ? data?.data.results[0] : null,
+    error,
+    isLoading,
+    isValidating,
+  };
+}