@kenyaemr/esm-active-visits-app 7.0.2-pre.65

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

@@ -0,0 +1,328 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+@import '../root.scss';
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.encounterHeading {
+  text-align: left;
+  width: 100%;
+  margin: 0 1rem 1.3125rem;
+  color: $ui-05;
+}
+
+.medicationRecord {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .bodyLong01 {
+    margin: 0.25rem 0;
+  }
+}
+
+.medicationContainer {
+  background-color: $ui-01;
+  padding: 1rem;
+  width: 100% !important;
+}
+
+.dosage {
+  @include type.type-style('heading-compact-01');
+}
+
+.metadata {
+  @include type.type-style('label-01');
+  color: $text-02;
+  margin: spacing.$spacing-03 0 spacing.$spacing-05;
+}
+
+.visitsDetailWidgetContainer {
+  background-color: $ui-background;
+  width: 100%;
+  border: 1px solid $ui-03;
+}
+
+.visitsDetailHeaderContainer {
+  display: flex;
+  justify-content: space-between;
+  padding: spacing.$spacing-04 0 spacing.$spacing-04 spacing.$spacing-05;
+  background-color: $ui-background;
+}
+
+.visitsDetailHeaderContainer > h4:after {
+  content: '';
+  display: block;
+  width: 2rem;
+  padding-top: 0.188rem;
+  border-bottom: 0.375rem solid $brand-teal-01;
+}
+
+.customTable {
+  th {
+    padding: 0 !important;
+  }
+
+  tr[data-parent-row]:nth-child(odd) td {
+    background-color: $ui-02;
+  }
+
+  tbody tr[data-parent-row]:nth-child(even) td {
+    background-color: $ui-01;
+  }
+
+  td {
+    border-bottom: none !important;
+  }
+}
+
+.visitEmptyState {
+  text-align: center;
+  background-color: white;
+  padding: 2rem;
+  border: 1px solid $ui-03;
+  width: 100%;
+}
+
+.encounterEmptyState {
+  text-align: center;
+  margin: 0 1rem 1rem 1rem;
+}
+
+.expandedRow > td {
+  padding: inherit !important;
+}
+
+.expandedRow > td > div {
+  max-height: max-content !important;
+}
+
+.observation {
+  display: grid;
+  grid-template-columns: max-content auto;
+  grid-gap: 0.5rem;
+  margin: 0.5rem 0;
+}
+
+.observation > span {
+  align-self: center;
+}
+
+.summaryContainer {
+  background-color: $ui-background;
+  display: grid;
+  grid-template-columns: max-content auto;
+  padding: 1rem 0rem;
+  margin: 0 1rem;
+
+  :global(.cds--tabs) {
+    max-height: 7rem;
+  }
+}
+
+.flexSections {
+  display: flex;
+}
+
+.verticalTabs {
+  margin: 1rem 0;
+  scroll-behavior: smooth;
+
+  > ul {
+    flex-direction: column !important;
+  }
+
+  :global(.cds--tabs--scrollable .cds--tabs--scrollable__nav-item + .cds--tabs--scrollable__nav-item) {
+    margin-left: 0rem;
+  }
+
+  :global(.cds--tabs--scrollable .cds--tabs--scrollable__nav-link) {
+    border-bottom: 0 !important;
+    border-left: 2px solid $color-gray-30;
+  }
+}
+
+.tab {
+  outline: 0;
+  outline-offset: 0;
+  min-height: spacing.$spacing-07;
+
+  &:active,
+  &:focus {
+    outline: 2px solid var(--brand-03) !important;
+  }
+
+  &[aria-selected='true'] {
+    border-left: 3px solid var(--brand-03);
+    border-bottom: none;
+    font-weight: 600;
+    margin-left: 0rem !important;
+  }
+
+  &[aria-selected='false'] {
+    border-bottom: none;
+    border-left: 2px solid $ui-03;
+    margin-left: 0rem !important;
+  }
+}
+
+.tablist {
+  :global(.cds--tab--list) {
+    flex-direction: column;
+    max-height: fit-content;
+    overflow-x: visible;
+  }
+
+  > button :global(.cds--tabs .cds--tabs__nav-link) {
+    border-bottom: none;
+  }
+}
+
+.medicationBlock {
+  background-color: $ui-01;
+  padding: 0.625rem 6.75rem 0.75rem 1.063rem;
+  margin-top: 1.5rem;
+  width: 100% !important;
+}
+
+.medicationBlock:first-child {
+  margin-top: 0;
+}
+
+.diagnosisLabel {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+  margin-top: 5px;
+}
+
+.diagnosesList {
+  display: flex;
+  flex-flow: row wrap;
+  padding-bottom: 0.5rem;
+  margin: 0 1rem;
+  border-bottom: 1px solid $ui-03;
+}
+
+.actions {
+  margin: 0 1rem;
+}
+
+.contentSwitcher {
+  // TODO: Remove once override gets added to styleguide
+  :global(.cds--content-switcher-btn) {
+    min-width: fit-content;
+  }
+
+  :global(.cds--content-switcher__label) {
+    height: spacing.$spacing-05;
+  }
+}
+
+.notesContainer {
+  margin-bottom: 2rem;
+}
+
+.noteText {
+  background-color: $ui-01;
+  padding: 1rem;
+  width: 100% !important;
+  white-space: pre-wrap;
+}
+
+.desktopHeading,
+.tabletHeading {
+  text-align: left;
+  text-transform: capitalize;
+  margin-bottom: spacing.$spacing-05;
+
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+
+    &:after {
+      content: '';
+      display: block;
+      width: 2rem;
+      padding-top: 3px;
+      border-bottom: 0.375rem solid;
+      @include brand-03(border-bottom-color);
+    }
+  }
+}
+
+.tile {
+  text-align: center;
+}
+
+.emptyStateContent {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+  margin-top: spacing.$spacing-05;
+  margin-bottom: spacing.$spacing-03;
+}
+
+.emptyStateContainer {
+  background-color: $ui-02;
+  border: 1px solid $ui-03;
+  width: 100%;
+  margin: 0 auto;
+  max-width: 95vw;
+  padding-bottom: 0;
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .visitsDetailHeaderContainer {
+    padding: spacing.$spacing-04 spacing.$spacing-05 spacing.$spacing-04 0;
+    h4 {
+      text-align: right;
+    }
+    & > div {
+      & > div {
+        & :first-child {
+          border-bottom-left-radius: unset;
+          border-top-left-radius: unset;
+          border-bottom-right-radius: spacing.$spacing-02;
+          border-top-right-radius: spacing.$spacing-02;
+        }
+        & :first-child[aria-selected='false'] {
+          border-left: unset;
+          border-right: 0.0625rem solid #a6c8ff;
+        }
+        & :last-child {
+          border-bottom-right-radius: unset;
+          border-top-right-radius: unset;
+          border-bottom-left-radius: spacing.$spacing-02;
+          border-top-left-radius: spacing.$spacing-02;
+        }
+        & :last-child[aria-selected='false'] {
+          border-right: unset;
+          border-left: 0.0625rem solid #a6c8ff;
+        }
+      }
+    }
+  }
+  .summaryContainer {
+    .tablist {
+      & > div {
+        button {
+          text-align: right;
+        }
+        button[aria-selected='true'] {
+          border-left: unset;
+          border-right: 3px solid var(--brand-03);
+        }
+        button[aria-selected='false'] {
+          border-left: unset;
+          border-right: 2px solid #e0e0e0;
+        }
+      }
+    }
+  }
+}

package/src/visits-summary/visit-detail.component.tsx

@@ -0,0 +1,77 @@
+import React, { useMemo, useState } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { ContentSwitcher, DataTableSkeleton, Switch } from '@carbon/react';
+import { type Encounter, useVisit } from './visit.resource';
+import { formatTime, formatDatetime, parseDate } from '@openmrs/esm-framework';
+import EncounterList from './visits-components/encounter-list.component';
+import VisitSummary from './visits-components/visit-summary.component';
+import styles from './visit-detail-overview.scss';
+
+interface VisitDetailComponentProps {
+  visitUuid: string;
+  patientUuid: string;
+}
+
+const VisitDetailComponent: React.FC<VisitDetailComponentProps> = ({ visitUuid, patientUuid }) => {
+  const { t } = useTranslation();
+  const [contentSwitcherIndex, setContentSwitcherIndex] = useState(0);
+  const { visit, isLoading } = useVisit(visitUuid);
+
+  const encounters = useMemo(
+    () =>
+      visit
+        ? visit?.encounters?.map((encounter: Encounter) => ({
+            id: encounter.uuid,
+            time: formatTime(parseDate(encounter.encounterDateTime)),
+            encounterType: encounter.encounterType.display,
+            provider: encounter.encounterProviders.length > 0 ? encounter.encounterProviders[0].display : '',
+            obs: encounter.obs,
+          }))
+        : [],
+    [visit],
+  );
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+  if (visit) {
+    return (
+      <div className={styles.visitsDetailWidgetContainer}>
+        <div className={styles.visitsDetailHeaderContainer}>
+          <h4 className={styles.productiveHeading02}>
+            {visit?.visitType?.display}
+            <br />
+            <p className={classNames(styles.bodyLong01, styles.text02)}>
+              {formatDatetime(parseDate(visit?.startDatetime))}
+            </p>
+          </h4>
+          <div className={styles.actions}>
+            <ContentSwitcher
+              className={styles.contentSwitcher}
+              selectedIndex={contentSwitcherIndex}
+              onChange={({ index }) => setContentSwitcherIndex(index)}>
+              <Switch name="allEncounters" text={t('allEncounters', 'All Encounters')} />
+              <Switch name="visitSummary" text={t('visitSummary', 'Visit Summary')} />
+            </ContentSwitcher>
+          </div>
+        </div>
+        {contentSwitcherIndex === 0 && visit?.encounters && (
+          <EncounterList visitUuid={visit.uuid} encounters={encounters} />
+        )}
+        {contentSwitcherIndex === 1 && <VisitSummary encounters={visit.encounters} patientUuid={patientUuid} />}
+      </div>
+    );
+  } else {
+    return (
+      <div className={styles.visitEmptyState}>
+        <h4 className={styles.productiveHeading02}>{t('noEncountersFound', 'No encounters found')}</h4>
+        <p className={classNames(styles.bodyLong01, styles.text02)}>
+          {t('thereIsNoInformationToDisplayHere', 'There is no information to display here')}
+        </p>
+      </div>
+    );
+  }
+};
+
+export default VisitDetailComponent;

package/src/visits-summary/visit-detail.test.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import { render, screen, act } from '@testing-library/react';
+import VisitDetailComponent from './visit-detail.component';
+import { useVisit } from './visit.resource';
+import { formatDate } from '@openmrs/esm-framework';
+
+jest.mock('./visit.resource');
+
+const mockedUseVisit = useVisit as jest.Mock;
+
+describe('VisitDetailComponent', () => {
+  const visitUuid = '497b8b17-54ec-4726-87ec-3c4da8cdcaeb';
+  const patientUuid = '691eed12-c0f1-11e2-94be-8c13b969e334';
+
+  it('renders loading indicator when data is loading', () => {
+    mockedUseVisit.mockReturnValueOnce({
+      visit: null,
+      isLoading: true,
+    });
+
+    render(<VisitDetailComponent visitUuid={visitUuid} patientUuid={patientUuid} />);
+
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  it('should render visit details and switches when data is available', () => {
+    let visitDate = new Date();
+    mockedUseVisit.mockReturnValueOnce({
+      visit: {
+        uuid: visitUuid,
+        visitType: { display: 'Some Visit Type' },
+        startDatetime: visitDate,
+        encounters: [],
+      },
+      isLoading: false,
+    });
+
+    render(<VisitDetailComponent visitUuid={visitUuid} patientUuid={patientUuid} />);
+
+    expect(screen.getByText(/Some Visit Type/)).toBeInTheDocument();
+    expect(screen.getByText(formatDate(visitDate), { collapseWhitespace: false })).toBeInTheDocument();
+
+    expect(screen.getByText('All Encounters')).toBeInTheDocument();
+    expect(screen.getByText('Visit Summary')).toBeInTheDocument();
+  });
+
+  it('should render EncounterLists when "All Encounters" switch is selected', () => {
+    mockedUseVisit.mockReturnValue({
+      visit: {
+        uuid: visitUuid,
+        visitType: { display: 'Some Visit Type' },
+        startDatetime: '2023-07-30T12:34:56Z',
+        encounters: [
+          {
+            uuid: 'encounter-1',
+            encounterDateTime: '2023-07-30T12:34:56Z',
+            encounterType: { display: 'Encounter Type' },
+            encounterProviders: [],
+            obs: [],
+          },
+        ],
+      },
+      isLoading: false,
+    });
+
+    render(<VisitDetailComponent visitUuid={visitUuid} patientUuid={patientUuid} />);
+
+    act(() => {
+      screen.getByText('All Encounters').click();
+    });
+
+    expect(screen.getByTestId('encountersTable')).toBeInTheDocument();
+  });
+
+  it('should render VisitSummaries when "Visit Summary" switch is selected', () => {
+    mockedUseVisit.mockReturnValue({
+      visit: {
+        uuid: visitUuid,
+        visitType: { display: 'Some Visit Type' },
+        startDatetime: '2023-07-30T12:34:56Z',
+        encounters: [
+          {
+            uuid: 'encounter-1',
+            encounterDateTime: '2023-07-30T12:34:56Z',
+            encounterType: { display: 'Encounter Type 1' },
+            encounterProviders: [],
+            obs: [],
+            orders: [],
+          },
+          {
+            uuid: 'encounter-2',
+            encounterDateTime: '2023-07-30T13:45:00Z',
+            encounterType: { display: 'Encounter Type 2' },
+            encounterProviders: [],
+            obs: [],
+            orders: [],
+          },
+        ],
+      },
+      isLoading: false,
+    });
+
+    render(<VisitDetailComponent visitUuid={visitUuid} patientUuid={patientUuid} />);
+
+    act(() => {
+      screen.getByText('Visit Summary').click();
+    });
+
+    expect(screen.getByRole('tablist', { name: 'Visit summary tabs' })).toBeInTheDocument();
+  });
+
+  it('should render loading indicator when data is loading', () => {
+    mockedUseVisit.mockReturnValue({
+      visit: null,
+      isLoading: false,
+    });
+
+    render(<VisitDetailComponent visitUuid={visitUuid} patientUuid={patientUuid} />);
+
+    expect(screen.queryByRole('button', { name: 'All Encounters' })).toBeNull();
+  });
+});

package/src/visits-summary/visit.resource.ts

@@ -0,0 +1,190 @@
+import { openmrsFetch, restBaseUrl, type OpenmrsResource, type Visit } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+
+export interface Encounter {
+  uuid: string;
+  encounterDateTime: string;
+  encounterProviders: Array<{
+    uuid: string;
+    display: string;
+    encounterRole: {
+      uuid: string;
+      display: string;
+    };
+    provider: {
+      uuid: string;
+      person: {
+        uuid: string;
+        display: string;
+      };
+    };
+  }>;
+  encounterType: {
+    uuid: string;
+    display: string;
+  };
+  obs: Array<Observation>;
+  orders: Array<Order>;
+}
+
+export interface EncounterProvider {
+  uuid: string;
+  display: string;
+  encounterRole: {
+    uuid: string;
+    display: string;
+  };
+  provider: {
+    uuid: string;
+    person: {
+      uuid: string;
+      display: string;
+    };
+  };
+}
+
+export interface Observation {
+  uuid: string;
+  concept: {
+    uuid: string;
+    display: string;
+    conceptClass: {
+      uuid: string;
+      display: string;
+    };
+  };
+  display: string;
+  groupMembers: null | Array<{
+    uuid: string;
+    concept: {
+      uuid: string;
+      display: string;
+    };
+    value: {
+      uuid: string;
+      display: string;
+    };
+  }>;
+  value: any;
+  obsDatetime: string;
+}
+
+export interface Order {
+  uuid: string;
+  dateActivated: string;
+  dateStopped?: Date | 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: {
+    uuid: string;
+    person: {
+      uuid: string;
+      display: string;
+    };
+  };
+  orderType: {
+    uuid: string;
+    display: string;
+  };
+  route: {
+    uuid: string;
+    display: string;
+  };
+  quantity: number;
+  quantityUnits: OpenmrsResource;
+}
+
+export interface Note {
+  note: string;
+  provider: {
+    name: string;
+    role: string;
+  };
+  time: string;
+}
+
+export interface OrderItem {
+  order: Order;
+  provider: {
+    name: string;
+    role: string;
+  };
+}
+
+export function useVisit(visitUuid: string) {
+  const customRepresentation =
+    'custom:(uuid,encounters:(uuid,encounterDatetime,' +
+    'orders:(uuid,dateActivated,' +
+    'drug:(uuid,name,strength),doseUnits:(uuid,display),' +
+    'dose,route:(uuid,display),frequency:(uuid,display),' +
+    'duration,durationUnits:(uuid,display),numRefills,' +
+    'orderType:(uuid,display),orderer:(uuid,person:(uuid,display))),' +
+    'obs:(uuid,concept:(uuid,display,conceptClass:(uuid,display)),' +
+    'display,groupMembers:(uuid,concept:(uuid,display),' +
+    'value:(uuid,display)),value),encounterType:(uuid,display),' +
+    'encounterProviders:(uuid,display,encounterRole:(uuid,display),' +
+    'provider:(uuid,person:(uuid,display)))),visitType:(uuid,name,display),startDatetime';
+
+  const apiUrl = `${restBaseUrl}/visit/${visitUuid}?v=${customRepresentation}`;
+
+  const { data, error, isLoading, isValidating } = useSWR<{ data: Visit }, Error>(
+    visitUuid ? apiUrl : null,
+    openmrsFetch,
+  );
+
+  return {
+    visit: data ? data.data : null,
+    isError: error,
+    isLoading,
+    isValidating,
+  };
+}
+
+export function getDosage(strength: string, doseNumber: number) {
+  if (!strength || !doseNumber) {
+    return '';
+  }
+
+  const i = strength.search(/\D/);
+  const strengthQuantity = parseInt(strength.substring(0, i));
+
+  const concentrationStartIndex = strength.search(/\//);
+
+  let strengthUnits = strength.substring(i);
+
+  if (concentrationStartIndex >= 0) {
+    strengthUnits = strength.substring(i, concentrationStartIndex);
+    const j = strength.substring(concentrationStartIndex + 1).search(/\D/);
+    const concentrationQuantity = parseInt(strength.substr(concentrationStartIndex + 1, j));
+    const concentrationUnits = strength.substring(concentrationStartIndex + 1 + j);
+    return `${doseNumber} ${strengthUnits} (${
+      (doseNumber / strengthQuantity) * concentrationQuantity
+    } ${concentrationUnits})`;
+  } else {
+    return `${strengthQuantity * doseNumber} ${strengthUnits}`;
+  }
+}