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

package/src/hooks/useSearchResults.ts

@@ -0,0 +1,51 @@
+import { formatDate, parseDate } from '@openmrs/esm-framework';
+import { useMemo } from 'react';
+import { Result } from '../imaging-tabs/work-list/work-list.resource';
+
+/**
+ * A custom hook that processes and filters imaging order results based on a search string.
+ *
+ * @param {Result[]} data - An array of imaging order results to be processed and searched.
+ * @param {string} searchString - The string to search for within the data.
+ * @returns {Array} An array of processed and filtered imaging order results.
+ */
+export function useSearchResults(data: Result[], searchString: string) {
+  /**
+   * Flattens and transforms the input data for easier searching and display.
+   */
+  const flattenedData = data.map((eachObject) => {
+    return {
+      ...eachObject,
+      id: eachObject.uuid,
+      date: formatDate(parseDate(eachObject.dateActivated)),
+      patient: eachObject.patient.display.split('-')[1],
+      orderNumber: eachObject.orderNumber,
+      procedure: eachObject.concept.display,
+      action: eachObject.action,
+      status: eachObject.fulfillerStatus ?? '--',
+      orderer: eachObject.orderer.display,
+      urgency: eachObject.urgency,
+    };
+  });
+
+  /**
+   * Memoized search results based on the flattened data and search string.
+   */
+  const searchResults = useMemo(() => {
+    if (searchString && searchString.trim() !== '') {
+      const search = searchString.toLowerCase();
+      return flattenedData.filter((eachDataRow) =>
+        Object.entries(eachDataRow).some(([header, value]) => {
+          if (header === 'patientUuid') {
+            return false;
+          }
+          return `${value}`.toLowerCase().includes(search);
+        }),
+      );
+    }
+
+    return flattenedData;
+  }, [searchString, flattenedData]);
+
+  return searchResults;
+}

package/src/imaging-orders.component.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ImagingPageHeader } from './header/imagining-header.component';
+import { ImagingTabs } from './imaging-tabs/imaging-tabs.component';
+
+const ImagingOrders: React.FC = () => {
+  return (
+    <div>
+      <ImagingPageHeader />
+      <ImagingTabs />
+    </div>
+  );
+};
+
+export default ImagingOrders;

package/src/imaging-tabs/approved/approved-orders.component.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { DataTableSkeleton } from '@carbon/react';
+import { useOrdersWorkList } from '../../hooks/useOrdersWorklist';
+import GroupedOrdersTable from '../../shared/ui/common/grouped-orders-table.component';
+
+export const ApprovedOrders: React.FC = () => {
+  const { t } = useTranslation();
+  const { workListEntries, isLoading } = useOrdersWorkList('', 'COMPLETED');
+  const approved = workListEntries.filter((item) =>
+    item.procedures?.some((procedure) => procedure.outcome === 'SUCCESSFUL'),
+  );
+
+  if (isLoading) {
+    return <DataTableSkeleton />;
+  }
+
+  return (
+    <div>
+      <GroupedOrdersTable
+        orders={approved}
+        showStatus={false}
+        showStartButton={false}
+        showActions={false}
+        showOrderType={true}
+        actions={[]}
+        title={t('approvedOrders', 'Approved Orders')}
+      />
+    </div>
+  );
+};

package/src/imaging-tabs/imaging-tabs.component.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { TabPanels, TabList, Tabs, Tab, TabPanel } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { useImagingOrderStats } from '../shared/imaging.resource';
+import { useOrdersWorkList } from '../hooks/useOrdersWorklist';
+import { TestsOrdered } from './test-ordered/tests-ordered.component';
+import WorkList from './work-list/work-list.component';
+import { ReferredTests } from './referred-test/referred-ordered.component';
+import { Review } from './review-ordered/review-ordered.component';
+import { ApprovedOrders } from './approved/approved-orders.component';
+import { OrdersNotDone } from './orders-not-done/orders-not-done.component';
+import styles from './imaging-tabs.scss';
+
+export const ImagingTabs: React.FC = () => {
+  const { t } = useTranslation();
+  const { activeOrdersCount, workListCount, referredTestsCount, ordersNotDoneCount } = useOrderCounts();
+  const { pendingReviewCount, approvedOrdersCount } = useCompletedOrders();
+
+  const tabsData = [
+    { label: 'pendingOrders', text: 'Active Orders', count: activeOrdersCount, component: <TestsOrdered /> },
+    {
+      label: 'workList',
+      text: 'WorkList',
+      count: workListCount,
+      component: <WorkList fulfillerStatus="IN_PROGRESS" />,
+    },
+    { label: 'referredProcedures', text: 'Referred Out', count: referredTestsCount, component: <ReferredTests /> },
+    { label: 'review', text: 'Pending Review', count: pendingReviewCount, component: <Review /> },
+    { label: 'approved', text: 'Approved', count: approvedOrdersCount, component: <ApprovedOrders /> },
+    {
+      label: 'notDone',
+      text: 'Not Done',
+      count: ordersNotDoneCount,
+      component: <OrdersNotDone fulfillerStatus="DECLINED" />,
+    },
+  ];
+
+  return (
+    <div className={styles.imagingTabsContainer}>
+      <Tabs>
+        <TabList aria-label="List of tabs" contained style={{ marginLeft: '1rem' }}>
+          {tabsData.map(({ label, text, count }) => (
+            <Tab key={label}>
+              {t(label, text)} ({count})
+            </Tab>
+          ))}
+        </TabList>
+        <TabPanels>
+          {tabsData.map(({ label, component }) => (
+            <TabPanel key={label}>{component}</TabPanel>
+          ))}
+        </TabPanels>
+      </Tabs>
+    </div>
+  );
+};
+
+const useOrderCounts = () => {
+  const { count: activeOrdersCount } = useImagingOrderStats('');
+  const { count: workListCount } = useImagingOrderStats('IN_PROGRESS');
+  const { count: referredTestsCount } = useImagingOrderStats('EXCEPTION');
+  const { count: ordersNotDoneCount } = useImagingOrderStats('DECLINED');
+
+  return { activeOrdersCount, workListCount, referredTestsCount, ordersNotDoneCount };
+};
+
+const useCompletedOrders = () => {
+  const { workListEntries } = useOrdersWorkList('', 'COMPLETED');
+  const pendingReview = workListEntries.filter((item) =>
+    item.procedures?.some((procedure) => procedure.outcome !== 'SUCCESSFUL'),
+  );
+  const pendingReviewCount = pendingReview?.length ?? 0;
+  const approved = workListEntries.filter((item) =>
+    item.procedures?.some((procedure) => procedure.outcome === 'SUCCESSFUL'),
+  );
+  const approvedOrdersCount = approved?.length ?? 0;
+
+  return { pendingReviewCount, approvedOrdersCount };
+};

package/src/imaging-tabs/imaging-tabs.scss

@@ -0,0 +1,5 @@
+@use '@carbon/layout';
+
+.imagingTabsContainer {
+  margin-top: layout.$spacing-05;
+}

package/src/imaging-tabs/orders-not-done/orders-not-done.component.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { DataTableSkeleton } from '@carbon/react';
+import { useOrdersWorkList } from '../../hooks/useOrdersWorklist';
+import { FulfillerStatus } from '../../shared/ui/common/grouped-imaging-types';
+import GroupedOrdersTable from '../../shared/ui/common/grouped-orders-table.component';
+import styles from '../test-ordered/tests-ordered.scss';
+interface NotDoneProps {
+  fulfillerStatus: FulfillerStatus;
+}
+export const OrdersNotDone: React.FC<NotDoneProps> = ({ fulfillerStatus }) => {
+  const { t } = useTranslation();
+  const { workListEntries, isLoading } = useOrdersWorkList('', fulfillerStatus);
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+  if (workListEntries?.length >= 0) {
+    return (
+      <>
+        <div>
+          <div className={styles.headerBtnContainer}></div>
+          <GroupedOrdersTable
+            orders={workListEntries}
+            showStatus={true}
+            showStartButton={false}
+            showActions={true}
+            showOrderType={false}
+            actions={[
+              {
+                actionName: 'reject-imaging-order-modal',
+                order: 1,
+              },
+            ]}
+            title={t('ordersNotDone', 'Orders Not Done')}
+          />
+        </div>
+      </>
+    );
+  }
+};
+export default OrdersNotDone;

package/src/imaging-tabs/referred-test/referred-ordered.component.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { DataTableSkeleton } from '@carbon/react';
+import { useOrdersWorkList } from '../../hooks/useOrdersWorklist';
+import GroupedOrdersTable from '../../shared/ui/common/grouped-orders-table.component';
+
+export const ReferredTests: React.FC = () => {
+  const { t } = useTranslation();
+  const { workListEntries, isLoading } = useOrdersWorkList('', 'EXCEPTION');
+
+  return isLoading ? (
+    <DataTableSkeleton />
+  ) : (
+    <div>
+      <GroupedOrdersTable
+        orders={workListEntries}
+        showStatus={false}
+        showStartButton={false}
+        showActions={false}
+        showOrderType={false}
+        actions={[]}
+        title={t('referredTests', 'Referred Tests')}
+      />
+    </div>
+  );
+};

package/src/imaging-tabs/referred-test/referred-ordered.scss

@@ -0,0 +1,6 @@
+@use '@carbon/colors';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.single-line-display {
+  white-space: nowrap;
+}

package/src/imaging-tabs/review-ordered/review-imaging-report-modal/review-imaging-report-dialog.component.tsx

@@ -0,0 +1,138 @@
+import React, { useState } from 'react';
+
+import {
+  Button,
+  Form,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  TextArea,
+  Accordion,
+  AccordionItem,
+  Table,
+  TableBody,
+  TableRow,
+  TableCell,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import styles from './review-imaging-report-dialog.scss';
+import { Result } from '../../work-list/work-list.resource';
+import { showNotification, showSnackbar } from '@openmrs/esm-framework';
+import { updateImagingProcedure } from '../../test-ordered/pick-imaging-order/add-to-worklist-dialog.resource';
+import { mutate } from 'swr';
+interface ReviewOrderDialogProps {
+  order: Result;
+  closeModal: () => void;
+}
+
+const ReviewImagingReportModal: React.FC<ReviewOrderDialogProps> = ({ order, closeModal }) => {
+  const { t } = useTranslation();
+
+  const [notes, setNotes] = useState('');
+  const tableData = [
+    { key: 'Order Urgency', value: order.urgency },
+    {
+      key: 'Schedule date',
+      value: order.scheduledDate || new Date().toLocaleDateString(),
+    },
+    { key: 'Body Site', value: order.display },
+    { key: 'Laterality', value: order.laterality },
+    { key: 'Number of repeats', value: order.numberOfRepeats },
+    { key: 'Frequency', value: order.frequency?.display },
+  ];
+  const procedureTableData = [{ key: 'Lab Results: ', value: order?.procedures[0]?.procedureReport }];
+
+  const updateProcedures = async (event) => {
+    event.preventDefault();
+    const body = {
+      outcome: 'SUCCESSFUL',
+    };
+    updateImagingProcedure(order?.procedures[0].uuid, body)
+      .then(() => {
+        showSnackbar({
+          isLowContrast: true,
+          title: t('createResponse', 'Create Review'),
+          kind: 'success',
+          subtitle: t('pickSuccessfully', 'You have successfully created a review'),
+        });
+        closeModal();
+        mutate((key) => typeof key === 'string' && key.startsWith('/ws/rest/v1/procedure'), undefined, {
+          revalidate: true,
+        });
+
+        mutate((key) => typeof key === 'string' && key.startsWith('/ws/rest/v1/order'), undefined, {
+          revalidate: true,
+        });
+      })
+      .catch((error) => {
+        showNotification({
+          title: t(`errorPicking', 'Error Creating Review`),
+          kind: 'error',
+          critical: true,
+          description: error?.message,
+        });
+      });
+  };
+
+  return (
+    <div>
+      <Form onSubmit={updateProcedures}>
+        <ModalHeader closeModal={closeModal} title={t('reviewImagingReport', 'Review Imaging Report')} />
+        <ModalBody>
+          <div className={styles.modalBody}>
+            <section className={styles.infoSection}>
+              <Accordion>
+                <AccordionItem title={t('imagingProcedureInstructions', 'Imaging Procedure Instructions')}>
+                  <p>
+                    <Table size="lg" useZebraStyles={false} aria-label="sample table">
+                      <TableBody>
+                        {tableData.map((row, index) => (
+                          <TableRow key={index}>
+                            <TableCell>{row.key}</TableCell>
+                            <TableCell>{row.value}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </p>
+                </AccordionItem>
+                <AccordionItem title={t('imagingReport', 'Imaging Report')}>
+                  <p>
+                    <Table size="lg" useZebraStyles={false} aria-label="sample table">
+                      <TableBody>
+                        {procedureTableData.map((row, index) => (
+                          <TableRow key={index}>
+                            <TableCell>{row.key}</TableCell>
+                            <TableCell>{row.value}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </p>
+                </AccordionItem>
+              </Accordion>
+            </section>
+            <section className={styles.textAreaInput}>
+              <TextArea
+                labelText={t('nextNotes', "Reviewer's notes ")}
+                id="nextNotes"
+                name="nextNotes"
+                onChange={(e) => setNotes(e.target.value)}
+              />
+            </section>
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          <Button kind="danger" onClick={closeModal}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button kind="primary" type="submit">
+            {t('approve', 'Approve')}
+          </Button>
+        </ModalFooter>
+      </Form>
+    </div>
+  );
+};
+
+export default ReviewImagingReportModal;

package/src/imaging-tabs/review-ordered/review-imaging-report-modal/review-imaging-report-dialog.scss

@@ -0,0 +1,5 @@
+@use '@carbon/layout';
+
+.infoSection {
+  margin-bottom: layout.$spacing-07;
+}

package/src/imaging-tabs/review-ordered/review-ordered.component.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useOrdersWorkList } from '../../hooks/useOrdersWorklist';
+import GroupedOrdersTable from '../../shared/ui/common/grouped-orders-table.component';
+import { DataTableSkeleton } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+
+export const Review: React.FC = () => {
+  const { t } = useTranslation();
+  const { workListEntries, isLoading } = useOrdersWorkList('', 'COMPLETED');
+  const pendingReview = workListEntries.filter((item) =>
+    item.procedures?.some((procedure) => procedure.outcome !== 'SUCCESSFUL'),
+  );
+  return isLoading ? (
+    <DataTableSkeleton />
+  ) : (
+    <div>
+      <GroupedOrdersTable
+        orders={pendingReview}
+        showStatus={false}
+        showStartButton={false}
+        showActions={true}
+        showOrderType={true}
+        actions={[{ actionName: 'review-imaging-report-modal', order: 1 }]}
+        title={t('reviewOrdered', 'Review Ordered')}
+      />
+    </div>
+  );
+};

package/src/imaging-tabs/test-ordered/pick-imaging-order/add-to-worklist-dialog.component.tsx

@@ -0,0 +1,94 @@
+import React, { useState } from 'react';
+import { Button, Form, ModalBody, ModalFooter, ModalHeader, Checkbox, TextInput } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import styles from './add-to-worklist-dialog.scss';
+import { restBaseUrl, showNotification, showSnackbar } from '@openmrs/esm-framework';
+import { updateOrder } from './add-to-worklist-dialog.resource';
+import { Result } from '../../work-list/work-list.resource';
+import { mutate } from 'swr';
+
+interface AddImagingToWorkListModalProps {
+  queueId;
+  order: Result;
+  closeModal: () => void;
+}
+
+const AddImagingToWorkListModal: React.FC<AddImagingToWorkListModalProps> = ({ order, closeModal }) => {
+  const { t } = useTranslation();
+
+  const [isReferredChecked, setIsReferredChecked] = useState(false);
+  const [referredLocation, setReferredLocation] = useState('');
+
+  const pickImagingOrder = async (event) => {
+    event.preventDefault();
+
+    const body = {
+      fulfillerComment: '',
+      fulfillerStatus: isReferredChecked ? 'EXCEPTION' : 'IN_PROGRESS',
+    };
+
+    try {
+      const response = await updateOrder(order.uuid, body);
+      if (response.ok) {
+        showSnackbar({
+          isLowContrast: true,
+          title: t('pickedAnOrder', 'Picked an order'),
+          kind: 'success',
+          subtitle: t('pickSuccessfully', 'You have successfully picked an Order'),
+        });
+
+        closeModal();
+      }
+    } catch (error) {
+      showNotification({
+        title: t(`errorPicking an order', 'Error Picking an Order`),
+        kind: 'error',
+        critical: true,
+        description: error?.message,
+      });
+    }
+  };
+
+  const handleCheckboxChange = () => {
+    setIsReferredChecked(!isReferredChecked);
+  };
+
+  return (
+    <div>
+      <Form onSubmit={pickImagingOrder}>
+        <ModalHeader closeModal={closeModal} title={t('pickRequest', 'Pick Request')} />
+        <ModalBody>
+          <div className={styles.modalBody}>
+            <section className={styles.section}>
+              <Checkbox
+                checked={isReferredChecked}
+                onChange={handleCheckboxChange}
+                labelText={'Referred'}
+                id="test-referred"
+              />
+              {isReferredChecked && (
+                <TextInput
+                  type="text"
+                  id="referredLocation"
+                  labelText={'Enter Referred Location'}
+                  value={referredLocation}
+                  onChange={(e) => setReferredLocation(e.target.value)}
+                />
+              )}
+            </section>
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          <Button kind="secondary" onClick={closeModal}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button type="submit" onClick={pickImagingOrder}>
+            {t('pickRequest', 'Pick Request')}
+          </Button>
+        </ModalFooter>
+      </Form>
+    </div>
+  );
+};
+
+export default AddImagingToWorkListModal;

package/src/imaging-tabs/test-ordered/pick-imaging-order/add-to-worklist-dialog.resource.ts

@@ -0,0 +1,137 @@
+import { FetchResponse, openmrsFetch, restBaseUrl, useConfig } from '@openmrs/esm-framework';
+import { useMemo } from 'react';
+import useSWR from 'swr';
+import useSWRImmutable from 'swr/immutable';
+
+export interface QueueRoomsResponse {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  address1: string;
+  address2: string;
+  cityvillage: string;
+  stateprovince: string;
+  country: string;
+  postalcode: string;
+  latitude: string;
+  longitude: string;
+  countydistrict: string;
+  address3: string;
+  address4: string;
+  address5: string;
+  address6: string;
+  parentLocation: ParentLocation;
+  childLocations: string[];
+  retired: boolean;
+  attributes: string[];
+  address7: string;
+  address8: string;
+  address9: string;
+  address10: string;
+  address11: string;
+  address12: string;
+  address13: string;
+  address14: string;
+  address15: string;
+  resourceVersion: string;
+}
+
+export interface ParentLocation {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  address1: string;
+  address2: string;
+  cityVillage: string;
+  stateProvince: string;
+  country: string;
+  postalcode: string;
+  latitude: string;
+  longitude: string;
+  countydistrict: string;
+  address3: string;
+  address4: string;
+  address5: string;
+  address6: string;
+  parentLocation: ParentLocation;
+  childLocations: ChildLocations[];
+  retired: boolean;
+  attributes: string[];
+  address7: string;
+  address8: string;
+  address9: string;
+  address10: string;
+  address11: string;
+  address12: string;
+  address13: string;
+  address14: string;
+  address15: string;
+  resourceversion: string;
+}
+
+export interface ChildLocations {
+  uuid: string;
+  display: string;
+}
+
+export interface ParentLocation {
+  uuid: string;
+  display: string;
+}
+
+// get queue rooms
+export function useQueueRoomLocations(currentQueueLocation: string) {
+  const apiUrl = `${restBaseUrl}/location/${currentQueueLocation}?v=full`;
+  const { data, error, isLoading } = useSWR<{ data: QueueRoomsResponse }>(apiUrl, openmrsFetch);
+
+  const queueRoomLocations = useMemo(
+    () => data?.data?.parentLocation?.childLocations?.map((response) => response) ?? [],
+    [data?.data?.parentLocation?.childLocations],
+  );
+  return {
+    queueRoomLocations: queueRoomLocations ? queueRoomLocations : [],
+    isLoading,
+    error,
+  };
+}
+
+// get referral locations
+export function useReferralLocations() {
+  const config = useConfig();
+  const { laboratoryReferalDestinationUuid } = config;
+  const apiUrl = `${restBaseUrl}/concept/${laboratoryReferalDestinationUuid}`;
+  const { data, isLoading } = useSWRImmutable<FetchResponse>(apiUrl, openmrsFetch);
+
+  return {
+    referrals: data ? data?.data?.answers : [],
+    isLoading,
+  };
+}
+
+// update Order
+export async function updateOrder(uuid: string, body: any) {
+  const abortController = new AbortController();
+  return openmrsFetch(`${restBaseUrl}/order/${uuid}/fulfillerdetails`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: body,
+  });
+}
+
+// update Procedure
+export async function updateImagingProcedure(uuid: string, body: any) {
+  const abortController = new AbortController();
+  return openmrsFetch(`${restBaseUrl}/procedure/${uuid}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: body,
+  });
+}