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

package/src/form/imaging-orders/useOrderConfig.ts

@@ -0,0 +1,48 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { useMemo } from 'react';
+import useSWRImmutable from 'swr/immutable';
+import { type DurationUnit, type OrderFrequency } from '../../types';
+
+export interface CommonConfigProps {
+  uuid: string;
+  display: string;
+}
+
+export interface OrderConfig {
+  durationUnits: Array<CommonConfigProps>;
+  orderFrequencies: Array<CommonConfigProps>;
+}
+
+export function useOrderConfig(): {
+  isLoading: boolean;
+  error: Error;
+  orderConfigObject: {
+    durationUnits: Array<DurationUnit>;
+    orderFrequencies: Array<OrderFrequency>;
+  };
+} {
+  const { data, error, isLoading } = useSWRImmutable<{ data: OrderConfig }, Error>(
+    `${restBaseUrl}/orderentryconfig`,
+    openmrsFetch,
+  );
+
+  const results = useMemo(
+    () => ({
+      orderConfigObject: {
+        durationUnits: data?.data?.durationUnits?.map(({ uuid, display }) => ({
+          valueCoded: uuid,
+          value: display,
+        })),
+        orderFrequencies: data?.data?.orderFrequencies?.map(({ uuid, display }) => ({
+          valueCoded: uuid,
+          value: display,
+        })),
+      },
+      isLoading,
+      error,
+    }),
+    [data, error, isLoading],
+  );
+
+  return results;
+}

package/src/form/imaging-report-form/imaging-report-form.component.tsx

@@ -0,0 +1,161 @@
+import React, { useEffect, useMemo } from 'react';
+import { mutate } from 'swr';
+import styles from './imaging-report-form.scss';
+import { useTranslation } from 'react-i18next';
+import {
+  DefaultWorkspaceProps,
+  ExtensionSlot,
+  ResponsiveWrapper,
+  showNotification,
+  showSnackbar,
+  useLayoutType,
+  usePatient,
+} from '@openmrs/esm-framework';
+import { Result } from '../../imaging-tabs/work-list/work-list.resource';
+import { Controller, useForm } from 'react-hook-form';
+import { saveProcedureReport, useGetOrderConceptByUuid } from './imaging.resource';
+import { Stack, Button, TextArea, ButtonSet, InlineLoading } from '@carbon/react';
+import classNames from 'classnames';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+type ResultFormProps = DefaultWorkspaceProps & {
+  patientUuid: string;
+  order: Result;
+};
+
+const imagingReportSchema = z.object({
+  procedureReport: z.string({ required_error: 'Imaging report is required' }).min(1, {
+    message: 'Imaging report is required',
+  }),
+});
+
+type ImagingReportFormData = z.infer<typeof imagingReportSchema>;
+
+const ImagingReportForm: React.FC<ResultFormProps> = ({
+  order,
+  patientUuid,
+  closeWorkspace,
+  closeWorkspaceWithSavedChanges,
+  promptBeforeClosing,
+}) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const { patient, isLoading } = usePatient(patientUuid);
+  const { concept, isLoading: isLoadingConcepts } = useGetOrderConceptByUuid(order.concept.uuid);
+  const {
+    formState: { isSubmitting, errors, isDirty },
+    control,
+    handleSubmit,
+  } = useForm<ImagingReportFormData>({
+    defaultValues: {
+      procedureReport: '',
+    },
+    resolver: zodResolver(imagingReportSchema),
+    mode: 'all',
+  });
+
+  const bannerState = useMemo(() => {
+    if (patient) {
+      return {
+        patient,
+        patientUuid,
+        hideActionsOverflow: true,
+      };
+    }
+  }, [patient, patientUuid]);
+
+  useEffect(() => {
+    if (promptBeforeClosing && isDirty) {
+      promptBeforeClosing(() => isDirty);
+    }
+  }, [promptBeforeClosing, isDirty, closeWorkspace]);
+
+  const onSubmit = async (formData: ImagingReportFormData) => {
+    const reportPayload = {
+      patient: patientUuid,
+      procedureOrder: order.uuid,
+      concept: order.concept.uuid,
+      status: 'COMPLETED',
+      procedureReport: formData.procedureReport,
+      encounters: [],
+    };
+
+    try {
+      const response = await saveProcedureReport(reportPayload);
+      if (response.ok) {
+        showSnackbar({
+          title: t('imagingOrderSaveSuccess', 'Imaging order saved successfully'),
+          kind: 'success',
+          subtitle: t(
+            'imagingOrderSaveSuccessSubtitle',
+            'Imaging order saved successfully. Report transitioned to awaiting approval.',
+          ),
+          isLowContrast: true,
+        });
+        closeWorkspaceWithSavedChanges();
+        mutate((key) => typeof key === 'string' && key.startsWith('/ws/rest/v1/order'), undefined, {
+          revalidate: true,
+        });
+      }
+    } catch (error) {
+      showNotification({
+        title: t('errorSavingReport', 'Error occurred while saving the report'),
+        kind: 'error',
+        critical: true,
+        description: error?.message,
+      });
+    }
+  };
+  return (
+    <>
+      {patient ? (
+        <ExtensionSlot name="patient-header-slot" state={bannerState} />
+      ) : (
+        <InlineLoading status="active" iconDescription="Loading" />
+      )}
+      <form aria-label="imaging form" className={styles.form} onSubmit={handleSubmit(onSubmit)}>
+        <div className={styles.formContainer}>
+          <Stack gap={7}>
+            <ResponsiveWrapper>
+              <Controller
+                control={control}
+                name="procedureReport"
+                render={({ field }) => (
+                  <TextArea
+                    labelText={concept?.display}
+                    id="procedureReport"
+                    name="procedureReport"
+                    invalid={!!errors.procedureReport}
+                    invalidText={errors.procedureReport?.message}
+                    {...field}
+                  />
+                )}
+              />
+            </ResponsiveWrapper>
+          </Stack>
+        </div>
+        <ButtonSet className={classNames({ [styles.tablet]: isTablet, [styles.desktop]: !isTablet })}>
+          <Button style={{ maxWidth: '50%' }} kind="secondary" onClick={closeWorkspace}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button
+            disabled={isSubmitting || Object.keys(errors).length > 0}
+            style={{ maxWidth: '50%' }}
+            kind="primary"
+            type="submit">
+            {isSubmitting ? (
+              <span style={{ display: 'flex', justifyItems: 'center' }}>
+                {t('submitting', 'Submitting...')} <InlineLoading status="active" iconDescription="Loading" />
+              </span>
+            ) : (
+              t('saveAndClose', 'Save & close')
+            )}
+          </Button>
+        </ButtonSet>
+      </form>
+    </>
+  );
+};
+
+export default ImagingReportForm;

package/src/form/imaging-report-form/imaging-report-form.scss

@@ -0,0 +1,30 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 80%;
+}
+
+.formContainer {
+  margin: layout.$spacing-05;
+}
+
+.tablet {
+  padding: layout.$spacing-06 layout.$spacing-05;
+  background-color: colors.$white;
+}
+
+.desktop {
+  padding: 0;
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+}
+
+.formStackControl {
+  row-gap: layout.$layout-01;
+}

package/src/form/imaging-report-form/imaging.resource.ts

@@ -0,0 +1,360 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { updateOrder } from '../../imaging-tabs/test-ordered/pick-imaging-order/add-to-worklist-dialog.resource';
+
+export interface ConceptResponse {
+  uuid: string;
+  display: string;
+  name: Name;
+  datatype: Datatype;
+  conceptClass: ConceptClass;
+  set: boolean;
+  version: string;
+  retired: boolean;
+  names: Name2[];
+  descriptions: Description[];
+  mappings: Mapping[];
+  answers: any[];
+  setMembers: ConceptReference[];
+  auditInfo: AuditInfo;
+  attributes: any[];
+  links: Link18[];
+  resourceVersion: string;
+  hiNormal: number;
+  hiAbsolute: number;
+  hiCritical: number;
+  lowNormal: number;
+  lowAbsolute: number;
+  lowCritical: number;
+}
+
+export interface Name {
+  display: string;
+  uuid: string;
+  name: string;
+  locale: string;
+  localePreferred: boolean;
+  conceptNameType: string;
+  links: Link[];
+  resourceVersion: string;
+}
+
+export interface Link {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface Datatype {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  hl7Abbreviation: string;
+  retired: boolean;
+  links: Link2[];
+  resourceVersion: string;
+}
+
+export interface Link2 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface ConceptClass {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  retired: boolean;
+  links: Link3[];
+  resourceVersion: string;
+}
+
+export interface Link3 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface Name2 {
+  display: string;
+  uuid: string;
+  name: string;
+  locale: string;
+  localePreferred: boolean;
+  conceptNameType?: string;
+  links: Link4[];
+  resourceVersion: string;
+}
+
+export interface Link4 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface Description {
+  display: string;
+  uuid: string;
+  description: string;
+  locale: string;
+  links: Link5[];
+  resourceVersion: string;
+}
+
+export interface Link5 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface Mapping {
+  display: string;
+  uuid: string;
+  conceptReferenceTerm: ConceptReferenceTerm;
+  conceptMapType: ConceptMapType;
+  links: Link8[];
+  resourceVersion: string;
+}
+
+export interface ConceptReferenceTerm {
+  uuid: string;
+  display: string;
+  links: Link6[];
+}
+
+export interface Link6 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface ConceptMapType {
+  uuid: string;
+  display: string;
+  links: Link7[];
+}
+
+export interface Link7 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface Link8 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface ConceptReference {
+  uuid: string;
+  display: string;
+  name: Name3;
+  datatype: Datatype2;
+  conceptClass: ConceptClass2;
+  set: boolean;
+  version: string;
+  retired: boolean;
+  names: Name4[];
+  descriptions: any[];
+  mappings: Mapping2[];
+  answers: Answer[];
+  setMembers: any[];
+  attributes: any[];
+  links: Link15[];
+  resourceVersion: string;
+  hiNormal: number;
+  hiAbsolute: number;
+  hiCritical: number;
+  lowNormal: number;
+  lowAbsolute: number;
+  lowCritical: number;
+  units?: string;
+}
+
+export interface Name3 {
+  display: string;
+  uuid: string;
+  name: string;
+  locale: string;
+  localePreferred: boolean;
+  conceptNameType: string;
+  links: Link9[];
+  resourceVersion: string;
+}
+
+export interface Link9 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface Datatype2 {
+  uuid: string;
+  display: string;
+  links: Link10[];
+}
+
+export interface Link10 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface ConceptClass2 {
+  uuid: string;
+  display: string;
+  links: Link11[];
+}
+
+export interface Link11 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface Name4 {
+  uuid: string;
+  display: string;
+  links: Link12[];
+}
+
+export interface Link12 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface Mapping2 {
+  uuid: string;
+  display: string;
+  links: Link13[];
+}
+
+export interface Link13 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface Answer {
+  uuid: string;
+  display: string;
+  links: Link14[];
+}
+
+export interface Link14 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface Link15 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface AuditInfo {
+  creator: Creator;
+  dateCreated: string;
+  changedBy: ChangedBy;
+  dateChanged: string;
+}
+
+export interface Creator {
+  uuid: string;
+  display: string;
+  links: Link16[];
+}
+
+export interface Link16 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface ChangedBy {
+  uuid: string;
+  display: string;
+  links: Link17[];
+}
+
+export interface Link17 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface Link18 {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface ObPayload {
+  concept: string;
+  order: string;
+  value: string | number;
+  status: string;
+}
+
+// get order concept
+export async function GetOrderConceptByUuid(uuid: string) {
+  const abortController = new AbortController();
+  return openmrsFetch(`/ws/rest/v1/concept/${uuid}?v=full`, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+  });
+}
+
+export function useGetOrderConceptByUuid(uuid: string) {
+  const apiUrl = `/ws/rest/v1/concept/${uuid}?v=custom:(uuid,display,name,datatype,set,answers,hiNormal,hiAbsolute,hiCritical,lowNormal,lowAbsolute,lowCritical,units,setMembers:(uuid,display,answers,datatype,hiNormal,hiAbsolute,hiCritical,lowNormal,lowAbsolute,lowCritical,units))`;
+
+  const { data, error, isLoading, isValidating, mutate } = useSWR<{ data: ConceptResponse }, Error>(
+    apiUrl,
+    openmrsFetch,
+  );
+  return {
+    concept: data?.data,
+    isLoading,
+    isError: error,
+    isValidating,
+    mutate,
+  };
+}
+
+export async function UpdateEncounter(uuid: string, payload: any) {
+  const abortController = new AbortController();
+  return openmrsFetch(`/ws/rest/v1/encounter/${uuid}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: payload,
+  });
+}
+
+export async function saveProcedureReport(reportPayload) {
+  const abortController = new AbortController();
+  const updateResults = await openmrsFetch(`/ws/rest/v1/procedure`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: reportPayload,
+  });
+
+  if (updateResults.status === 201 || updateResults.status === 200) {
+    return await updateOrder(reportPayload.procedureOrder, {
+      fulfillerStatus: 'COMPLETED',
+    });
+  }
+}

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { PageHeader, LaboratoryPictogram } from '@openmrs/esm-framework';
+import styles from './imagining-header.scss';
+
+export const ImagingPageHeader: React.FC = () => {
+  const { t } = useTranslation();
+  // TODO Add correct illustration by registering the correct pictogram
+  // https://github.com/openmrs/openmrs-esm-core/blob/8d4612d384f000990303365e0d8575ebf382bb4f/packages/framework/esm-styleguide/src/pictograms/pictogram-registration.ts#L9
+  return (
+    <PageHeader
+      illustration={<LaboratoryPictogram />}
+      title={t('imagingOrders', 'Imaging Orders')}
+      className={styles.pageHeader}
+    />
+  );
+};

package/src/header/imagining-header.scss

@@ -0,0 +1,5 @@
+@use '@carbon/colors';
+
+.pageHeader {
+  border-bottom: 1px solid colors.$gray-20;
+}

package/src/hooks/useOrdersWorklist.ts

@@ -0,0 +1,59 @@
+import { openmrsFetch, restBaseUrl, useConfig } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { useMemo, useCallback } from 'react';
+import { Result } from '../imaging-tabs/work-list/work-list.resource';
+import { ImagingConfig } from '../config-schema';
+import { FulfillerStatus } from '../shared/ui/common/grouped-imaging-types';
+
+const createApiUrl = (radiologyOrderTypeUuid: string, activatedOnOrAfterDate: string, fulfillerStatus: string) => {
+  const responseFormat =
+    'custom:(uuid,orderNumber,patient:ref,concept:(uuid,display,conceptClass),action,careSetting,orderer:ref,urgency,instructions,bodySite,laterality,commentToFulfiller,procedures,display,fulfillerStatus,dateStopped,scheduledDate,dateActivated,fulfillerComment)';
+  const orderTypeParam = `orderTypes=${radiologyOrderTypeUuid}&activatedOnOrAfterDate=${activatedOnOrAfterDate}&isStopped=false&fulfillerStatus=${fulfillerStatus}&v=${responseFormat}`;
+  return `${restBaseUrl}/order?${orderTypeParam}`;
+};
+
+export function useOrdersWorkList(activatedOnOrAfterDate: string, fulfillerStatus: FulfillerStatus) {
+  const {
+    orders: { radiologyOrderTypeUuid },
+    radiologyConceptClassUuid,
+  } = useConfig<ImagingConfig>();
+
+  const apiUrl = useMemo(
+    () => createApiUrl(radiologyOrderTypeUuid, activatedOnOrAfterDate, fulfillerStatus),
+    [radiologyOrderTypeUuid, activatedOnOrAfterDate, fulfillerStatus],
+  );
+
+  const { data, error, isLoading, mutate } = useSWR<{ data: { results: Array<Result> } }>(apiUrl, openmrsFetch);
+
+  const filterOrders = useCallback(
+    (order: Result) => {
+      const baseConditions =
+        order.dateStopped === null && order.concept.conceptClass.uuid === radiologyConceptClassUuid;
+
+      switch (fulfillerStatus) {
+        case '':
+          return baseConditions && order.fulfillerStatus === null && order.action === 'NEW';
+        case 'IN_PROGRESS':
+        case 'DECLINED':
+        case 'COMPLETED':
+        case 'EXCEPTION':
+          return baseConditions && order.fulfillerStatus === fulfillerStatus && order.action !== 'DISCONTINUE';
+        default:
+          return false;
+      }
+    },
+    [radiologyConceptClassUuid, fulfillerStatus],
+  );
+
+  const sortedOrders = useMemo(() => {
+    const filteredOrders = data?.data?.results?.filter(filterOrders) || [];
+    return filteredOrders.sort((a, b) => new Date(a.dateActivated).getTime() - new Date(b.dateActivated).getTime());
+  }, [data, filterOrders]);
+
+  return {
+    workListEntries: sortedOrders,
+    isLoading,
+    isError: error,
+    mutate,
+  };
+}

package/src/hooks/useSearchGroupedResults.ts

@@ -0,0 +1,27 @@
+import { useMemo } from 'react';
+import { GroupedOrders } from '../shared/ui/common/grouped-imaging-types';
+
+/**
+ * A custom hook that filters grouped orders based on a search string.
+ *
+ * @param {Array<GroupedOrders>} data - An array of grouped orders to be filtered.
+ * @param {string} searchString - The string to search for within the orders.
+ * @returns {Array<GroupedOrders>} - The filtered array of grouped orders.
+ */
+export function useSearchGroupedResults(data: Array<GroupedOrders>, searchString: string) {
+  return useMemo(() => {
+    const trimmedSearchString = searchString.trim().toLowerCase();
+
+    if (!trimmedSearchString) {
+      return data;
+    }
+
+    return data.filter((orderGroup) =>
+      orderGroup.orders.some(
+        (order) =>
+          order.orderNumber.toLowerCase().includes(trimmedSearchString) ||
+          order.patient.display.toLowerCase().includes(trimmedSearchString),
+      ),
+    );
+  }, [searchString, data]);
+}