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

package/src/diagnoses/diagnoses.component.tsx

@@ -0,0 +1,111 @@
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  DataTable,
+  DataTableSkeleton,
+  Layer,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { CardHeader, EmptyCard, ErrorState, usePagination } from '@openmrs/esm-framework';
+import { usePatientDiagnosis } from './diagnoses.resource';
+import styles from './diagnoses.scss';
+
+type PatientDiagnosesProps = {
+  patientUuid: string;
+  encounterUuid: string;
+};
+
+const PatientDiagnoses: React.FC<PatientDiagnosesProps> = ({ encounterUuid, patientUuid }) => {
+  const { diagnoses, isLoading, error } = usePatientDiagnosis(encounterUuid);
+  const [pageSize, setPageSize] = useState(3);
+  const pageSizesOptions = useMemo(() => [3, 5, 10, 20, 50, 100], []);
+  const { results, totalPages, currentPage, goTo } = usePagination(diagnoses, pageSize);
+  const { t } = useTranslation();
+  const title = t('diagnoses', 'Diagnoses');
+  const headers = useMemo(
+    () => [
+      { header: t('diagnosis', 'Diagnosis'), key: 'text' },
+      { header: t('status', 'Status'), key: 'certainty' },
+    ],
+    [t],
+  );
+
+  const getColumnClass = (key: string) => {
+    switch (key) {
+      case 'text':
+        return styles.diagnosisColumn;
+      case 'certainty':
+        return styles.statusColumn;
+      default:
+        return '';
+    }
+  };
+
+  if (isLoading) {
+    return <DataTableSkeleton />;
+  }
+
+  if (error) {
+    return <ErrorState headerTitle={title} error={error} />;
+  }
+
+  if (!diagnoses?.length) {
+    return (
+      <Layer className={styles.diagnosesContainer}>
+        <EmptyCard headerTitle={title} displayText={t('diagnosesEmpty', 'diagnoses')} />
+      </Layer>
+    );
+  }
+
+  return (
+    <Layer className={styles.diagnosesContainer}>
+      <CardHeader title={title}>
+        <React.Fragment />
+      </CardHeader>
+      <DataTable useZebraStyles rows={results} 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={diagnoses.length}
+        onChange={({ page, pageSize }) => {
+          goTo(page);
+          setPageSize(pageSize);
+        }}
+      />
+    </Layer>
+  );
+};
+
+export default PatientDiagnoses;

package/src/diagnoses/diagnoses.resource.ts

@@ -0,0 +1,30 @@
+import { useMemo } from 'react';
+import useSWR from 'swr';
+import { type FetchResponse, openmrsFetch, restBaseUrl, type Visit } from '@openmrs/esm-framework';
+
+export const usePatientDiagnosis = (encounterUuid: string) => {
+  const customRepresentation =
+    'custom:(uuid,display,visit:(uuid,encounters:(uuid,diagnoses:(uuid,display,certainty,diagnosis:(coded:(uuid,display))))))';
+  const url = `${restBaseUrl}/encounter/${encounterUuid}?v=${customRepresentation}`;
+
+  const { data, error, isLoading } = useSWR<FetchResponse<{ visit: Visit }>>(url, openmrsFetch);
+
+  const diagnoses = useMemo(() => {
+    return (
+      data?.data?.visit?.encounters?.flatMap(
+        (encounter) =>
+          encounter.diagnoses.map((diagnosis) => ({
+            id: diagnosis.diagnosis.coded.uuid,
+            text: diagnosis.display,
+            certainty: diagnosis.certainty,
+          })) || [],
+      ) || []
+    );
+  }, [data]);
+
+  return {
+    error,
+    isLoading,
+    diagnoses: (diagnoses ?? []) as Array<{ id: string; text: string; certainty: string }>,
+  };
+};

package/src/diagnoses/diagnoses.scss

@@ -0,0 +1,31 @@
+@use '@carbon/layout';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.diagnosesContainer {
+  background-color: colors.$white-0;
+  margin-bottom: layout.$spacing-05;
+
+  :global(.cds--tile) {
+    min-height: unset !important;
+    padding: layout.$spacing-05 !important;
+  }
+}
+
+.table {
+  table-layout: fixed;
+  width: 100%;
+
+  td {
+    padding-left: 2rem !important;
+  }
+}
+
+.diagnosisColumn {
+  width: 70%;
+}
+
+.statusColumn {
+  width: 30%;
+  text-align: left;
+}

package/src/dispensing-link.component.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ConfigurableLink } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { spaBasePath } from './constants';
+
+export default function DispensingLink() {
+  const { t } = useTranslation();
+  return <ConfigurableLink to={spaBasePath}>{t('dispensing', 'Dispensing')}</ConfigurableLink>;
+}

package/src/dispensing-tiles/dispensing-tile.component.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Tile, Button } from '@carbon/react';
+import { ArrowRight } from '@carbon/react/icons';
+import { ResponsiveWrapper } from '@openmrs/esm-framework';
+import styles from './dispensing-tile.scss';
+
+interface DispensingTileProps {
+  label: string;
+  value: number;
+  headerLabel: string;
+  children?: React.ReactNode;
+}
+
+const DispensingTile: React.FC<DispensingTileProps> = ({ label, value, headerLabel, children }) => {
+  const { t } = useTranslation();
+
+  return (
+    <ResponsiveWrapper>
+      <Tile className={styles.tileContainer}>
+        <div className={styles.tileHeader}>
+          <div className={styles.headerLabelContainer}>
+            <label className={styles.headerLabel}>{headerLabel}</label>
+            {children}
+          </div>
+          <Button
+            kind="ghost"
+            renderIcon={(props) => <ArrowRight size={16} className={styles.arrowIcon} />}
+            iconDescription={t('view', 'View')}>
+            {t('view', 'View')}
+          </Button>
+        </div>
+        <div>
+          <label className={styles.totalsLabel}>{label}</label>
+          <p className={styles.totalsValue}>{value}</p>
+        </div>
+      </Tile>
+    </ResponsiveWrapper>
+  );
+};
+
+export default DispensingTile;

package/src/dispensing-tiles/dispensing-tile.scss

@@ -0,0 +1,43 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.tileContainer {
+  border: 1px solid $ui-03;
+  flex-grow: 1;
+  height: 7.875rem;
+  padding: 0 layout.$spacing-05;
+  margin: layout.$spacing-03 layout.$spacing-03;
+}
+
+.tileHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: layout.$spacing-03;
+}
+
+.headerLabel {
+  @include type.type-style('heading-01');
+  color: $text-02;
+}
+
+.totalsLabel {
+  @include type.type-style('label-01');
+  color: $text-02;
+}
+
+.totalsValue {
+  @include type.type-style('heading-04');
+  color: $ui-05;
+}
+
+.headerLabelContainer {
+  display: flex;
+  align-items: center;
+  height: layout.$spacing-07;
+}
+
+.arrowIcon {
+  fill: var(--cds-link-primary, #0f62fe) !important;
+}

package/src/dispensing-tiles/dispensing-tiles.component.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { DataTableSkeleton } from '@carbon/react';
+import { useMetrics } from './dispensing-tiles.resource';
+import DispensingTile from './dispensing-tile.component';
+import styles from './dispensing-tiles.scss';
+
+const DispensingTiles: React.FC = () => {
+  const { t } = useTranslation();
+  const { metrics, error, isLoading } = useMetrics();
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  return (
+    <>
+      <div className={styles.cardContainer}>
+        <DispensingTile
+          label={t('orders', 'Orders')}
+          value={metrics.orders}
+          headerLabel={t('prescriptionsToFillToday', 'Prescriptions to fill today')}
+        />
+        <DispensingTile
+          label={t('today', 'Today')}
+          value={metrics.orders_for_home_delivery}
+          headerLabel={t('ordersForHomeDelivery', 'Orders for home delivery')}
+        />
+        <DispensingTile
+          label={t('last14Days', 'Last 14 days')}
+          value={metrics.missed_collections}
+          headerLabel={t('missedCollections', 'Missed collections')}
+        />
+      </div>
+    </>
+  );
+};
+
+export default DispensingTiles;

package/src/dispensing-tiles/dispensing-tiles.resource.tsx

@@ -0,0 +1,30 @@
+import useSWR from 'swr';
+import useSWRImmutable from 'swr/immutable';
+import { type FetchResponse, openmrsFetch } from '@openmrs/esm-framework';
+
+// NOT CURRENTLY USED
+
+export function useMetrics() {
+  const metrics = {
+    orders: 43,
+    orders_for_home_delivery: 4,
+    missed_collections: 12,
+  };
+  const { data, error } = useSWR<{ data: { results: {} } }, Error>(`/ws/rest/v1/queue?`, openmrsFetch);
+
+  return {
+    metrics: metrics,
+    error,
+    isLoading: !data && !error,
+  };
+}
+
+export function useServices() {
+  const serviceConceptSetUuid = '330c0ec6-0ac7-4b86-9c70-29d76f0ae20a';
+  const apiUrl = `/ws/rest/v1/concept/${serviceConceptSetUuid}`;
+  const { data } = useSWRImmutable<FetchResponse>(apiUrl, openmrsFetch);
+
+  return {
+    services: data ? data?.data?.setMembers?.map((setMember) => setMember?.display) : [],
+  };
+}

package/src/dispensing-tiles/dispensing-tiles.scss

@@ -0,0 +1,11 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.cardContainer {
+  background-color: $ui-02;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 layout.$spacing-05 layout.$spacing-10 layout.$spacing-03;
+  flex-flow: row wrap;
+  margin-top: -layout.$spacing-03;
+}

package/src/dispensing.component.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import classNames from 'classnames';
+import {
+  ExtensionSlot,
+  isDesktop,
+  useConfig,
+  useLayoutType,
+  useLeftNav,
+  WorkspaceContainer,
+} from '@openmrs/esm-framework';
+import { type PharmacyConfig } from './config-schema';
+import styles from './dispensing.scss';
+
+export default function Dispensing() {
+  const { leftNavMode } = useConfig<PharmacyConfig>();
+  const layout = useLayoutType();
+
+  const basePath = window.spaBase + '/dispensing';
+  useLeftNav({ name: 'homepage-dashboard-slot', basePath, mode: leftNavMode });
+
+  return (
+    <div
+      className={classNames([
+        isDesktop(layout) ? styles.desktopContainer : '',
+        leftNavMode === 'normal' ? styles.hasLeftNav : '',
+      ])}>
+      <ExtensionSlot name="dispensing-dashboard-slot" />
+      <WorkspaceContainer key="dispensing" contextKey="dispensing" />
+    </div>
+  );
+}

package/src/dispensing.scss

@@ -0,0 +1,5 @@
+.dispensing {
+  &.hasLeftNav {
+    margin-left: 16rem;
+  }
+}

package/src/dispensing.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Dispensing from './dispensing.component';
+
+describe('<div/>', () => {
+  test('renders dispening without error', () => {
+    render(<Dispensing />);
+  });
+});

package/src/fill-prescription/fill-prescription-button.component.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { Button } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import {
+  AddIcon,
+  launchWorkspace2,
+  openmrsFetch,
+  restBaseUrl,
+  showModal,
+  showSnackbar,
+  useLayoutType,
+  type FetchResponse,
+  type Order,
+  type Visit,
+  type Workspace2DefinitionProps,
+} from '@openmrs/esm-framework';
+import styles from './fill-prescription-button.scss';
+
+const FillPrescriptionButton: React.FC<{}> = () => {
+  const isTablet = useLayoutType() === 'tablet';
+  const responsiveSize = isTablet ? 'lg' : 'md';
+  const { t } = useTranslation();
+
+  const launchSearchWorkspace = () => {
+    launchWorkspace2(
+      'dispensing-patient-search-workspace',
+      {
+        workspaceTitle: t('fillPrescriptionForPatient', 'Fill prescription for patient'),
+        onPatientSelected(
+          patientUuid: string,
+          patient: fhir.Patient,
+          launchChildWorkspace: Workspace2DefinitionProps['launchChildWorkspace'],
+          closeWorkspace: Workspace2DefinitionProps['closeWorkspace'],
+        ) {
+          getActiveVisitsForPatient(patientUuid).then(async (response) => {
+            const activeVisit = response.data.results?.[0];
+            if (activeVisit) {
+              await closeWorkspace();
+              launchWorkspace2(
+                'dispensing-order-basket-workspace',
+                {},
+                {
+                  patientUuid: patientUuid,
+                  patient: patient,
+                  visitContext: activeVisit,
+                  drugOrderWorkspaceName: 'dispensing-order-basket-add-drug-order-workspace',
+                  onOrderBasketSubmitted: (encounterUuid: string, _: Array<Order>) => {
+                    showModal('on-prescription-filled-modal', {
+                      patient,
+                      encounterUuid,
+                    });
+                  },
+                },
+              );
+            } else {
+              showSnackbar({
+                title: t('visitRequired', 'Visit required'),
+                subtitle: t(
+                  'visitRequiredForPatientToFillPrescription',
+                  'Visit required for patient to fill prescription',
+                ),
+                kind: 'error',
+              });
+            }
+          });
+        },
+      },
+      {
+        startVisitWorkspaceName: 'dispensing-start-visit-workspace',
+      },
+    );
+  };
+
+  return (
+    <div className={styles.buttonContainer}>
+      <Button
+        kind="primary"
+        renderIcon={(props) => <AddIcon size={16} {...props} />}
+        size={responsiveSize}
+        onClick={launchSearchWorkspace}>
+        {t('fillPrescription', 'Fill prescription')}
+      </Button>
+    </div>
+  );
+};
+
+function getActiveVisitsForPatient(
+  patientUuid: string,
+  abortController?: AbortController,
+  v?: string,
+): Promise<FetchResponse<{ results: Array<Visit> }>> {
+  const custom = v ?? `default`;
+
+  return openmrsFetch(`${restBaseUrl}/visit?patient=${patientUuid}&v=${custom}&includeInactive=false`, {
+    signal: abortController?.signal,
+    method: 'GET',
+    headers: {
+      'Content-type': 'application/json',
+    },
+  });
+}
+
+export default FillPrescriptionButton;

package/src/fill-prescription/fill-prescription-button.scss

@@ -0,0 +1,8 @@
+@use '@carbon/layout';
+
+.buttonContainer {
+  display: flex;
+  flex-direction: row-reverse;
+  background-color: #fff;
+  margin-inline-end: layout.$spacing-04;
+}

package/src/fill-prescription/on-prescription-filled.modal.tsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { Trans, useTranslation } from 'react-i18next';
+import { getPatientName, showSnackbar, useConfig, useSession } from '@openmrs/esm-framework';
+import {
+  updateMedicationRequestFulfillerStatus,
+  usePrescriptionDetails,
+} from '../medication-request/medication-request.resource';
+import {
+  getMedicationDisplay,
+  getMedicationReferenceOrCodeableConcept,
+  getUuidFromReference,
+  markEncounterAsStale,
+  revalidate,
+} from '../utils';
+import {
+  initiateMedicationDispenseBody,
+  saveMedicationDispense,
+  useProviders,
+} from '../medication-dispense/medication-dispense.resource';
+import { type PharmacyConfig } from '../config-schema';
+import MedicationEvent from '../components/medication-event.component';
+import { MedicationDispenseStatus, MedicationRequestFulfillerStatus } from '../types';
+import styles from './on-prescription-filled.scss';
+
+interface OnPrescriptionFilledModalProps {
+  patient: fhir.Patient;
+
+  /**
+   * The encounter with which the user just placed the fill prescription order.
+   */
+  encounterUuid: string;
+
+  /**
+   * closes the modal
+   */
+  close(): void;
+}
+
+/**
+ * This modal appears after the user submits the order basket opened via the
+ * "Fill Prescription" button in the dispensing app. It confirms whether the user
+ * would like to immediately mark the medication orders as dispensed.
+ */
+const OnPrescriptionFilledModal: React.FC<OnPrescriptionFilledModalProps> = ({ patient, encounterUuid, close }) => {
+  const { dispenserProviderRoles } = useConfig<PharmacyConfig>();
+  const session = useSession();
+  const providers = useProviders(dispenserProviderRoles);
+  const { medicationRequestBundles } = usePrescriptionDetails(encounterUuid);
+  const { t } = useTranslation();
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+  const onConfirm = async () => {
+    setIsSubmitting(true);
+    markEncounterAsStale(encounterUuid);
+    try {
+      for (const medicationRequestBundle of medicationRequestBundles) {
+        const medicationDispensePayload = initiateMedicationDispenseBody(
+          medicationRequestBundle.request,
+          session,
+          providers,
+          true,
+        );
+        const medicationDisplay = getMedicationDisplay(
+          getMedicationReferenceOrCodeableConcept(medicationRequestBundle.request),
+        );
+
+        await saveMedicationDispense(medicationDispensePayload, MedicationDispenseStatus.completed)
+          .then((response) => {
+            const hasNoRefills = medicationRequestBundle.request.dispenseRequest.numberOfRepeatsAllowed == 0;
+            if (response.ok && hasNoRefills) {
+              return updateMedicationRequestFulfillerStatus(
+                getUuidFromReference(
+                  medicationDispensePayload.authorizingPrescription[0].reference, // assumes authorizing prescription exist
+                ),
+                MedicationRequestFulfillerStatus.completed,
+              ).then(() => response);
+            } else {
+              return response;
+            }
+          })
+          .then(() => {
+            showSnackbar({
+              title: t('stockDispensed', 'Stock dispensed'),
+              subtitle: medicationDisplay,
+              isLowContrast: false,
+            });
+          })
+          .catch((error) => {
+            showSnackbar({
+              title: t('errorDispensingMedication', 'Error dispensing medication'),
+              kind: 'error',
+              subtitle: t('errorDispensingMedicationMessage', '{{medication}}: {{error}}', {
+                medication: medicationDisplay,
+                error: error?.message,
+              }),
+            });
+          });
+      }
+
+      close();
+    } finally {
+      revalidate(encounterUuid);
+      setIsSubmitting(false);
+    }
+  };
+
+  const patientName = getPatientName(patient);
+
+  return (
+    <>
+      <ModalHeader>{t('dispenseAllPrescriptions', 'Dispense prescriptions')}</ModalHeader>
+      <ModalBody>
+        <p className={styles.modalDescription}>
+          <Trans i18nKey="dispenseAllPrescriptionsConfirmation">
+            Would you like to mark prescriptions ordered for <strong>{{ patientName } as any}</strong> as dispensed?
+            Orders with no refills will be marked as completed.
+          </Trans>
+        </p>
+        {medicationRequestBundles.map((bundle) => (
+          <MedicationEvent key={bundle.request.id} medicationEvent={bundle.request} />
+        ))}
+      </ModalBody>
+      <ModalFooter>
+        <Button disabled={isSubmitting} kind="secondary" onClick={close}>
+          {t('createOrderWithoutDispensing', 'Create order without dispensing')}
+        </Button>
+        <Button
+          disabled={isSubmitting}
+          onClick={() => {
+            onConfirm();
+          }}>
+          {t('dispenseAllPrescriptions', 'Dispense all prescriptions')}
+        </Button>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default OnPrescriptionFilledModal;

package/src/fill-prescription/on-prescription-filled.scss

@@ -0,0 +1,7 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.modalDescription {
+  margin-bottom: layout.$spacing-05;
+}