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

package/src/medication-request/medication-request.resource.tsx

@@ -0,0 +1,257 @@
+import { useMemo } from 'react';
+import dayjs from 'dayjs';
+import useSWR from 'swr';
+import { fhirBaseUrl, openmrsFetch, parseDate } from '@openmrs/esm-framework';
+import { JSON_MERGE_PATH_MIME_TYPE, OPENMRS_FHIR_EXT_REQUEST_FULFILLER_STATUS } from '../constants';
+import {
+  type AllergyIntoleranceResponse,
+  type EncounterResponse,
+  type MedicationRequest,
+  type MedicationRequestResponse,
+  type PrescriptionsTableRow,
+  type MedicationDispense,
+  type Encounter,
+  type MedicationRequestFulfillerStatus,
+  type MedicationRequestBundle,
+  type SimpleLocation,
+} from '../types';
+import {
+  getPrescriptionDetailsEndpoint,
+  getMedicationDisplay,
+  getMedicationReferenceOrCodeableConcept,
+  getPrescriptionTableEndpoint,
+  sortMedicationDispensesByWhenHandedOver,
+  computePrescriptionStatusMessageCode,
+  getAssociatedMedicationDispenses,
+} from '../utils';
+
+export function usePrescriptionsTable(
+  loadData: boolean,
+  customPrescriptionsTableEndpoint: string = '',
+  status: string = '',
+  pageSize: number = 10,
+  pageOffset: number = 0,
+  patientSearchTerm: string = '',
+  locations: SimpleLocation[] = [],
+  medicationRequestExpirationPeriodInDays: number,
+  refreshInterval: number,
+) {
+  const { data, error } = useSWR<{ data: EncounterResponse }, Error>(
+    loadData
+      ? getPrescriptionTableEndpoint(
+          customPrescriptionsTableEndpoint,
+          status,
+          pageOffset,
+          pageSize,
+          dayjs(new Date()).startOf('day').subtract(medicationRequestExpirationPeriodInDays, 'day').toISOString(),
+          patientSearchTerm,
+          locations?.map((location) => location.id).join(','),
+        )
+      : null,
+    openmrsFetch,
+    { refreshInterval: refreshInterval },
+  );
+
+  let prescriptionsTableRows: PrescriptionsTableRow[];
+  if (data) {
+    const entries = data?.data.entry;
+    if (entries) {
+      const encounters = entries
+        .filter((entry) => entry?.resource?.resourceType == 'Encounter')
+        .map((entry) => entry.resource as Encounter);
+      const medicationRequests = entries
+        .filter((entry) => entry?.resource?.resourceType == 'MedicationRequest')
+        .map((entry) => entry.resource as MedicationRequest);
+      const medicationDispenses = entries
+        .filter((entry) => entry?.resource?.resourceType == 'MedicationDispense')
+        .map((entry) => entry.resource as MedicationDispense)
+        .sort(sortMedicationDispensesByWhenHandedOver);
+      prescriptionsTableRows = encounters.map((encounter) => {
+        const medicationRequestsForEncounter = medicationRequests.filter(
+          (medicationRequest) => medicationRequest.encounter.reference == 'Encounter/' + encounter.id,
+        );
+
+        const medicationRequestReferences = medicationRequestsForEncounter.map(
+          (medicationRequest) => 'MedicationRequest/' + medicationRequest.id,
+        );
+        const medicationDispensesForMedicationRequests = medicationDispenses.filter((medicationDispense) =>
+          medicationRequestReferences.includes(medicationDispense.authorizingPrescription[0]?.reference),
+        );
+        return buildPrescriptionsTableRow(
+          encounter,
+          medicationRequestsForEncounter,
+          medicationDispensesForMedicationRequests,
+          medicationRequestExpirationPeriodInDays,
+        );
+      });
+      prescriptionsTableRows.sort((a, b) => (a.created < b.created ? 1 : -1));
+    } else {
+      prescriptionsTableRows = [];
+    }
+  }
+
+  return {
+    prescriptionsTableRows,
+    error: error,
+    isLoading: !prescriptionsTableRows && !error,
+    totalOrders: data?.data.total,
+  };
+}
+
+function buildPrescriptionsTableRow(
+  encounter: Encounter,
+  medicationRequests: Array<MedicationRequest>,
+  medicationDispense: Array<MedicationDispense>,
+  medicationRequestExpirationPeriodInDays: number,
+): PrescriptionsTableRow {
+  return {
+    id: encounter?.id,
+    created: encounter?.period?.start,
+    patient: {
+      name: encounter?.subject?.display,
+      uuid: encounter?.subject?.reference?.split('/')[1],
+    },
+    drugs: [
+      ...new Set(
+        medicationRequests
+          .map((medicationRequest) => getMedicationDisplay(getMedicationReferenceOrCodeableConcept(medicationRequest)))
+          .sort((a, b) => {
+            return a.localeCompare(b);
+          }),
+      ),
+    ].join('; '),
+    lastDispenser:
+      medicationDispense && medicationDispense[0]?.performer && medicationDispense[0]?.performer[0]?.actor.display,
+    prescriber: [...new Set(medicationRequests.map((o) => o.requester.display))].join(', '),
+    status: computePrescriptionStatusMessageCode(medicationRequests, medicationRequestExpirationPeriodInDays),
+    location: encounter?.location ? encounter?.location[0]?.location.display : null,
+  };
+}
+
+export function usePrescriptionDetails(encounterUuid: string, refreshInterval = null) {
+  const { data, ...rest } = useSWR<{ data: MedicationRequestResponse }, Error>(
+    getPrescriptionDetailsEndpoint(encounterUuid),
+    openmrsFetch,
+    { refreshInterval: refreshInterval },
+  );
+
+  const { medicationRequestBundles, prescriptionDate } = useMemo(() => {
+    if (data) {
+      return medicationRequestResponseToPrescriptionDetails(data.data.entry);
+    } else {
+      return { medicationRequestBundles: [], prescriptionDate: null };
+    }
+  }, [data]);
+
+  return {
+    medicationRequestBundles,
+    prescriptionDate,
+    ...rest,
+  };
+}
+
+/**
+ * fetches prescription details of a given encounter directly via openmrsFetch (instead of useSWR)
+ * @param encounterUuid
+ * @returns
+ */
+export async function getPrescriptionDetails(encounterUuid: string) {
+  const result = await openmrsFetch<MedicationRequestResponse>(getPrescriptionDetailsEndpoint(encounterUuid));
+  const {
+    data: { entry },
+  } = result;
+  return medicationRequestResponseToPrescriptionDetails(entry);
+}
+
+function medicationRequestResponseToPrescriptionDetails(
+  results: { resource: MedicationRequest | MedicationDispense }[],
+) {
+  const medicationRequestBundles: Array<MedicationRequestBundle> = [];
+  let prescriptionDate: Date;
+
+  const encounter = results
+    ?.filter((entry) => entry?.resource?.resourceType == 'Encounter')
+    .map((entry) => entry.resource as Encounter);
+
+  if (encounter) {
+    // by definition of the request (search by encounter) there should be one and only one encounter
+    prescriptionDate = parseDate(encounter[0]?.period.start);
+
+    const medicationRequests = results
+      ?.filter((entry) => entry?.resource?.resourceType == 'MedicationRequest')
+      .map((entry) => entry.resource as MedicationRequest);
+
+    const medicationDispenses = results
+      ?.filter((entry) => entry?.resource?.resourceType == 'MedicationDispense')
+      .map((entry) => entry.resource as MedicationDispense)
+      .sort(sortMedicationDispensesByWhenHandedOver);
+
+    medicationRequests.every((medicationRequest) =>
+      medicationRequestBundles.push({
+        request: medicationRequest,
+        dispenses: getAssociatedMedicationDispenses(medicationRequest, medicationDispenses).sort(
+          sortMedicationDispensesByWhenHandedOver,
+        ),
+      }),
+    );
+  }
+
+  return { medicationRequestBundles, prescriptionDate };
+}
+
+export function usePatientAllergies(patientUuid: string, refreshInterval) {
+  const { data, error, isLoading } = useSWR<{ data: AllergyIntoleranceResponse }, Error>(
+    `${fhirBaseUrl}/AllergyIntolerance?patient=${patientUuid}`,
+    openmrsFetch,
+    { refreshInterval: refreshInterval },
+  );
+
+  const allergies = data?.data.entry?.map((allergy) => allergy.resource) ?? [];
+
+  return {
+    allergies,
+    totalAllergies: data?.data.total,
+    error,
+    isLoading,
+  };
+}
+
+// supports passing just the uuid/code or the entire reference, ie either: "MedicationReference/123-abc" or "123-abc"
+export function useMedicationRequest(reference: string, refreshInterval) {
+  reference = reference
+    ? reference.startsWith('MedicationRequest')
+      ? reference
+      : `MedicationRequest/${reference}`
+    : null;
+
+  const { data } = useSWR<{ data: MedicationRequest }, Error>(
+    reference ? `${fhirBaseUrl}/${reference}` : null,
+    openmrsFetch,
+    { refreshInterval: refreshInterval },
+  );
+  return {
+    medicationRequest: data ? data.data : null,
+  };
+}
+
+export function updateMedicationRequestFulfillerStatus(
+  medicationRequestUuid: string,
+  fulfillerStatus: MedicationRequestFulfillerStatus,
+) {
+  const url = `${fhirBaseUrl}/MedicationRequest/${medicationRequestUuid}`;
+
+  return openmrsFetch(url, {
+    method: 'PATCH',
+    headers: {
+      'Content-Type': JSON_MERGE_PATH_MIME_TYPE,
+    },
+    body: {
+      extension: [
+        {
+          url: OPENMRS_FHIR_EXT_REQUEST_FULFILLER_STATUS,
+          valueCode: fulfillerStatus,
+        },
+      ],
+    },
+  });
+}

package/src/patient/patient-info-cell.component.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { usePatientAge } from './patient.resources';
+
+type PatientInfoCellProps = {
+  patient: {
+    name: string;
+    uuid: string;
+  };
+};
+
+const PatientInfoCell: React.FC<PatientInfoCellProps> = ({ patient: { name: display, uuid } }) => {
+  const { error, isLoading, age } = usePatientAge(uuid);
+  const { t } = useTranslation();
+  const ageLabel = t('age', 'Age');
+  function concatAgePatientDisplay(input: string, age: number): string | null {
+    const attrIndex = input.lastIndexOf(')');
+    if (attrIndex !== -1) return input.slice(0, attrIndex) + `, ${ageLabel}: ${age}` + input.slice(attrIndex);
+    else return `${input} ${ageLabel}: ${age}`;
+  }
+  if (isLoading || error) return <>{display}</>;
+  const displayWithAge = concatAgePatientDisplay(display, age);
+  return <>{displayWithAge}</>;
+};
+
+export default PatientInfoCell;

package/src/patient/patient.resources.ts

@@ -0,0 +1,14 @@
+import { type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+
+export const usePatientAge = (patienUuid: string) => {
+  const customRep = 'custom:(age)';
+  const url = `${restBaseUrl}/person/${patienUuid}?v=${customRep}`;
+  const { data, error, isLoading, mutate } = useSWR<FetchResponse<{ age: number }>>(url, openmrsFetch);
+  return {
+    age: data?.data?.age,
+    error,
+    isLoading,
+    mutate,
+  };
+};

package/src/pharmacy-header/pharmacy-header.component.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Calendar, Location } from '@carbon/react/icons';
+import { useConfig, useSession, formatDate } from '@openmrs/esm-framework';
+import PharmacyIllustration from './pharmacy-illustration.component';
+import { type PharmacyConfig } from '../config-schema';
+import styles from './pharmacy-header.scss';
+
+export const PharmacyHeader: React.FC = () => {
+  const { t } = useTranslation();
+  const userSession = useSession();
+  const config = useConfig<PharmacyConfig>();
+  const userLocation = userSession?.sessionLocation?.display;
+
+  return (
+    <div className={styles.header}>
+      <div className={styles.leftJustifiedItems}>
+        <PharmacyIllustration />
+        <div className={styles.pageLabels}>
+          <p>{t('appName', config.appName)}</p>
+          <p className={styles.pageName}>{t('home', 'Home')}</p>
+        </div>
+      </div>
+      <div className={styles.rightJustifiedItems}>
+        <div className={styles.dateAndLocation}>
+          <Location size={16} />
+          <span className={styles.value}>{userLocation}</span>
+          <span className={styles.middot}>&middot;</span>
+          <Calendar size={16} />
+          <span className={styles.value}>{formatDate(new Date(), { noToday: true })}</span>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/pharmacy-header/pharmacy-header.scss

@@ -0,0 +1,55 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.header {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  height: layout.$spacing-12;
+  background-color: $ui-02;
+  display: flex;
+  justify-content: space-between;
+}
+
+.leftJustifiedItems {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-left: layout.$spacing-05;
+}
+
+.rightJustifiedItems {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  padding-top: layout.$spacing-05;
+}
+
+.pageName {
+  @include type.type-style('heading-04');
+}
+
+.pageLabels {
+  margin-left: layout.$spacing-05;
+  p:first-of-type {
+    margin-bottom: layout.$spacing-02;
+  }
+}
+
+.dateAndLocation {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-right: layout.$spacing-05;
+}
+
+.value {
+  margin-left: layout.$spacing-02;
+}
+
+.middot {
+  margin: 0 layout.$spacing-03;
+}
+
+.view {
+  @include type.type-style('label-01');
+}

package/src/pharmacy-header/pharmacy-illustration.component.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+const PharmacyIllustration: React.FC = () => {
+  return (
+    <svg width="72" height="72" viewBox="0 0 62 58" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <path id="whv9q6f4ta" d="M0 0h62v30.508H0z" />
+        <path id="hp71ojgcnc" d="M0 0h24.603v26.571H0z" />
+      </defs>
+      <g fill="none">
+        <g opacity=".193" transform="matrix(-1 0 0 1 62 26.571)">
+          <path
+            d="M62 0c0 16.85-13.916 30.508-31.037 30.508S0 16.849 0 0h62z"
+            fill="var(--brand-03)"
+            mask="url(#rt0c8mo6eb)"
+          />
+        </g>
+        <g opacity=".396" transform="matrix(-1 0 0 1 60.032 0)">
+          <path
+            d="m24.603 26.571-13.35-23.51C9.592.141 5.884-.869 3.011.817.138 2.503-.855 6.272.804 9.193l9.874 17.378"
+            fill="var(--brand-03)"
+            mask="url(#hgianthqwd)"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default PharmacyIllustration;

package/src/prescriptions/patient-search-tab-panel.component.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { Button, Search, TabPanel } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { PatientSearchPictogram } from '@openmrs/esm-framework';
+import PrescriptionsTable from './prescriptions-table.component';
+import styles from './patient-search-tab-panel.scss';
+
+const PatientSearchTabPanel: React.FC = () => {
+  const { t } = useTranslation();
+  const [searchTerm, setSearchTerm] = useState('');
+  const [submittedSearchTerm, setSubmittedSearchTerm] = useState('');
+
+  return (
+    <TabPanel>
+      <div className={styles.searchTabPanel}>
+        <form
+          className={styles.searchBar}
+          onSubmit={(e) => {
+            e.preventDefault();
+            setSubmittedSearchTerm(searchTerm);
+          }}>
+          <Search
+            closeButtonLabelText={t('clearSearchInput', 'Clear search input')}
+            defaultValue={searchTerm}
+            placeholder={t('searchForPatient', 'Search for a patient by name or identifier number')}
+            labelText={t('searchForPatient', 'Search for a patient by name or identifier number')}
+            onChange={(e) => {
+              setSearchTerm(e.target.value);
+            }}
+            onClear={() => setSubmittedSearchTerm('')}
+            size="lg"
+          />
+          <Button kind="secondary" type="submit">
+            {t('search', 'Search')}
+          </Button>
+        </form>
+        {submittedSearchTerm ? (
+          <PrescriptionsTable
+            loadData={true}
+            status={'ACTIVE'}
+            debouncedSearchTerm={submittedSearchTerm}
+            locations={[]}
+          />
+        ) : (
+          <div className={styles.searchForPatientPlaceholder}>
+            <div>
+              <PatientSearchPictogram />
+              <h5>{t('searchForPatientHeader', 'Search for a patient')}</h5>
+              <div>{t('searchForPatient', 'Search for a patient by name or identifier number')}</div>
+            </div>
+          </div>
+        )}
+      </div>
+    </TabPanel>
+  );
+};
+
+export default PatientSearchTabPanel;

package/src/prescriptions/patient-search-tab-panel.scss

@@ -0,0 +1,26 @@
+@use '@carbon/layout';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
+
+.searchTabPanel {
+  display: flex;
+  flex-direction: column;
+  margin: layout.$spacing-05 layout.$spacing-04;
+  gap: layout.$spacing-05;
+}
+
+.searchForPatientPlaceholder {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  min-height: 400px;
+  flex: 1;
+  border: solid 1px $grey-2;
+}
+
+.searchBar {
+  input {
+    background-color: $ui-02;
+  }
+  display: flex;
+}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Layer } from '@carbon/react';
+import PrescriptionPrintAction from '../print-prescription/prescription-print-action.component';
+import styles from './prescription-actions.scss';
+
+type PrescriptionsActionsFooterProps = {
+  encounterUuid: string;
+  patientUuid: string;
+};
+
+const PrescriptionsActionsFooter: React.FC<PrescriptionsActionsFooterProps> = ({ encounterUuid, patientUuid }) => {
+  return (
+    <Layer className={styles.actionsContainer}>
+      <div className={styles.actionCluster}>
+        {/* Left buttons */}
+        <PrescriptionPrintAction encounterUuid={encounterUuid} patientUuid={patientUuid} />
+      </div>
+
+      <div className={styles.actionCluster}>{/* Right buttons */}</div>
+    </Layer>
+  );
+};
+
+export default PrescriptionsActionsFooter;

package/src/prescriptions/prescription-actions.scss

@@ -0,0 +1,14 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.actionsContainer {
+  flex-direction: row;
+  display: flex;
+  justify-content: space-between;
+}
+
+.actionCluster {
+  gap: layout.$spacing-03;
+  display: flex;
+  flex-direction: row;
+}