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

package/src/procedures-ordered/procedure-dialogs/add-to-worklist-dialog.resource.ts

@@ -0,0 +1,153 @@
+import { type FetchResponse, openmrsFetch, restBaseUrl, useConfig } from '@openmrs/esm-framework';
+import { useMemo } from 'react';
+import useSWR from 'swr';
+import useSWRImmutable from 'swr/immutable';
+
+export interface QueueRoomsResponse {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  address1: string;
+  address2: string;
+  cityvillage: string;
+  stateprovince: string;
+  country: string;
+  postalcode: string;
+  latitude: string;
+  longitude: string;
+  countydistrict: string;
+  address3: string;
+  address4: string;
+  address5: string;
+  address6: string;
+  parentLocation: ParentLocation;
+  childLocations: string[];
+  retired: boolean;
+  attributes: string[];
+  address7: string;
+  address8: string;
+  address9: string;
+  address10: string;
+  address11: string;
+  address12: string;
+  address13: string;
+  address14: string;
+  address15: string;
+  resourceVersion: string;
+}
+
+export interface ParentLocation {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  address1: string;
+  address2: string;
+  cityVillage: string;
+  stateProvince: string;
+  country: string;
+  postalcode: string;
+  latitude: string;
+  longitude: string;
+  countydistrict: string;
+  address3: string;
+  address4: string;
+  address5: string;
+  address6: string;
+  parentLocation: ParentLocation;
+  childLocations: ChildLocations[];
+  retired: boolean;
+  attributes: string[];
+  address7: string;
+  address8: string;
+  address9: string;
+  address10: string;
+  address11: string;
+  address12: string;
+  address13: string;
+  address14: string;
+  address15: string;
+  resourceversion: string;
+}
+
+export interface ChildLocations {
+  uuid: string;
+  display: string;
+}
+
+export interface ParentLocation {
+  uuid: string;
+  display: string;
+}
+
+// get referral locations
+export function useReferralLocations() {
+  const config = useConfig();
+  const { laboratoryReferalDestinationUuid } = config;
+  const apiUrl = `${restBaseUrl}/concept/${laboratoryReferalDestinationUuid}`;
+  const { data, error, isLoading } = useSWRImmutable<FetchResponse>(apiUrl, openmrsFetch);
+
+  return {
+    referrals: data ? data?.data?.answers : [],
+    isLoading,
+  };
+}
+
+// get specimen types
+export function useSpecimenTypes() {
+  const config = useConfig();
+  const { laboratorySpecimenTypeConcept } = config;
+
+  const apiUrl = `${restBaseUrl}/concept/${laboratorySpecimenTypeConcept}`;
+  const { data, error, isLoading } = useSWRImmutable<FetchResponse>(apiUrl, openmrsFetch);
+
+  let specimenTypes = [];
+  if (data) {
+    if (data?.data?.setMembers?.length) {
+      specimenTypes = data.data.setMembers;
+    } else if (data?.data?.answers?.length) {
+      specimenTypes = data.data.answers;
+    }
+  }
+
+  return {
+    specimenTypes: specimenTypes,
+    isLoading,
+  };
+}
+
+// generate specimen id
+export async function GenerateSpecimenId(uuid: string) {
+  const abortController = new AbortController();
+  return openmrsFetch(`${restBaseUrl}/generatesampleId?uuid=${uuid}`, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+  });
+}
+
+// update Order
+export async function UpdateOrder(uuid: string, body: any) {
+  const abortController = new AbortController();
+  return openmrsFetch(`${restBaseUrl}/order/${uuid}/fulfillerdetails`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: body,
+  });
+}
+
+export async function GetOrderByUuid(uuid: string) {
+  const abortController = new AbortController();
+  return openmrsFetch(`${restBaseUrl}/order/${uuid}`, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+  });
+}

package/src/procedures-ordered/procedure-dialogs/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/procedures-ordered/procedure-instructions/instructions.scss

@@ -0,0 +1,24 @@
+@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;
+}
+.instructions {
+  margin-top: 1rem;
+  white-space: pre-wrap;
+}
+
+.modalBody {
+  :global(.cds--tooltip-trigger__wrapper) {
+    visibility: hidden;
+  }
+}

package/src/procedures-ordered/procedure-instructions/procedure-instructions-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 ProcedureInstructionsActionMenuProps {
+  order: any;
+  closeModal: () => void;
+}
+
+const ProcedureInstructionsActionMenu: React.FC<ProcedureInstructionsActionMenuProps> = ({ order }) => {
+  const { t } = useTranslation();
+
+  const launchProcedureInstructionsModal = useCallback(() => {
+    const dispose = showModal('procedure-instructions-modal', {
+      closeModal: () => dispose(),
+      order,
+    });
+  }, [order]);
+
+  return (
+    <OverflowMenuItem
+      itemText={t('procedureInstructionsModal', 'Procedure Instructions')}
+      onClick={launchProcedureInstructionsModal}
+      style={{
+        maxWidth: '100vw',
+      }}
+    />
+  );
+};
+
+export default ProcedureInstructionsActionMenu;

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

@@ -0,0 +1,78 @@
+import React from 'react';
+import {
+  Button,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Table,
+  TableRow,
+  TableBody,
+  TableCell,
+  Tile,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import styles from './instructions.scss';
+import { formatDate, parseDate } from '@openmrs/esm-framework';
+import { type Result } from '../../types';
+
+interface ProcedureInstructionsModalProps {
+  order: Result;
+  closeModal: () => void;
+}
+
+const ProcedureInstructionsModal: React.FC<ProcedureInstructionsModalProps> = ({ order, closeModal }) => {
+  const { t } = useTranslation();
+
+  const tableData = [
+    { key: 'Ordered Procedure', value: order.display },
+    { key: 'Order Urgency', value: order.urgency },
+    {
+      key: 'Schedule date',
+      value: order.scheduledDate ? formatDate(parseDate(order.scheduledDate)) : new Date().toLocaleDateString(),
+    },
+    { key: 'Number of repeats', value: order.numberOfRepeats },
+    { key: 'Frequency', value: order.frequency?.display },
+  ];
+
+  return (
+    <div>
+      <ModalHeader closeModal={closeModal} title={t('procedureInstructions', 'Procedure Order Instructions')} />
+      <ModalBody>
+        <div className={styles.modalBody}>
+          <section className={styles.section}>
+            <Table size="lg" useZebraStyles={false} aria-label="sample table">
+              <TableBody>
+                {tableData.map((row, index) => (
+                  <TableRow key={index}>
+                    <TableCell>{row.key}</TableCell>
+                    <TableCell>{row.value}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+            <b />
+            <Tile>
+              <p>
+                <b>Instructions</b>
+              </p>
+              <p className={styles.instructions}>{order.instructions}</p>
+            </Tile>
+            <Tile>
+              <p>
+                <b>Orderer comments</b>
+              </p>
+              <p className={styles.instructions}>{order.commentToFulfiller}</p>
+            </Tile>
+          </section>
+        </div>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {t('cancel', 'Cancel')}
+        </Button>
+      </ModalFooter>
+    </div>
+  );
+};
+
+export default ProcedureInstructionsModal;

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

@@ -0,0 +1,24 @@
+@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;
+}
+.instructions {
+  margin-top: 1rem;
+  white-space: pre-wrap;
+}
+
+.modalBody {
+  :global(.cds--tooltip-trigger__wrapper) {
+    visibility: hidden;
+  }
+}

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

@@ -0,0 +1,211 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@openmrs/esm-styleguide/src/vars' as 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: vars.$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: vars.$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: vars.$ui-02;
+    border-bottom: 1px solid vars.$ui-03;
+    border-top: 1px solid vars.$ui-03;
+  }
+
+  :global(.cds--data-table--zebra) tbody tr[data-parent-row]:nth-child(4n + 3) td {
+    background-color: vars.$ui-01;
+    border-bottom: 1px solid vars.$ui-03;
+  }
+}
+
+.tableContainer {
+  background-color: vars.$ui-01;
+  margin: 0 spacing.$spacing-05;
+  padding: 0;
+
+  a {
+    text-decoration: none;
+  }
+
+  th {
+    color: vars.$text-02;
+  }
+
+  :global(.cds--data-table) {
+    background-color: vars.$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: vars.$ui-03;
+}
+
+.locationFilter {
+  width: 25rem;
+}
+
+.search {
+  width: 100%;
+  max-width: 16rem;
+  background-color: vars.$ui-02;
+  border-bottom-color: vars.$ui-03;
+}
+
+.container {
+  background-color: vars.$ui-01;
+}
+
+.expandedLabQueueVisitRow {
+  :global(.cds--tab-content) {
+    padding: 0.5rem 0;
+  }
+
+  td {
+    padding: 0.5rem;
+
+    > div {
+      max-height: max-content !important;
+      background-color: vars.$ui-02;
+    }
+  }
+
+  th[colspan] td[colspan] > div:first-child {
+    padding: 0 1rem;
+  }
+}
+
+.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;
+}
+
+.single-line-display {
+  white-space: nowrap;
+}

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

@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import { type AssignedExtension, Extension, useConnectedExtensions } from '@openmrs/esm-framework';
+import { Tab, Tabs, TabList, TabPanels, TabPanel } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import styles from './procedure-queue.scss';
+import ProcedureOrderedList from './procedures-ordered-list.component';
+import { ComponentContext } from '@openmrs/esm-framework/src/internal';
+import { useProcedureOrderStats } from '../summary-tiles/procedure-summary.resource';
+
+const procedurePanelSlot = 'procedures-panels-slot';
+
+const ProcedureOrdersTabs: React.FC = () => {
+  const { t } = useTranslation();
+  const [selectedTab, setSelectedTab] = useState(0);
+  const tabExtensions = useConnectedExtensions(procedurePanelSlot) as AssignedExtension[];
+
+  // Get individual statistics each tab using their fulfillerstatus
+  const activeOrdersStats = useProcedureOrderStats('');
+  const inProgressStats = useProcedureOrderStats('IN_PROGRESS');
+  const referredStats = useProcedureOrderStats('EXCEPTION');
+  const notDoneStats = useProcedureOrderStats('DECLINED');
+  const completedStats = useProcedureOrderStats('COMPLETED');
+
+  // Returns appropriate statistics based on their tab names
+  const getStatsForTab = (tabName: string) => {
+    switch (tabName) {
+      case 'procedures-worklist-tab-component':
+        return inProgressStats;
+      case 'procedures-referred-tab-component':
+        return referredStats;
+      case 'procedures-not-done-tab-component':
+        return notDoneStats;
+      case 'procedures-completed-tab-component':
+        return completedStats;
+      default:
+        return { count: 0, isLoading: false, isError: false };
+    }
+  };
+
+  return (
+    <main className={`omrs-main-content`}>
+      <section className={styles.orderTabsContainer}>
+        <Tabs
+          selectedIndex={selectedTab}
+          onChange={({ selectedIndex }) => setSelectedTab(selectedIndex)}
+          className={styles.tabs}>
+          <TabList style={{ paddingLeft: '1rem' }} aria-label="Procedure tabs" contained>
+            <Tab>
+              {t('proceduresOrdered', 'Active Orders')} ({activeOrdersStats.isLoading ? '...' : activeOrdersStats.count}
+              )
+            </Tab>
+            {tabExtensions
+              .filter((extension) => Object.keys(extension.meta).length > 0)
+              .map((extension, index) => {
+                const { name, title } = extension.meta;
+                if (name && title) {
+                  const stats = getStatsForTab(extension.name);
+                  return (
+                    <Tab key={index} className={styles.tab} id={`${title || index}-tab`}>
+                      {t(title, {
+                        ns: extension.moduleName,
+                        defaultValue: title,
+                      })}
+                      ({stats.isLoading ? '...' : stats.count})
+                    </Tab>
+                  );
+                } else {
+                  return null;
+                }
+              })}
+          </TabList>
+          <TabPanels>
+            <TabPanel style={{ padding: 0 }}>
+              <ProcedureOrderedList fulfillerStatus="NEW" />
+            </TabPanel>
+            {tabExtensions
+              .filter((extension) => Object.keys(extension.meta).length > 0)
+              .map((extension, index) => {
+                return (
+                  <TabPanel key={`${extension.meta.title}-tab-${index}`}>
+                    <ComponentContext.Provider
+                      key={extension.id}
+                      value={{
+                        featureName: extension.meta.featureName,
+                        moduleName: extension.moduleName,
+                        extension: {
+                          extensionId: extension.id,
+                          extensionSlotName: procedurePanelSlot,
+                          extensionSlotModuleName: extension.moduleName,
+                        },
+                      }}>
+                      <Extension />
+                    </ComponentContext.Provider>
+                  </TabPanel>
+                );
+              })}
+          </TabPanels>
+        </Tabs>
+      </section>
+    </main>
+  );
+};
+
+export default ProcedureOrdersTabs;