@kenyaemr/esm-imaging-orders-app 4.0.1-pre.1

package/dist/routes.json

@@ -0,0 +1 @@
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":"^2.24.0"},"extensions":[{"component":"imagingOrdersLink","name":"imaging-orders-link","slot":"homepage-dashboard-slot","meta":{"name":"imaging-orders","title":"imaging-orders","slot":"imaging-dashboard-slot"}},{"component":"root","name":"imaging-dashboard-root","slot":"imaging-dashboard-slot"},{"name":"imaging-order-panel","component":"imagingOrderPanel","slot":"order-basket-slot","order":3}],"workspaces":[{"name":"add-imaging-order","type":"order","component":"addImagingOrderWorkspace","title":"Add Imaging order"},{"name":"imaging-report-form","component":"imagingReportForm","title":"Imaging Report Form","type":"form"}],"modals":[{"name":"review-imaging-report-modal","component":"reviewImagingReportModal"},{"name":"reject-imaging-order-modal","component":"rejectImagingOrderModal"},{"name":"add-imaging-to-work-list-modal","component":"addImagingToWorkListModal"}],"version":"4.0.1-pre.1"}

package/jest.config.js

@@ -0,0 +1,8 @@
+const rootConfig = require('../../jest.config.js');
+
+const packageConfig = {
+  ...rootConfig,
+  collectCoverage: false,
+};
+
+module.exports = packageConfig;

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@kenyaemr/esm-imaging-orders-app",
+  "version": "4.0.1-pre.1",
+  "description": "Imaging Orders app for KenyaEMR",
+  "browser": "dist/kenyaemr-esm-imaging-orders-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "license": "MPL-2.0",
+  "homepage": "https://github.com/palladiumkenya/kenyaemr-esm-orders#readme",
+  "scripts": {
+    "start": "openmrs develop",
+    "serve": "webpack serve --mode=development",
+    "debug": "npm run serve",
+    "build": "webpack --mode production",
+    "analyze": "webpack --mode=production --env.analyze=true",
+    "lint": "eslint src --ext ts,tsx",
+    "typescript": "tsc",
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js",
+    "test": "cross-env TZ=UTC jest --config jest.config.js --verbose false --passWithNoTests",
+    "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js",
+    "coverage": "yarn test --coverage"
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "keywords": [
+    "openmrs"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/palladiumkenya/kenyaemr-esm-orders#readme"
+  },
+  "bugs": {
+    "url": "https://github.com/palladiumkenya/kenyaemr-esm-orders/issues"
+  },
+  "dependencies": {
+    "@carbon/react": "^1.42.1",
+    "lodash-es": "^4.17.15",
+    "react-to-print": "^2.14.13"
+  },
+  "peerDependencies": {
+    "@openmrs/esm-framework": "5.x",
+    "react": "^18.1.0",
+    "react-i18next": "11.x",
+    "react-router-dom": "6.x",
+    "swr": "2.x"
+  },
+  "devDependencies": {
+    "webpack": "^5.74.0"
+  },
+  "stableVersion": "4.0.0"
+}

package/src/config-schema.ts

@@ -0,0 +1,51 @@
+import { Type } from '@openmrs/esm-framework';
+
+export const configSchema = {
+  radiologyConceptSetUuid: {
+    _type: Type.String,
+    _description: 'Radiology Concept SET UUID',
+    _default: '164068AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+  },
+  radiologyConceptClassUuid: {
+    _type: Type.String,
+    _description: 'Radiology Concept Class UUID',
+    _default: '8caa332c-efe4-4025-8b18-3398328e1323',
+  },
+  orders: {
+    radiologyOrderTypeUuid: {
+      _type: Type.UUID,
+      _description: "UUID for the 'Radiology' order type",
+      _default: 'b4a7c280-369e-4d12-9ce8-18e36783fed6',
+    },
+    labOrderTypeUuid: {
+      _type: Type.UUID,
+      _description: "UUID for the 'Lab' order type",
+      _default: '52a447d3-a64a-11e3-9aeb-50e549534c5e',
+    },
+    labOrderableConcepts: {
+      _type: Type.Array,
+      _description:
+        'UUIDs of concepts that represent orderable lab tests or lab sets. If an empty array `[]` is provided, every concept with class `Test` will be considered orderable.',
+      _elements: {
+        _type: Type.UUID,
+      },
+      _default: [],
+    },
+  },
+};
+
+interface OrderReason {
+  labTestUuid: string;
+  required: boolean;
+  orderReasons: Array<string>;
+}
+export type ImagingConfig = {
+  radiologyConceptSetUuid: string;
+  orders: {
+    labOrderTypeUuid: string;
+    labOrderableConcepts: Array<string>;
+    radiologyOrderTypeUuid: string;
+  };
+  labTestsWithOrderReasons: Array<OrderReason>;
+  radiologyConceptClassUuid: string;
+};

package/src/constants.ts

@@ -0,0 +1,3 @@
+export const moduleName = '@kenyaemr/esm-imaging-orders-app';
+// TODO: Move this to config
+export const BLEEDING_SITE = '162668AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';

package/src/declarations.d.ts

@@ -0,0 +1,6 @@
+declare module '@carbon/react';
+declare module '*.css';
+declare module '*.scss';
+declare module '*.png';
+
+declare type SideNavProps = object;

package/src/form/imaging-orders/add-imaging-orders/add-imaging-order.scss

@@ -0,0 +1,44 @@
+@use '@carbon/layout';
+@use '@carbon/colors';
+@use '@carbon/type';
+
+.container {
+  position: relative;
+  min-height: var(--desktop-workspace-window-height);
+  background-color: colors.$white;
+  display: flex;
+  flex-direction: column;
+}
+
+.patientHeader {
+  padding: layout.$spacing-03 layout.$spacing-05 layout.$spacing-06;
+  background-color: colors.$gray-10;
+
+  span:first-of-type {
+    margin-right: layout.$spacing-03;
+  }
+
+  .text02 {
+    color: colors.$gray-70;
+  }
+}
+
+.backButton {
+  padding: layout.$spacing-03;
+
+  button {
+    display: flex;
+    padding-left: 0 !important;
+    margin: 0 layout.$spacing-05;
+
+    svg {
+      order: 1;
+      margin-right: layout.$spacing-03;
+      margin-left: 0 !important;
+    }
+
+    span {
+      order: 2;
+    }
+  }
+}

package/src/form/imaging-orders/add-imaging-orders/add-imaging-order.workspace.tsx

@@ -0,0 +1,86 @@
+import React, { useCallback, useState } from 'react';
+import classNames from 'classnames';
+import capitalize from 'lodash-es/capitalize';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@carbon/react';
+import { ArrowLeft } from '@carbon/react/icons';
+import {
+  DefaultWorkspaceProps,
+  age,
+  formatDate,
+  getPatientName,
+  parseDate,
+  useLayoutType,
+  usePatient,
+} from '@openmrs/esm-framework';
+import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
+import { TestTypeSearch } from './imaging-type-search';
+import { ImagingOrderForm } from './imaging-order-form.component';
+import styles from './add-imaging-order.scss';
+import { type ImagingOrderBasketItem } from '../../../types';
+
+export interface AddImagingOrderWorkspaceAdditionalProps {
+  order?: ImagingOrderBasketItem;
+}
+
+export interface AddImagingOrderWorkspace extends DefaultWorkspaceProps, AddImagingOrderWorkspaceAdditionalProps {}
+
+export default function AddImagingOrderWorkspace({
+  order: initialOrder,
+  closeWorkspace,
+  closeWorkspaceWithSavedChanges,
+  promptBeforeClosing,
+}: AddImagingOrderWorkspace) {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const { patient, isLoading: isLoadingPatient } = usePatient();
+  const [currentLabOrder, setCurrentLabOrder] = useState(initialOrder as ImagingOrderBasketItem);
+
+  const cancelOrder = useCallback(() => {
+    closeWorkspace({
+      ignoreChanges: true,
+      onWorkspaceClose: () => launchPatientWorkspace('order-basket'),
+    });
+  }, [closeWorkspace]);
+
+  return (
+    <div className={styles.container}>
+      {isTablet && !isLoadingPatient && (
+        <div className={styles.patientHeader}>
+          <span className={styles.bodyShort02}>{patient ? getPatientName(patient) : '--'}</span>
+          <span className={classNames(styles.text02, styles.bodyShort01)}>
+            {capitalize(patient?.gender)} &middot; {age(patient?.birthDate)} &middot;{' '}
+            <span>
+              {formatDate(parseDate(patient?.birthDate), {
+                mode: 'wide',
+                time: false,
+              })}
+            </span>
+          </span>
+        </div>
+      )}
+      {!isTablet && (
+        <div className={styles.backButton}>
+          <Button
+            kind="ghost"
+            renderIcon={(props) => <ArrowLeft size={24} {...props} />}
+            iconDescription="Return to order basket"
+            size="sm"
+            onClick={cancelOrder}>
+            <span>{t('backToOrderBasket', 'Back to order basket')}</span>
+          </Button>
+        </div>
+      )}
+      {!currentLabOrder ? (
+        <TestTypeSearch openLabForm={setCurrentLabOrder} />
+      ) : (
+        <ImagingOrderForm
+          initialOrder={currentLabOrder}
+          closeWorkspace={closeWorkspace}
+          closeWorkspaceWithSavedChanges={closeWorkspaceWithSavedChanges}
+          promptBeforeClosing={promptBeforeClosing}
+        />
+      )}
+    </div>
+  );
+}

package/src/form/imaging-orders/add-imaging-orders/imaging-order-form.component.tsx

@@ -0,0 +1,354 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { launchPatientWorkspace, useOrderBasket } from '@openmrs/esm-patient-common-lib';
+import { translateFrom, useLayoutType, useSession, DefaultWorkspaceProps, ExtensionSlot } from '@openmrs/esm-framework';
+import { careSettingUuid, prepImagingOrderPostData, useConceptById } from '../api';
+import {
+  Button,
+  ButtonSet,
+  Column,
+  ComboBox,
+  DatePicker,
+  DatePickerInput,
+  Form,
+  Layer,
+  Grid,
+  InlineNotification,
+  TextArea,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { priorityOptions } from './imaging-order';
+import { useImagingTypes } from './useImagingTypes';
+import { Controller, type FieldErrors, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { moduleName, BLEEDING_SITE } from '../../../constants';
+import styles from './imaging-order-form.scss';
+import type { ImagingOrderBasketItem } from '../../../types';
+
+export interface ImagingOrderFormProps {
+  initialOrder: ImagingOrderBasketItem;
+  closeWorkspace: DefaultWorkspaceProps['closeWorkspace'];
+  closeWorkspaceWithSavedChanges: DefaultWorkspaceProps['closeWorkspaceWithSavedChanges'];
+  promptBeforeClosing: DefaultWorkspaceProps['promptBeforeClosing'];
+}
+
+// Designs:
+//   https://app.zeplin.io/project/60d5947dd636aebbd63dce4c/screen/640b06c440ee3f7af8747620
+//   https://app.zeplin.io/project/60d5947dd636aebbd63dce4c/screen/640b06d286e0aa7b0316db4a
+export function ImagingOrderForm({
+  initialOrder,
+  closeWorkspace,
+  closeWorkspaceWithSavedChanges,
+  promptBeforeClosing,
+}: ImagingOrderFormProps) {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const session = useSession();
+  const { orders, setOrders } = useOrderBasket<ImagingOrderBasketItem>('imaging', prepImagingOrderPostData);
+  const { testTypes, isLoading: isLoadingTestTypes, error: errorLoadingTestTypes } = useImagingTypes();
+  const [showErrorNotification, setShowErrorNotification] = useState(false);
+
+  const lateralityItems = [
+    { value: 'LEFT', label: 'Left' },
+    { value: 'RIGHT', label: 'Right' },
+    { value: 'BILATERAL', label: 'Bilateral' },
+  ];
+  const {
+    items: { answers: bodySiteItems = [] },
+  } = useConceptById(BLEEDING_SITE);
+
+  const imagingOrderFormSchema = z.object({
+    instructions: z.string().optional(),
+    urgency: z.string().refine((value) => value !== '', {
+      message: translateFrom(moduleName, 'addLabOrderPriorityRequired', 'Priority is required'),
+    }),
+    testType: z.object(
+      { label: z.string(), conceptUuid: z.string() },
+      {
+        required_error: translateFrom(moduleName, 'addLabOrderLabTestTypeRequired', 'Test type is required'),
+        invalid_type_error: translateFrom(moduleName, 'addLabOrderLabReferenceRequired', 'Test type is required'),
+      },
+    ),
+    scheduleDate: z.union([z.string(), z.date(), z.string().optional()]),
+    commentsToFulfiller: z.string().optional(),
+    laterality: z.string().optional(),
+    bodySite: z.string().optional(),
+  });
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors, defaultValues, isDirty },
+  } = useForm<ImagingOrderBasketItem>({
+    mode: 'all',
+    resolver: zodResolver(imagingOrderFormSchema),
+    defaultValues: {
+      ...initialOrder,
+    },
+  });
+
+  const handleFormSubmission = useCallback(
+    (data: ImagingOrderBasketItem) => {
+      data.action = 'NEW';
+      data.careSetting = careSettingUuid;
+      data.orderer = session.currentProvider.uuid;
+      const newOrders = [...orders];
+      const existingOrder = orders.find((order) => order.testType.conceptUuid == defaultValues.testType.conceptUuid);
+      const orderIndex = existingOrder ? orders.indexOf(existingOrder) : orders.length;
+      newOrders[orderIndex] = data;
+      setOrders(newOrders);
+      closeWorkspaceWithSavedChanges({
+        onWorkspaceClose: () => launchPatientWorkspace('order-basket'),
+      });
+    },
+    [orders, setOrders, defaultValues, closeWorkspaceWithSavedChanges, session],
+  );
+
+  const cancelOrder = useCallback(() => {
+    setOrders(orders.filter((order) => order.testType.conceptUuid !== defaultValues.testType.conceptUuid));
+    closeWorkspace({
+      onWorkspaceClose: () => launchPatientWorkspace('order-basket'),
+    });
+  }, [closeWorkspace, orders, setOrders, defaultValues]);
+
+  const onError = (errors: FieldErrors<ImagingOrderBasketItem>) => {
+    if (errors) {
+      setShowErrorNotification(true);
+    }
+  };
+
+  useEffect(() => {
+    promptBeforeClosing(() => isDirty);
+  }, [isDirty, promptBeforeClosing]);
+
+  const [showScheduleDate, setShowScheduleDate] = useState(false);
+
+  return (
+    <>
+      {errorLoadingTestTypes && (
+        <InlineNotification
+          kind="error"
+          lowContrast
+          className={styles.inlineNotification}
+          title={t('errorLoadingTestTypes', 'Error occurred when loading test types')}
+          subtitle={t('tryReopeningTheForm', 'Please try launching the form again')}
+        />
+      )}
+      <Form className={styles.orderForm} onSubmit={handleSubmit(handleFormSubmission, onError)}>
+        <div className={styles.form}>
+          <ExtensionSlot name="top-of-imaging-order-form-slot" state={{ order: initialOrder }} />
+
+          <Grid className={styles.gridRow}>
+            <Column lg={16} md={8} sm={4}>
+              <InputWrapper>
+                <Controller
+                  name="testType"
+                  control={control}
+                  render={({ field: { onChange, onBlur, value } }) => (
+                    <ComboBox
+                      size="lg"
+                      id="testTypeInput"
+                      titleText={t('testType', 'Test type')}
+                      selectedItem={value}
+                      items={testTypes ?? []}
+                      placeholder={
+                        isLoadingTestTypes ? `${t('loading', 'Loading')}...` : t('testTypePlaceholder', 'Select one')
+                      }
+                      onBlur={onBlur}
+                      disabled={isLoadingTestTypes}
+                      onChange={({ selectedItem }) => onChange(selectedItem)}
+                      invalid={errors.testType?.message}
+                      invalidText={errors.testType?.message}
+                    />
+                  )}
+                />
+              </InputWrapper>
+            </Column>
+          </Grid>
+          <Grid className={styles.gridRow}>
+            <Column lg={8} md={8} sm={4}>
+              <InputWrapper>
+                <Controller
+                  name="urgency"
+                  control={control}
+                  render={({ field: { onChange, onBlur, value } }) => (
+                    <ComboBox
+                      size="lg"
+                      id="priorityInput"
+                      titleText={t('priority', 'Priority')}
+                      selectedItem={priorityOptions.find((option) => option.value === value) || null}
+                      items={priorityOptions}
+                      onBlur={onBlur}
+                      onChange={({ selectedItem }) => {
+                        onChange(selectedItem?.value || '');
+                        setShowScheduleDate(selectedItem?.label === 'Scheduled');
+                      }}
+                      invalid={errors.urgency?.message}
+                      invalidText={errors.urgency?.message}
+                    />
+                  )}
+                />
+              </InputWrapper>
+            </Column>
+          </Grid>
+          {showScheduleDate && (
+            <Grid className={styles.gridRow}>
+              <Column lg={16} md={4} sm={4}>
+                <div className={styles.fullWidthDatePickerContainer}>
+                  <InputWrapper>
+                    <Controller
+                      name="scheduleDate"
+                      control={control}
+                      render={({ field: { onBlur, value, onChange, ref } }) => (
+                        <DatePicker
+                          datePickerType="single"
+                          value={value}
+                          onChange={([newStartDate]) => onChange(newStartDate)}
+                          onBlur={onBlur}
+                          ref={ref}>
+                          <DatePickerInput
+                            id="scheduleDatePicker"
+                            placeholder="mm/dd/yyyy"
+                            labelText={t('scheduleDate', 'Scheduled date')}
+                            size="lg"
+                          />
+                        </DatePicker>
+                      )}
+                    />
+                  </InputWrapper>
+                </div>
+              </Column>
+            </Grid>
+          )}
+          <Grid className={styles.gridRow}>
+            <Column lg={16} md={8} sm={4}>
+              <InputWrapper>
+                <Controller
+                  name="laterality"
+                  control={control}
+                  render={({ field: { onChange, onBlur, value } }) => (
+                    <ComboBox
+                      size="lg"
+                      id="lateralityInput"
+                      titleText={t('laterality', 'Laterality')}
+                      selectedItem={lateralityItems?.find((option) => option.value === value) || null}
+                      items={lateralityItems}
+                      onBlur={onBlur}
+                      onChange={({ selectedItem }) => onChange(selectedItem?.value || '')}
+                      invalid={errors.laterality?.message}
+                      invalidText={errors.laterality?.message}
+                      itemToString={(item) => item?.label}
+                    />
+                  )}
+                />
+              </InputWrapper>
+            </Column>
+          </Grid>
+          <Grid className={styles.gridRow}>
+            <Column lg={16} md={8} sm={4}>
+              <InputWrapper>
+                <Controller
+                  name="bodySite"
+                  control={control}
+                  render={({ field: { onChange, onBlur, value } }) => (
+                    <ComboBox
+                      size="lg"
+                      id="bodySiteInput"
+                      titleText={t('bodySite', 'Body Site')}
+                      selectedItem={bodySiteItems?.find((option) => option.uuid === value) || null}
+                      items={bodySiteItems}
+                      onBlur={onBlur}
+                      onChange={({ selectedItem }) => onChange(selectedItem?.uuid || '')}
+                      invalid={errors.bodySite?.message}
+                      invalidText={errors.bodySite?.message}
+                      itemToString={(item) => item?.display}
+                    />
+                  )}
+                />
+              </InputWrapper>
+            </Column>
+          </Grid>
+          <Grid className={styles.gridRow}>
+            <Column lg={16} md={8} sm={4}>
+              <InputWrapper>
+                <Controller
+                  name="instructions"
+                  control={control}
+                  render={({ field: { onChange, onBlur, value } }) => (
+                    <TextArea
+                      enableCounter
+                      id="additionalInstructionsInput"
+                      size="lg"
+                      labelText={t('additionalInstructions', 'Additional instructions')}
+                      value={value}
+                      onChange={onChange}
+                      onBlur={onBlur}
+                      maxCount={500}
+                      invalid={errors.instructions?.message}
+                      invalidText={errors.instructions?.message}
+                    />
+                  )}
+                />
+              </InputWrapper>
+            </Column>
+          </Grid>
+          <Grid className={styles.gridRow}>
+            <Column lg={16} md={8} sm={4}>
+              <InputWrapper>
+                <Controller
+                  name="commentsToFulfiller"
+                  control={control}
+                  render={({ field: { onChange, onBlur, value } }) => (
+                    <TextArea
+                      enableCounter
+                      id="commentsToFulfillerInput"
+                      size="lg"
+                      labelText={t('commentsToFulfiller', 'Comments To Fulfiller')}
+                      value={value}
+                      onChange={onChange}
+                      onBlur={onBlur}
+                      maxCount={500}
+                      invalid={errors.commentsToFulfiller?.message}
+                      invalidText={errors.commentsToFulfiller?.message}
+                    />
+                  )}
+                />
+              </InputWrapper>
+            </Column>
+          </Grid>
+        </div>
+        <div>
+          {showErrorNotification && (
+            <Column className={styles.errorContainer}>
+              <InlineNotification
+                lowContrast
+                title={t('error', 'Error')}
+                subtitle={t('pleaseRequiredFields', 'Please fill all required fields') + '.'}
+                onClose={() => setShowErrorNotification(false)}
+              />
+            </Column>
+          )}
+          <ButtonSet
+            className={classNames(styles.buttonSet, isTablet ? styles.tabletButtonSet : styles.desktopButtonSet)}>
+            <Button className={styles.button} kind="secondary" onClick={cancelOrder} size="xl">
+              {t('discard', 'Discard')}
+            </Button>
+            <Button className={styles.button} kind="primary" type="submit" size="xl">
+              {t('saveOrder', 'Save order')}
+            </Button>
+          </ButtonSet>
+        </div>
+      </Form>
+    </>
+  );
+}
+
+function InputWrapper({ children }) {
+  const isTablet = useLayoutType() === 'tablet';
+  return (
+    <Layer level={isTablet ? 1 : 0}>
+      <div className={styles.field}>{children}</div>
+    </Layer>
+  );
+}