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

package/src/components/medication-event.component.tsx

@@ -0,0 +1,96 @@
+import React, { type ReactNode } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Tile } from '@carbon/react';
+import { isDesktop, useLayoutType } from '@openmrs/esm-framework';
+import { type MedicationDispense, type MedicationRequest, type Quantity } from '../types';
+import {
+  calculateIsFreeTextDosage,
+  getDosageInstruction,
+  getMedicationDisplay,
+  getMedicationReferenceOrCodeableConcept,
+  getQuantity,
+  getRefillsAllowed,
+} from '../utils';
+import styles from './medication-event.scss';
+
+/**
+ * Renders a prescription request of a prescript event (ex: ordered, dispensed)
+ */
+const MedicationEvent: React.FC<{
+  medicationEvent: MedicationRequest | MedicationDispense;
+  status?: ReactNode;
+  children?: ReactNode;
+  isDispenseEvent?: boolean;
+}> = ({ medicationEvent, status = null, children, isDispenseEvent }) => {
+  const { t } = useTranslation();
+  const dosageInstruction = getDosageInstruction(medicationEvent.dosageInstruction);
+  const isFreeTextDosage = calculateIsFreeTextDosage(dosageInstruction);
+  const quantity: Quantity = getQuantity(medicationEvent);
+  const refillsAllowed: number = getRefillsAllowed(medicationEvent);
+  const isTablet = !isDesktop(useLayoutType());
+
+  return (
+    <Tile
+      className={classNames({
+        [styles.medicationEventTile]: true,
+        [styles.dispenseEvent]: isDispenseEvent,
+        [styles.isTablet]: isTablet,
+      })}>
+      <div>
+        <p className={styles.medicationName}>
+          {status}
+          {status && ' '}
+          <strong>{getMedicationDisplay(getMedicationReferenceOrCodeableConcept(medicationEvent))}</strong>
+        </p>
+
+        {!isFreeTextDosage && (
+          <p className={styles.bodyLong01}>
+            <span className={styles.label01}>{t('dose', 'Dose').toUpperCase()}</span>{' '}
+            <span className={styles.dosage}>
+              {dosageInstruction?.doseAndRate &&
+                dosageInstruction.doseAndRate.map((doseAndRate, index) => {
+                  return (
+                    <span key={index}>
+                      {doseAndRate?.doseQuantity?.value} {doseAndRate?.doseQuantity?.unit}
+                    </span>
+                  );
+                })}
+            </span>
+            {dosageInstruction?.route?.text && <> &mdash; {dosageInstruction.route.text}</>}
+            {dosageInstruction?.timing?.code?.text && <> &mdash; {dosageInstruction.timing.code.text}</>}
+            {dosageInstruction?.timing?.repeat?.duration && (
+              <>
+                {' '}
+                for {dosageInstruction.timing.repeat.duration} {dosageInstruction.timing.repeat.durationUnit}
+              </>
+            )}
+          </p>
+        )}
+
+        {quantity && (
+          <p className={styles.bodyLong01}>
+            <span className={styles.label01}>{t('quantity', 'Quantity').toUpperCase()}</span>{' '}
+            <span className={styles.quantity}>
+              {quantity.value} {quantity.unit}
+            </span>
+          </p>
+        )}
+
+        {(refillsAllowed || refillsAllowed === 0) && (
+          <p className={styles.bodyLong01}>
+            <span className={styles.label01}>{t('refills', 'Refills').toUpperCase()}</span>{' '}
+            <span className={styles.refills}>{refillsAllowed}</span>
+          </p>
+        )}
+        {dosageInstruction?.text && <p className={styles.bodyLong01}>{dosageInstruction.text}</p>}
+        {dosageInstruction?.additionalInstruction?.length > 0 && (
+          <p className={styles.bodyLong01}>{dosageInstruction?.additionalInstruction[0].text}</p>
+        )}
+      </div>
+      {children}
+    </Tile>
+  );
+};
+
+export default MedicationEvent;

package/src/components/medication-event.scss

@@ -0,0 +1,44 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.medicationEventTile {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  margin: layout.$spacing-01 0 layout.$spacing-03;
+  padding: layout.$spacing-04 layout.$spacing-05 layout.$spacing-04 layout.$spacing-03;
+  background-color: #fff;
+  border-left: layout.$spacing-03 solid var(--brand-03);
+  color: $text-02;
+  margin-bottom: layout.$spacing-05 !important;
+
+  &.dispenseEvent {
+    border-left: layout.$spacing-03 solid red;
+  }
+
+  &.isTablet {
+    flex-direction: column;
+    gap: layout.$spacing-05;
+  }
+}
+
+.medicationName {
+  font-size: layout.$spacing-05 !important;
+}
+
+.bodyLong01 {
+  @include type.type-style('body-01');
+  font-size: 13px !important;
+}
+
+.label01 {
+  @include type.type-style('label-01');
+}
+
+.dosage,
+.quantity,
+.refills {
+  color: $text-02;
+  font-weight: bold;
+}

package/src/components/medication-event.test.tsx

@@ -0,0 +1,212 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { useConfig } from '@openmrs/esm-framework';
+import { type MedicationRequest, MedicationRequestStatus } from '../types';
+import MedicationEvent from './medication-event.component';
+
+const mockUseConfig = jest.mocked(useConfig);
+
+const baseMedicationRequest: MedicationRequest = {
+  resourceType: 'MedicationRequest',
+  id: 'test-medication-request-id',
+  meta: { lastUpdated: '2023-01-24T19:02:04.000-05:00' },
+  status: MedicationRequestStatus.active,
+  intent: 'order',
+  priority: 'routine',
+  medicationReference: {
+    reference: 'Medication/test-medication-id',
+    type: 'Medication',
+    display: 'Paracetamol 500mg tablet',
+  },
+  subject: {
+    reference: 'Patient/test-patient-id',
+    type: 'Patient',
+    display: 'Test Patient',
+  },
+  encounter: {
+    reference: 'Encounter/test-encounter-id',
+    type: 'Encounter',
+  },
+  requester: {
+    reference: 'Practitioner/test-practitioner-id',
+    type: 'Practitioner',
+    identifier: { value: 'TEST' },
+    display: 'Test Doctor',
+  },
+  dosageInstruction: [
+    {
+      text: 'Take one tablet twice daily',
+      timing: {
+        repeat: {
+          duration: 7,
+          durationUnit: 'd',
+        },
+        code: {
+          coding: [{ code: 'BID', display: 'Twice daily' }],
+          text: 'Twice daily',
+        },
+      },
+      route: {
+        coding: [{ code: 'PO', display: 'Oral' }],
+        text: 'Oral',
+      },
+      doseAndRate: [
+        {
+          doseQuantity: {
+            value: 1,
+            unit: 'tablet',
+            code: 'tablet',
+          },
+        },
+      ],
+      asNeededBoolean: false,
+    },
+  ],
+  dispenseRequest: {
+    validityPeriod: { start: '2023-01-24T19:02:04.000-05:00' },
+    numberOfRepeatsAllowed: 2,
+    quantity: {
+      value: 14,
+      unit: 'tablet',
+      code: 'tablet',
+    },
+  },
+};
+
+describe('MedicationEvent', () => {
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      dispenseBehavior: {
+        allowModifyingPrescription: false,
+        restrictTotalQuantityDispensed: false,
+      },
+    });
+  });
+
+  it('renders medication name', () => {
+    render(<MedicationEvent medicationEvent={baseMedicationRequest} />);
+
+    expect(screen.getByText('Paracetamol 500mg tablet')).toBeInTheDocument();
+  });
+
+  it('renders status tag when provided', () => {
+    render(
+      <MedicationEvent medicationEvent={baseMedicationRequest} status={<span data-testid="status-tag">Active</span>} />,
+    );
+
+    expect(screen.getByTestId('status-tag')).toBeInTheDocument();
+    expect(screen.getByText('Active')).toBeInTheDocument();
+  });
+
+  it('renders dose information for structured dosage', () => {
+    render(<MedicationEvent medicationEvent={baseMedicationRequest} />);
+
+    expect(screen.getByText('DOSE')).toBeInTheDocument();
+    // Check for dose value and unit in the dosage section
+    expect(screen.getByText(/1 tablet/)).toBeInTheDocument();
+  });
+
+  it('renders route when available', () => {
+    render(<MedicationEvent medicationEvent={baseMedicationRequest} />);
+
+    expect(screen.getByText(/Oral/)).toBeInTheDocument();
+  });
+
+  it('renders timing when available', () => {
+    render(<MedicationEvent medicationEvent={baseMedicationRequest} />);
+
+    expect(screen.getByText(/Twice daily/)).toBeInTheDocument();
+  });
+
+  it('renders duration when available', () => {
+    render(<MedicationEvent medicationEvent={baseMedicationRequest} />);
+
+    expect(screen.getByText(/for 7 d/)).toBeInTheDocument();
+  });
+
+  it('renders quantity when available', () => {
+    render(<MedicationEvent medicationEvent={baseMedicationRequest} />);
+
+    expect(screen.getByText('QUANTITY')).toBeInTheDocument();
+    expect(screen.getByText(/14/)).toBeInTheDocument();
+  });
+
+  it('renders refills when available', () => {
+    render(<MedicationEvent medicationEvent={baseMedicationRequest} />);
+
+    expect(screen.getByText('REFILLS')).toBeInTheDocument();
+    expect(screen.getByText('2')).toBeInTheDocument();
+  });
+
+  it('renders free text dosage instructions', () => {
+    const freeTextMedicationRequest: MedicationRequest = {
+      ...baseMedicationRequest,
+      dosageInstruction: [
+        {
+          text: 'Take as directed by physician',
+        } as any,
+      ],
+    };
+
+    render(<MedicationEvent medicationEvent={freeTextMedicationRequest} />);
+
+    expect(screen.getByText('Take as directed by physician')).toBeInTheDocument();
+  });
+
+  it('does not render route dash separator when route is missing', () => {
+    const noRouteMedicationRequest: MedicationRequest = {
+      ...baseMedicationRequest,
+      dosageInstruction: [
+        {
+          doseAndRate: [
+            {
+              doseQuantity: {
+                value: 1,
+                unit: 'tablet',
+                code: 'tablet',
+              },
+            },
+          ],
+          timing: {
+            code: {
+              coding: [{ code: 'BID', display: 'Twice daily' }],
+              text: 'Twice daily',
+            },
+          },
+          asNeededBoolean: false,
+          route: {
+            coding: [],
+          },
+        } as any,
+      ],
+    };
+
+    render(<MedicationEvent medicationEvent={noRouteMedicationRequest} />);
+
+    // Should show dose and timing but not have orphaned dashes
+    expect(screen.getByText('DOSE')).toBeInTheDocument();
+    expect(screen.getByText(/Twice daily/)).toBeInTheDocument();
+  });
+
+  it('handles null dosageInstruction gracefully', () => {
+    const noDosageMedicationRequest: MedicationRequest = {
+      ...baseMedicationRequest,
+      dosageInstruction: null,
+    };
+
+    render(<MedicationEvent medicationEvent={noDosageMedicationRequest} />);
+
+    // Should still render medication name without crashing
+    expect(screen.getByText('Paracetamol 500mg tablet')).toBeInTheDocument();
+  });
+
+  it('renders children when provided', () => {
+    render(
+      <MedicationEvent medicationEvent={baseMedicationRequest}>
+        <button>Action Button</button>
+      </MedicationEvent>,
+    );
+
+    expect(screen.getByRole('button', { name: 'Action Button' })).toBeInTheDocument();
+  });
+});

package/src/components/prescription-actions/close-action-button.component.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Button } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { launchWorkspace2, type Session } from '@openmrs/esm-framework';
+import { initiateMedicationDispenseBody } from '../../medication-dispense/medication-dispense.resource';
+import { type Provider, type MedicationRequestBundle } from '../../types';
+
+type CloseActionButtonProps = {
+  patientUuid: string;
+  encounterUuid: string;
+  medicationRequestBundle: MedicationRequestBundle;
+  session: Session;
+  providers: Array<Provider>;
+  closeable: boolean;
+  disabled: boolean;
+};
+
+const CloseActionButton: React.FC<CloseActionButtonProps> = ({
+  patientUuid,
+  encounterUuid,
+  medicationRequestBundle,
+  session,
+  providers,
+  closeable,
+  disabled,
+}) => {
+  const { t } = useTranslation();
+
+  const closeDispenseFormProps = {
+    patientUuid,
+    encounterUuid,
+    medicationDispense: initiateMedicationDispenseBody(medicationRequestBundle.request, session, providers, false),
+    mode: 'enter',
+  };
+
+  const handleLaunchWorkspace = () => {
+    launchWorkspace2('close-dispense-workspace', closeDispenseFormProps);
+  };
+
+  if (!closeable) {
+    return null;
+  }
+  return (
+    <Button kind="danger" onClick={handleLaunchWorkspace} disabled={disabled}>
+      {t('close', 'Close')}
+    </Button>
+  );
+};
+
+export default CloseActionButton;

package/src/components/prescription-actions/dispense-action-button.component.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Button } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { launchWorkspace2, type Session } from '@openmrs/esm-framework';
+import { initiateMedicationDispenseBody } from '../../medication-dispense/medication-dispense.resource';
+import { type Provider, type MedicationRequestBundle } from '../../types';
+
+type DispenseActionButtonProps = {
+  patientUuid: string;
+  encounterUuid: string;
+  medicationRequestBundle: MedicationRequestBundle;
+  session: Session;
+  providers: Array<Provider>;
+  dispensable: boolean;
+  quantityRemaining: number;
+  quantityDispensed: number;
+  disabled: boolean;
+};
+
+const DispenseActionButton: React.FC<DispenseActionButtonProps> = ({
+  patientUuid,
+  encounterUuid,
+  medicationRequestBundle,
+  session,
+  providers,
+  dispensable,
+  quantityRemaining,
+  quantityDispensed,
+  disabled,
+}) => {
+  const { t } = useTranslation();
+  const dispenseWorkspaceProps = {
+    patientUuid,
+    encounterUuid,
+    medicationDispense: initiateMedicationDispenseBody(medicationRequestBundle.request, session, providers, true),
+    medicationRequestBundle,
+    quantityRemaining,
+    quantityDispensed,
+    mode: 'enter',
+  };
+
+  const handleLaunchWorkspace = () => {
+    launchWorkspace2('dispense-workspace', dispenseWorkspaceProps);
+  };
+
+  if (!dispensable) {
+    return null;
+  }
+
+  return (
+    <Button kind="primary" onClick={handleLaunchWorkspace} disabled={disabled}>
+      {t('dispense', 'Dispense')}
+    </Button>
+  );
+};
+
+export default DispenseActionButton;

package/src/components/prescription-actions/pause-action-button.component.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Button } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { launchWorkspace2, type Session } from '@openmrs/esm-framework';
+import { initiateMedicationDispenseBody } from '../../medication-dispense/medication-dispense.resource';
+import { type Provider, type MedicationRequestBundle } from '../../types';
+
+type PauseActionButtonProps = {
+  patientUuid: string;
+  encounterUuid: string;
+  medicationRequestBundle: MedicationRequestBundle;
+  session: Session;
+  providers: Array<Provider>;
+  pauseable: boolean;
+  disabled: boolean;
+};
+
+const PauseActionButton: React.FC<PauseActionButtonProps> = ({
+  patientUuid,
+  encounterUuid,
+  medicationRequestBundle,
+  session,
+  providers,
+  pauseable,
+  disabled,
+}) => {
+  const { t } = useTranslation();
+  const pauseWorkspaceProps = {
+    patientUuid,
+    encounterUuid,
+    medicationDispense: initiateMedicationDispenseBody(medicationRequestBundle.request, session, providers, false),
+    mode: 'enter',
+  };
+
+  const handleLaunchWorkspace = () => {
+    launchWorkspace2('pause-dispense-workspace', pauseWorkspaceProps);
+  };
+
+  if (!pauseable) {
+    return null;
+  }
+  return (
+    <Button kind="secondary" onClick={handleLaunchWorkspace} disabled={disabled}>
+      {t('pause', 'Pause')}
+    </Button>
+  );
+};
+
+export default PauseActionButton;

package/src/conditions/conditions.component.tsx

@@ -0,0 +1,118 @@
+import React, { useMemo, useState } from 'react';
+import {
+  DataTable,
+  DataTableSkeleton,
+  Layer,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { CardHeader, EmptyCard, ErrorState, usePagination } from '@openmrs/esm-framework';
+import { pageSizesOptions, usePatientConditions } from './conditions.resource';
+import styles from './conditions.scss';
+
+type PatientConditionsProps = {
+  patientUuid: string;
+};
+
+const PatientConditions: React.FC<PatientConditionsProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  const { conditions, error, isLoading } = usePatientConditions(patientUuid);
+  const [pageSize, setPageSize] = useState(3);
+  const { results, currentPage, goTo } = usePagination(conditions, pageSize);
+  const headers = useMemo(
+    () => [
+      { header: t('conditions', 'Condition'), key: 'display' },
+      { header: t('onsetDate', 'Onset date'), key: 'onsetDateTime' },
+    ],
+    [t],
+  );
+
+  const getColumnClass = (key: string) => {
+    switch (key) {
+      case 'display':
+        return styles.conditionColumn;
+      case 'onsetDateTime':
+        return styles.onsetDateColumn;
+      default:
+        return '';
+    }
+  };
+
+  const title = t('activeConditions', 'Active conditions');
+  const tableRows = useMemo(
+    () =>
+      results.map((row) => ({
+        ...row,
+        onsetDateTime: row.onsetDateTime || '--',
+      })),
+    [results],
+  );
+
+  if (isLoading) {
+    return <DataTableSkeleton />;
+  }
+
+  if (error) {
+    return <ErrorState headerTitle={title} error={error} />;
+  }
+
+  if (!conditions?.length) {
+    return (
+      <Layer className={styles.conditionContainer}>
+        <EmptyCard headerTitle={title} displayText={t('activeConditionsEmpty', 'active conditions')} />
+      </Layer>
+    );
+  }
+
+  return (
+    <Layer className={styles.conditionContainer}>
+      <CardHeader title={title}>
+        <React.Fragment />
+      </CardHeader>
+      <DataTable useZebraStyles rows={tableRows} headers={headers}>
+        {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
+          <Table {...getTableProps()} className={styles.table}>
+            <TableHead>
+              <TableRow>
+                {headers.map((header) => (
+                  <TableHeader {...getHeaderProps({ header })} key={header.key} className={getColumnClass(header.key)}>
+                    {header.header}
+                  </TableHeader>
+                ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {rows.map((row) => (
+                <TableRow {...getRowProps({ row })} key={row.id}>
+                  {row.cells.map((cell) => (
+                    <TableCell key={cell.id} className={getColumnClass(cell.info.header)}>
+                      {cell.value}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        )}
+      </DataTable>
+      <Pagination
+        page={currentPage}
+        pageSize={pageSize}
+        pageSizes={pageSizesOptions}
+        totalItems={conditions.length}
+        onChange={({ page, pageSize }) => {
+          goTo(page);
+          setPageSize(pageSize);
+        }}
+      />
+    </Layer>
+  );
+};
+
+export default PatientConditions;