@kenyaemr/esm-express-workflow-app 5.4.4-pre.43 → 5.4.4-pre.430

package/src/components/pharmacy/pharmacy-tabs.component.tsx

@@ -1,29 +1,13 @@
-import React, { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Layer } from '@carbon/react';
-import { Activity, RequestQuote, CalendarTools } from '@carbon/react/icons';
+import React from 'react';
 
-import ExtensionTabs, { ExtensionTabItem } from '../../shared/tabs/extension-tabs.component';
+import ExtensionTabs from '../../shared/tabs/extension-tabs.component';
 
 type PharmacyTabsProps = {
   patientUuid: string;
-  patient: fhir.Patient;
 };
 
-const PharmacyTabs: React.FC<PharmacyTabsProps> = ({ patientUuid, patient }) => {
-  const { t } = useTranslation();
-  const state = useMemo(() => ({ patientUuid, patient }), [patientUuid, patient]);
-  const items: Array<ExtensionTabItem> = [
-    { label: t('orders', 'Orders'), icon: RequestQuote, slotName: 'ewf-orders-slot' },
-    { label: t('activeMedications', 'Active Medications'), icon: Activity, slotName: 'ewf-active-medications-slot' },
-    { label: t('pastMedications', 'Past Medications'), icon: CalendarTools, slotName: 'ewf-past-medications-slot' },
-  ];
-
-  return (
-    <Layer>
-      <ExtensionTabs items={items} state={state} />
-    </Layer>
-  );
+const PharmacyTabs: React.FC<PharmacyTabsProps> = ({ patientUuid }) => {
+  return <ExtensionTabs extensionSlotName={'pharmacy-tabs-slot'} patientUuid={patientUuid} />;
 };
 
 export default PharmacyTabs;

package/src/components/pharmacy/tabs/index.ts

@@ -0,0 +1,21 @@
+import { getAsyncLifecycle } from '@openmrs/esm-framework';
+
+const options = {
+  featureName: 'express-workflow',
+  moduleName: '@kenyaemr/esm-express-workflow-app',
+};
+// t('orders', 'Orders')
+export const pharmacyOrdersTab = getAsyncLifecycle(
+  () => import('../../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);
+// t('activeMedications', 'Active Medications')
+export const pharmacyActiveMedicationsTab = getAsyncLifecycle(
+  () => import('../../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);
+// t('pastMedications', 'Past Medications')
+export const pharmacyPastMedicationsTab = getAsyncLifecycle(
+  () => import('../../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);

package/src/components/preauth/index.ts

@@ -0,0 +1,22 @@
+import { getAsyncLifecycle } from '@openmrs/esm-framework';
+import { moduleName } from '../../constants';
+
+const options = {
+  featureName: 'express-workflow',
+  moduleName,
+};
+
+export const preauthDashboard = getAsyncLifecycle(() => import('./preauth-dashboard.component'), options);
+
+// t('careAuthorization', 'Care Authorizations')
+export const preauthDashboardLink = getAsyncLifecycle(
+  () =>
+    import('@openmrs/esm-patient-common-lib').then((m) => ({
+      default: m.createDashboardLink({
+        path: 'preauthorization',
+        title: 'careAuthorization',
+        icon: 'omrs-icon-money',
+      }),
+    })),
+  options,
+);

package/src/components/preauth/preauth-dashboard.component.tsx

@@ -0,0 +1,20 @@
+import React, { useMemo } from 'react';
+import { Layer } from '@carbon/react';
+import { ExtensionSlot } from '@openmrs/esm-framework';
+
+type PreauthDashboardProps = {
+  patientUuid: string;
+  patient: fhir.Patient;
+};
+
+const PreauthDashboard: React.FC<PreauthDashboardProps> = ({ patientUuid, patient }) => {
+  const state = useMemo(() => ({ patientUuid, patient }), [patientUuid, patient]);
+
+  return (
+    <Layer>
+      <ExtensionSlot name="ewf-preauth-dashboard-slot" state={state} />
+    </Layer>
+  );
+};
+
+export default PreauthDashboard;

package/src/components/procedures/index.ts

@@ -20,3 +20,19 @@ export const proceduresLeftPanelLink = getAsyncLifecycle(
     })),
   options,
 );
+
+// t("results", "Results")
+export const patientProcedureOrdersResults = getAsyncLifecycle(
+  () => import('../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);
+// t("order", "Orders")
+export const patientProcedureOrdersTab = getAsyncLifecycle(
+  () => import('../../components/procedures/procedures-table.component'),
+  options,
+);
+// t('anaesthetic', 'Anaesthetic')
+export const patientProcedureAnaestheticTab = getAsyncLifecycle(
+  () => import('../../components/anaesthetic/anaesthetic.component'),
+  options,
+);

package/src/components/procedures/procedure-queues/index.ts

@@ -0,0 +1,13 @@
+import { getSyncLifecycle } from '@openmrs/esm-framework';
+import ProcedureQueues from './procedure-queues.component';
+import ProcedureFormExtras from './procedure-form-extras.component';
+
+const moduleName = '@kenyaemr/esm-express-workflow-app';
+
+const options = {
+  featureName: 'express-workflow',
+  moduleName,
+};
+
+export const procedureQueues = getSyncLifecycle(ProcedureQueues, options);
+export const procedureFormExtras = getSyncLifecycle(ProcedureFormExtras, options);

package/src/components/procedures/procedure-queues/procedure-form-extras.component.tsx

@@ -0,0 +1,33 @@
+import { Button, Layer } from '@carbon/react';
+import { showModal, type Visit } from '@openmrs/esm-framework';
+import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './procedure-form-extras.scss';
+import { ArrowRight } from '@carbon/react/icons';
+
+type ProcedureFormExtrasProps = {
+  visitContext: Visit;
+  patient: fhir.Patient;
+};
+const ProcedureFormExtras: FC<ProcedureFormExtrasProps> = ({ visitContext, patient }) => {
+  const { t } = useTranslation();
+
+  const onMovePatientToQueue = () => {
+    const dispose = showModal('transition-patient-to-latest-queue-modal', {
+      closeModal: () => {
+        dispose();
+      },
+      activeVisit: visitContext,
+    });
+  };
+
+  return (
+    <Layer className={styles.gridRow}>
+      <Button kind="ghost" size="md" onClick={onMovePatientToQueue} renderIcon={ArrowRight}>
+        {t('moveToProcedureQueue', 'Move to procedure queue')}
+      </Button>
+    </Layer>
+  );
+};
+
+export default ProcedureFormExtras;

package/src/components/procedures/procedure-queues/procedure-form-extras.scss

@@ -0,0 +1,5 @@
+@use '@carbon/layout';
+
+.gridRow {
+  padding: layout.$spacing-03;
+}

package/src/components/procedures/procedure-queues/procedure-queues.component.tsx

@@ -0,0 +1,35 @@
+import React, { FC, useMemo, useState } from 'react';
+import ProcedureSummaryCards from './summary-cards.component';
+import { useProcedureServiceQueues } from './procedure-queues.resources';
+import ProcedureRoomTabs from './procedure-room-tabs.component';
+import { Order } from '@openmrs/esm-framework';
+
+type ProcedureQueuesProps = {
+  activeOrders?: Array<Order>;
+  inProgressOrders?: Array<Order>;
+  completedOrders?: Array<Order>;
+};
+const ProcedureQueues: FC<ProcedureQueuesProps> = ({ activeOrders, completedOrders, inProgressOrders }) => {
+  const [activeQueue, setActiveQueue] = useState<string>();
+  const { errorLoadingQueues, isLoadingQueues, procedureQueues } = useProcedureServiceQueues();
+  const currentQueue = useMemo(() => activeQueue ?? procedureQueues?.[0]?.uuid, [activeQueue, procedureQueues]);
+  return (
+    <>
+      <ProcedureSummaryCards
+        activeQueue={currentQueue}
+        activeOrders={activeOrders}
+        completedOrders={completedOrders}
+        inProgressOrders={inProgressOrders}
+      />
+      <ProcedureRoomTabs
+        activeQueue={currentQueue}
+        onActiveQueueChange={setActiveQueue}
+        procedureQueues={procedureQueues}
+        isLoadingQueues={isLoadingQueues}
+        errorLoadingQueues={errorLoadingQueues}
+      />
+    </>
+  );
+};
+
+export default ProcedureQueues;

package/src/components/procedures/procedure-queues/procedure-queues.resources.ts

@@ -0,0 +1,37 @@
+import { openmrsFetch, restBaseUrl, useConfig } from '@openmrs/esm-framework';
+import { useMemo } from 'react';
+import { ExpressWorkflowConfig } from '../../../config-schema';
+import { useQueues } from '../../../hooks/useServiceQueues';
+import type { QueueEntry, QueueEntryPayload } from '../../../types';
+
+export const addPatientToQueue = async (payload: QueueEntryPayload) => {
+  const url = `${restBaseUrl}/visit-queue-entry`;
+  const res = await openmrsFetch<QueueEntry>(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: payload,
+  });
+  return res.data;
+};
+export const useProcedureServiceQueues = () => {
+  const { queues, isLoading: isLoadingQueues, error: errorLoadingQueues } = useQueues();
+  const {
+    queueServiceConceptUuids: { procedureService },
+  } = useConfig<ExpressWorkflowConfig>();
+
+  const procedureQueues = useMemo(
+    () =>
+      queues
+        .filter((queue) => queue.service.uuid === procedureService && queue?.queueRooms?.length > 0)
+        .sort((a, b) => a.name.localeCompare(b.name)),
+    [queues, procedureService],
+  );
+
+  return {
+    procedureQueues,
+    isLoadingQueues,
+    errorLoadingQueues,
+  };
+};

package/src/components/procedures/procedure-queues/procedure-room-tabs.component.tsx

@@ -0,0 +1,80 @@
+import { Tab, TabList, TabPanel, TabPanels, Tabs, TabsSkeleton } from '@carbon/react';
+import { ErrorState } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import startCase from 'lodash/startCase';
+import { Queue } from '../../../types';
+import styles from './procedure-rooms.scss';
+import QueueProcedureTabs from './queue-procedure-tabs.component';
+
+type ProcedureRoomTabsProps = {
+  activeQueue: string;
+  onActiveQueueChange: (queue: string) => void;
+  procedureQueues: Queue[];
+  isLoadingQueues: boolean;
+  errorLoadingQueues: Error;
+};
+
+const ProcedureRoomTabs: React.FC<ProcedureRoomTabsProps> = ({
+  activeQueue,
+  onActiveQueueChange,
+  procedureQueues,
+  isLoadingQueues,
+  errorLoadingQueues,
+}) => {
+  const { t } = useTranslation();
+
+  if (isLoadingQueues) {
+    return (
+      <div className={styles.contentArea}>
+        <TabsSkeleton />
+      </div>
+    );
+  }
+
+  if (errorLoadingQueues) {
+    return (
+      <div className={styles.contentArea}>
+        <ErrorState error={errorLoadingQueues} headerTitle={t('errorLoadingQueues', 'Error loading queues')} />
+      </div>
+    );
+  }
+
+  if (!procedureQueues.length) {
+    return (
+      <div className={styles.contentArea}>
+        <ErrorState
+          headerTitle={t('noQueueRoomsConfigured', 'No queue rooms configured')}
+          error={{
+            response: { status: t('noQueueRoomsConfigured', 'No queue rooms configured') },
+          }}
+        />
+      </div>
+    );
+  }
+  return (
+    <div className={styles.tabsContainer}>
+      <Tabs
+        selectedIndex={procedureQueues.findIndex((queue) => queue.uuid === activeQueue)}
+        onChange={({ selectedIndex }) => {
+          onActiveQueueChange(procedureQueues[selectedIndex].uuid);
+        }}>
+        <TabList contained>
+          {procedureQueues.map((queue) => (
+            <Tab key={queue?.uuid}>{startCase(queue?.queueRooms?.[0]?.display)}</Tab>
+          ))}
+        </TabList>
+        <TabPanels>
+          {procedureQueues.map((queue) => (
+            <TabPanel key={queue?.uuid}>
+              <QueueProcedureTabs queue={queue.uuid} />
+            </TabPanel>
+          ))}
+        </TabPanels>
+      </Tabs>
+    </div>
+  );
+};
+
+export default ProcedureRoomTabs;

package/src/components/procedures/procedure-queues/procedure-rooms.scss

@@ -0,0 +1,13 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.contentArea {
+  padding: layout.$spacing-05;
+  min-height: 400px;
+}
+
+.tabsContainer {
+  margin-top: layout.$spacing-05;
+  padding: layout.$spacing-05;
+}

package/src/components/procedures/procedure-queues/queue-procedure-tabs.component.tsx

@@ -0,0 +1,34 @@
+import { ExtensionSlot, Order } from '@openmrs/esm-framework';
+import React, { FC, useCallback } from 'react';
+import { useQueueEntries } from '../../../hooks/useServiceQueues';
+
+type QueueProcedureTabsProps = {
+  queue: string;
+};
+const QueueProcedureTabs: FC<QueueProcedureTabsProps> = ({ queue }) => {
+  const {
+    queueEntries,
+    isLoading: isLoadingQueueEntries,
+    error: errorQueueEntries,
+  } = useQueueEntries({ queues: [queue] });
+  const isPatientInQueueByOrder = useCallback(
+    (order: Order) => {
+      return queueEntries?.some((entry) => entry.patient.uuid === order.patient.uuid);
+    },
+    [queueEntries],
+  );
+  const isPatientInQueueByPatient = useCallback(
+    (patientUuid: string) => {
+      return queueEntries?.some((entry) => entry.patient.uuid === patientUuid);
+    },
+    [queueEntries],
+  );
+  return (
+    <ExtensionSlot
+      name={'procedure-ordered-tabs-extension'}
+      state={{ filterByOrder: isPatientInQueueByOrder, filterByPatient: isPatientInQueueByPatient }}
+    />
+  );
+};
+
+export default QueueProcedureTabs;

package/src/components/procedures/procedure-queues/summary-cards.component.tsx

@@ -0,0 +1,81 @@
+import React, { useMemo } from 'react';
+import styles from './summary-cards.scss';
+import { useTranslation } from 'react-i18next';
+import { useQueueEntries } from '../../../hooks/useServiceQueues';
+import { Order } from '@openmrs/esm-framework';
+import { SkeletonText } from '@carbon/react';
+
+type ProcedureSummaryCardsProps = {
+  activeQueue: string;
+  activeOrders?: Array<Order>;
+  inProgressOrders?: Array<Order>;
+  completedOrders?: Array<Order>;
+};
+const ProcedureSummaryCards: React.FC<ProcedureSummaryCardsProps> = ({
+  activeQueue,
+  activeOrders = [],
+  inProgressOrders = [],
+  completedOrders = [],
+}) => {
+  const { queueEntries, isLoading, error } = useQueueEntries({ queues: [activeQueue] });
+  function groupOrdersById(orders: Array<Order>) {
+    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 activeOrdersCount = useMemo(
+    () =>
+      groupOrdersById(activeOrders).filter((patient) =>
+        queueEntries.some((entry) => entry.patient.uuid === patient.patientId),
+      ).length,
+    [activeOrders, queueEntries],
+  );
+  const inProgressOrdersCount = useMemo(
+    () =>
+      groupOrdersById(inProgressOrders).filter((patient) =>
+        queueEntries.some((entry) => entry.patient.uuid === patient.patientId),
+      ).length,
+    [inProgressOrders, queueEntries],
+  );
+  const completedOrdersCount = useMemo(
+    () =>
+      groupOrdersById(completedOrders).filter((patient) =>
+        queueEntries.some((entry) => entry.patient.uuid === patient.patientId),
+      ).length,
+    [completedOrders, queueEntries],
+  );
+
+  const { t } = useTranslation();
+  return (
+    <div className={styles.tileContainer}>
+      <div className={styles.tile}>
+        <strong>{t('awaitingProcedure', 'Awaiting Procedure')}</strong>
+        {isLoading ? <SkeletonText /> : <span>{activeOrdersCount}</span>}
+      </div>
+      <div className={styles.tile}>
+        <strong>{t('ongoingProcedures', 'Ongoing Procedures')}</strong>
+        {isLoading ? <SkeletonText /> : <span>{inProgressOrdersCount}</span>}
+      </div>
+      <div className={styles.tile}>
+        <strong>{t('completedProcedures', 'Completed Procedures')}</strong>
+        {isLoading ? <SkeletonText /> : <span>{completedOrdersCount}</span>}
+      </div>
+    </div>
+  );
+};
+
+export default ProcedureSummaryCards;

package/src/components/procedures/procedure-queues/summary-cards.scss

@@ -0,0 +1,35 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.tileContainer {
+  display: flex;
+  flex-direction: row;
+  gap: layout.$spacing-05;
+  padding: layout.$spacing-05 layout.$spacing-05;
+  flex-wrap: wrap;
+}
+
+.tile {
+  border: 1px solid colors.$gray-20;
+  padding: layout.$spacing-05;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: layout.$spacing-05;
+
+  & > span {
+    font-size: 2rem;
+    font-weight: lighter;
+    color: colors.$gray-70;
+  }
+}
+
+.tileContainer {
+  display: flex;
+  flex-direction: row;
+  gap: layout.$spacing-05;
+  padding: layout.$spacing-05 layout.$spacing-05;
+}

package/src/components/procedures/procedures-table.component.tsx

@@ -1,35 +1,84 @@
-import React from 'react';
-import { useConfig } from '@openmrs/esm-framework';
-import { EmptyState, useLaunchWorkspaceRequiringVisit } from '@openmrs/esm-patient-common-lib';
-import { Layer } from '@carbon/react';
+import { DataTableSkeleton, Layer } from '@carbon/react';
+import { ErrorState, useConfig } from '@openmrs/esm-framework';
+import {
+  EmptyState,
+  invalidateVisitAndEncounterData,
+  invalidateVisitByUuid,
+  useLaunchWorkspaceRequiringVisit,
+  usePatientChartStore,
+} from '@openmrs/esm-patient-common-lib';
+import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import OrderTable from '../../shared/orders/OrderTable';
 
-import { type Order } from '../../types/order/order';
+import { useSWRConfig } from 'swr';
 import { type ExpressWorkflowConfig } from '../../config-schema';
+import { getPatientPrintFields } from '../../shared/utils';
+import { usePatientOrders } from '../../hooks/useOrders';
 import styles from './procedures.scss';
 
 type ProceduresTableProps = {
-  orders: Order[];
+  patientUuid: string;
+  patient?: fhir.Patient;
 };
-const ProceduresTable: React.FC<ProceduresTableProps> = ({ orders }) => {
+
+const ProceduresTable: React.FC<ProceduresTableProps> = ({ patientUuid, patient }) => {
   const { t } = useTranslation();
-  const { imagingOrderTypeUuid, imagingOrderableConceptSets } = useConfig<ExpressWorkflowConfig>();
+  const { imagingOrderTypeUuid, imagingOrderableConceptSets, proceduresConceptClassUuid } =
+    useConfig<ExpressWorkflowConfig>();
+  const {
+    data: orders,
+    isLoading,
+    error,
+    mutate: mutateOrders,
+  } = usePatientOrders(patientUuid, 'any', imagingOrderTypeUuid, undefined, undefined);
+  const filteredOrders = useMemo(
+    () => orders?.filter((order) => order.concept?.conceptClass?.uuid === proceduresConceptClassUuid),
+    [orders, proceduresConceptClassUuid],
+  );
+
+  const { visitContext } = usePatientChartStore(patientUuid);
+  const { mutate: globalMutate } = useSWRConfig();
+  const windowProps = useMemo(() => ({ encounterUuid: filteredOrders?.[0]?.encounter?.uuid }), [filteredOrders]);
+  const groupProps = useMemo(
+    () => ({
+      patient,
+      patientUuid,
+      visitContext: visitContext,
+      mutateVisitContext: () => {
+        mutateOrders();
+        invalidateVisitByUuid(globalMutate, visitContext.uuid);
+        invalidateVisitAndEncounterData(globalMutate, patientUuid);
+      },
+    }),
+    [patient, patientUuid, visitContext, mutateOrders, globalMutate],
+  );
+  const launchOrderBasket = useLaunchWorkspaceRequiringVisit(patientUuid ?? '', 'order-basket');
 
-  const launchAddLabOrder = useLaunchWorkspaceRequiringVisit('add-procedures-order');
+  const { patientName, patientId, patientAge } = getPatientPrintFields(patient);
 
-  if (orders?.length === 0) {
+  if (isLoading) {
+    return <DataTableSkeleton />;
+  }
+  if (error) {
+    return <ErrorState headerTitle={t('proceduresOrders', 'Procedures Orders')} error={error} />;
+  }
+  if (filteredOrders?.length === 0) {
     return (
       <Layer>
         <EmptyState
           displayText={t('orders', 'Orders')}
           headerTitle={t('proceduresOrders', 'Procedures Orders')}
           launchForm={() =>
-            launchAddLabOrder({
-              orderTypeUuid: imagingOrderTypeUuid,
-              orderableConceptSets: imagingOrderableConceptSets,
-            })
+            launchOrderBasket(
+              {
+                orderTypeUuid: imagingOrderTypeUuid,
+                orderableConceptSets: imagingOrderableConceptSets,
+              },
+              windowProps,
+              groupProps,
+            )
           }
         />
       </Layer>
@@ -39,17 +88,26 @@ const ProceduresTable: React.FC<ProceduresTableProps> = ({ orders }) => {
   return (
     <OrderTable
       title={t('proceduresOrders', 'Procedures Orders')}
-      orders={orders}
+      orders={filteredOrders ?? []}
       onAdd={() =>
-        launchAddLabOrder({
-          orderTypeUuid: imagingOrderTypeUuid,
-          orderableConceptSets: imagingOrderableConceptSets,
-        })
+        launchOrderBasket(
+          {
+            orderTypeUuid: imagingOrderTypeUuid,
+            orderableConceptSets: imagingOrderableConceptSets,
+          },
+          windowProps,
+          groupProps,
+        )
       }
       containerClassName={styles.labTableContainer}
       tableCellClassName={styles.tableCell}
       priorityPillClassName={styles.priorityPill}
       statusPillClassName={styles.statusPill}
+      module="@kenyaemr/esm-procedure-orders-app"
+      orderType="procedure"
+      patientName={patientName}
+      patientId={patientId}
+      patientAge={patientAge}
     />
   );
 };