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

package/src/patient-chart/procedure-past-test/laboratory-past-test-order-results.component.tsx

@@ -0,0 +1,366 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './laboratory-past-test-order-results.scss';
+import { formatDate, parseDate, ErrorState, showModal, useConfig, usePagination } from '@openmrs/esm-framework';
+
+import {
+  DataTable,
+  DataTableSkeleton,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+  Layer,
+  Tag,
+  Tile,
+  Tooltip,
+  Pagination,
+  TableExpandHeader,
+  TableExpandRow,
+  TableExpandedRow,
+  Button,
+  IconButton,
+  InlineLoading,
+} from '@carbon/react';
+
+import { Printer, MailAll, Add, Checkmark, SendAlt, NotSent } from '@carbon/react/icons';
+
+import TestsResults from '../results-summary/test-results-table.component';
+import { useReactToPrint } from 'react-to-print';
+import PrintResultsSummary from '../results-summary/print-results-summary.component';
+import { useGetPatientByUuid } from '../../utils/functions';
+import { ResourceRepresentation, type Result, getOrderColor } from '../patient-procedure-order-results.resource';
+import { useLaboratoryOrderResultsPages } from '../patient-procedure-order-results-table.resource';
+import { CardHeader } from '@openmrs/esm-patient-common-lib';
+
+interface LaboratoryPastTestOrderResultsProps {
+  patientUuid: string;
+}
+
+interface PrintProps {
+  encounter: Result;
+}
+
+const LaboratoryPastTestOrderResults: React.FC<LaboratoryPastTestOrderResultsProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+
+  const { enableSendingLabTestsByEmail, laboratoryEncounterTypeUuid } = useConfig();
+
+  const displayText = t('pastLaboratoryTestsDisplayTextTitle', 'Past Laboratory Tests');
+  const { items, tableHeaders, isLoading, isError } = useLaboratoryOrderResultsPages({
+    v: ResourceRepresentation.Full,
+    totalCount: true,
+    patientUuid: patientUuid,
+    laboratoryEncounterTypeUuid: laboratoryEncounterTypeUuid,
+  });
+  const pageSizes = [10, 20, 30, 40, 50];
+  const [currentPageSize, setPageSize] = useState(10);
+
+  const sortedLabRequests = useMemo(() => {
+    return [...items]
+      ?.filter((item) => item?.encounterType?.uuid === laboratoryEncounterTypeUuid)
+      ?.sort((a, b) => {
+        const dateA = new Date(a.encounterDatetime);
+        const dateB = new Date(b.encounterDatetime);
+        return dateB.getTime() - dateA.getTime();
+      });
+  }, [items, laboratoryEncounterTypeUuid]);
+
+  const [searchTerm, setSearchTerm] = useState('');
+  const [laboratoryOrders, setLaboratoryOrders] = useState(sortedLabRequests);
+  const [initialTests, setInitialTests] = useState(sortedLabRequests);
+
+  const handleChange = useCallback((event) => {
+    const searchText = event?.target?.value?.trim().toLowerCase();
+    setSearchTerm(searchText);
+  }, []);
+
+  useEffect(() => {
+    if (!searchTerm) {
+      setLaboratoryOrders(initialTests);
+    } else {
+      const filteredItems = initialTests.filter((item) =>
+        item?.orders?.some((order) => order?.concept?.display.toLowerCase().includes(searchTerm)),
+      );
+      setLaboratoryOrders(filteredItems);
+    }
+  }, [searchTerm, initialTests]);
+
+  useEffect(() => {
+    setInitialTests(sortedLabRequests);
+  }, [sortedLabRequests]);
+
+  const oneDayBeforeDate = new Date();
+  oneDayBeforeDate.setDate(oneDayBeforeDate.getDate() - 1);
+
+  const EmailButtonAction: React.FC = () => {
+    const launchSendEmailModal = useCallback(() => {
+      const dispose = showModal('send-email-dialog', {
+        closeModal: () => dispose(),
+      });
+    }, []);
+
+    return (
+      <Button
+        kind="ghost"
+        size="sm"
+        onClick={(e) => launchSendEmailModal()}
+        renderIcon={(props) => <MailAll size={16} {...props} />}
+      />
+    );
+  };
+
+  const LaunchLabRequestForm: React.FC = () => {
+    return (
+      <IconButton label="Add">
+        <Add />
+      </IconButton>
+    );
+  };
+  const PrintButtonAction: React.FC<PrintProps> = ({ encounter }) => {
+    const { patient } = useGetPatientByUuid(encounter.patient.uuid);
+
+    const [isPrinting, setIsPrinting] = useState(false);
+
+    const contentToPrintRef = useRef(null);
+
+    const onBeforeGetContentResolve = useRef(null);
+
+    useEffect(() => {
+      if (onBeforeGetContentResolve.current) {
+        onBeforeGetContentResolve.current();
+      }
+    }, [isPrinting]);
+
+    const handlePrint = useReactToPrint({
+      content: () => contentToPrintRef.current,
+      onBeforeGetContent: () =>
+        new Promise((resolve) => {
+          onBeforeGetContentResolve.current = resolve;
+          setIsPrinting(true);
+        }),
+      onAfterPrint: () => {
+        onBeforeGetContentResolve.current = null;
+        setIsPrinting(false);
+      },
+    });
+
+    return (
+      <div>
+        <div ref={contentToPrintRef}>
+          <PrintResultsSummary encounterResponse={encounter} patient={patient} />
+        </div>
+        <Tooltip align="bottom" label="Print out results">
+          <Button
+            kind="ghost"
+            size="sm"
+            onClick={handlePrint}
+            renderIcon={(props) => <Printer size={16} {...props} />}
+          />
+        </Tooltip>
+      </div>
+    );
+  };
+
+  const currentDateTime = new Date().getTime();
+  const twentyFourHoursAgo = currentDateTime - 24 * 60 * 60 * 1000;
+
+  const filteredPastTestOrderResults = useMemo(() => {
+    return laboratoryOrders?.filter((entry) => {
+      const entryDate = new Date(entry.encounterDatetime).getTime();
+      return entryDate < twentyFourHoursAgo;
+    });
+  }, [laboratoryOrders, twentyFourHoursAgo]);
+  const {
+    goTo,
+    results: paginatedPastTestOrderResults,
+    currentPage,
+  } = usePagination(filteredPastTestOrderResults, currentPageSize);
+
+  const tableRows = useMemo(() => {
+    return paginatedPastTestOrderResults?.map((entry, index) => ({
+      ...entry,
+      id: entry?.uuid,
+      orderDate: formatDate(parseDate(entry.encounterDatetime), {
+        mode: 'standard',
+        time: true,
+      }),
+      orders: (
+        <>
+          {entry?.orders
+            ?.filter((order) => order?.type === 'testorder' && order?.action === 'NEW')
+            .map((order) => (
+              <Tag
+                style={{
+                  background: `${getOrderColor(order?.dateActivated, order?.dateStopped)}`,
+                  color: 'white',
+                }}
+                role="tooltip"
+                key={order?.uuid}>
+                {order?.display}
+              </Tag>
+            ))}
+        </>
+      ),
+      location: entry?.location?.display,
+      status: '--',
+      actions: (
+        <div style={{ display: 'flex' }}>
+          <PrintButtonAction encounter={entry} />
+          {enableSendingLabTestsByEmail && <EmailButtonAction />}
+        </div>
+      ),
+    }));
+  }, [enableSendingLabTestsByEmail, paginatedPastTestOrderResults]);
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  if (isError) {
+    return <ErrorState error={isError} headerTitle={'Error'} />;
+  }
+
+  if (filteredPastTestOrderResults?.length >= 0) {
+    return (
+      <div className={styles.widgetCard}>
+        <CardHeader title={displayText}>
+          {isLoading ? (
+            <span>
+              <InlineLoading />
+            </span>
+          ) : null}
+        </CardHeader>
+        <DataTable rows={tableRows} headers={tableHeaders} useZebraStyles>
+          {({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => (
+            <TableContainer className={styles.tableContainer}>
+              <TableToolbar
+                style={{
+                  position: 'static',
+                  height: '3rem',
+                  overflow: 'visible',
+                  backgroundColor: 'color',
+                }}>
+                <TableToolbarContent>
+                  <div
+                    style={{
+                      fontSize: '10px',
+                      margin: '5px',
+                      display: 'flex',
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                    }}>
+                    Key:
+                    <Tag
+                      size="sm"
+                      style={{
+                        background: '#6F6F6F',
+                        color: 'white',
+                      }}
+                      title="Result Requested"
+                      renderIcon={() => <SendAlt />}>
+                      {'Requested'}
+                    </Tag>
+                    <Tag
+                      size="sm"
+                      style={{
+                        background: 'green',
+                        color: 'white',
+                      }}
+                      title="Result Complete"
+                      renderIcon={() => <Checkmark />}>
+                      {'Completed'}
+                    </Tag>
+                    <Tag
+                      size="sm"
+                      style={{
+                        background: 'red',
+                        color: 'white',
+                      }}
+                      title="Result Rejected"
+                      renderIcon={() => <NotSent />}>
+                      {'Rejected'}
+                    </Tag>
+                  </div>
+                  <Layer>
+                    <TableToolbarSearch
+                      expanded={true}
+                      value={searchTerm}
+                      onChange={handleChange}
+                      placeholder={t('searchThisList', 'Search this list')}
+                      size="sm"
+                    />
+                  </Layer>
+                </TableToolbarContent>
+              </TableToolbar>
+              <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}>
+                            {sortedLabRequests[index]?.obs !== null && sortedLabRequests[index]?.obs?.length > 0 && (
+                              <TestsResults obs={sortedLabRequests[index]?.obs} />
+                            )}{' '}
+                          </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('noTestOrdersToDisplay', 'No test orders to display')}</p>
+                    </div>
+                  </Tile>
+                </div>
+              ) : null}
+              <Pagination
+                page={currentPage}
+                pageSize={currentPageSize}
+                pageSizes={pageSizes}
+                totalItems={filteredPastTestOrderResults?.length}
+                onChange={({ pageSize, page }) => {
+                  if (pageSize !== currentPageSize) {
+                    setPageSize(pageSize);
+                  }
+                  if (page !== currentPage) {
+                    goTo(page);
+                  }
+                }}
+                className={styles.paginationOverride}
+              />
+            </TableContainer>
+          )}
+        </DataTable>
+      </div>
+    );
+  }
+};
+
+export default LaboratoryPastTestOrderResults;

package/src/patient-chart/procedure-past-test/laboratory-past-test-order-results.scss

@@ -0,0 +1,74 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/type';
+@use '@openmrs/esm-styleguide/src/vars' as vars;
+@import '../../root.scss';
+.widgetCard {
+  border: 1px solid colors.$gray-20;
+  border-bottom: none;
+}
+
+.headerBtnContainer {
+  background-color: vars.$ui-background;
+  padding: spacing.$spacing-05;
+  text-align: right;
+}
+
+.tileContainer {
+  background-color: vars.$ui-02;
+  border-top: 1px solid vars.$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: vars.$text-02;
+  margin-bottom: 0.5rem;
+}
+
+.helper {
+  @include type.type-style('body-compact-01');
+  color: vars.$text-02;
+}
+
+.container {
+  background-color: vars.$ui-01;
+}
+
+.separator {
+  @include type.type-style('body-compact-02');
+  color: vars.$text-02;
+  width: 80%;
+  margin: 1.5rem auto;
+  overflow: hidden;
+  text-align: center;
+  &::before,
+  &::after {
+    background-color: vars.$text-03;
+    content: '';
+    display: inline-block;
+    height: 1px;
+    position: relative;
+    vertical-align: middle;
+    width: 50%;
+  }
+  &::before {
+    right: 0.5rem;
+    margin-left: -50%;
+  }
+  &::after {
+    left: 0.5rem;
+    margin-right: -50%;
+  }
+}

package/src/patient-chart/procedure-tabs/laboratory-order-tabs.component.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import styles from './laboratory-order-tabs.scss';
+import { useTranslation } from 'react-i18next';
+import PatientLaboratoryReferalResults from '../procedure-order-referals/procedure-order-referals.component';
+import PatientLaboratoryResults from '../patient-procedure-results.component';
+
+interface LaboratoryResultsTabsProps {
+  patientUuid: string;
+}
+
+const LaboratoryResultsTabs: React.FC<LaboratoryResultsTabsProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+
+  const [selectedTab, setSelectedTab] = useState(0);
+
+  return (
+    <>
+      <div className={styles.container}>
+        <Tabs
+          selectedIndex={selectedTab}
+          onChange={({ selectedIndex }) => setSelectedTab(selectedIndex)}
+          className={styles.tabs}>
+          <TabList style={{ paddingLeft: '1rem' }} aria-label="laboratory results tabs" contained>
+            <Tab style={{ width: '150px' }}>{t('pending', 'Routine Tests')}</Tab>
+            <Tab style={{ width: '150px' }}>{t('referals', 'Referrals')}</Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel style={{ padding: 0 }}>
+              <PatientLaboratoryResults patientUuid={patientUuid} />
+            </TabPanel>
+            <TabPanel style={{ padding: 0 }}>
+              <div style={{ margin: '10px' }}>
+                <PatientLaboratoryReferalResults patientUuid={patientUuid} />
+              </div>
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      </div>
+    </>
+  );
+};
+
+export default LaboratoryResultsTabs;

package/src/patient-chart/procedure-tabs/laboratory-order-tabs.scss

@@ -0,0 +1,7 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@openmrs/esm-styleguide/src/vars' as vars;
+
+.container {
+  background-color: vars.$ui-01;
+}

package/src/patient-chart/procedure-workspaces/laboratory-referral.workspace.component.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { type DefaultWorkspaceProps } from '@openmrs/esm-framework';
+export const LaboratoryWorkspace: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace, promptBeforeClosing }) => {
+  return (
+    <>
+      <span>Coming Soon...</span>
+    </>
+  );
+};
+
+export default LaboratoryWorkspace;

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

@@ -0,0 +1,152 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import styles from './print-results-summary.scss';
+import { formatDate, parseDate } from '@openmrs/esm-framework';
+import logoImg from '../../../assets/logo/moh_logo_without_word.png';
+import { type Identifier, type PatientResource } from '../../utils/functions';
+import { useTranslation } from 'react-i18next';
+import PrintResultsTable from './print-results-table.component';
+import { type Result } from '../patient-procedure-order-results.resource';
+
+interface PrintResultsSummaryProps {
+  encounterResponse: Result;
+  patient: PatientResource;
+}
+
+const PrintResultsSummary: React.FC<PrintResultsSummaryProps> = ({ encounterResponse, patient }) => {
+  const filteredItems = encounterResponse.obs.filter((ob) => ob?.order?.type === 'testorder');
+
+  const results = useMemo(() => {
+    const groupedResults = [];
+
+    filteredItems.forEach((element) => {
+      groupedResults[element?.order?.display] = element;
+    });
+    return groupedResults;
+  }, [filteredItems]);
+  return (
+    <div className={styles.printPage}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-around',
+          flexDirection: 'row',
+          alignItems: 'center',
+          margin: ' 10px',
+        }}>
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+            }}>
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}>
+              <img src={logoImg} alt={'logo'} width={50} height={50} />
+              <span style={{ fontSize: '10px', fontWeight: 'bold', margin: '5px' }}>
+                {encounterResponse?.visit?.location?.display}
+              </span>
+            </div>
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}>
+              <span style={{ fontSize: '10px', fontWeight: 'bold', margin: '2px' }}>Code :</span>
+              <span style={{ fontSize: '10px', fontWeight: 'bold', margin: '2px' }}>District :</span>
+            </div>
+          </div>
+        </div>
+
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <span style={{ margin: '5px', fontSize: '10px' }}>
+            <span style={{ fontSize: '10px', fontWeight: 'bold' }}>{patient?.person?.display}</span>,
+            {patient?.person?.gender === 'M' ? ' Male' : patient?.person?.gender === 'F' ? ' Female' : ' Unknown'},
+            <span>
+              {' '}
+              {formatDate(parseDate(patient?.person?.birthdate), {
+                mode: 'standard',
+                time: false,
+              })}{' '}
+            </span>
+          </span>
+          <span style={{ margin: '5px', fontSize: '10px' }}>
+            HIV Clinic No. :
+            {patient?.identifiers?.length
+              ? patient?.identifiers?.find((identifier: Identifier) => {
+                  return identifier?.identifierType.uuid === 'e1731641-30ab-102d-86b0-7a5022ba4115';
+                })?.identifier
+              : '--'}
+          </span>
+          <span style={{ margin: '5px', fontSize: '10px' }}>
+            Patient Unique Code (UIC). :
+            {patient?.identifiers?.length > 0
+              ? patient?.identifiers?.find((identifier: Identifier) => {
+                  return identifier?.identifierType?.uuid === '877169c4-92c6-4cc9-bf45-1ab95faea242';
+                })?.identifier
+              : '--'}
+          </span>
+        </div>
+
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <span style={{ margin: '5px', fontSize: '10px' }}>
+            Prepared By : {encounterResponse?.auditInfo?.creator?.display}
+          </span>
+          <span style={{ margin: '5px', fontSize: '10px' }}>
+            Date Requested :
+            {formatDate(parseDate(encounterResponse?.encounterDatetime), {
+              time: false,
+            })}
+          </span>
+        </div>
+      </div>
+
+      <section className={styles.section}>
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+          }}></div>
+      </section>
+      <section className={styles.section}>
+        {Object.keys(results)?.length > 0 && <PrintResultsTable groupedResults={results} />}
+      </section>
+
+      <section className={styles.section}>
+        <div
+          style={{
+            margin: '10px',
+            display: 'flex',
+            width: '500px',
+            flexDirection: 'row',
+          }}>
+          <span style={{ fontSize: '14px', marginBottom: '10px' }}>
+            Results Reviewed / Authorized by :
+            <span style={{ marginLeft: '50px' }}>{encounterResponse?.auditInfo?.creator?.display}</span>
+          </span>
+        </div>
+        <div
+          style={{
+            margin: '10px',
+            display: 'flex',
+            width: '500px',
+            flexDirection: 'row',
+          }}>
+          <span style={{ fontSize: '14px', marginTop: '10px' }}>
+            Sign : .............................................{' '}
+            <span style={{ fontSize: '14px', marginLeft: '50px' }}>Date : ............................</span>
+          </span>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default PrintResultsSummary;