@ampath/esm-dispensing-app 1.10.0-next.1

package/src/prescriptions/prescription-details.component.tsx

@@ -0,0 +1,152 @@
+import React from 'react';
+import { SkeletonText, Tag, Tile } from '@carbon/react';
+import { WarningFilled } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import { type PatientUuid, useConfig, UserHasAccess } from '@openmrs/esm-framework';
+import { computeMedicationRequestCombinedStatus, getConceptCodingDisplay, useStaleEncounterUuids } from '../utils';
+import { PRIVILEGE_CREATE_DISPENSE } from '../constants';
+import { type AllergyIntolerance, type MedicationRequest, MedicationRequestCombinedStatus } from '../types';
+import { type PharmacyConfig } from '../config-schema';
+import { usePatientAllergies, usePrescriptionDetails } from '../medication-request/medication-request.resource';
+import ActionButtons from '../components/action-buttons.component';
+import MedicationEvent from '../components/medication-event.component';
+import PrescriptionsActionsFooter from './prescription-actions.component';
+import styles from './prescription-details.scss';
+
+const PrescriptionDetails: React.FC<{
+  encounterUuid: string;
+  patientUuid: PatientUuid;
+}> = ({ encounterUuid, patientUuid }) => {
+  const { t } = useTranslation();
+  const config = useConfig<PharmacyConfig>();
+  const {
+    allergies,
+    totalAllergies,
+    isLoading: isLoadingAllergies,
+    error: allergiesError,
+  } = usePatientAllergies(patientUuid, config.refreshInterval);
+  const { medicationRequestBundles, error, isLoading } = usePrescriptionDetails(encounterUuid, config.refreshInterval);
+  const { staleEncounterUuids } = useStaleEncounterUuids();
+
+  const generateStatusTag = (medicationRequest: MedicationRequest): React.ReactNode => {
+    const combinedStatus: MedicationRequestCombinedStatus = computeMedicationRequestCombinedStatus(
+      medicationRequest,
+      config.medicationRequestExpirationPeriodInDays,
+    );
+    if (combinedStatus === MedicationRequestCombinedStatus.cancelled) {
+      return <Tag type="red">{t('cancelled', 'Cancelled')}</Tag>;
+    }
+
+    if (combinedStatus === MedicationRequestCombinedStatus.completed) {
+      return <Tag type="green">{t('completed', 'Completed')}</Tag>;
+    }
+
+    if (combinedStatus === MedicationRequestCombinedStatus.expired) {
+      return <Tag type="red">{t('expired', 'Expired')}</Tag>;
+    }
+
+    if (combinedStatus === MedicationRequestCombinedStatus.declined) {
+      return <Tag type="red">{t('closed', 'Closed')}</Tag>;
+    }
+
+    if (combinedStatus === MedicationRequestCombinedStatus.on_hold) {
+      return <Tag type="red">{t('paused', 'Paused')}</Tag>;
+    }
+
+    return null;
+  };
+
+  const displayAllergies = (allergies: Array<AllergyIntolerance>): string => {
+    const fallbackLabel = t('unknownAllergy', 'Unknown allergy');
+    return allergies
+      .map((allergy) => {
+        // Prefer code.text as it contains the human-readable allergen name
+        // (especially important for "Other" type allergies where coding display is generic)
+        if (allergy.code?.text) {
+          return allergy.code.text;
+        }
+        if (allergy.code?.coding?.length) {
+          return getConceptCodingDisplay(allergy.code.coding) ?? allergy.code.coding[0]?.display;
+        }
+        return fallbackLabel;
+      })
+      .filter(Boolean)
+      .join(', ');
+  };
+
+  return (
+    <div className={styles.prescriptionContainer}>
+      {isLoadingAllergies && (
+        <Tile className={styles.skeletonTile}>
+          <SkeletonText />
+        </Tile>
+      )}
+      {!isLoadingAllergies && (
+        <Tile className={styles.allergiesTile}>
+          <div className={styles.allergiesContent}>
+            <div>
+              <WarningFilled size={24} className={styles.allergiesIcon} />
+              <p>
+                {allergiesError && (
+                  <span className={styles.error}>
+                    {t('errorLoadingAllergies', 'Error loading allergies')}: {allergiesError.message}
+                  </span>
+                )}
+                {!allergiesError && totalAllergies > 0 && (
+                  <span>
+                    <span className={styles.allergiesCount}>
+                      {t('allergiesCount', '{{ count }} allergies', {
+                        count: totalAllergies,
+                      })}
+                    </span>{' '}
+                    {displayAllergies(allergies)}
+                  </span>
+                )}
+                {!allergiesError &&
+                  typeof totalAllergies === 'number' &&
+                  totalAllergies === 0 &&
+                  t('noAllergyDetailsFound', 'No allergy details found')}
+              </p>
+            </div>
+          </div>
+        </Tile>
+      )}
+      <h5 className={styles.prescribedHeader}>{t('prescribed', 'Prescribed')}</h5>
+      {isLoading && (
+        <Tile className={styles.skeletonTile}>
+          <SkeletonText paragraph lineCount={2} />
+        </Tile>
+      )}
+      {error && (
+        <p className={styles.error}>
+          {t('errorLoadingPrescriptionDetails', 'Error loading prescription details')}: {error.message}
+        </p>
+      )}
+      {medicationRequestBundles &&
+        (medicationRequestBundles.length > 0 ? (
+          medicationRequestBundles.map((bundle) => (
+            <MedicationEvent
+              key={bundle.request.id}
+              medicationEvent={bundle.request}
+              status={generateStatusTag(bundle.request)}>
+              <UserHasAccess privilege={PRIVILEGE_CREATE_DISPENSE}>
+                <ActionButtons
+                  patientUuid={patientUuid}
+                  encounterUuid={encounterUuid}
+                  medicationRequestBundle={bundle}
+                  disabled={staleEncounterUuids.includes(encounterUuid)}
+                />
+              </UserHasAccess>
+            </MedicationEvent>
+          ))
+        ) : (
+          <p className={styles.emptyState}>{t('noPrescriptionsFound', 'No prescriptions found')}</p>
+        ))}
+      {medicationRequestBundles?.length > 0 && (
+        <PrescriptionsActionsFooter encounterUuid={encounterUuid} patientUuid={patientUuid} />
+      )}
+    </div>
+  );
+};
+
+export default PrescriptionDetails;

package/src/prescriptions/prescription-details.scss

@@ -0,0 +1,87 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.prescriptionContainer {
+  display: flex;
+  flex-direction: column;
+  max-width: 80%;
+  margin-bottom: layout.$spacing-05;
+
+  &:global(.cds--tile) {
+    min-height: 3rem !important;
+    padding-left: 10px !important;
+  }
+}
+
+.prescriptionContainer > :global(.cds--tile) {
+  min-height: 3rem !important;
+  padding-left: 10px !important;
+  margin: auto;
+}
+
+.allergiesTile {
+  height: layout.$spacing-06;
+  padding: 0 layout.$spacing-03 0 0;
+  border-left: layout.$spacing-02 solid #f1c21b;
+  background-color: rgba(253, 209, 58, 0.3);
+  margin: auto;
+  width: 100%;
+}
+
+.allergiesContent {
+  margin: auto;
+  min-width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+
+  div {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+  }
+
+  p {
+    margin-left: 10px;
+    font-size: 0.9rem;
+    width: 80%;
+  }
+
+  a {
+    margin: auto;
+    color: #0f62fe;
+    text-decoration: none;
+    text-align: right;
+  }
+}
+
+svg.allergiesIcon {
+  fill: #f1c21b;
+  vertical-align: middle;
+}
+
+.allergiesCount {
+  font-weight: bold;
+}
+
+.prescribedHeader {
+  padding-top: layout.$spacing-03;
+  padding-bottom: layout.$spacing-03;
+  font-size: 0.9rem;
+}
+
+.error {
+  color: $danger;
+}
+
+.emptyState {
+  @include type.type-style('body-01');
+  color: $text-02;
+  margin: layout.$spacing-05 0;
+}
+
+.skeletonTile {
+  width: 100%;
+}

package/src/prescriptions/prescription-details.test.tsx

@@ -0,0 +1,267 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { useConfig } from '@openmrs/esm-framework';
+import { usePrescriptionDetails, usePatientAllergies } from '../medication-request/medication-request.resource';
+import { useStaleEncounterUuids } from '../utils';
+import PrescriptionDetails from './prescription-details.component';
+
+jest.mock('../medication-request/medication-request.resource');
+jest.mock('../utils', () => ({
+  ...jest.requireActual('../utils'),
+  useStaleEncounterUuids: jest.fn(),
+}));
+
+const mockUseConfig = jest.mocked(useConfig);
+const mockUsePrescriptionDetails = jest.mocked(usePrescriptionDetails);
+const mockUsePatientAllergies = jest.mocked(usePatientAllergies);
+const mockUseStaleEncounterUuids = jest.mocked(useStaleEncounterUuids);
+
+const mockEncounterUuid = 'test-encounter-uuid';
+const mockPatientUuid = 'test-patient-uuid';
+
+describe('PrescriptionDetails', () => {
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      refreshInterval: 10000,
+      medicationRequestExpirationPeriodInDays: 90,
+      dispenseBehavior: {
+        allowModifyingPrescription: false,
+        restrictTotalQuantityDispensed: false,
+      },
+    });
+    mockUseStaleEncounterUuids.mockReturnValue({
+      staleEncounterUuids: [],
+    });
+  });
+
+  describe('Allergies Display', () => {
+    it('does not show allergies content while loading', () => {
+      mockUsePatientAllergies.mockReturnValue({
+        allergies: [],
+        totalAllergies: undefined,
+        error: undefined,
+        isLoading: true,
+      });
+      mockUsePrescriptionDetails.mockReturnValue({
+        medicationRequestBundles: [],
+        prescriptionDate: new Date(),
+        error: undefined,
+        isLoading: false,
+        mutate: jest.fn(),
+        isValidating: false,
+      });
+
+      render(<PrescriptionDetails encounterUuid={mockEncounterUuid} patientUuid={mockPatientUuid} />);
+
+      // While loading allergies, should not show allergy details or no allergies message
+      expect(screen.queryByText(/no allergy details found/i)).not.toBeInTheDocument();
+    });
+
+    it('shows error message when fetching allergies fails', () => {
+      const errorMessage = 'Network error';
+      mockUsePatientAllergies.mockReturnValue({
+        allergies: [],
+        totalAllergies: undefined,
+        error: new Error(errorMessage),
+        isLoading: false,
+      });
+      mockUsePrescriptionDetails.mockReturnValue({
+        medicationRequestBundles: [],
+        prescriptionDate: new Date(),
+        error: undefined,
+        isLoading: false,
+        mutate: jest.fn(),
+        isValidating: false,
+      });
+
+      render(<PrescriptionDetails encounterUuid={mockEncounterUuid} patientUuid={mockPatientUuid} />);
+
+      expect(screen.getByText(/error loading allergies/i)).toBeInTheDocument();
+    });
+
+    it('shows no allergies message when patient has no allergies', () => {
+      mockUsePatientAllergies.mockReturnValue({
+        allergies: [],
+        totalAllergies: 0,
+        error: undefined,
+        isLoading: false,
+      });
+      mockUsePrescriptionDetails.mockReturnValue({
+        medicationRequestBundles: [],
+        prescriptionDate: new Date(),
+        error: undefined,
+        isLoading: false,
+        mutate: jest.fn(),
+        isValidating: false,
+      });
+
+      render(<PrescriptionDetails encounterUuid={mockEncounterUuid} patientUuid={mockPatientUuid} />);
+
+      expect(screen.getByText(/no allergy details found/i)).toBeInTheDocument();
+    });
+
+    it('displays allergy count and names', () => {
+      mockUsePatientAllergies.mockReturnValue({
+        allergies: [
+          {
+            id: 'allergy-1',
+            code: {
+              text: 'Penicillin',
+              coding: [{ code: '123', display: 'Penicillin' }],
+            },
+          },
+          {
+            id: 'allergy-2',
+            code: {
+              text: 'Aspirin',
+              coding: [{ code: '456', display: 'Aspirin' }],
+            },
+          },
+        ] as any,
+        totalAllergies: 2,
+        error: undefined,
+        isLoading: false,
+      });
+      mockUsePrescriptionDetails.mockReturnValue({
+        medicationRequestBundles: [],
+        prescriptionDate: new Date(),
+        error: undefined,
+        isLoading: false,
+        mutate: jest.fn(),
+        isValidating: false,
+      });
+
+      render(<PrescriptionDetails encounterUuid={mockEncounterUuid} patientUuid={mockPatientUuid} />);
+
+      // Translation mock doesn't interpolate, check for allergies text pattern
+      expect(screen.getByText(/allergies/i)).toBeInTheDocument();
+      expect(screen.getByText(/Penicillin/)).toBeInTheDocument();
+      expect(screen.getByText(/Aspirin/)).toBeInTheDocument();
+    });
+
+    it('prefers code.text over coding.display for "Other" type allergies', () => {
+      // This tests the fix we made for allergies like "Corn" where the coding
+      // display shows "Other" but code.text contains the actual allergen name
+      mockUsePatientAllergies.mockReturnValue({
+        allergies: [
+          {
+            id: 'allergy-1',
+            code: {
+              text: 'Corn', // Should prefer this
+              coding: [{ code: '5622', display: 'Other' }], // Over this
+            },
+          },
+        ] as any,
+        totalAllergies: 1,
+        error: undefined,
+        isLoading: false,
+      });
+      mockUsePrescriptionDetails.mockReturnValue({
+        medicationRequestBundles: [],
+        prescriptionDate: new Date(),
+        error: undefined,
+        isLoading: false,
+        mutate: jest.fn(),
+        isValidating: false,
+      });
+
+      render(<PrescriptionDetails encounterUuid={mockEncounterUuid} patientUuid={mockPatientUuid} />);
+
+      expect(screen.getByText(/Corn/)).toBeInTheDocument();
+      expect(screen.queryByText('Other')).not.toBeInTheDocument();
+    });
+
+    it('falls back to coding.display when code.text is not available', () => {
+      mockUsePatientAllergies.mockReturnValue({
+        allergies: [
+          {
+            id: 'allergy-1',
+            code: {
+              coding: [{ code: '123', display: 'Sulfonamides' }],
+            },
+          },
+        ] as any,
+        totalAllergies: 1,
+        error: undefined,
+        isLoading: false,
+      });
+      mockUsePrescriptionDetails.mockReturnValue({
+        medicationRequestBundles: [],
+        prescriptionDate: new Date(),
+        error: undefined,
+        isLoading: false,
+        mutate: jest.fn(),
+        isValidating: false,
+      });
+
+      render(<PrescriptionDetails encounterUuid={mockEncounterUuid} patientUuid={mockPatientUuid} />);
+
+      expect(screen.getByText(/Sulfonamides/)).toBeInTheDocument();
+    });
+  });
+
+  describe('Prescriptions Display', () => {
+    it('shows loading skeleton while fetching prescriptions', () => {
+      mockUsePatientAllergies.mockReturnValue({
+        allergies: [],
+        totalAllergies: 0,
+        error: undefined,
+        isLoading: false,
+      });
+      mockUsePrescriptionDetails.mockReturnValue({
+        medicationRequestBundles: [],
+        prescriptionDate: new Date(),
+        error: undefined,
+        isLoading: true,
+        mutate: jest.fn(),
+        isValidating: false,
+      });
+
+      render(<PrescriptionDetails encounterUuid={mockEncounterUuid} patientUuid={mockPatientUuid} />);
+
+      expect(screen.getByText('Prescribed')).toBeInTheDocument();
+    });
+
+    it('shows error message when fetching prescriptions fails', () => {
+      mockUsePatientAllergies.mockReturnValue({
+        allergies: [],
+        totalAllergies: 0,
+        error: undefined,
+        isLoading: false,
+      });
+      mockUsePrescriptionDetails.mockReturnValue({
+        medicationRequestBundles: [],
+        prescriptionDate: new Date(),
+        error: new Error('Failed to load'),
+        isLoading: false,
+        mutate: jest.fn(),
+        isValidating: false,
+      });
+
+      render(<PrescriptionDetails encounterUuid={mockEncounterUuid} patientUuid={mockPatientUuid} />);
+
+      expect(screen.getByText(/error loading prescription details/i)).toBeInTheDocument();
+    });
+
+    it('shows empty state when no prescriptions exist', () => {
+      mockUsePatientAllergies.mockReturnValue({
+        allergies: [],
+        totalAllergies: 0,
+        error: undefined,
+        isLoading: false,
+      });
+      mockUsePrescriptionDetails.mockReturnValue({
+        medicationRequestBundles: [],
+        prescriptionDate: new Date(),
+        error: undefined,
+        isLoading: false,
+        mutate: jest.fn(),
+        isValidating: false,
+      });
+
+      render(<PrescriptionDetails encounterUuid={mockEncounterUuid} patientUuid={mockPatientUuid} />);
+
+      expect(screen.getByText(/no prescriptions found/i)).toBeInTheDocument();
+    });
+  });
+});

package/src/prescriptions/prescription-expanded.component.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { getAssignedExtensions, ExtensionSlot, type PatientUuid } from '@openmrs/esm-framework';
+import { Tab, Tabs, TabList, TabPanels, TabPanel } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import HistoryAndComments from '../history/history-and-comments.component';
+import PrescriptionDetails from './prescription-details.component';
+import styles from './prescription-expanded.scss';
+
+interface TabItem {
+  name: string;
+  component: JSX.Element;
+}
+
+const PrescriptionExpanded: React.FC<{
+  encounterUuid: string;
+  patientUuid: PatientUuid;
+}> = ({ encounterUuid, patientUuid }) => {
+  const { t } = useTranslation();
+  const conditionsAndDiagnosisExtensions = getAssignedExtensions('dispensing-condition-and-diagnoses');
+
+  const tabs: TabItem[] = [
+    {
+      name: t('prescriptionDetails', 'Prescription details'),
+      component: <PrescriptionDetails encounterUuid={encounterUuid} patientUuid={patientUuid} />,
+    },
+    conditionsAndDiagnosisExtensions && conditionsAndDiagnosisExtensions.length > 0
+      ? {
+          name: t('conditionsAndDiagnoses', 'Conditions and diagnoses'),
+          component: <ExtensionSlot name="dispensing-condition-and-diagnoses" state={{ patientUuid, encounterUuid }} />,
+        }
+      : null,
+    {
+      name: t('historyComments', 'History and comments'),
+      component: <HistoryAndComments encounterUuid={encounterUuid} patientUuid={patientUuid} />,
+    },
+  ];
+
+  return (
+    <div className={styles.expandedTabsParentContainer}>
+      <div className={styles.verticalTabs}>
+        <Tabs>
+          <TabList aria-label={t('tabList', 'Tab List')}>
+            {tabs.filter(Boolean).map((tab: TabItem, index: number) => (
+              <Tab key={index}>{tab.name}</Tab>
+            ))}
+          </TabList>
+          <TabPanels>
+            {tabs.filter(Boolean).map((tab: TabItem, index) => (
+              <TabPanel key={index}>{tab.component}</TabPanel>
+            ))}
+          </TabPanels>
+        </Tabs>
+      </div>
+    </div>
+  );
+};
+
+export default PrescriptionExpanded;

package/src/prescriptions/prescription-expanded.scss

@@ -0,0 +1,56 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.expandedTabsParentContainer {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: layout.$spacing-05;
+}
+
+// Vertical tabs layout
+.verticalTabs {
+  display: flex;
+  flex-direction: row;
+
+  :global(.cds--tabs) {
+    width: 20%;
+    min-width: 12rem;
+    overflow: visible !important;
+  }
+
+  :global(.cds--tabs-trigger-container),
+  :global(.cds--tabs--scrollable),
+  :global(.cds--tabs--scrollable__nav) {
+    overflow: visible !important;
+    height: auto !important;
+    max-height: none !important;
+  }
+
+  :global(.cds--tab--list) {
+    flex-direction: column !important;
+    overflow: visible !important;
+    height: auto !important;
+    max-height: none !important;
+  }
+
+  :global(.cds--tabs__nav-item) {
+    border-left: 3px solid $ui-03;
+
+    &:global(.cds--tabs__nav-item--selected) {
+      border-left-color: var(--brand-03);
+    }
+  }
+
+  :global(.cds--tabs__nav-link) {
+    border-bottom: none !important;
+    padding: layout.$spacing-04 layout.$spacing-05 !important;
+    max-width: none !important;
+    width: 100%;
+  }
+
+  :global(.cds--tab-content) {
+    flex: 1;
+    padding: layout.$spacing-05 0;
+    min-height: 8rem;
+  }
+}

package/src/prescriptions/prescription-tab-lists.component.tsx

@@ -0,0 +1,70 @@
+import React, { useMemo, useState } from 'react';
+import { Tab, Tabs, TabList, TabPanels } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { useConfig, useSession } from '@openmrs/esm-framework';
+import { type CustomTab } from '../types';
+import { type PharmacyConfig } from '../config-schema';
+import PatientSearchTabPanel from './patient-search-tab-panel.component';
+import PrescriptionTabPanel from './prescription-tab-panel.component';
+import styles from './prescriptions.scss';
+
+const PrescriptionTabLists: React.FC = () => {
+  const { t } = useTranslation();
+  const config = useConfig<PharmacyConfig>();
+  const session = useSession();
+  const [selectedTab, setSelectedTab] = useState(0);
+
+  // filter tabs based on session location
+  const customTabs: Array<CustomTab> = useMemo(() => {
+    return (
+      config?.customTabs?.filter(
+        (tab) => !tab.associatedLocations || tab.associatedLocations.includes(session.sessionLocation?.uuid),
+      ) || []
+    );
+  }, [session, config]);
+
+  const handleTabChange = (event) => {
+    setSelectedTab(event.selectedIndex);
+  };
+
+  return (
+    <main className="omrs-main-content">
+      <section className={styles.prescriptionTabsContainer}>
+        <Tabs onChange={handleTabChange}>
+          <TabList aria-label={t('tabList', 'Tab List')} contained className={styles.tabsContainer}>
+            <Tab title={t('search', 'Search')} id={'tab-search'} className={styles.tab}>
+              {t('search', 'Search')}
+            </Tab>
+            <Tab
+              title={t('activePrescriptions', 'Active Prescriptions')}
+              id={'tab-active-prescription'}
+              className={styles.tab}>
+              {t('activePrescriptions', 'Active Prescriptions')}
+            </Tab>
+            <Tab title={t('allPrescriptions', 'All Prescriptions')} id={'tab-all-prescription'} className={styles.tab}>
+              {t('allPrescriptions', 'All Prescriptions')}
+            </Tab>
+            {customTabs.map((tab, index) => (
+              <Tab title={t(tab.title)} id={'custom_tab_' + index} className={styles.tab}>
+                {t(tab.title)}
+              </Tab>
+            ))}
+          </TabList>
+          <TabPanels>
+            <PatientSearchTabPanel />
+            <PrescriptionTabPanel isTabActive={selectedTab === 1} status={'ACTIVE'} />
+            <PrescriptionTabPanel isTabActive={selectedTab === 2} status={''} />
+            {customTabs.map((tab, index) => (
+              <PrescriptionTabPanel
+                isTabActive={selectedTab === index + 3}
+                customPrescriptionsTableEndpoint={tab.customPrescriptionsTableEndpoint}
+              />
+            ))}
+          </TabPanels>
+        </Tabs>
+      </section>
+    </main>
+  );
+};
+
+export default PrescriptionTabLists;