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

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

@@ -0,0 +1,38 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+
+.radioButton {
+  padding: spacing.$spacing-02 spacing.$spacing-02;
+  margin: spacing.$spacing-03 0;
+}
+
+.section {
+  margin: spacing.$spacing-03;
+}
+
+.sectionTitle {
+  margin-bottom: spacing.$spacing-04;
+}
+
+.modalBody {
+  padding-bottom: spacing.$spacing-05;
+}
+
+.container {
+  display: 'flex';
+  align-items: 'center';
+  justify-content: 'space-between';
+  align-content: 'stretch';
+}
+
+.specimenContainer {
+  display: 'flex';
+  align-items: 'center';
+  justify-content: 'space-between';
+  column-gap: '10px';
+}
+
+.inputText {
+  display: 'flex';
+  align-items: 'center';
+}

package/src/imaging-tabs/test-ordered/reject-order-dialog/radiology-reject-reason.component.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Button, ModalBody, ModalFooter, ModalHeader, Tile } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import styles from './reject-order-dialog.scss';
+import { Result } from '../../work-list/work-list.resource';
+
+interface RejectImagingOrderModalProps {
+  order: Result;
+  closeModal: () => void;
+}
+
+const RejectImagingOrderModal: React.FC<RejectImagingOrderModalProps> = ({ order, closeModal }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <ModalHeader closeModal={closeModal} title={t('rejectImagingOrder', 'Reject Imaging Order')} />
+      <ModalBody>
+        <div className={styles.modalBody}>
+          <section className={styles.section}>
+            <b />
+            <Tile>
+              <p>
+                <b>{t('rejectionReason', 'Rejection Reason:')}</b>
+              </p>
+              <p className={styles.instructions}>{order.fulfillerComment}</p>
+            </Tile>
+          </section>
+        </div>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {t('cancel', 'Cancel')}
+        </Button>
+      </ModalFooter>
+    </div>
+  );
+};
+
+export default RejectImagingOrderModal;

package/src/imaging-tabs/test-ordered/reject-order-dialog/reject-order-dialog.component.tsx

@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+
+import { Button, Form, ModalBody, ModalFooter, ModalHeader, TextArea } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import styles from './reject-order-dialog.scss';
+import { Result } from '../../work-list/work-list.resource';
+import { showNotification, showSnackbar } from '@openmrs/esm-framework';
+import { mutate } from 'swr';
+import { updateOrder } from '../pick-imaging-order/add-to-worklist-dialog.resource';
+interface RejectOrderModalProps {
+  order: Result;
+  closeModal: () => void;
+}
+
+const RejectOrderModal: React.FC<RejectOrderModalProps> = ({ order, closeModal }) => {
+  const { t } = useTranslation();
+  const [notes, setNotes] = useState('');
+
+  const rejectOrder = async (event) => {
+    event.preventDefault();
+
+    const payload = {
+      fulfillerStatus: 'DECLINED',
+      fulfillerComment: notes,
+    };
+    updateOrder(order.uuid, payload).then(
+      () => {
+        showSnackbar({
+          isLowContrast: true,
+          title: t('rejectOrder', 'Rejected Order'),
+          kind: 'success',
+          subtitle: t(
+            'successfullyRejected',
+            `You have successfully rejected an Order with OrderNumber {{orderNumber}} `,
+            { orderNumber: order.orderNumber },
+          ),
+        });
+        closeModal();
+        mutate((key) => typeof key === 'string' && key.startsWith('/ws/rest/v1/order'), undefined, {
+          revalidate: true,
+        });
+      },
+      (err) => {
+        showNotification({
+          title: t(`errorRejecting order', 'Error Rejecting a order`),
+          kind: 'error',
+          critical: true,
+          description: err?.message,
+        });
+      },
+    );
+  };
+
+  return (
+    <div>
+      <Form onSubmit={rejectOrder}>
+        <ModalHeader closeModal={closeModal} title={t('rejectImagingOrder', 'Reject Imaging Order')} />
+        <ModalBody>
+          <div className={styles.modalBody}>
+            <section className={styles.section}>
+              <h5 className={styles.section}>
+                {order?.concept?.display} &nbsp; · &nbsp;{order?.fulfillerStatus ?? '--'} &nbsp; · &nbsp;
+                {order?.orderNumber}
+                &nbsp;
+              </h5>
+            </section>
+            <br />
+            <section className={styles.section}>
+              <TextArea
+                labelText={t('notes', 'Enter Comments ')}
+                id="nextNotes"
+                name="nextNotes"
+                invalidText="Required"
+                helperText="Please enter comment"
+                maxCount={500}
+                enableCounter
+                onChange={(e) => setNotes(e.target.value)}
+              />
+            </section>
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          <Button kind="secondary" onClick={closeModal}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button kind="danger" type="submit">
+            {t('rejectOrder', 'Reject Order')}
+          </Button>
+        </ModalFooter>
+      </Form>
+    </div>
+  );
+};
+
+export default RejectOrderModal;

package/src/imaging-tabs/test-ordered/reject-order-dialog/reject-order-dialog.scss

@@ -0,0 +1,14 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+
+.section {
+  margin: spacing.$spacing-03;
+}
+
+.sectionTitle {
+  margin-bottom: spacing.$spacing-04;
+}
+
+.modalBody {
+  padding-bottom: spacing.$spacing-05;
+}

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { DataTableSkeleton } from '@carbon/react';
+import { useOrdersWorkList } from '../../hooks/useOrdersWorklist';
+import { useTranslation } from 'react-i18next';
+import GroupedOrdersTable from '../../shared/ui/common/grouped-orders-table.component';
+
+export const TestsOrdered: React.FC = () => {
+  const { t } = useTranslation();
+  const { workListEntries, isLoading } = useOrdersWorkList('', '');
+
+  const testOrderAction = [
+    {
+      actionName: 'add-imaging-to-work-list-modal',
+      order: 1,
+    },
+    { actionName: 'reject-imaging-order-modal', order: 2 },
+  ];
+
+  if (isLoading) {
+    return <DataTableSkeleton />;
+  }
+  return (
+    <div>
+      <GroupedOrdersTable
+        orders={workListEntries}
+        showStatus={true}
+        showStartButton={false}
+        showActions={true}
+        showOrderType={false}
+        actions={testOrderAction}
+        title={t('testOrdered', 'Test Ordered')}
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,13 @@
+@use '@carbon/colors';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.rejectOrders {
+  &:hover {
+    background-color: colors.$red-70-hover;
+    color: colors.$white;
+  }
+}
+
+.single-line-display {
+  white-space: nowrap;
+}

package/src/imaging-tabs/test-ordered/transition-patient-new-queue/transition-latest-queue-entry-button.component.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './transition-latest-queue-entry-button.scss';
+import { showModal } from '@openmrs/esm-framework';
+import { Button } from '@carbon/react';
+import { AirlineManageGates } from '@carbon/react/icons';
+
+interface TransitionLatestQueueEntryButtonProps {
+  patientUuid: string;
+}
+
+const TransitionLatestQueueEntryButton: React.FC<TransitionLatestQueueEntryButtonProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+
+  const launchModal = () => {
+    const dispose = showModal('transition-patient-to-latest-queue-modal', {
+      closeModal: () => dispose(),
+      patientUuid,
+    });
+  };
+
+  return (
+    <Button
+      kind="tertiary"
+      className={styles.addPatientToQueue}
+      onClick={launchModal}
+      size="sm"
+      renderIcon={() => <AirlineManageGates size={18} />}>
+      {t('transition', 'Transition')}
+    </Button>
+  );
+};
+
+export default TransitionLatestQueueEntryButton;

package/src/imaging-tabs/test-ordered/transition-patient-new-queue/transition-latest-queue-entry-button.scss

@@ -0,0 +1,14 @@
+@use '@carbon/layout';
+@use '@carbon/styles/scss/type';
+
+// TODO: refactor to use esm-style-guide
+.addPatientToQueue {
+  --cds-layout-size-height-context: var(--cds-layout-size-height-sm, 2rem);
+  --cds-layout-size-height: var(--cds-layout-size-height-context);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 0 layout.$spacing-04;
+  gap: layout.$spacing-05;
+}

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

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { DataTableSkeleton } from '@carbon/react';
+import styles from './work-list.scss';
+import { useOrdersWorkList } from '../../hooks/useOrdersWorklist';
+import { WorkListProps } from '../../shared/ui/common/grouped-imaging-types';
+import GroupedOrdersTable from '../../shared/ui/common/grouped-orders-table.component';
+
+const WorkList: React.FC<WorkListProps> = ({ fulfillerStatus }) => {
+  const { t } = useTranslation();
+  const [activatedOnOrAfterDate, setActivatedOnOrAfterDate] = useState('');
+
+  const { workListEntries, isLoading } = useOrdersWorkList(activatedOnOrAfterDate, fulfillerStatus);
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  if (workListEntries?.length >= 0) {
+    return (
+      <>
+        <div>
+          <div className={styles.headerBtnContainer}></div>
+          <GroupedOrdersTable
+            orders={workListEntries}
+            showStatus={true}
+            showStartButton={true}
+            showActions={true}
+            showOrderType={false}
+            actions={[
+              { actionName: 'imaging-report-form', order: 1 },
+              {
+                actionName: 'reject-imaging-order-modal',
+                order: 2,
+              },
+            ]}
+            title={t('workList', 'Work List')}
+          />
+        </div>
+      </>
+    );
+  }
+};
+
+export default WorkList;

package/src/imaging-tabs/work-list/work-list.resource.ts

@@ -0,0 +1,150 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+export interface Result {
+  [x: string]: any;
+  uuid: string;
+  orderNumber: string;
+  accessionNumber: string;
+  patient: Patient;
+  concept: Concept;
+  action: string;
+  careSetting: CareSetting;
+  previousOrder: PreviousOrder;
+  dateActivated: string;
+  scheduledDate: any;
+  dateStopped: any;
+  autoExpireDate: any;
+  encounter: Encounter;
+  orderer: Orderer;
+  orderReason: any;
+  orderReasonNonCoded: any;
+  orderType: OrderType;
+  urgency: string;
+  instructions: any;
+  commentToFulfiller: any;
+  display: string;
+  auditInfo: AuditInfo;
+  fulfillerStatus: string;
+  fulfillerComment: any;
+  specimenSource: SpecimenSource;
+  laterality: string;
+  bodySite: Concept;
+  clinicalHistory: any;
+  frequency: any;
+  numberOfRepeats: any;
+  links: Link[];
+  type: string;
+  resourceVersion: string;
+  procedures: Procedure[];
+}
+
+export interface Procedure {
+  uuid: string;
+  outcome: string;
+  procedureReport: string;
+}
+export interface Patient {
+  uuid: string;
+  display: string;
+  links: Link[];
+}
+
+export interface Link {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface Concept {
+  conceptClass: ConceptClass;
+  uuid: string;
+  display: string;
+  links: Link[];
+}
+
+export interface ConceptClass {
+  uuid: string;
+}
+
+export interface CareSetting {
+  uuid: string;
+  name: string;
+  description: string;
+  retired: boolean;
+  careSettingType: string;
+  display: string;
+  links: Link[];
+  resourceVersion: string;
+}
+
+export interface PreviousOrder {
+  uuid: string;
+  display: string;
+  links: Link[];
+  type: string;
+}
+
+export interface Encounter {
+  uuid: string;
+  display: string;
+  links: Link[];
+}
+
+export interface Orderer {
+  uuid: string;
+  display: string;
+  links: Link[];
+}
+
+export interface OrderType {
+  uuid: string;
+  display: string;
+  name: string;
+  javaClassName: string;
+  retired: boolean;
+  description: string;
+  conceptClasses: any[];
+  parent: any;
+  links: Link[];
+  resourceVersion: string;
+}
+
+export interface AuditInfo {
+  creator: Creator;
+  dateCreated: string;
+  changedBy: any;
+  dateChanged: any;
+}
+
+export interface Creator {
+  uuid: string;
+  display: string;
+  links: Link[];
+}
+
+export interface SpecimenSource {
+  uuid: string;
+  display: string;
+  links: Link[];
+}
+
+export function useGetOrdersWorklist(activatedOnOrAfterDate: string, fulfillerStatus: string) {
+  const apiUrl = `/ws/rest/v1/order?orderTypes=52a447d3-a64a-11e3-9aeb-50e549534c5e&activatedOnOrAfterDate=${activatedOnOrAfterDate}&isStopped=false&fulfillerStatus=${fulfillerStatus}&v=full
+`;
+
+  const { data, error, isLoading } = useSWR<{ data: { results: Array<Result> } }, Error>(apiUrl, openmrsFetch);
+
+  const orders = data?.data?.results?.filter((order) => {
+    if (fulfillerStatus === '') {
+      return order.fulfillerStatus === null && order.dateStopped === null && order.action === 'NEW';
+    } else if (fulfillerStatus === 'IN_PROGRESS') {
+      return order.fulfillerStatus === 'IN_PROGRESS' && order.dateStopped === null && order.action !== 'DISCONTINUE';
+    }
+  });
+
+  return {
+    workListEntries: orders?.length > 0 ? orders : [],
+    isLoading,
+    isError: error,
+  };
+}

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

@@ -0,0 +1,207 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+title {
+  width: 6.938rem;
+  height: 1.75rem;
+  margin: 0.438rem 22.875rem 0.813rem 0;
+  font-family: IBMPlexSans;
+  font-size: 1.25rem;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.4;
+  letter-spacing: normal;
+}
+
+.link {
+  text-decoration: none;
+}
+
+.breadcrumbsSlot {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+}
+
+.orderTabsContainer {
+  height: 100%;
+  width: 100%;
+
+  :global(.cds--tab-content) {
+    padding: 0 !important;
+  }
+}
+
+.orderTabs {
+  grid-column: 'span 2';
+  padding: 0 spacing.$spacing-05;
+}
+
+.newListButton {
+  width: fit-content;
+  justify-self: end;
+  align-self: center;
+}
+
+.tabsContainer {
+  background-color: $ui-02;
+
+  :global(.cds--tabs__nav-item--selected) {
+    box-shadow: inset 0 2px 0 0 var(--brand-03) !important;
+  }
+
+  :global(.cds--tab--list) button {
+    max-width: 12rem !important;
+  }
+}
+
+.hiddenTabsContent,
+.tabs .hiddenTabsContent {
+  display: none;
+}
+
+.patientListTableContainer {
+  grid-row: 3 / 4;
+  grid-column: 1 / 2;
+  height: 100%;
+  margin: 0.5rem spacing.$spacing-05;
+  background-color: $ui-01;
+  border: 0.5px solid #e0e0e0;
+
+  :global(.cds--data-table-container) {
+    padding-top: 0 !important;
+  }
+
+  tbody > tr > :nth-child(2) {
+    white-space: nowrap;
+  }
+
+  :global(.cds--data-table td) {
+    height: unset !important;
+  }
+
+  :global(.cds--data-table--zebra) tbody tr[data-parent-row]:nth-child(4n + 1) td {
+    background-color: $ui-02;
+    border-bottom: 1px solid $ui-03;
+    border-top: 1px solid $ui-03;
+  }
+
+  :global(.cds--data-table--zebra) tbody tr[data-parent-row]:nth-child(4n + 3) td {
+    background-color: $ui-01;
+    border-bottom: 1px solid $ui-03;
+  }
+}
+
+.tableContainer {
+  background-color: $ui-01;
+  margin: 0 spacing.$spacing-05;
+  padding: 0;
+
+  a {
+    text-decoration: none;
+  }
+
+  th {
+    color: $text-02;
+  }
+
+  :global(.cds--data-table) {
+    background-color: $ui-03;
+  }
+
+  .toolbarContent {
+    height: spacing.$spacing-07;
+    margin-bottom: spacing.$spacing-02;
+  }
+}
+
+.activePatientsTable tr:last-of-type {
+  td {
+    border-bottom: none;
+  }
+}
+
+.searchContainer {
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+  padding-top: 0.5rem;
+
+  :global(.cds--search-magnifier-icon) {
+    z-index: 0 !important;
+  }
+
+  input {
+    background-color: #fff;
+  }
+}
+
+.addOrderBtn {
+  width: 10rem !important;
+  padding: 0.5rem !important;
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.patientSearch {
+  width: 25rem;
+  border-bottom-color: $ui-03;
+}
+
+.locationFilter {
+  width: 25rem;
+}
+
+.search {
+  width: 100%;
+  max-width: 16rem;
+  background-color: $ui-02;
+  border-bottom-color: $ui-03;
+}
+
+.container {
+  background-color: $ui-01;
+}
+
+.expandedLabQueueVisitRow {
+  :global(.cds--tab-content) {
+    padding: 0.5rem 0;
+  }
+
+  td {
+    padding: 0.5rem;
+
+    > div {
+      max-height: max-content !important;
+      background-color: $ui-02;
+    }
+  }
+
+  th[colspan] td[colspan] > div:first-child {
+    padding: 0 1rem;
+  }
+}
+
+.tileContainer {
+  background-color: $ui-02;
+  border-top: 1px solid $ui-03;
+  padding: 5rem 0;
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: 0.5rem;
+}