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

package/src/index.ts

@@ -0,0 +1,45 @@
+import Root from './root.component';
+import { moduleName } from './constants';
+import { configSchema } from './config-schema';
+
+import { defineConfigSchema, getSyncLifecycle } from '@openmrs/esm-framework';
+import { createLeftPanelLink } from './left-panel-link';
+import RejectImagingOrderModal from './imaging-tabs/test-ordered/reject-order-dialog/reject-order-dialog.component';
+import ReviewImagingReportModal from './imaging-tabs/review-ordered/review-imaging-report-modal/review-imaging-report-dialog.component';
+import ImagingReportForm from './form/imaging-report-form/imaging-report-form.component';
+import AddImagingOrderWorkspace from './form/imaging-orders/add-imaging-orders/add-imaging-order.workspace';
+import ImagingOrderBasketPanelExtension from './form/imaging-orders/imaging-order-basket-panel/imaging-order-basket-panel.extension';
+import AddImagingToWorkListModal from './imaging-tabs/test-ordered/pick-imaging-order/add-to-worklist-dialog.component';
+
+const options = {
+  featureName: 'esm-imaging-orders-app',
+  moduleName,
+};
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+export function startupApp() {
+  defineConfigSchema(moduleName, configSchema);
+}
+
+export const root = getSyncLifecycle(Root, options);
+
+export const imagingOrdersLink = getSyncLifecycle(
+  createLeftPanelLink({
+    name: 'imaging-orders',
+    title: 'Imaging Orders',
+  }),
+  options,
+);
+
+// Modals
+export const reviewImagingReportModal = getSyncLifecycle(ReviewImagingReportModal, options);
+
+export const imagingOrderPanel = getSyncLifecycle(ImagingOrderBasketPanelExtension, options);
+export const rejectImagingOrderModal = getSyncLifecycle(RejectImagingOrderModal, options);
+
+// t('addImagingOrderWorkspaceTitle', 'Add Imaging order')
+export const addImagingOrderWorkspace = getSyncLifecycle(AddImagingOrderWorkspace, options);
+
+export const imagingReportForm = getSyncLifecycle(ImagingReportForm, options);
+export const addImagingToWorkListModal = getSyncLifecycle(AddImagingToWorkListModal, options);

package/src/left-panel-link.tsx

@@ -0,0 +1,42 @@
+import React, { useMemo } from 'react';
+import last from 'lodash-es/last';
+import { BrowserRouter, useLocation } from 'react-router-dom';
+import { ConfigurableLink } from '@openmrs/esm-framework';
+
+export interface LinkConfig {
+  name: string;
+  title: string;
+}
+
+const isUuid = (value: string) => {
+  const regex = /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/;
+  return regex.test(value);
+};
+
+export const createLeftPanelLink = (config: LinkConfig) => () => {
+  return (
+    <BrowserRouter>
+      <LinkExtension config={config} />
+    </BrowserRouter>
+  );
+};
+
+export function LinkExtension({ config }: { config: LinkConfig }) {
+  const { name, title } = config;
+  const location = useLocation();
+  const spaBasePath = window.getOpenmrsSpaBase() + 'home';
+
+  let urlSegment = useMemo(() => decodeURIComponent(last(location.pathname.split('/'))), [location.pathname]);
+
+  if (isUuid(urlSegment)) {
+    urlSegment = 'billing';
+  }
+
+  return (
+    <ConfigurableLink
+      to={spaBasePath + '/' + name}
+      className={`cds--side-nav__link ${name === urlSegment && 'active-left-nav-link'}`}>
+      {title}
+    </ConfigurableLink>
+  );
+}

package/src/root.component.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import ImagingOrders from './imaging-orders.component';
+import { WorkspaceContainer } from '@openmrs/esm-framework';
+
+const Root: React.FC = () => {
+  const baseName = window.getOpenmrsSpaBase() + 'home/imaging-orders';
+
+  return (
+    <BrowserRouter basename={baseName}>
+      <Routes>
+        <Route path="/" element={<ImagingOrders />} />
+      </Routes>
+      <WorkspaceContainer contextKey="imaging-orders" />
+    </BrowserRouter>
+  );
+};
+
+export default Root;

package/src/routes.json

@@ -0,0 +1,58 @@
+{
+  "$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"
+    }
+  ]
+}

package/src/shared/imaging.resource.tsx

@@ -0,0 +1,65 @@
+import useSWR, { mutate } from 'swr';
+import { openmrsFetch, restBaseUrl, useConfig } from '@openmrs/esm-framework';
+
+import { Result } from '../imaging-tabs/work-list/work-list.resource';
+import { useCallback, useMemo } from 'react';
+import { ImagingConfig } from '../config-schema';
+
+/**
+ * Hook to fetch and process imaging order statistics based on fulfiller status.
+ *
+ * @param fulfillerStatus - The status of the order to filter by.
+ * @returns An object containing the count of orders, loading state, error state, and a mutate function.
+ */
+export function useImagingOrderStats(fulfillerStatus: string) {
+  const {
+    orders: { radiologyOrderTypeUuid },
+    radiologyConceptClassUuid,
+  } = useConfig<ImagingConfig>();
+
+  const responseFormat =
+    'custom:(uuid,orderNumber,patient:ref,concept:(uuid,display,conceptClass),action,careSetting,orderer:ref,urgency,instructions,commentToFulfiller,display,fulfillerStatus,dateStopped)';
+  const apiUrl = useMemo(() => {
+    const orderTypeParam = `orderTypes=${radiologyOrderTypeUuid}&fulfillerStatus=${fulfillerStatus}&v=${responseFormat}`;
+    return `/ws/rest/v1/order?${orderTypeParam}`;
+  }, [radiologyOrderTypeUuid, fulfillerStatus, responseFormat]);
+
+  const mutateOrders = useCallback(() => {
+    return mutate(
+      (key) => typeof key === 'string' && key.startsWith(`${restBaseUrl}/order?orderType=${radiologyOrderTypeUuid}`),
+    );
+  }, [radiologyOrderTypeUuid]);
+
+  const { data, error, isLoading } = useSWR<{ data: { results: Array<Result> } }, Error>(apiUrl, openmrsFetch);
+
+  const radiologyOrders = useMemo(() => {
+    return data?.data?.results?.filter((order) => {
+      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;
+      }
+    });
+  }, [data, fulfillerStatus, radiologyConceptClassUuid]);
+
+  const count = useMemo(
+    () => (fulfillerStatus != null ? radiologyOrders?.length ?? 0 : 0),
+    [fulfillerStatus, radiologyOrders],
+  );
+
+  return {
+    count,
+    isLoading,
+    isError: error,
+    mutate: mutateOrders,
+  };
+}

package/src/shared/ui/common/action-button/action-button.component.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@carbon/react';
+import { showModal, launchWorkspace } from '@openmrs/esm-framework';
+import { Order } from '@openmrs/esm-patient-common-lib';
+import OrderActionExtension from './order-action-extension.component';
+import { Result } from '../../../../imaging-tabs/work-list/work-list.resource';
+
+type ActionButtonProps = {
+  action: {
+    actionName: string;
+    order: number;
+  };
+  order: Result;
+  patientUuid: string;
+};
+
+const ActionButton: React.FC<ActionButtonProps> = ({ action, order, patientUuid }) => {
+  const { t } = useTranslation();
+
+  const handleOpenImagingReportForm = () => {
+    launchWorkspace('imaging-report-form', {
+      patientUuid,
+      order,
+    });
+  };
+
+  switch (action.actionName) {
+    case 'add-imaging-to-work-list-modal':
+      return <OrderActionExtension order={order as unknown as Order} />;
+
+    case 'imaging-report-form':
+      return (
+        <Button kind="primary" onClick={handleOpenImagingReportForm}>
+          {t('imagingReportForm', 'Imaging Report Form')}
+        </Button>
+      );
+
+    case 'review-imaging-report-dialog':
+    case 'reject-imaging-order-modal':
+      return (
+        <Button
+          kind={action.actionName === 'reject-imaging-order-modal' ? 'danger' : 'tertiary'}
+          onClick={() => {
+            const dispose = showModal(action.actionName, {
+              closeModal: () => dispose(),
+              order: order,
+            });
+          }}>
+          {t(
+            action.actionName.replace(/-/g, ''),
+            action.actionName
+              .split('-')
+              .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+              .join(' ')
+              .replace('Modal', ''),
+          )}
+        </Button>
+      );
+
+    default:
+      return null;
+  }
+};
+
+export default ActionButton;

package/src/shared/ui/common/action-button/order-action-extension.component.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Order } from '@openmrs/esm-patient-common-lib';
+import { ExtensionSlot, restBaseUrl } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+
+type OrderActionProps = {
+  order: Order;
+};
+
+const OrderActionExtension: React.FC<OrderActionProps> = ({ order }) => {
+  const { t } = useTranslation();
+  const state = {
+    order: order,
+    modalName: 'add-imaging-to-work-list-modal',
+    actionText: t('pickImagingOrder', 'Pick Imaging Order'),
+    additionalProps: { mutateUrl: `${restBaseUrl}/order` },
+  };
+  return <ExtensionSlot name="imaging-orders-action" state={state} />;
+};
+
+export default OrderActionExtension;

package/src/shared/ui/common/grouped-imaging-types.ts

@@ -0,0 +1,48 @@
+import { Result } from '../../../imaging-tabs/work-list/work-list.resource';
+
+export type FulfillerStatus = '' | 'IN_PROGRESS' | 'DECLINED' | 'COMPLETED' | 'EXCEPTION';
+
+export type WorkListProps = {
+  fulfillerStatus: FulfillerStatus;
+};
+
+export interface ResultsOrderProps {
+  order: Result;
+  patientUuid: string;
+}
+
+export interface RejectOrderProps {
+  order: Result;
+}
+
+export interface InstructionsProps {
+  order: Result;
+}
+
+export interface GroupedOrders {
+  patientId: string;
+  orders: Array<Result>;
+}
+export interface GroupedOrdersTableProps {
+  orders: Array<Result>;
+  showStatus: boolean;
+  showStartButton: boolean;
+  showActions: boolean;
+  showOrderType: boolean;
+  actions: Array<OrderAction>;
+  title: string;
+}
+
+export interface ListOrdersDetailsProps {
+  groupedOrders: GroupedOrders;
+  showStatus: boolean;
+  showStartButton: boolean;
+  showActions: boolean;
+  showOrderType: boolean;
+  actions: Array<OrderAction>;
+}
+
+export interface OrderAction {
+  actionName: string;
+  order: 0 | number;
+}

package/src/shared/ui/common/grouped-orders-table.component.tsx

@@ -0,0 +1,154 @@
+import React, { useMemo, useState } from 'react';
+import styles from './grouped-orders-table.scss';
+import { useTranslation } from 'react-i18next';
+import { usePagination } from '@openmrs/esm-framework';
+import { GroupedOrdersTableProps } from './grouped-imaging-types';
+import {
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableExpandRow,
+  TableExpandedRow,
+  TableExpandHeader,
+  TableCell,
+  DataTable,
+  TableContainer,
+  TableToolbarSearch,
+  TableToolbarContent,
+  TableToolbar,
+} from '@carbon/react';
+import ListOrderDetails from './list-order-details.component';
+import { EmptyState } from '@openmrs/esm-patient-common-lib';
+import { useSearchGroupedResults } from '../../../hooks/useSearchGroupedResults';
+import TransitionLatestQueueEntryButton from '../../../imaging-tabs/test-ordered/transition-patient-new-queue/transition-latest-queue-entry-button.component';
+
+const GroupedOrdersTable: React.FC<GroupedOrdersTableProps> = (props) => {
+  const workListEntries = props.orders;
+  const { t } = useTranslation();
+  const [currentPageSize] = useState<number>(10);
+  const [searchString, setSearchString] = useState<string>('');
+
+  function groupOrdersById(orders) {
+    if (orders && orders.length > 0) {
+      const groupedOrders = orders.reduce((acc, item) => {
+        if (!acc[item.patient.uuid]) {
+          acc[item.patient.uuid] = [];
+        }
+        acc[item.patient.uuid].push(item);
+        return acc;
+      }, {});
+
+      // Convert the result to an array of objects with patientId and orders
+      return Object.keys(groupedOrders).map((patientId) => ({
+        patientId: patientId,
+        orders: groupedOrders[patientId],
+      }));
+    } else {
+      return [];
+    }
+  }
+  const groupedOrdersByPatient = groupOrdersById(workListEntries);
+  const searchResults = useSearchGroupedResults(groupedOrdersByPatient, searchString);
+  const { goTo, results: paginatedResults, currentPage } = usePagination(searchResults, currentPageSize);
+
+  const rowData = useMemo(() => {
+    return paginatedResults.map((patient) => ({
+      id: patient.patientId,
+      patientName: patient.orders[0].patient?.display?.split('-')[1],
+      orders: patient.orders,
+      totalOrders: patient.orders?.length,
+      fulfillerStatus: patient.orders[0].fulfillerStatus,
+      action:
+        patient.orders[0].fulfillerStatus === 'COMPLETED' ? (
+          <TransitionLatestQueueEntryButton patientUuid={patient.patientId} />
+        ) : null,
+    }));
+  }, [paginatedResults]);
+
+  const tableColumns = useMemo(() => {
+    const baseColumns = [
+      { key: 'patientName', header: t('patientName', 'Patient Name') },
+      { key: 'totalOrders', header: t('totalOrders', 'Total Orders') },
+    ];
+
+    const showActionColumn = workListEntries.some((order) => order.fulfillerStatus === 'COMPLETED');
+
+    return showActionColumn ? [...baseColumns, { key: 'action', header: t('action', 'Action') }] : baseColumns;
+  }, [workListEntries, t]);
+
+  if (paginatedResults.length === 0) {
+    return <EmptyState headerTitle={props.title} displayText={t('noOrdersDescription', 'No orders')} />;
+  }
+
+  return (
+    <DataTable size="md" useZebraStyle rows={rowData} headers={tableColumns}>
+      {({ rows, headers, getHeaderProps, getRowProps, getExpandedRowProps, getTableProps, getTableContainerProps }) => (
+        <TableContainer
+          className={styles.dataTable}
+          title={props.title}
+          description={t('groupedOrdersTableDescription', 'Orders grouped by patient, expand row to view all orders')}
+          {...getTableContainerProps()}>
+          <TableToolbar>
+            <TableToolbarContent>
+              <TableToolbarSearch
+                size="sm"
+                placeholder="Search by patient name"
+                persistent={true}
+                onChange={(event) => setSearchString(event.target.value)}
+              />
+            </TableToolbarContent>
+          </TableToolbar>
+          <Table {...getTableProps()} aria-label="sample table">
+            <TableHead>
+              <TableRow>
+                <TableExpandHeader aria-label="expand row" />
+                {headers.map((header, i) => (
+                  <TableHeader
+                    key={i}
+                    {...getHeaderProps({
+                      header,
+                    })}>
+                    {header.header}
+                  </TableHeader>
+                ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {rows.map((row) => (
+                <React.Fragment key={row.id}>
+                  <TableExpandRow
+                    {...getRowProps({
+                      row,
+                    })}>
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id}>{cell.value}</TableCell>
+                    ))}
+                  </TableExpandRow>
+                  <TableExpandedRow
+                    colSpan={headers.length + 1}
+                    className="demo-expanded-td"
+                    {...getExpandedRowProps({
+                      row,
+                    })}>
+                    <ListOrderDetails
+                      actions={props.actions}
+                      groupedOrders={groupedOrdersByPatient.find((item) => item.patientId === row.id)}
+                      showActions={props.showActions}
+                      showOrderType={props.showOrderType}
+                      showStartButton={props.showStartButton}
+                      showStatus={props.showStatus}
+                    />
+                  </TableExpandedRow>
+                </React.Fragment>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      )}
+    </DataTable>
+  );
+};
+
+export default GroupedOrdersTable;

package/src/shared/ui/common/grouped-orders-table.scss

@@ -0,0 +1,13 @@
+@use '@carbon/layout';
+@use '@carbon/colors';
+
+.dataTable {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid colors.$gray-20;
+
+  & > section {
+    position: relative;
+    margin-bottom: layout.$spacing-01;
+  }
+}

package/src/shared/ui/common/list-order-details.component.tsx

@@ -0,0 +1,72 @@
+import React, { useMemo } from 'react';
+import styles from './list-order-details.scss';
+import { useTranslation } from 'react-i18next';
+import { formatDate, parseDate } from '@openmrs/esm-framework';
+import { ListOrdersDetailsProps } from './grouped-imaging-types';
+import { Tile } from '@carbon/react';
+import { OrderDetail } from './order-detail.component';
+import ActionButton from './action-button/action-button.component';
+
+const ListOrderDetails: React.FC<ListOrdersDetailsProps> = (props) => {
+  const orders = props.groupedOrders?.orders;
+  const { t } = useTranslation();
+  const orderRows = useMemo(() => {
+    return orders
+      ?.filter((item) => item.action === 'NEW')
+      .map((entry) => ({
+        ...entry,
+        id: entry.uuid,
+        orderNumber: entry.orderNumber,
+        procedure: entry.display,
+        status: entry.fulfillerStatus ? entry.fulfillerStatus : '--',
+        urgency: entry.urgency,
+        orderer: entry.orderer?.display,
+        instructions: entry.instructions ? entry.instructions : '--',
+        date: <span className={styles['single-line-display']}>{formatDate(parseDate(entry?.dateActivated))}</span>,
+      }));
+  }, [orders]);
+
+  return (
+    <div className={styles.ordersContainer}>
+      {orderRows.map((row, index) => (
+        <Tile className={styles.orderTile}>
+          {props.showActions && (
+            <div className={styles.actionBtns}>
+              {props.actions
+                .sort((a, b) => {
+                  // Replace 'property' with the actual property you want to sort by
+                  if (a.order < b.order) {
+                    return -1;
+                  }
+                  if (a.order > b.order) {
+                    return 1;
+                  }
+                  return 0;
+                })
+                .map((action) => (
+                  <ActionButton
+                    key={action.actionName}
+                    action={action}
+                    order={orders.find((order) => order.uuid === row.id)}
+                    patientUuid={row.patient.uuid}
+                  />
+                ))}
+            </div>
+          )}
+          <div>
+            <OrderDetail label={t('date', 'DATE').toUpperCase()} value={row.date} />
+            <OrderDetail label={t('orderNumber', 'Order Number').toUpperCase()} value={row.orderNumber} />
+            <OrderDetail label={t('procedure', 'procedure').toUpperCase()} value={row.procedure} />
+
+            {props.showStatus && <OrderDetail label={t('status', 'Status').toUpperCase()} value={row.status} />}
+            <OrderDetail label={t('urgency', 'urgency').toUpperCase()} value={row.urgency} />
+            <OrderDetail label={t('orderer', 'orderer').toUpperCase()} value={row.orderer} />
+            <OrderDetail label={t('instructions', 'Instructions').toUpperCase()} value={row.instructions} />
+          </div>
+        </Tile>
+      ))}
+    </div>
+  );
+};
+
+export default ListOrderDetails;

package/src/shared/ui/common/list-order-details.scss

@@ -0,0 +1,52 @@
+@use '@carbon/layout';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.orderTile {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.ordersContainer {
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  margin-bottom: 1rem;
+
+  &:global(.cds--tile) {
+    min-height: 3rem !important;
+    padding-left: 10px !important;
+  }
+}
+
+.ordersContainer > :global(.cds--tile) {
+  min-height: 3rem !important;
+  padding-left: 10px !important;
+  margin: auto;
+}
+
+.orderPropertyDisplay {
+  font-size: 15px !important;
+}
+
+.bodyLong01 {
+  font-size: 13px !important;
+}
+
+.displayValue {
+  color: #525252;
+  font-weight: bold;
+  width: layout.$spacing-05;
+  height: layout.$spacing-05;
+}
+
+.actionBtns {
+  display: flex;
+  align-items: flex-end;
+  column-gap: layout.$spacing-01;
+  & > button {
+    max-height: layout.$spacing-07;
+  }
+}

package/src/shared/ui/common/order-detail.component.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './order-detail.scss';
+
+export const OrderDetail: React.FC<{ label: string; value: string | any }> = ({ label, value }) => {
+  return (
+    <div>
+      <p className={styles.bodyLong01}>
+        <span className={styles.label01}>{label}</span>
+        {' : '}
+        <span className={styles.displayValue}>{value}</span>
+      </p>
+    </div>
+  );
+};