@kenyaemr/esm-express-workflow-app 5.4.4-pre.299 → 5.4.4-pre.3

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/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/procedures-table.component.tsx

@@ -1,5 +1,5 @@
-import React, { useMemo } from 'react';
-import { useConfig } from '@openmrs/esm-framework';
+import { DataTableSkeleton, Layer } from '@carbon/react';
+import { ErrorState, FHIRResource, useConfig } from '@openmrs/esm-framework';
 import {
   EmptyState,
   invalidateVisitAndEncounterData,
@@ -7,42 +7,60 @@ import {
   useLaunchWorkspaceRequiringVisit,
   usePatientChartStore,
 } from '@openmrs/esm-patient-common-lib';
-import { Layer } from '@carbon/react';
+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 { usePatientOrders } from '../../hooks/useOrders';
 import styles from './procedures.scss';
-import { useSWRConfig } from 'swr';
 
 type ProceduresTableProps = {
-  orders: Order[];
   patientUuid: string;
-  patient: fhir.Patient;
+  patient?: FHIRResource;
 };
-const ProceduresTable: React.FC<ProceduresTableProps> = ({ orders, patientUuid, patient }) => {
+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: orders[0]?.encounter?.uuid }), [orders[0]?.encounter?.uuid]);
+  const windowProps = useMemo(() => ({ encounterUuid: filteredOrders?.[0]?.encounter?.uuid }), [filteredOrders]);
   const groupProps = useMemo(
     () => ({
       patient,
-      patientUuid: patient?.id,
+      patientUuid,
       visitContext: visitContext,
       mutateVisitContext: () => {
+        mutateOrders();
         invalidateVisitByUuid(globalMutate, visitContext.uuid);
-        invalidateVisitAndEncounterData(globalMutate, patient.id);
+        invalidateVisitAndEncounterData(globalMutate, patientUuid);
       },
     }),
-    [globalMutate, visitContext, patient.id],
+    [patient, patientUuid, visitContext, mutateOrders, globalMutate],
   );
   const launchOrderBasket = useLaunchWorkspaceRequiringVisit(patientUuid ?? '', 'order-basket');
 
-  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
@@ -66,7 +84,7 @@ const ProceduresTable: React.FC<ProceduresTableProps> = ({ orders, patientUuid,
   return (
     <OrderTable
       title={t('proceduresOrders', 'Procedures Orders')}
-      orders={orders}
+      orders={filteredOrders ?? []}
       onAdd={() =>
         launchOrderBasket(
           {

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

@@ -1,32 +1,13 @@
 import React from 'react';
-import { useConfig } from '@openmrs/esm-framework';
-import { useTranslation } from 'react-i18next';
 
-import OrdersTabs from '../../shared/orders/OrdersTabs';
-import ProceduresTable from './procedures-table.component';
-import { ExpressWorkflowConfig } from '../../config-schema';
-import Anaesthetic from '../anaesthetic/anaesthetic.component';
+import ExtensionTabs from '../../shared/tabs/extension-tabs.component';
 
 type ProceduresTabsProps = {
   patientUuid: string;
-  patient: fhir.Patient;
 };
 
-const ProceduresTabs: React.FC<ProceduresTabsProps> = ({ patientUuid, patient }) => {
-  const { t } = useTranslation();
-  const { proceduresConceptClassUuid, imagingOrderTypeUuid } = useConfig<ExpressWorkflowConfig>();
-  return (
-    <OrdersTabs
-      patientUuid={patientUuid}
-      patient={patient}
-      basePath="procedures"
-      resultsSlotName="ewf-procedures-results-slot"
-      orderTypeUuid={imagingOrderTypeUuid}
-      filter={(order) => order.concept?.conceptClass?.uuid === proceduresConceptClassUuid}
-      Table={({ orders }) => <ProceduresTable orders={orders} patientUuid={patientUuid} patient={patient} />}
-      additionalTabs={[{ label: t('anaesthetic', 'Anaesthetic'), content: <Anaesthetic patientUuid={patientUuid} /> }]}
-    />
-  );
+const ProceduresTabs: React.FC<ProceduresTabsProps> = ({ patientUuid }) => {
+  return <ExtensionTabs extensionSlotName="patient-procedure-tabs-slot" patientUuid={patientUuid} />;
 };
 
 export default ProceduresTabs;

package/src/components/radiology-and-imaging/index.ts

@@ -23,3 +23,14 @@ export const radiologyAndImagingLeftPanelLink = getAsyncLifecycle(
     })),
   options,
 );
+
+// t("results", "Results")
+export const patientImagingOrdersResults = getAsyncLifecycle(
+  () => import('../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);
+// t("order", "Orders")
+export const patientImagingOrdersTab = getAsyncLifecycle(
+  () => import('../../components/radiology-and-imaging/radiology-and-imaging-table.component'),
+  options,
+);

package/src/components/radiology-and-imaging/radiology-and-imaging-table.component.tsx

@@ -1,37 +1,57 @@
 import React, { useMemo } from 'react';
-import { useConfig } from '@openmrs/esm-framework';
-import { EmptyState, useLaunchWorkspaceRequiringVisit, usePatientChartStore } from '@openmrs/esm-patient-common-lib';
-import { Layer } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
+import { DataTableSkeleton, Layer } from '@carbon/react';
+import { ErrorState, FHIRResource, useConfig } from '@openmrs/esm-framework';
+import { EmptyState, useLaunchWorkspaceRequiringVisit, usePatientChartStore } from '@openmrs/esm-patient-common-lib';
 import OrderTable from '../../shared/orders/OrderTable';
-
-import { type Order } from '../../types/order/order';
 import { type ExpressWorkflowConfig } from '../../config-schema';
+import { usePatientOrders } from '../../hooks/useOrders';
 import styles from './radiology-and-imaging.scss';
 
 type RadiologyAndImagingTableProps = {
-  orders: Array<Order>;
   patientUuid: string;
-  patient: fhir.Patient;
+  patient: FHIRResource;
 };
-const RadiologyAndImagingTable: React.FC<RadiologyAndImagingTableProps> = ({ orders, patientUuid, patient }) => {
+const RadiologyAndImagingTable: React.FC<RadiologyAndImagingTableProps> = ({ patientUuid, patient }) => {
   const { t } = useTranslation();
-  const { imagingOrderTypeUuid, imagingOrderableConceptSets } = useConfig<ExpressWorkflowConfig>();
+  const { imagingOrderTypeUuid, imagingOrderableConceptSets, imagingConceptClassUuid } =
+    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 === imagingConceptClassUuid),
+    [imagingConceptClassUuid, orders],
+  );
   const { mutateVisitContext, visitContext } = usePatientChartStore(patientUuid);
 
-  const windowProps = useMemo(() => ({ encounterUuid: orders[0]?.encounter?.uuid }), [orders[0]?.encounter?.uuid]);
+  const windowProps = useMemo(() => ({ encounterUuid: filteredOrders?.[0]?.encounter?.uuid }), [filteredOrders]);
   const groupProps = useMemo(
     () => ({
       patient,
-      patientUuid: patient?.id,
+      patientUuid,
       visitContext: visitContext,
-      mutateVisitContext: mutateVisitContext,
+      mutateVisitContext: () => {
+        mutateOrders();
+        mutateVisitContext();
+      },
     }),
-    [patient, visitContext, mutateVisitContext],
+    [patient, patientUuid, visitContext, mutateOrders, mutateVisitContext],
   );
   const launchAddLabOrder = useLaunchWorkspaceRequiringVisit(patientUuid, 'order-basket');
 
-  if (orders?.length === 0) {
+  if (isLoading) {
+    return <DataTableSkeleton />;
+  }
+
+  if (error) {
+    return <ErrorState headerTitle={t('radiologyAndImagingOrders', 'Radiology & Imaging Orders')} error={error} />;
+  }
+
+  if (filteredOrders?.length === 0) {
     return (
       <Layer>
         <EmptyState
@@ -55,7 +75,7 @@ const RadiologyAndImagingTable: React.FC<RadiologyAndImagingTableProps> = ({ ord
   return (
     <OrderTable
       title={t('radiologyAndImagingOrders', 'Radiology & Imaging Orders')}
-      orders={orders}
+      orders={filteredOrders ?? []}
       onAdd={() =>
         launchAddLabOrder(
           {

package/src/components/radiology-and-imaging/radiology-and-imaging.component.tsx

@@ -1,28 +1,12 @@
 import React from 'react';
-import { useConfig } from '@openmrs/esm-framework';
-import OrdersTabs from '../../shared/orders/OrdersTabs';
-import RadiologyAndImagingTable from './radiology-and-imaging-table.component';
-import { ExpressWorkflowConfig } from '../../config-schema';
+import ExtensionTabs from '../../shared/tabs/extension-tabs.component';
 
 type RadiologyAndImagingTabsProps = {
   patientUuid: string;
-  patient: fhir.Patient;
 };
-const imagingRadiologyConceptClassUuid = '8caa332c-efe4-4025-8b18-3398328e1323';
 
-const RadiologyAndImagingTabs: React.FC<RadiologyAndImagingTabsProps> = ({ patientUuid, patient }) => {
-  const { imagingOrderTypeUuid } = useConfig<ExpressWorkflowConfig>();
-  return (
-    <OrdersTabs
-      patientUuid={patientUuid}
-      patient={patient}
-      basePath="radiology-and-imaging"
-      resultsSlotName="ewf-radiology-and-imaging-results-slot"
-      orderTypeUuid={imagingOrderTypeUuid}
-      filter={(order) => order.concept?.conceptClass?.uuid === imagingRadiologyConceptClassUuid}
-      Table={({ orders }) => <RadiologyAndImagingTable orders={orders} patientUuid={patientUuid} patient={patient} />}
-    />
-  );
+const RadiologyAndImagingTabs: React.FC<RadiologyAndImagingTabsProps> = ({ patientUuid }) => {
+  return <ExtensionTabs extensionSlotName="patient-imaging-tabs-slot" patientUuid={patientUuid} />;
 };
 
 export default RadiologyAndImagingTabs;

package/src/components/registration/card/Local-card/local-card.component.tsx

@@ -115,12 +115,12 @@ const LocalPatientCard: React.FC<LocalPatientCardProps> = ({
   }, []);
 
   const launchCheckInWorkspace = async (patient: any, patientUuid: string) => {
-    await launchWorkspaceGroup2('ewf-patient-chart', {
+    const groupProps = {
       patient,
       patientUuid,
       visitContext: null as unknown as Visit,
       mutateVisitContext: () => {},
-    });
+    };
 
     launchWorkspace2<VisitFormProps, {}, {}>(
       'custom-start-visit-workspace-form',
@@ -129,7 +129,7 @@ const LocalPatientCard: React.FC<LocalPatientCardProps> = ({
         showPatientHeader: false,
       },
       {},
-      null,
+      groupProps,
     );
   };
 

package/src/components/registration/dependants/dependants.component.tsx

@@ -216,7 +216,12 @@ const DependentsComponent: React.FC<DependentProps> = ({
             showPatientHeader: false,
           },
           {},
-          null,
+          {
+            patient: localPatient,
+            patientUuid: localPatient.uuid,
+            visitContext: null as unknown as Visit,
+            mutateVisitContext: () => {},
+          },
         );
       } else {
         setSubmittingStates((prev) => ({ ...prev, [dependent.id]: true }));