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

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@carbon/react';
+import { showModal, launchWorkspace } from '@openmrs/esm-framework';
+import { type Order } from '@openmrs/esm-patient-common-lib';
+import OrderActionExtension from './order-action-extension.component';
+import { type Result } from '../../../../types';
+import { launchOverlay } from '../../../../components/overlay/hook';
+import PostProcedureForm from '../../../../form/post-procedures/post-procedure-form.component';
+import styles from './action-button.scss';
+
+type ActionButtonProps = {
+  action: {
+    actionName: string;
+  };
+  order: Result;
+  patientUuid: string;
+};
+
+const ActionButton: React.FC<ActionButtonProps> = ({ action, order, patientUuid }) => {
+  const { t } = useTranslation();
+
+  const handleOpenProcedureResultForm = () => {
+    launchWorkspace('procedure-report-form', {
+      patientUuid,
+      order,
+    });
+  };
+  switch (action.actionName) {
+    case 'add-procedure-to-worklist-dialog':
+      return <OrderActionExtension order={order as unknown as Order} />;
+
+    case 'postProcedureResultForm':
+      return (
+        <Button kind="primary" onClick={handleOpenProcedureResultForm} size="md" className={styles.actionButtons}>
+          {t('procedureResultForm', 'Procedure Result Form')}
+        </Button>
+      );
+
+    case 'reject-procedure-order-dialog':
+      return (
+        <Button
+          kind={action.actionName === 'reject-procedure-order-dialog' ? 'danger' : 'tertiary'}
+          onClick={() => {
+            const dispose = showModal(action.actionName, {
+              closeModal: () => dispose(),
+              order: order,
+            });
+          }}
+          size="md"
+          className={styles.actionButtons}>
+          {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/action-button.scss

@@ -0,0 +1,12 @@
+@use '@carbon/type';
+@use '@carbon/layout';
+@use '@carbon/colors';
+
+.actionButtons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 0 layout.$spacing-04;
+  font-size: type.type-scale(2);
+}

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { type 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-procedure-to-worklist-dialog',
+    actionText: t('pickProcedureOrder', 'Pick Procedure Order'),
+    additionalProps: { mutateUrl: `${restBaseUrl}/order` },
+  };
+  return <ExtensionSlot name="procedure-orders-action" state={state} />;
+};
+
+export default OrderActionExtension;

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

@@ -0,0 +1,176 @@
+import {
+  DataTable,
+  Search,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableExpandedRow,
+  TableExpandHeader,
+  TableExpandRow,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { usePagination } from '@openmrs/esm-framework';
+import { CardHeader } from '@openmrs/esm-patient-common-lib';
+import upperCase from 'lodash-es/upperCase';
+import { default as React, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import EmptyState from '../../../empty-state/empty-state-component';
+import { useSearchGroupedResults } from '../../../hooks/useSearchGroupedResults';
+import TransitionLatestQueueEntryButton from '../../../procedures-ordered/transition-patient-new-queue/transition-latest-queue-entry-button.component';
+import styles from './grouped-orders-table.scss';
+import { type GroupedOrdersTableProps } from './grouped-procedure-types';
+import ListOrderDetails from './list-order-details.component';
+import { OrdersDateRangePicker } from './orders-date-range-picker';
+
+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: upperCase(patient.orders[0].patient?.person?.display),
+      patientAge: patient?.orders[0]?.patient?.person?.age,
+      patientGender:
+        patient?.orders[0]?.patient?.person?.gender === 'M'
+          ? t('male', 'Male')
+          : patient?.orders[0]?.patient?.person?.gender === 'F'
+            ? t('female', 'Female')
+            : patient?.orders[0]?.patient?.person?.gender,
+      orders: patient.orders,
+      totalOrders: patient.orders?.length,
+      fulfillerStatus: patient.orders[0].fulfillerStatus,
+      action:
+        patient.orders[0].fulfillerStatus === 'COMPLETED' ? (
+          <TransitionLatestQueueEntryButton patientUuid={patient.patientId} />
+        ) : null,
+    }));
+  }, [paginatedResults, t]);
+
+  const tableColumns = useMemo(() => {
+    const baseColumns = [
+      { key: 'patientName', header: t('patientName', 'Patient Name') },
+      { key: 'patientAge', header: t('age', 'Age') },
+      { key: 'patientGender', header: t('sex', 'Sex') },
+      { 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]);
+
+  return (
+    <>
+      <div className={styles.widgetCard}>
+        <CardHeader title={props?.title}>
+          <div className={styles.elementContainer}>
+            <OrdersDateRangePicker />
+            <Search
+              expanded
+              persistent={true}
+              onChange={(event) => setSearchString(event.target.value)}
+              placeholder={t('searchByPatientName', 'Search by patient name')}
+              size="md"
+            />
+          </div>
+        </CardHeader>
+      </div>
+
+      <DataTable size="md" useZebraStyle rows={rowData} headers={tableColumns}>
+        {({
+          rows,
+          headers,
+          getHeaderProps,
+          getRowProps,
+          getExpandedRowProps,
+          getTableProps,
+          getTableContainerProps,
+        }) => (
+          <TableContainer className={styles.dataTable} {...getTableContainerProps()}>
+            {rows.length <= 0 && (
+              <EmptyState subTitle={t('NoOrdersFound', 'There are no orders to display for this patient')} />
+            )}
+            {rows.length > 0 && (
+              <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,30 @@
+@use '@carbon/layout';
+@use '@carbon/colors';
+
+.dataTable {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid colors.$gray-20;
+  margin-right: layout.$spacing-05;
+  margin-left: layout.$spacing-05;
+
+  & > section {
+    position: relative;
+    margin-bottom: layout.$spacing-01;
+  }
+}
+
+.widgetCard {
+  background-color: colors.$white;
+  border: 1px solid colors.$gray-20;
+  margin-right: layout.$spacing-05;
+  margin-left: layout.$spacing-05;
+  margin-top: layout.$spacing-05;
+}
+
+.elementContainer {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-right: layout.$spacing-03;
+}

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

@@ -0,0 +1,47 @@
+import { type Result } from '../../../types';
+
+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;
+}

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

@@ -0,0 +1,171 @@
+import {
+  Accordion,
+  AccordionItem,
+  Button,
+  InlineLoading,
+  StructuredListBody,
+  StructuredListCell,
+  StructuredListRow,
+  StructuredListWrapper,
+  Tag,
+  TextArea,
+} from '@carbon/react';
+import { Printer } from '@carbon/react/icons';
+import { formatDate, parseDate, showModal } from '@openmrs/esm-framework';
+import capitalize from 'lodash-es/capitalize';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import ActionButton from './action-button/action-button.component';
+import { type ListOrdersDetailsProps } from './grouped-procedure-types';
+import usePatientDiagnosis from './list-order-details.resource';
+import styles from './list-order-details.scss';
+
+const ListOrderDetails: React.FC<ListOrdersDetailsProps> = ({ groupedOrders, showActions, actions }) => {
+  const orders = 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]);
+
+  const { diagnoses, isLoading } = usePatientDiagnosis(orders[0]?.patient?.uuid);
+  if (isLoading) {
+    return <InlineLoading status="active" description={t('loading', 'Loading...')} />;
+  }
+
+  return (
+    <div>
+      {orderRows.map((row) => (
+        <div key={row.uuid} className={styles.orderDetailsContainer}>
+          <div className={styles.orderHeader}>
+            <span className={styles.orderNumber}>
+              {t('orderNumbers', 'Order number:')} {row?.orderNumber}
+            </span>
+            <span className={styles.orderDate}>
+              {t('orderDate', 'Order Date:')} {row?.dateActivated ? formatDate(parseDate(row?.dateActivated)) : '--'}
+            </span>
+          </div>
+
+          <div className={styles.orderStatus}>
+            <span className={styles.urgencyStatus}>
+              {t('orderStatus', 'Status:')}
+              <Tag size="lg" type="warm-gray">
+                {row.fulfillerStatus || t('orderNotPicked', 'Order not picked')}
+              </Tag>
+            </span>
+          </div>
+
+          <div className={styles.orderHeader}>
+            <span className={styles.urgencyStatus}>
+              {t('diagnosis', 'Diagnosis: ')}
+              {diagnoses.length > 0 ? (
+                diagnoses.map((diagnosis) => (
+                  <Tag size="lg" type="warm-gray" key={diagnosis.id}>
+                    {diagnosis.text ? capitalize(diagnosis.text) : t('noDiagnosis', 'No available diagnosis')}
+                  </Tag>
+                ))
+              ) : (
+                <Tag size="lg" type="warm-gray">
+                  {t('noDiagnosis', 'No available diagnosis')}
+                </Tag>
+              )}
+            </span>
+            <span className={styles.urgencyStatus}>
+              {t('urgencyStatus', 'Urgency: ')}
+              <Tag size="lg" type="warm-gray">
+                {capitalize(row.urgency || '--')}
+              </Tag>
+            </span>
+          </div>
+
+          <StructuredListWrapper>
+            <StructuredListBody>
+              <StructuredListRow>
+                <StructuredListCell>{t('testOrdered', 'Test ordered: ')}</StructuredListCell>
+                <StructuredListCell className={styles.orderName}>{capitalize(row?.display || '--')}</StructuredListCell>
+              </StructuredListRow>
+              <StructuredListRow>
+                <StructuredListCell>
+                  <span className={styles.instructionLabel}>{t('orderInStruction', 'Instructions: ')}</span>
+                </StructuredListCell>
+                <StructuredListCell>
+                  {row?.instructions || (
+                    <Tag size="lg" type="red">
+                      {t('NoInstructionLeft', 'No instructions are provided.')}
+                    </Tag>
+                  )}
+                </StructuredListCell>
+              </StructuredListRow>
+            </StructuredListBody>
+          </StructuredListWrapper>
+          {row.status === 'COMPLETED' && row.procedures?.[0]?.procedureReport && (
+            <Accordion>
+              <AccordionItem title={<span className={styles.accordionTitle}>{t('viewReport', 'View Report')}</span>}>
+                <TextArea
+                  className={styles.textAreaInput}
+                  labelText={t('complication', 'Complication')}
+                  id={`report-${row.uuid}`}
+                  name={`report-${row.uuid}`}
+                  value={row.procedures[0]?.encounters[0]?.obs[0]?.display}
+                  readOnly
+                />
+                <TextArea
+                  className={styles.textAreaInput}
+                  labelText={t('procedureReport', 'Procedure report')}
+                  id={`report-${row.uuid}`}
+                  name={`report-${row.uuid}`}
+                  value={row.procedures[0]?.procedureReport}
+                  readOnly
+                />
+                <Button
+                  kind="tertiary"
+                  className={styles.printBtn}
+                  onClick={() => {
+                    const dispose = showModal('print-procedure-report-modal', {
+                      onClose: () => dispose(),
+                      completedOrder: row,
+                    });
+                  }}
+                  size="sm"
+                  renderIcon={() => <Printer size={18} />}>
+                  {t('printReport', 'Print report')}
+                </Button>
+              </AccordionItem>
+            </Accordion>
+          )}
+
+          <div className={styles.nameOrder}>
+            {t('ordererName', 'Orderer Name: ')} {capitalize(row?.orderer || '--')}
+          </div>
+          {showActions && (
+            <div className={styles.buttonSection}>
+              <div className={styles.actionBtns}>
+                {actions.map((action) => (
+                  <ActionButton
+                    key={action.actionName}
+                    order={orders.find((order) => order.uuid === row.id)}
+                    patientUuid={row.patient.uuid}
+                    action={action}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ListOrderDetails;

package/src/shared/ui/common/list-order-details.resource.ts

@@ -0,0 +1,41 @@
+import { openmrsFetch, restBaseUrl, type Visit } from '@openmrs/esm-framework';
+import { useMemo } from 'react';
+import useSWR from 'swr';
+
+export function useVisit(patientUuid: string) {
+  const customRepresentation =
+    'custom:(uuid,patient,encounters:(uuid,diagnoses:(uuid,display,certainty,diagnosis:(coded:(uuid,display))),encounterDatetime,encounterType:(uuid,display),encounterProviders:(uuid,display,provider:(uuid,person:(uuid,display)))),location:(uuid,name,display),visitType:(uuid,name,display),startDatetime,stopDatetime)&limit=1';
+
+  const { data, error, isLoading, isValidating, mutate } = useSWR<{ data: { results: Array<Visit> } }, Error>(
+    `${restBaseUrl}/visit?patient=${patientUuid}&v=${customRepresentation}`,
+    openmrsFetch,
+  );
+
+  return {
+    visits: data ? data?.data?.results[0] : null,
+    error,
+    isLoading,
+    isValidating,
+    mutateVisits: mutate,
+  };
+}
+
+const usePatientDiagnosis = (patientUUid: string) => {
+  const { visits: recentVisit, error, isLoading } = useVisit(patientUUid);
+
+  const diagnoses = useMemo(() => {
+    return (
+      recentVisit?.encounters?.flatMap(
+        (encounter) =>
+          encounter.diagnoses.map((diagnosis) => ({
+            id: diagnosis.diagnosis.coded.uuid,
+            text: diagnosis.display,
+          })) || [],
+      ) || []
+    );
+  }, [recentVisit]);
+
+  return { error, isLoading, diagnoses: diagnoses as Array<{ id: string; text: string }> };
+};
+
+export default usePatientDiagnosis;

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

@@ -0,0 +1,118 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.buttonSection {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex-direction: row;
+  padding-top: layout.$spacing-03;
+  width: 100%;
+}
+.actionBtns {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  text-align: center;
+  flex-direction: row;
+  padding-top: layout.$spacing-03;
+  width: 100%;
+}
+
+.nameOrder {
+  margin-top: layout.$spacing-03;
+  font-size: type.type-scale(2);
+  margin-left: layout.$spacing-04;
+}
+
+.testOrder {
+  font-size: type.type-scale(2);
+  font-weight: bold;
+}
+
+.actionButtons {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  width: 100%;
+}
+
+.orderDetailsContainer {
+  width: 80%;
+  display: flex;
+  flex-direction: column;
+  padding: layout.$spacing-05;
+  margin-left: layout.$spacing-13;
+  background-color: colors.$white-0;
+  margin: layout.$spacing-05 0;
+}
+
+.orderUrgency {
+  display: flex;
+  justify-content: flex-end;
+  font-size: type.type-scale(2);
+  margin-bottom: layout.$spacing-03;
+}
+.printBtn {
+  --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: justify;
+  padding: 0 layout.$spacing-04;
+  gap: layout.$spacing-05;
+  margin-right: layout.$spacing-05;
+}
+.orderHeader {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0;
+  margin-bottom: layout.$spacing-03;
+}
+
+.orderNumber {
+  font-size: type.type-scale(2);
+}
+
+.orderStatus {
+  font-size: type.type-scale(2);
+}
+
+.orderDate {
+  text-align: right;
+  font-size: type.type-scale(2);
+}
+
+.instructions {
+  text-align: justify;
+  font-size: type.type-scale(1);
+}
+
+.urgencyStatus {
+  font-size: type.type-scale(2);
+  margin-top: layout.$spacing-03;
+}
+
+.instructionLabel {
+  font-weight: bold;
+  font-size: type.type-scale(2);
+}
+.orderName {
+  font-weight: bold;
+  font-size: type.type-scale(2);
+}
+
+.labResultSlot {
+  text-align: center;
+  margin-bottom: layout.$spacing-03;
+}
+
+.accordionTitle {
+  font-weight: bold;
+}
+.printBtn {
+  margin-top: layout.$spacing-03;
+}