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

package/src/patient-chart/results-summary/test-children-results.component.tsx

@@ -0,0 +1,177 @@
+import React, { type AnchorHTMLAttributes, useMemo } from 'react';
+import { type GroupMember, type Value } from '../patient-procedure-order-results.resource';
+import { useTranslation } from 'react-i18next';
+import {
+  DataTable,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+  InlineLoading,
+} from '@carbon/react';
+import styles from './results-summary.scss';
+import { useGetConceptById } from './results-summary.resource';
+
+interface TestsResultsChildrenProps {
+  members: GroupMember[];
+}
+
+interface ReferenceRangeProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  conceptUuid: string;
+}
+
+interface ColorRangeIndicatorProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  value: number | Value;
+  conceptUuid: string;
+}
+
+const TestResultsChildren: React.FC<TestsResultsChildrenProps> = ({ members }) => {
+  const { t } = useTranslation();
+
+  const columns = [
+    { id: 1, header: t('test', 'Test'), key: 'test' },
+
+    {
+      id: 2,
+      header: t('results', 'Results'),
+      key: 'value',
+    },
+    {
+      id: 3,
+      header: t('range', 'Reference Range'),
+      key: 'range',
+    },
+  ];
+
+  const results = useMemo(() => {
+    return members?.map((member) => ({
+      id: member.uuid,
+      test: {
+        content: <span>{member?.concept?.display}</span>,
+      },
+      value: {
+        content: <span>{typeof member?.value === 'number' ? member?.value : member?.display}</span>,
+      },
+    }));
+  }, [members]);
+
+  const ReferenceRange: React.FC<ReferenceRangeProps> = ({ conceptUuid }) => {
+    const { concept: concept, isLoading, isError } = useGetConceptById(conceptUuid);
+
+    if (isLoading) {
+      return <TableCell>{<InlineLoading status="active" />}</TableCell>;
+    }
+    if (isError) {
+      return <TableCell>{<span>Error</span>}</TableCell>;
+    }
+    return (
+      <TableCell>
+        {concept?.hiNormal === undefined || concept?.lowNormal === undefined ? (
+          'N/A'
+        ) : (
+          <div>
+            <span>{concept?.lowNormal}</span> : <span>{concept?.hiNormal}</span>
+            <span style={{ marginLeft: '10px' }}>{concept?.units}</span>
+          </div>
+        )}
+      </TableCell>
+    );
+  };
+
+  const ColorRangeIndicator: React.FC<ColorRangeIndicatorProps> = ({ value, conceptUuid }) => {
+    const { concept: concept, isLoading, isError } = useGetConceptById(conceptUuid);
+    if (isLoading) {
+      return <TableCell>{<InlineLoading status="active" />}</TableCell>;
+    }
+
+    if (isError) {
+      return <TableCell>{<span>Error</span>}</TableCell>;
+    }
+
+    if (concept?.datatype?.display === 'coded') {
+      return <TableCell>{typeof value === 'object' ? value?.display : value}</TableCell>;
+    }
+
+    let range = '';
+    if (typeof value === 'number') {
+      if (concept?.hiCritical && value >= concept?.hiCritical) {
+        range = styles.criticallyHigh;
+      }
+
+      if (concept?.hiNormal && value > concept?.hiNormal) {
+        range = styles.high;
+      }
+
+      if (concept?.lowCritical && value <= concept?.lowCritical) {
+        range = styles.criticallyLow;
+      }
+
+      if (concept?.lowNormal && value < concept?.lowNormal) {
+        range = styles.low;
+      }
+      return <TableCell className={range}>{value}</TableCell>;
+    }
+    return <TableCell>{value.display}</TableCell>;
+  };
+
+  if (results?.length >= 0) {
+    return (
+      <div>
+        <DataTable rows={results} headers={columns} 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 })}>
+                          {row.cells.map((cell) =>
+                            cell.info.header === 'range' ? (
+                              <ReferenceRange conceptUuid={members[index]?.concept?.uuid}>
+                                {cell.value?.content}
+                              </ReferenceRange>
+                            ) : cell.info.header === 'value' ? (
+                              <ColorRangeIndicator
+                                conceptUuid={members[index]?.concept.uuid}
+                                value={members[index]?.value}
+                              />
+                            ) : (
+                              <TableCell key={cell.id}>{cell.value?.content ?? cell?.value}</TableCell>
+                            ),
+                          )}
+                        </TableRow>
+                      </React.Fragment>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+              {rows.length === 0 ? (
+                <div className={styles.tileContainer}>
+                  <Tile className={styles.tile}>
+                    <div className={styles.tileContent}>
+                      <p className={styles.content}>{t('noTestOrdersToDisplay', 'No test orders to display')}</p>
+                    </div>
+                  </Tile>
+                </div>
+              ) : null}
+            </TableContainer>
+          )}
+        </DataTable>
+      </div>
+    );
+  }
+};
+
+export default TestResultsChildren;

package/src/patient-chart/results-summary/test-print-results-table.component.tsx

@@ -0,0 +1,105 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  DataTable,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+  TableExpandHeader,
+  TableExpandRow,
+  TableExpandedRow,
+} from '@carbon/react';
+import styles from './results-summary.scss';
+import TestResultsChildren from './test-children-results.component';
+import { type Ob } from '../patient-procedure-order-results.resource';
+
+interface TestOrdersProps {
+  obs: Ob[];
+}
+
+const TestsPrintResults: React.FC<TestOrdersProps> = ({ obs }) => {
+  const { t } = useTranslation();
+
+  const columns = [
+    { id: 1, header: t('order', 'Order'), key: 'order' },
+    { id: 2, header: t('results', 'Results'), key: 'result' },
+  ];
+
+  const filteredItems = obs.filter((ob) => ob?.order?.type === 'testorder' && ob?.groupMembers?.length > 0);
+
+  const tableRows = useMemo(() => {
+    return filteredItems?.map((entry) => ({
+      ...entry,
+      id: entry.uuid,
+      members: entry?.groupMembers,
+      order: {
+        content: <span>{entry.display}</span>,
+      },
+      result: {
+        content: <span>--</span>,
+      },
+    }));
+  }, [filteredItems]);
+
+  if (filteredItems?.length >= 0) {
+    return (
+      <div>
+        <DataTable rows={tableRows} headers={columns} useZebraStyles expanded={false}>
+          {({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => (
+            <TableContainer className={styles.tableContainer}>
+              <Table {...getTableProps()} className={styles.activePatientsTable}>
+                <TableHead>
+                  <TableRow>
+                    <TableExpandHeader />
+                    {headers.map((header) => (
+                      <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row, index) => {
+                    return (
+                      <React.Fragment key={row.id}>
+                        <TableExpandRow {...getRowProps({ row })}>
+                          {row.cells.map((cell) => (
+                            <TableCell key={cell.id}>{cell.value?.content ?? cell?.value}</TableCell>
+                          ))}
+                        </TableExpandRow>
+                        {row.isExpanded ? (
+                          <TableExpandedRow className={styles.expandedActiveVisitRow} colSpan={headers.length + 2}>
+                            {filteredItems[index]?.groupMembers !== null &&
+                              filteredItems[index]?.groupMembers?.length > 0 && (
+                                <TestResultsChildren members={filteredItems[index]?.groupMembers} />
+                              )}
+                          </TableExpandedRow>
+                        ) : (
+                          <TableExpandedRow className={styles.hiddenRow} colSpan={headers.length + 2} />
+                        )}
+                      </React.Fragment>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+              {rows.length === 0 ? (
+                <div className={styles.tileContainer}>
+                  <Tile className={styles.tile}>
+                    <div className={styles.tileContent}>
+                      <p className={styles.content}>{t('noTestResultsToDisplay', 'No test results to display')}</p>
+                    </div>
+                  </Tile>
+                </div>
+              ) : null}
+            </TableContainer>
+          )}
+        </DataTable>
+      </div>
+    );
+  }
+};
+
+export default TestsPrintResults;

package/src/patient-chart/results-summary/test-results-table.component.tsx

@@ -0,0 +1,103 @@
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  DataTable,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+  TableExpandHeader,
+  TableExpandRow,
+  TableExpandedRow,
+} from '@carbon/react';
+import styles from './results-summary.scss';
+import TestResultsChildren from './test-children-results.component';
+import { formatDate, parseDate } from '@openmrs/esm-framework';
+import { type Ob } from '../patient-procedure-order-results.resource';
+
+interface TestOrdersProps {
+  obs: Ob[];
+}
+
+const TestsResults: React.FC<TestOrdersProps> = ({ obs }) => {
+  const { t } = useTranslation();
+
+  const columns = [
+    { id: 0, header: t('order', 'Order'), key: 'order', align: 'center' },
+    { id: 1, header: t('date', 'Date'), key: 'date' },
+    { id: 2, header: t('result', 'Results'), key: 'result' },
+  ];
+
+  const formatDateColumn = (obsDatetime) => formatDate(parseDate(obsDatetime), { time: false });
+
+  const obsList = obs?.filter((ob) => ob?.order?.type === 'testorder');
+
+  const obsRows = useMemo(
+    () =>
+      obsList.map((ob, index) => ({
+        id: ob.uuid,
+        order: { content: <span>{ob?.concept?.display}</span> },
+        date: { content: <span>{formatDateColumn(ob?.obsDatetime)}</span> },
+        result: {
+          content: <span>{ob[index]?.groupMembers === null ? ob?.display : ob?.value?.display}</span>,
+        },
+      })),
+    [obsList],
+  );
+
+  return (
+    <div>
+      <DataTable rows={obsRows} headers={columns} useZebraStyles>
+        {({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => (
+          <TableContainer className={styles.tableContainer}>
+            <Table {...getTableProps()} className={styles.activePatientsTable}>
+              <TableHead>
+                <TableRow>
+                  <TableExpandHeader />
+                  {headers.map((header) => (
+                    <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row, index) => (
+                  <React.Fragment key={row.id}>
+                    <TableExpandRow {...getRowProps({ row })}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
+                      ))}
+                    </TableExpandRow>
+                    {row.isExpanded ? (
+                      <TableExpandedRow className={styles.expandedActiveVisitRow} colSpan={headers.length + 2}>
+                        {obsList[index]?.groupMembers !== null && obsList[index]?.groupMembers?.length > 0 && (
+                          <TestResultsChildren members={obsList[index]?.groupMembers} />
+                        )}
+                      </TableExpandedRow>
+                    ) : (
+                      <TableExpandedRow className={styles.hiddenRow} colSpan={headers.length + 2} />
+                    )}
+                  </React.Fragment>
+                ))}
+              </TableBody>
+            </Table>
+            {rows.length === 0 && (
+              <div className={styles.tileContainer}>
+                <Tile className={styles.tile}>
+                  <div className={styles.tileContent}>
+                    <p className={styles.content}>{t('noTestResultsToDisplay', 'No test results to display')}</p>
+                  </div>
+                </Tile>
+              </div>
+            )}
+          </TableContainer>
+        )}
+      </DataTable>
+    </div>
+  );
+};
+
+export default TestsResults;

package/src/print/print-procedure-results.component.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ButtonSet, ModalBody, ModalFooter, InlineNotification } from '@carbon/react';
+import ReactToPrint, { useReactToPrint } from 'react-to-print';
+import styles from './print-procedure.scss';
+import { Order, type Result } from '../types';
+import PrintableReport from './print-procedure.component';
+
+type PrintPreviewModalProps = {
+  onClose: () => void;
+  completedOrder: Result;
+};
+
+const PrintPreviewModal: React.FC<PrintPreviewModalProps> = ({ onClose, completedOrder }) => {
+  const ordererName = completedOrder?.orderer;
+  const { t } = useTranslation();
+  const [printError, setPrintError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const handlePrint = useReactToPrint({
+    content: () => ref.current,
+  });
+
+  return (
+    <>
+      <ModalBody>
+        <div ref={ref}>
+          <PrintableReport completedOrder={completedOrder} ordererName={ordererName?.toString()} />
+        </div>
+      </ModalBody>
+      <ModalFooter>
+        <ButtonSet className={styles.btnSet}>
+          <Button kind="secondary" onClick={onClose} type="button">
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button kind="primary" type="button" disabled={isLoading} onClick={handlePrint}>
+            {t('print', 'Print')}
+          </Button>
+        </ButtonSet>
+      </ModalFooter>
+
+      {printError && (
+        <InlineNotification kind="error" title={t('printError', 'Error')} subtitle={printError} hideCloseButton />
+      )}
+    </>
+  );
+};
+
+export default PrintPreviewModal;

package/src/print/print-procedure.component.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import styles from './print-procedure.scss';
+import { useConfig, useSession, formatDate } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import startCase from 'lodash-es/startCase';
+import dayjs from 'dayjs';
+import { Order, type Result } from '../types';
+
+interface PrintableReportProps {
+  completedOrder: Result;
+  ordererName: string;
+}
+
+const PrintableReport: React.FC<PrintableReportProps> = ({ completedOrder, ordererName }) => {
+  const { t } = useTranslation();
+  const { sessionLocation, user } = useSession();
+  const location = sessionLocation?.display;
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.mainContent}>
+        <div className={styles.printableHeader}>
+          <p className={styles.heading}>
+            {t('procedureReport', 'Procedure Report')} - {completedOrder?.orderNumber}
+          </p>
+        </div>
+        <div className={styles.printableBody}>
+          <div className={styles.billDetails}>
+            <p className={styles.itemHeading}>{t('reportSummaryTo', 'Report summary to')}</p>
+            <p className={styles.itemLabel}>
+              {t('name', 'Name')}: {startCase(completedOrder?.patient?.person?.display)}
+            </p>
+            <p className={styles.itemLabel}>
+              {t('identifier', 'Identifier')}: {completedOrder?.patient?.identifiers[0]?.identifier}
+            </p>
+            <p className={styles.itemLabel}>
+              {t('age', 'Age')}: {completedOrder?.patient?.person?.age}
+            </p>
+            <p className={styles.itemLabel}>
+              {t('gender', 'Gender')}:
+              {completedOrder?.patient?.person?.gender === 'M'
+                ? ' Male'
+                : completedOrder?.patient?.person?.gender === 'F'
+                  ? ' Female'
+                  : ' Unknown'}
+            </p>
+            <p className={styles.itemLabel}>
+              {t('orderDate', 'Order date')}:{' '}
+              {completedOrder?.dateActivated ? dayjs(completedOrder.dateActivated).format('YYYY-MM-DD hh:mm A') : '--'}
+            </p>
+            <p className={styles.itemLabel}>
+              {t('orderer', 'Orderer')}: {ordererName}
+            </p>
+          </div>
+
+          <div className={styles.facilityDetails}>
+            <p className={styles.facilityName}>{location}</p>
+            <p className={styles.facilityName}>{completedOrder?.careSetting?.name}</p>
+            <p className={styles.facilityName}>{t('kenya', 'Kenya')}</p>
+          </div>
+        </div>
+        <div className={styles.printResults}>
+          <p className={styles.itemHeading}>{t('procedure', 'Procedure')}</p>
+          <div className={styles.reportSection}>
+            <p className={styles.itemLabel}>{startCase(completedOrder?.concept?.display)}</p>
+          </div>
+        </div>
+        <div className={styles.printResults}>
+          <p className={styles.itemHeading}>{t('complications', 'Complications')}</p>
+          <div className={styles.reportSection}>
+            <p className={styles.itemLabel}>{completedOrder?.procedures[0]?.encounters[0]?.obs[0]?.display}</p>
+          </div>
+        </div>
+        <div className={styles.printResults}>
+          <p className={styles.itemHeading}>{t('findings', 'Findings')}</p>
+          <div className={styles.reportSection}>
+            <p className={styles.itemLabel}>{completedOrder?.procedures[0]?.procedureReport}</p>
+          </div>
+        </div>
+        <div className={styles.printResults}>
+          <p className={styles.itemHeading}>{t('impressions', 'Impressions')}</p>
+          <div className={styles.reportSection}>
+            <p className={styles.itemLabel}>{completedOrder?.procedures[0]?.procedureReason}</p>
+          </div>
+        </div>
+      </div>
+
+      <section className={styles.sectionFooter}>
+        <div
+          style={{
+            margin: '10px',
+            display: 'flex',
+            width: '500px',
+            flexDirection: 'row',
+          }}>
+          <span style={{ fontSize: '14px', marginBottom: '10px' }}>
+            Results Reviewed / Authorized by :<span style={{ marginLeft: '50px' }}>{user?.display}</span>
+          </span>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default PrintableReport;

package/src/print/print-procedure.scss

@@ -0,0 +1,98 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.container {
+  padding: 0 1rem 2rem;
+  margin-bottom: 2rem;
+  padding: layout.$spacing-08;
+}
+
+.printableBody {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.printableHeader {
+  display: flex;
+  flex-direction: row;
+}
+
+.img {
+  display: flex;
+  margin-left: auto;
+}
+
+.billDetails {
+  display: flex;
+  width: 50%;
+  flex-direction: column;
+}
+
+.facilityDetails {
+  display: flex;
+  flex-flow: column wrap;
+  text-align: right;
+}
+
+.heading {
+  font-size: 20px;
+  text-transform: uppercase;
+  margin-bottom: layout.$spacing-05;
+}
+
+.facilityName {
+  @include type.type-style('heading-compact-02');
+  font-weight: bold;
+  color: colors.$green-70;
+}
+
+.itemHeading {
+  @include type.type-style('body-compact-02');
+  margin-bottom: 0.25rem;
+  font-weight: bold;
+  color: colors.$cool-gray-90;
+}
+
+.itemLabel {
+  @include type.type-style('body-compact-02');
+  color: colors.$cool-gray-90;
+  color: colors.$cool-gray-90;
+}
+.printResults {
+  margin-top: layout.$spacing-05;
+}
+.btnSet {
+  width: 100%;
+}
+
+.itemFooter {
+  padding: layout.$spacing-01 layout.$spacing-05;
+  @include type.type-style('body-compact-02');
+  color: colors.$cool-gray-90;
+}
+
+.footDescription {
+  @include type.type-style('legal-01');
+  padding: layout.$spacing-01 layout.$spacing-05;
+  color: colors.$cool-gray-70;
+  position: absolute;
+}
+.itemHeadingGroup {
+  @include type.type-style('body-compact-02');
+  margin-bottom: layout.$spacing-07;
+  font-weight: bold;
+  color: colors.$cool-gray-90;
+}
+.sectionFooter {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  padding: layout.$spacing-05;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  z-index: 100;
+}

package/src/procedure-tabs/completed-tab.component.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { CompletedList } from '../completed-list/completed-list.component';
+
+const CompletedComponent = () => {
+  return (
+    <div>
+      <CompletedList fulfillerStatus={'COMPLETED'} />
+    </div>
+  );
+};
+
+export default CompletedComponent;

package/src/procedure-tabs/not-done-tab.component.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import NotDoneList from '../not-done-list/not-done-list.component';
+
+const NotDoneComponent = () => {
+  return (
+    <div>
+      <NotDoneList fulfillerStatus={'DECLINED'} />
+    </div>
+  );
+};
+
+export default NotDoneComponent;

package/src/procedure-tabs/referred-tab.component.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReferredProcedures from '../referred-procedures/referred-procedures.component';
+
+const ReferredComponent = () => {
+  return (
+    <div>
+      <ReferredProcedures fulfillerStatus={'EXCEPTION'} />
+    </div>
+  );
+};
+
+export default ReferredComponent;

package/src/procedure-tabs/work-list-tab.component.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import WorkList from '../work-list/work-list.component';
+import styles from '../queue-list/procedure-queue.scss';
+
+const WorkListComponent = () => {
+  return (
+    <div>
+      <WorkList fulfillerStatus={'IN_PROGRESS'} />
+    </div>
+  );
+};
+
+export default WorkListComponent;