@thrustdevs/esm-procedure-orders-app 1.0.2-pre.6

package/src/procedures-ordered/procedure-tests/procedure-tests.component.tsx

@@ -0,0 +1,83 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import {
+  DataTable,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { ErrorState } from '@openmrs/esm-framework';
+import styles from '../procedure-queue.scss';
+import PickProcedureRequestActionMenu from '../_pick-procedure-request-menu.component';
+import { type Encounter } from '../../types';
+
+interface ProceduresProps {
+  encounter: Encounter;
+  queueId: string;
+}
+
+const ProceduresTests: React.FC<ProceduresProps> = ({ encounter, queueId }) => {
+  const { t } = useTranslation();
+  const columns = [
+    { id: 1, header: t('order', 'Order'), key: 'order', align: 'left' },
+    {
+      id: 2,
+      header: t('orderType', 'OrderType'),
+      key: 'orderType',
+      align: 'center',
+    },
+    { id: 3, header: t('actions', 'Actions'), key: 'actions', align: 'center' },
+  ];
+
+  const tableRows = useMemo(() => {
+    return encounter?.orders?.map((item) => ({
+      ...item,
+      id: item?.uuid,
+      order: item?.display,
+      orderType: item?.type,
+      actions: <PickProcedureRequestActionMenu closeModal={() => true} order={item} />,
+    }));
+  }, [encounter]);
+
+  if (!encounter) {
+    return <ErrorState error={'Error Loading encounter'} headerTitle={'Tests Error'} />;
+  }
+
+  return (
+    <DataTable rows={tableRows} headers={columns} isSortable useZebraStyles>
+      {({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => (
+        <TableContainer className={styles.tableContainer}>
+          <Table {...getTableProps()} className={styles.activePatientsTable}>
+            <TableHead>
+              <TableRow>
+                {headers.map((header) => (
+                  <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+                ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {rows.map((row, index) => {
+                return (
+                  <React.Fragment key={row.id}>
+                    <TableRow {...getRowProps({ row })} key={row.id}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
+                      ))}
+                    </TableRow>
+                  </React.Fragment>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      )}
+    </DataTable>
+  );
+};
+
+export default ProceduresTests;

package/src/procedures-ordered/procedure-tests/procedure-tests.resource.ts

@@ -0,0 +1,14 @@
+import { FetchResponse, openmrsFetch, restBaseUrl, useConfig } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { type Result } from '../../patient-chart/patient-procedure-order-results.resource';
+export function useGetLabOrders(encounterUuid: string) {
+  const apiUrl = `${restBaseUrl}/encounter/${encounterUuid}?v=full`;
+
+  const { data, error, isLoading } = useSWR<{ data: Result }, Error>(apiUrl, openmrsFetch);
+
+  return {
+    labOrders: data?.data ? data?.data?.orders : [],
+    isLoading,
+    isError: error,
+  };
+}

package/src/procedures-ordered/procedure-tests/procedure-tests.scss

@@ -0,0 +1,12 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@openmrs/esm-styleguide/src/vars' as vars;
+
+.cardContainer {
+  background-color: vars.$ui-02;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 spacing.$spacing-05 spacing.$spacing-10 spacing.$spacing-03;
+  flex-flow: row wrap;
+  margin-top: -spacing.$spacing-03;
+}

package/src/procedures-ordered/procedures-ordered-list.component.tsx

@@ -0,0 +1,38 @@
+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';
+interface ProcedurePatientListProps {
+  fulfillerStatus: string;
+}
+
+const ProcedureOrderedList: React.FC<ProcedurePatientListProps> = () => {
+  const { t } = useTranslation();
+  const { workListEntries, isLoading } = useOrdersWorklist('', '');
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  if (workListEntries?.length >= 0) {
+    return (
+      <GroupedOrdersTable
+        orders={workListEntries}
+        showActions={true}
+        showStatus={true}
+        showOrderType={true}
+        showStartButton={false}
+        title={t('proceduresOrdered', 'Procedures Ordered')}
+        actions={[
+          {
+            actionName: 'add-procedure-to-worklist-dialog',
+          },
+          { actionName: 'reject-procedure-order-dialog' },
+        ]}
+      />
+    );
+  }
+};
+
+export default ProcedureOrderedList;

package/src/procedures-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/procedures-ordered/reject-order-dialog/reject-procedure-order-dialog.component.tsx

@@ -0,0 +1,98 @@
+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 { showNotification, showSnackbar } from '@openmrs/esm-framework';
+import { mutate } from 'swr';
+import { updateOrder } from '../pick-procedure-order/add-to-worklist-dialog.resource';
+import { type Result } from '../../types';
+import capitalize from 'lodash-es/capitalize';
+
+interface RejectProcedureOrderDialogProps {
+  order: Result;
+  closeModal: () => void;
+}
+
+const RejectProcedureOrderDialog: React.FC<RejectProcedureOrderDialogProps> = ({ 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 ${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,
+        });
+      },
+    );
+  };
+  const orderName = capitalize(order?.concept?.display);
+  const orderNumber = order?.orderNumber;
+
+  return (
+    <div>
+      <Form onSubmit={rejectOrder}>
+        <div className="cds--modal-header">
+          <h3 className="cds--modal-header__heading">{t('rejectProcedureOrder', 'Reject Procedure Order')}</h3>
+        </div>
+        <div className="cds--modal-content">
+          <p>
+            {t('confirmationRejectMessages', `Do you want to reject this order: {{orderName}} - {{orderNumber}}?`, {
+              orderName,
+              orderNumber,
+            })}
+          </p>
+          <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>
+
+        <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 RejectProcedureOrderDialog;

package/src/procedures-ordered/reject-reason/procedure-reject-reason-menu.component.tsx

@@ -0,0 +1,32 @@
+import { OverflowMenuItem } from '@carbon/react';
+import { showModal } from '@openmrs/esm-framework';
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface ProcedureRejectionActionMenuProps {
+  order: any;
+  closeModal: () => void;
+}
+
+const ProcedureRejectionActionMenu: React.FC<ProcedureRejectionActionMenuProps> = ({ order }) => {
+  const { t } = useTranslation();
+
+  const launchProcedureRejectionModal = useCallback(() => {
+    const dispose = showModal('procedure-reject-reason-modal', {
+      closeModal: () => dispose(),
+      order,
+    });
+  }, [order]);
+
+  return (
+    <OverflowMenuItem
+      itemText={t('procedureRejectionModal', 'Procedure Rejection')}
+      onClick={launchProcedureRejectionModal}
+      style={{
+        maxWidth: '100vw',
+      }}
+    />
+  );
+};
+
+export default ProcedureRejectionActionMenu;

package/src/procedures-ordered/reject-reason/procedure-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 '../procedure-instructions/instructions.scss';
+import { type Result } from '../../types';
+
+interface ProcedureRejectReasonModalProps {
+  order: Result;
+  closeModal: () => void;
+}
+
+const ProcedureRejectReasonModal: React.FC<ProcedureRejectReasonModalProps> = ({ order, closeModal }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <ModalHeader closeModal={closeModal} title={t('reasonNotDone', 'Reason Not Done')} />
+      <ModalBody>
+        <div className={styles.modalBody}>
+          <section className={styles.section}>
+            <b />
+            <Tile>
+              <p>
+                <b>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 ProcedureRejectReasonModal;

package/src/procedures-ordered/transition-patient-new-queue/transition-latest-queue-entry-button.component.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, InlineLoading } from '@carbon/react';
+import { AirlineManageGates } from '@carbon/react/icons';
+import { showModal, useVisit } from '@openmrs/esm-framework';
+
+interface TransitionLatestQueueEntryButtonProps {
+  patientUuid: string;
+}
+
+const TransitionLatestQueueEntryButton: React.FC<TransitionLatestQueueEntryButtonProps> = ({ patientUuid }) => {
+  const { activeVisit, isLoading } = useVisit(patientUuid);
+  const shouldHideButton = !activeVisit;
+  const { t } = useTranslation();
+  if (shouldHideButton) {
+    return null;
+  }
+
+  const handleLaunchModal = () => {
+    const dispose = showModal('transition-patient-to-latest-queue-modal', {
+      closeModal: () => dispose(),
+      activeVisit,
+    });
+  };
+
+  if (isLoading) {
+    return <InlineLoading description={t('loading', 'Loading...')} />;
+  }
+
+  return (
+    <Button
+      iconDescription={t('transitionPatientToNewQueue', 'Transition patient to new queue')}
+      kind="tertiary"
+      onClick={handleLaunchModal}
+      renderIcon={AirlineManageGates}
+      size="sm">
+      {t('transition', 'Transition')}
+    </Button>
+  );
+};
+
+export default TransitionLatestQueueEntryButton;

package/src/procedures-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/procedures-ordered/transition-patient-new-queue/transition-latest-queue-entry-button.test.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { showModal, useVisit } from '@openmrs/esm-framework';
+import TransitionLatestQueueEntryButton from './transition-latest-queue-entry-button.component';
+
+jest.mock('@openmrs/esm-framework', () => ({
+  showModal: jest.fn(),
+  useVisit: jest.fn(),
+}));
+
+describe('TransitionLatestQueueEntryButton', () => {
+  const patientUuid = 'patient-uuid';
+  const mockActiveVisit = { uuid: 'visit-uuid', display: 'Test Visit' };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (useVisit as jest.Mock).mockReturnValue({
+      activeVisit: mockActiveVisit,
+      isLoading: false,
+    });
+  });
+
+  it('should render a button when an active visit exists', () => {
+    render(<TransitionLatestQueueEntryButton patientUuid={patientUuid} />);
+
+    expect(screen.getByRole('button', { name: /transition/i })).toBeInTheDocument();
+  });
+
+  it('should launch the transition queue modal when clicked', async () => {
+    const user = userEvent.setup();
+    render(<TransitionLatestQueueEntryButton patientUuid={patientUuid} />);
+
+    await user.click(screen.getByRole('button', { name: /transition/i }));
+
+    expect(showModal).toHaveBeenCalledTimes(1);
+    expect(showModal).toHaveBeenCalledWith(
+      'transition-patient-to-latest-queue-modal',
+      expect.objectContaining({
+        closeModal: expect.any(Function),
+        activeVisit: mockActiveVisit,
+      }),
+    );
+  });
+
+  it('should show loading state when visit data is loading', () => {
+    (useVisit as jest.Mock).mockReturnValue({
+      activeVisit: null,
+      isLoading: true,
+    });
+
+    render(<TransitionLatestQueueEntryButton patientUuid={patientUuid} />);
+
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('should not render the button when no active visit exists', () => {
+    (useVisit as jest.Mock).mockReturnValue({
+      activeVisit: null,
+      isLoading: false,
+    });
+
+    render(<TransitionLatestQueueEntryButton patientUuid={patientUuid} />);
+
+    expect(screen.queryByRole('button', { name: /transition/i })).not.toBeInTheDocument();
+  });
+});

package/src/referred-procedures/referred-procedures.component.tsx

@@ -0,0 +1,37 @@
+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';
+interface WorklistProps {
+  fulfillerStatus: string;
+}
+
+const WorkList: React.FC<WorklistProps> = ({ fulfillerStatus }) => {
+  const { t } = useTranslation();
+  const { workListEntries, isLoading } = useOrdersWorklist('', fulfillerStatus);
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  if (workListEntries?.length >= 0) {
+    return (
+      <>
+        <div>
+          <GroupedOrdersTable
+            orders={workListEntries}
+            showActions={true}
+            showStatus={true}
+            showOrderType={true}
+            showStartButton={false}
+            title={t('referredProcedures', 'Referred Procedures')}
+            actions={[{ actionName: 'postProcedureResultForm' }, { actionName: 'reject-procedure-order-dialog' }]}
+          />
+        </div>
+      </>
+    );
+  }
+};
+
+export default WorkList;

package/src/results/result-form-field.component.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import styles from './result-form.scss';
+import { TextInput, Select, SelectItem } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { type ConceptReference } from './result-form.resource';
+import { Controller } from 'react-hook-form';
+import { min } from 'rxjs/operators';
+
+interface ResultFormFieldProps {
+  concept: ConceptReference;
+  control: any;
+  register: any;
+  errors: any;
+}
+const ResultFormField: React.FC<ResultFormFieldProps> = ({ concept, control, errors }) => {
+  const { t } = useTranslation();
+  const isTextOrNumeric = (concept) => concept.datatype?.display === 'Text' || concept.datatype?.display === 'Numeric';
+  const isCoded = (concept) => concept.datatype?.display === 'Coded';
+  const isPanel = (concept) => concept.setMembers?.length > 0;
+
+  const printValueRange = (concept: ConceptReference) => {
+    if (concept?.datatype?.display === 'Numeric') {
+      const maxVal = Math.max(concept?.hiAbsolute, concept?.hiCritical, concept?.hiNormal);
+      const minVal = Math.min(concept?.lowAbsolute, concept?.lowCritical, concept?.lowNormal);
+      return ` (${minVal ?? 0} - ${maxVal > 0 ? maxVal : '--'} ${concept?.units ?? ''})`;
+    }
+    return '';
+  };
+
+  return (
+    <>
+      {Object.keys(errors).length > 0 && <div className={styles.errorDiv}>All fields are required</div>}
+      {isTextOrNumeric(concept) && (
+        <Controller
+          control={control}
+          rules={{
+            required: true,
+          }}
+          name={concept.uuid}
+          render={({ field }) => (
+            <TextInput
+              key={concept.uuid}
+              className={styles.textInput}
+              {...field}
+              type={concept.datatype.display === 'Numeric' ? 'number' : 'text'}
+              labelText={
+                concept?.display + (concept.datatype.display === 'Numeric' ? (printValueRange(concept) ?? '') : '')
+              }
+              autoFocus
+            />
+          )}
+        />
+      )}
+
+      {isCoded(concept) && (
+        <Controller
+          name={concept.uuid}
+          control={control}
+          rules={{
+            required: true,
+          }}
+          render={({ field }) => (
+            <Select
+              key={concept.uuid}
+              className={styles.textInput}
+              {...field}
+              type="text"
+              labelText={concept?.display}
+              rules={{ required: true }}>
+              <SelectItem text={t('option', 'Choose an Option')} value="" />
+
+              {concept?.answers?.map((answer) => (
+                <SelectItem key={answer.uuid} text={answer.display} value={answer.uuid}>
+                  {answer.display}
+                </SelectItem>
+              ))}
+            </Select>
+          )}
+        />
+      )}
+
+      {isPanel(concept) &&
+        concept.setMembers.map((member, index) => {
+          if (isTextOrNumeric(member)) {
+            return (
+              <Controller
+                control={control}
+                name={member.uuid}
+                rules={{
+                  required: true,
+                }}
+                render={({ field }) => (
+                  <TextInput
+                    key={member.uuid}
+                    className={styles.textInput}
+                    {...field}
+                    type={member.datatype.display === 'Numeric' ? 'number' : 'text'}
+                    labelText={
+                      member?.display + (member.datatype.display === 'Numeric' ? (printValueRange(member) ?? '') : '')
+                    }
+                    autoFocus={index === 0}
+                  />
+                )}
+              />
+            );
+          }
+
+          if (isCoded(member)) {
+            return (
+              <Controller
+                name={member.uuid}
+                control={control}
+                rules={{
+                  required: true,
+                }}
+                render={({ field }) => (
+                  <Select
+                    key={member.uuid}
+                    className={styles.textInput}
+                    {...field}
+                    type="text"
+                    labelText={member?.display}
+                    autoFocus={index === 0}>
+                    <SelectItem text={t('option', 'Choose an Option')} value="" />
+
+                    {member?.answers?.map((answer) => (
+                      <SelectItem key={answer.uuid} text={answer.display} value={answer.uuid}>
+                        {answer.display}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                )}
+              />
+            );
+          }
+        })}
+    </>
+  );
+};
+
+export default ResultFormField;