@palladium-ethiopia/esm-clinical-workflow-app 5.4.2-pre.20 → 5.4.2-pre.26

package/src/patient-chart/visit/visits-widget/past-visits-components/encounters-table/visit-encounters-table.component.tsx

@@ -0,0 +1,42 @@
+import React, { useMemo, useState } from 'react';
+import { usePagination, type Visit } from '@openmrs/esm-framework';
+import EncountersTable from './encounters-table.component';
+import { type EncountersTableProps } from './encounters-table.resource';
+
+interface VisitEncountersTableProps {
+  patientUuid: string;
+  visit: Visit;
+}
+
+/**
+ * This component shows a table of encounters from a single visit of a patient
+ */
+const VisitEncountersTable: React.FC<VisitEncountersTableProps> = ({ patientUuid, visit }) => {
+  const [pageSize, setPageSize] = useState(10);
+  const mappedEncounters = useMemo(
+    () =>
+      visit.encounters.map((encounter) => {
+        encounter.visit = visit;
+        return encounter;
+      }),
+    [visit],
+  );
+  const { results: paginatedEncounters, currentPage, goTo } = usePagination(mappedEncounters, pageSize);
+
+  const encountersTableProps: EncountersTableProps = {
+    patientUuid,
+    totalCount: visit.encounters.length,
+    currentPage,
+    goTo,
+    isLoading: false,
+    showVisitType: false,
+    paginatedEncounters: paginatedEncounters,
+    showEncounterTypeFilter: false,
+    pageSize,
+    setPageSize,
+  };
+
+  return <EncountersTable {...encountersTableProps} />;
+};
+
+export default VisitEncountersTable;

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

@@ -0,0 +1,157 @@
+import React from 'react';
+import capitalize from 'lodash-es/capitalize';
+import { useTranslation } from 'react-i18next';
+import { EmptyState } from '@openmrs/esm-patient-common-lib';
+import { Tag, Tooltip } from '@carbon/react';
+import { formatDate, useConfig } from '@openmrs/esm-framework';
+import type { OrderItem } from '../visit.resource';
+import styles from '../visit-detail-overview.scss';
+import { type ChartConfig } from '../../../../config-schema';
+
+interface MedicationSummaryProps {
+  medications: Array<OrderItem>;
+}
+
+const MedicationSummary: React.FC<MedicationSummaryProps> = ({ medications }) => {
+  const { t } = useTranslation();
+  const { drugOrderTypeUUID } = useConfig<ChartConfig>();
+
+  const isPastMedication = (order: OrderItem['order']) => {
+    if (!order) {
+      return false;
+    }
+
+    return (
+      order.action === 'DISCONTINUE' ||
+      (order.dateStopped && new Date(order.dateStopped) <= new Date()) ||
+      (order.autoExpireDate && new Date(order.autoExpireDate) <= new Date())
+    );
+  };
+
+  const drugOrders = medications?.filter((medication) => {
+    return medication?.order?.orderType?.uuid === drugOrderTypeUUID;
+  });
+
+  if (drugOrders.length === 0) {
+    return (
+      <EmptyState displayText={t('medications__lower', 'medications')} headerTitle={t('medications', 'Medications')} />
+    );
+  }
+
+  return (
+    <div className={styles.medicationRecord}>
+      {drugOrders.map(
+        (medication, index) =>
+          (medication?.order?.dose || medication?.order?.dosingInstructions) && (
+            <React.Fragment key={index}>
+              <div className={styles.medicationContainer}>
+                <div>
+                  <p className={styles.bodyLong01}>
+                    <strong>{capitalize(medication?.order?.drug?.display)}</strong>{' '}
+                    {medication?.order?.drug?.strength && (
+                      <>&mdash; {medication?.order?.drug?.strength?.toLowerCase()}</>
+                    )}{' '}
+                    {medication?.order?.doseUnits?.display && (
+                      <>&mdash; {medication?.order?.doseUnits?.display?.toLowerCase()}</>
+                    )}{' '}
+                    {isPastMedication(medication.order) && (
+                      <Tooltip align="right" label={<>{formatDate(new Date(medication.order.dateStopped))}</>}>
+                        <Tag type="gray" className={styles.tag}>
+                          {t('discontinued', 'Discontinued')}
+                        </Tag>
+                      </Tooltip>
+                    )}
+                  </p>
+                  <p className={styles.bodyLong01}>
+                    {medication?.order?.dose ? (
+                      <>
+                        <span className={styles.label01}> {t('dose', 'Dose').toUpperCase()} </span>{' '}
+                        <span className={styles.dosage}>
+                          {medication?.order?.dose} {medication?.order?.doseUnits?.display?.toLowerCase()}
+                        </span>{' '}
+                        {medication.order?.route?.display && (
+                          <span>&mdash; {medication?.order?.route?.display?.toLowerCase()} &mdash; </span>
+                        )}
+                        {medication?.order?.frequency?.display?.toLowerCase()} &mdash;{' '}
+                        {!medication?.order?.duration
+                          ? t('orderIndefiniteDuration', 'Indefinite duration')
+                          : t('orderDurationAndUnit', 'for {{duration}} {{durationUnit}}', {
+                              duration: medication?.order?.duration,
+                              durationUnit: medication?.order?.durationUnits?.display?.toLowerCase(),
+                            })}
+                        {medication?.order?.numRefills !== 0 && (
+                          <span>
+                            <span className={styles.label01}> &mdash; {t('refills', 'Refills').toUpperCase()}</span>{' '}
+                            {medication?.order?.numRefills}
+                            {''}
+                          </span>
+                        )}
+                        {medication?.order?.dosingInstructions && (
+                          <span> &mdash; {medication?.order?.dosingInstructions?.toLocaleLowerCase()}</span>
+                        )}
+                      </>
+                    ) : (
+                      <>
+                        <span className={styles.label01}>
+                          {t('dosingInstructions', 'Dosing Instructions').toUpperCase()}{' '}
+                        </span>
+                        <span className={styles.dosage}>{medication?.order?.dosingInstructions}</span>
+                        {medication?.order?.duration && (
+                          <span>
+                            {' '}
+                            &mdash;{' '}
+                            {t('orderDurationAndUnit', 'for {{duration}} {{durationUnit}}', {
+                              duration: medication?.order?.duration,
+                              durationUnit: medication?.order?.durationUnits?.display?.toLowerCase(),
+                            })}
+                          </span>
+                        )}
+                        {medication?.order?.numRefills !== 0 && (
+                          <span>
+                            <span className={styles.label01}> &mdash; {t('refills', 'Refills').toUpperCase()}</span>{' '}
+                            {medication?.order?.numRefills}
+                          </span>
+                        )}
+                      </>
+                    )}
+                  </p>
+                  <p className={styles.bodyLong01}>
+                    {medication?.order?.orderReasonNonCoded ? (
+                      <span>
+                        <span className={styles.label01}>{t('indication', 'Indication').toUpperCase()}</span>{' '}
+                        {medication?.order?.orderReasonNonCoded}
+                      </span>
+                    ) : null}
+                    {medication?.order?.orderReasonNonCoded && medication?.order?.quantity && <>&mdash;</>}
+                    {medication?.order?.quantity ? (
+                      <span>
+                        <span className={styles.label01}> {t('quantity', 'Quantity').toUpperCase()}</span>{' '}
+                        {medication?.order?.quantity}
+                      </span>
+                    ) : null}
+                    {medication?.order?.dateStopped ? (
+                      <span className={styles.bodyShort01}>
+                        <span className={styles.label01}>
+                          {medication?.order?.quantity ? ` — ` : ''} {t('endDate', 'End date').toUpperCase()}
+                        </span>{' '}
+                        {formatDate(new Date(medication?.order?.dateStopped))}
+                      </span>
+                    ) : null}
+                  </p>
+                </div>
+              </div>
+
+              <p className={styles.metadata}>
+                <div className={styles.startDateColumn}>
+                  <span>{formatDate(new Date(medication.order.dateActivated))}</span> &middot;{' '}
+                  <span>{medication.order.orderer?.display ?? '--'}</span>
+                </div>
+              </p>
+            </React.Fragment>
+          ),
+      )}
+    </div>
+  );
+};
+
+export default MedicationSummary;

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import type { Note } from '../visit.resource';
+import { EmptyState } from '@openmrs/esm-patient-common-lib';
+import styles from '../visit-detail-overview.scss';
+
+interface NotesSummaryProps {
+  notes: Array<Note>;
+}
+
+const NotesSummary: React.FC<NotesSummaryProps> = ({ notes }) => {
+  const { t } = useTranslation();
+
+  if (notes.length === 0) {
+    return <EmptyState displayText={t('notes__lower', 'notes')} headerTitle={t('notes', 'Notes')} />;
+  }
+
+  return (
+    <>
+      {notes.map((note: Note, index) => (
+        <div className={styles.notesContainer} key={index}>
+          <p className={classNames(styles.noteText, styles.bodyLong01)}>{note.note}</p>
+          <p className={styles.metadata}>
+            {note.time} {note.provider.name ? <span>&middot; {note.provider.name} </span> : null}
+            {note.provider.role ? <span>&middot; {note.provider.role}</span> : null}
+          </p>
+        </div>
+      ))}
+    </>
+  );
+};
+
+export default NotesSummary;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { type Encounter, ExtensionSlot } from '@openmrs/esm-framework';
+import { type ExternalOverviewProps } from '@openmrs/esm-patient-common-lib';
+
+const TestsSummary = ({ patientUuid, encounters }: { patientUuid: string; encounters: Array<Encounter> }) => {
+  const filter = React.useMemo<ExternalOverviewProps['filter']>(() => {
+    const encounterIds = encounters.map((e) => `Encounter/${e.uuid}`);
+    return ([entry]) => {
+      return encounterIds.includes(entry.encounter?.reference);
+    };
+  }, [encounters]);
+
+  return <ExtensionSlot name="test-results-filtered-overview-slot" state={{ filter, patientUuid }} />;
+};
+
+export default TestsSummary;

package/src/patient-chart/visit/visits-widget/past-visits-components/visit-actions-cell.scss

@@ -0,0 +1,4 @@
+.visitActions {
+  display: flex;
+  align-items: center;
+}

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

@@ -0,0 +1,176 @@
+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,
+  Extension,
+  ExtensionSlot,
+  formatTime,
+  parseDate,
+  useAssignedExtensions,
+  useConfig,
+  type Visit,
+} from '@openmrs/esm-framework';
+import { DiagnosisTags } from '../../visit-history-table/diagnosis-tags.component';
+import type { ExternalOverviewProps } from '@openmrs/esm-patient-common-lib';
+import { type Note, type Order, type OrderItem } from '../visit.resource';
+import MedicationSummary from './medications-summary.component';
+import NotesSummary from './notes-summary.component';
+import TestsSummary from './tests-summary.component';
+import VisitEncountersTable from './encounters-table/visit-encounters-table.component';
+import VisitTimeline from '../single-visit-details/visit-timeline/visit-timeline.component';
+import { type ChartConfig } from '../../../../config-schema';
+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)) {
+            // Putting all notes in a single array.
+            notes.push({
+              note: obs.value as string, // TODO: add better typing check
+              provider: {
+                name: enc.encounterProviders.length ? enc.encounterProviders[0].provider.person.display : '',
+                role: enc.encounterProviders.length ? enc.encounterProviders[0].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 testsFilter = useMemo<ExternalOverviewProps['filter']>(() => {
+    const encounterIds = visit?.encounters?.map((e) => `Encounter/${e.uuid}`);
+    return ([entry]) => {
+      return encounterIds.includes(entry.encounter?.reference);
+    };
+  }, [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={testsFilter.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="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>
+            <VisitEncountersTable visit={visit} patientUuid={patientUuid} />
+          </TabPanel>
+          <ExtensionSlot name={visitSummaryPanelSlot}>
+            <TabPanel>
+              <Extension state={{ patientUuid, visit }} />
+            </TabPanel>
+          </ExtensionSlot>
+        </TabPanels>
+      </Tabs>
+    </div>
+  );
+};
+
+export default VisitSummary;

package/src/patient-chart/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: 10rem;
+  }
+}
+
+.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/patient-chart/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/patient-chart/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;
+}