@kenyaemr/esm-express-workflow-app 5.4.3 → 5.4.4-pre.100

package/src/components/consultation/consultation.utils.tsx

@@ -0,0 +1,222 @@
+import React from 'react';
+import { IconButton, InlineLoading } from '@carbon/react';
+import type { TFunction } from 'i18next';
+import { Renew } from '@carbon/react/icons';
+import type { QueueSummaryCard } from '../../shared/queue/queue-summary-cards.component';
+import type { QueueFilter, QueueEntry } from '../../types';
+import styles from './consultation.scss';
+
+type InvestigationCategorizedEntries = {
+  newLabOrders: QueueEntry[];
+  newRadiologyOrders: QueueEntry[];
+  newProcedureOrders: QueueEntry[];
+  completedLabOrders: QueueEntry[];
+  completedRadiologyOrders: QueueEntry[];
+  completedProcedureOrders: QueueEntry[];
+};
+
+type BuildConsultationCardsParams = {
+  t: TFunction;
+  waitingCount: number;
+  emergencyCount: number;
+  urgentCount: number;
+  notUrgentCount: number;
+  awaitingCount: number;
+  completedCount: number;
+  labAwaiting: number;
+  labCompleted: number;
+  radiologyAwaiting: number;
+  radiologyCompleted: number;
+  proceduresAwaiting: number;
+  proceduresCompleted: number;
+  isRefreshing: boolean;
+  isLoadingInvestigations: boolean;
+  onRefreshInvestigations: () => void;
+  totalVisitsCount?: number;
+  setFilters: React.Dispatch<React.SetStateAction<QueueFilter[]>>;
+  emergencyPriorityConceptUuid: string;
+  urgentPriorityConceptUuid: string;
+  notUrgentPriorityConceptUuid: string;
+  investigationCategorizedEntries: InvestigationCategorizedEntries;
+};
+
+export function buildConsultationCards({
+  t,
+  waitingCount,
+  emergencyCount,
+  urgentCount,
+  notUrgentCount,
+  awaitingCount,
+  completedCount,
+  labAwaiting,
+  labCompleted,
+  radiologyAwaiting,
+  radiologyCompleted,
+  proceduresAwaiting,
+  proceduresCompleted,
+  isRefreshing,
+  isLoadingInvestigations,
+  onRefreshInvestigations,
+  totalVisitsCount,
+  setFilters,
+  emergencyPriorityConceptUuid,
+  urgentPriorityConceptUuid,
+  notUrgentPriorityConceptUuid,
+  investigationCategorizedEntries,
+}: BuildConsultationCardsParams): Array<QueueSummaryCard> {
+  return [
+    {
+      title: t('awaitingConsultation', 'Awaiting consultation'),
+      value: waitingCount.toString(),
+      categories: [
+        {
+          label: t('emergency', 'Emergency'),
+          value: emergencyCount,
+          onClick: () => {
+            setFilters((prevFilters) => [
+              ...prevFilters.filter((f) => f.key !== 'priority'),
+              { key: 'priority', value: emergencyPriorityConceptUuid, label: t('emergency', 'Emergency') },
+            ]);
+          },
+        },
+        {
+          label: t('urgent', 'Urgent'),
+          value: urgentCount,
+          onClick: () => {
+            setFilters((prevFilters) => [
+              ...prevFilters.filter((f) => f.key !== 'priority'),
+              { key: 'priority', value: urgentPriorityConceptUuid, label: t('urgent', 'Urgent') },
+            ]);
+          },
+        },
+        {
+          label: t('notUrgent', 'Not Urgent'),
+          value: notUrgentCount,
+          onClick: () => {
+            setFilters((prevFilters) => [
+              ...prevFilters.filter((f) => f.key !== 'priority'),
+              { key: 'priority', value: notUrgentPriorityConceptUuid, label: t('notUrgent', 'Not Urgent') },
+            ]);
+          },
+        },
+      ],
+    },
+    {
+      title: t('investigationAwaiting', 'Investigation Awaiting'),
+      value: awaitingCount.toString(),
+      categories: [
+        {
+          label: t('lab', 'Lab'),
+          value: labAwaiting,
+          onClick: () => {
+            setFilters((prevFilters) => [
+              ...prevFilters.filter((f) => f.key !== 'service_awaiting'),
+              {
+                key: 'service_awaiting',
+                value: investigationCategorizedEntries.newLabOrders.map((entry) => entry.patient.uuid).join(','),
+                label: t('labAwaiting', 'Lab Awaiting'),
+              },
+            ]);
+          },
+        },
+        {
+          label: t('radiology', 'Radiology'),
+          value: radiologyAwaiting,
+          onClick: () => {
+            setFilters((prevFilters) => [
+              ...prevFilters.filter((f) => f.key !== 'service_awaiting'),
+              {
+                key: 'service_awaiting',
+                value: investigationCategorizedEntries.newRadiologyOrders.map((entry) => entry.patient.uuid).join(','),
+                label: t('radiologyAwaiting', 'Radiology Awaiting'),
+              },
+            ]);
+          },
+        },
+        {
+          label: t('procedures', 'Procedures'),
+          value: proceduresAwaiting,
+          onClick: () => {
+            setFilters((prevFilters) => [
+              ...prevFilters.filter((f) => f.key !== 'service_awaiting'),
+              {
+                key: 'service_awaiting',
+                value: investigationCategorizedEntries.newProcedureOrders.map((entry) => entry.patient.uuid).join(','),
+                label: t('proceduresAwaiting', 'Procedures Awaiting'),
+              },
+            ]);
+          },
+        },
+      ],
+      refreshButton:
+        isRefreshing || isLoadingInvestigations ? (
+          <InlineLoading description={t('refreshing', 'Refreshing...')} />
+        ) : (
+          <IconButton
+            label={t('refreshInvestigations', 'Refresh investigations')}
+            kind="ghost"
+            size="sm"
+            onClick={onRefreshInvestigations}
+            className={styles.refreshButton}>
+            <Renew size={16} />
+          </IconButton>
+        ),
+    },
+    {
+      title: t('investigationCompleted', 'Investigation Completed'),
+      value: completedCount.toString(),
+      categories: [
+        {
+          label: t('lab', 'Lab'),
+          value: labCompleted,
+          onClick: () => {
+            setFilters((prevFilters) => [
+              ...prevFilters.filter((f) => f.key !== 'service_completed'),
+              {
+                key: 'service_completed',
+                value: investigationCategorizedEntries.completedLabOrders.map((entry) => entry.patient.uuid).join(','),
+                label: t('labCompleted', 'Lab Completed'),
+              },
+            ]);
+          },
+        },
+        {
+          label: t('radiology', 'Radiology'),
+          value: radiologyCompleted,
+          onClick: () => {
+            setFilters((prevFilters) => [
+              ...prevFilters.filter((f) => f.key !== 'service_completed'),
+              {
+                key: 'service_completed',
+                value: investigationCategorizedEntries.completedRadiologyOrders
+                  .map((entry) => entry.patient.uuid)
+                  .join(','),
+                label: t('radiologyCompleted', 'Radiology Completed'),
+              },
+            ]);
+          },
+        },
+        {
+          label: t('procedures', 'Procedures'),
+          value: proceduresCompleted,
+          onClick: () => {
+            setFilters((prevFilters) => [
+              ...prevFilters.filter((f) => f.key !== 'service_completed'),
+              {
+                key: 'service_completed',
+                value: investigationCategorizedEntries.completedProcedureOrders
+                  .map((entry) => entry.patient.uuid)
+                  .join(','),
+                label: t('proceduresCompleted', 'Procedures Completed'),
+              },
+            ]);
+          },
+        },
+      ],
+    },
+    {
+      title: t('totalVisits', 'Total Visits'),
+      value: totalVisitsCount?.toString() ?? '0',
+    },
+  ];
+}

package/src/components/consultation/dashboard.component.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { spaBasePath } from '../../constants';
-import PatientChart from '../../shared/patient-chart/patient-chart.component';
 import Consultation from './consultation.component';
 
 type ConsultationDashboardProps = {
@@ -13,7 +12,6 @@ const ConsultationDashboard: React.FC<ConsultationDashboardProps> = ({ dashboard
     <BrowserRouter basename={`${spaBasePath}/consultation`}>
       <Routes>
         <Route path="/" element={<Consultation dashboardTitle={dashboardTitle} />} />
-        <Route path="/:patientUuid" element={<PatientChart navigationPath="consultation" />} />
       </Routes>
     </BrowserRouter>
   );

package/src/components/consultation/index.ts

@@ -1,37 +1,44 @@
-import { getSyncLifecycle } from '@openmrs/esm-framework';
-import { createDashboardLink } from '@openmrs/esm-patient-common-lib';
+import { getAsyncLifecycle } from '@openmrs/esm-framework';
 
 import { moduleName } from '../../constants';
-import { createLeftPanelLink } from '../../shared/dashboard-link/dashboard-link.component';
-import ClinicalEncounter from './clinical-encounter/clinical-encounter.component';
-import EncounterDetails from './clinical-encounter/encounter-details.component';
-import ConsultationDashboard from './dashboard.component';
 
 const options = {
   featureName: 'express-workflow',
   moduleName,
 };
 
-export const consultationDashboard = getSyncLifecycle(ConsultationDashboard, options);
+export const consultationDashboard = getAsyncLifecycle(() => import('./dashboard.component'), options);
 // t('consultation', 'Consultation')
-export const consultationLeftPanelLink = getSyncLifecycle(
-  createLeftPanelLink({
-    title: 'consultation',
-    name: 'consultation',
-  }),
+export const consultationLeftPanelLink = getAsyncLifecycle(
+  () =>
+    import('../../shared/dashboard-link/dashboard-link.component').then((m) => ({
+      default: m.createLeftPanelLink({
+        title: 'consultation',
+        name: 'consultation',
+      }),
+    })),
   options,
 );
 
-export const clinicalEncounter = getSyncLifecycle(ClinicalEncounter, options);
+export const clinicalEncounter = getAsyncLifecycle(
+  () => import('./clinical-encounter/clinical-encounter.component'),
+  options,
+);
 // TODO: register Stethoscope icon in the icon registry
 // t('clinicalEncounter', 'Clinical Encounter')
-export const clinicalEncounterLink = getSyncLifecycle(
-  createDashboardLink({
-    title: 'clinicalEncounter',
-    path: 'clinical-encounter',
-    icon: 'omrs-icon-syringe',
-  }),
+export const clinicalEncounterLink = getAsyncLifecycle(
+  () =>
+    import('@openmrs/esm-patient-common-lib').then((m) => ({
+      default: m.createDashboardLink({
+        title: 'clinicalEncounter',
+        path: 'clinical-encounter',
+        icon: 'omrs-icon-syringe',
+      }),
+    })),
   options,
 );
 
-export const encounterDetails = getSyncLifecycle(EncounterDetails, options);
+export const encounterDetails = getAsyncLifecycle(
+  () => import('./clinical-encounter/encounter-details.component'),
+  options,
+);

package/src/components/facility-dashboard/index.tsx

@@ -1,21 +1,22 @@
-import { getSyncLifecycle } from '@openmrs/esm-framework';
+import { getAsyncLifecycle } from '@openmrs/esm-framework';
 
-import FacilityDashboard from './facility-dashboard.component';
 import { moduleName } from '../../constants';
-import { createLeftPanelLink } from '../../shared/dashboard-link/dashboard-link.component';
 
 const options = {
   featureName: 'express-workflow',
   moduleName,
 };
 
-export const facilityDashboard = getSyncLifecycle(FacilityDashboard, options);
+export const facilityDashboard = getAsyncLifecycle(() => import('./facility-dashboard.component'), options);
 
 // t('dashboard', 'Dashboard')
-export const facilityLeftPanelLink = getSyncLifecycle(
-  createLeftPanelLink({
-    title: 'dashboard',
-    name: 'facility-dashboard',
-  }),
+export const facilityLeftPanelLink = getAsyncLifecycle(
+  () =>
+    import('../../shared/dashboard-link/dashboard-link.component').then((m) => ({
+      default: m.createLeftPanelLink({
+        title: 'dashboard',
+        name: 'facility-dashboard',
+      }),
+    })),
   options,
 );

package/src/components/laboratory/index.ts

@@ -1,21 +1,22 @@
-import { getSyncLifecycle } from '@openmrs/esm-framework';
+import { getAsyncLifecycle } from '@openmrs/esm-framework';
 
-import { createDashboardLink } from '@openmrs/esm-patient-common-lib';
 import { moduleName } from '../../constants';
-import LaboratoryTabs from './laboratory-tabs.component';
 
 const options = {
   featureName: 'express-workflow',
   moduleName,
 };
 
-export const laboratoryDashboard = getSyncLifecycle(LaboratoryTabs, options);
+export const laboratoryDashboard = getAsyncLifecycle(() => import('./laboratory-tabs.component'), options);
 // t('labOrders', 'Lab Orders')
-export const laboratoryLeftPanelLink = getSyncLifecycle(
-  createDashboardLink({
-    path: 'laboratory',
-    title: 'labOrders',
-    icon: 'omrs-icon-microscope',
-  }),
+export const laboratoryLeftPanelLink = getAsyncLifecycle(
+  () =>
+    import('@openmrs/esm-patient-common-lib').then((m) => ({
+      default: m.createDashboardLink({
+        path: 'laboratory',
+        title: 'labOrders',
+        icon: 'omrs-icon-microscope',
+      }),
+    })),
   options,
 );

package/src/components/laboratory/lab-table.component.tsx

@@ -1,22 +1,34 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Order } from '../../types/order/order';
 import { Layer } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { useConfig } from '@openmrs/esm-framework';
 import styles from './laboratory-tabs.scss';
-import { EmptyState, useLaunchWorkspaceRequiringVisit } from '@openmrs/esm-patient-common-lib';
+import { EmptyState, useLaunchWorkspaceRequiringVisit, usePatientChartStore } from '@openmrs/esm-patient-common-lib';
 import { ExpressWorkflowConfig } from '../../config-schema';
 import OrderTable from '../../shared/orders/OrderTable';
 
 type LabTableProps = {
-  orders: Order[];
+  orders: Array<Order>;
+  patientUuid: string;
+  mutateOrders: () => void;
 };
 
-const LabTable: React.FC<LabTableProps> = ({ orders }) => {
+const LabTable: React.FC<LabTableProps> = ({ orders, patientUuid, mutateOrders }) => {
   const { t } = useTranslation();
+  const { patient } = usePatientChartStore(patientUuid);
+  const windowProps = useMemo(() => ({ encounterUuid: orders[0]?.encounter?.uuid }), [orders[0]?.encounter?.uuid]);
+  const groupProps = useMemo(
+    () => ({
+      patient,
+      patientUuid: patient?.id,
+      visitContext: orders[0]?.encounter?.visit,
+      mutateVisitContext: mutateOrders,
+    }),
+    [patient, orders[0]?.encounter?.visit, mutateOrders],
+  );
   const { labOrderTypeUuid, orderableConceptSets } = useConfig<ExpressWorkflowConfig>();
-
-  const launchAddLabOrder = useLaunchWorkspaceRequiringVisit('add-lab-order');
+  const launchAddLabOrder = useLaunchWorkspaceRequiringVisit(patientUuid, 'order-basket');
 
   if (orders?.length === 0) {
     return (
@@ -24,7 +36,9 @@ const LabTable: React.FC<LabTableProps> = ({ orders }) => {
         <EmptyState
           displayText={t('orders', 'Orders')}
           headerTitle={t('laboratoryOrders', 'Laboratory Orders')}
-          launchForm={() => launchAddLabOrder({ orderTypeUuid: labOrderTypeUuid, orderableConceptSets })}
+          launchForm={() =>
+            launchAddLabOrder({ orderTypeUuid: labOrderTypeUuid, orderableConceptSets }, windowProps, groupProps)
+          }
         />
       </Layer>
     );
@@ -34,7 +48,7 @@ const LabTable: React.FC<LabTableProps> = ({ orders }) => {
     <OrderTable
       title={t('laboratoryOrders', 'Laboratory Orders')}
       orders={orders}
-      onAdd={() => launchAddLabOrder({ orderTypeUuid: labOrderTypeUuid, orderableConceptSets })}
+      onAdd={() => launchAddLabOrder(null, { encounterUuid: '' }, groupProps)}
       containerClassName={styles.labTableContainer}
       tableCellClassName={styles.tableCell}
       priorityPillClassName={styles.priorityPill}

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

@@ -19,8 +19,8 @@ const LaboratoryTabs: React.FC<LaboratoryTabsProps> = ({ patientUuid, patient })
       basePath="laboratory"
       resultsSlotName="ewf-laboratory-results-slot"
       orderTypeUuid={testOrderTypeUuid}
-      Table={({ orders }) => {
-        return <LabTable orders={orders} />;
+      Table={({ orders, mutateOrders }) => {
+        return <LabTable orders={orders} patientUuid={patientUuid} mutateOrders={mutateOrders} />;
       }}
     />
   );

package/src/components/mch/dashboard.component.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { spaBasePath } from '../../constants';
-import PatientChart from '../../shared/patient-chart/patient-chart.component';
 import MCH from './mch.component';
 
 type MchDashboardProps = {
@@ -13,7 +12,6 @@ const MCHDashboard: React.FC<MchDashboardProps> = ({ dashboardTitle }) => {
     <BrowserRouter basename={`${spaBasePath}/mch`}>
       <Routes>
         <Route path="/" element={<MCH dashboardTitle={dashboardTitle} />} />
-        <Route path="/:patientUuid" element={<PatientChart navigationPath="mch" />} />
       </Routes>
     </BrowserRouter>
   );

package/src/components/mch/index.tsx

@@ -1,20 +1,21 @@
-import { getSyncLifecycle } from '@openmrs/esm-framework';
+import { getAsyncLifecycle } from '@openmrs/esm-framework';
 
 import { moduleName } from '../../constants';
-import { createLeftPanelLink } from '../../shared/dashboard-link/dashboard-link.component';
-import MCHDashboard from './dashboard.component';
 
 const options = {
   featureName: 'express-workflow',
   moduleName,
 };
 
-export const mchDashboard = getSyncLifecycle(MCHDashboard, options);
+export const mchDashboard = getAsyncLifecycle(() => import('./dashboard.component'), options);
 // t('mch', 'MCH')
-export const mchLeftPanelLink = getSyncLifecycle(
-  createLeftPanelLink({
-    title: 'mch',
-    name: 'mch',
-  }),
+export const mchLeftPanelLink = getAsyncLifecycle(
+  () =>
+    import('../../shared/dashboard-link/dashboard-link.component').then((m) => ({
+      default: m.createLeftPanelLink({
+        title: 'mch',
+        name: 'mch',
+      }),
+    })),
   options,
 );

package/src/components/mch/mch.consultation.component.tsx

@@ -1,12 +1,14 @@
+import React, { useCallback, useMemo, useState } from 'react';
 import { IconButton, InlineLoading } from '@carbon/react';
 import { Renew } from '@carbon/react/icons';
 import { useConfig } from '@openmrs/esm-framework';
 import { EmptyState } from '@openmrs/esm-patient-common-lib';
-import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+
 import { ExpressWorkflowConfig } from '../../config-schema';
 import { useQueues } from '../../hooks/useServiceQueues';
 import QueueTab from '../../shared/queue/queue-tab.component';
+import QueueSummaryCards, { QueueSummaryCard } from '../../shared/queue/queue-summary-cards.component';
 import { Queue, QueueFilter } from '../../types';
 import {
   useConsultationQueueMetrics,
@@ -17,7 +19,7 @@ import styles from '../consultation/consultation.scss';
 
 const MCHConsultation: React.FC = () => {
   const { t } = useTranslation();
-  const { queues, isLoading, error } = useQueues();
+  const { queues, isLoading: isLoadingQueues } = useQueues();
   const [currQueue, setCurrQueue] = useState<Queue>();
   const [filters, setFilters] = useState<Array<QueueFilter>>([]);
   const [isRefreshing, setIsRefreshing] = useState(false);
@@ -26,7 +28,12 @@ const MCHConsultation: React.FC = () => {
     priorities: { emergencyPriorityConceptUuid, urgentPriorityConceptUuid, notUrgentPriorityConceptUuid },
     queueServiceConceptUuids,
   } = useConfig<ExpressWorkflowConfig>();
-  const { data: totalVisits, isLoading: isLoadingTotalVisits } = useTotalVisits();
+  const {
+    data: totalVisits,
+    isLoading: isLoadingTotalVisits,
+    isValidating: isValidatingTotalVisits,
+  } = useTotalVisits();
+
   const consultationQueues = queues.filter(
     (queue) =>
       queue.service.uuid === queueServiceConceptUuids.consultationService &&
@@ -38,21 +45,21 @@ const MCHConsultation: React.FC = () => {
   const {
     waitingEntries,
     isLoading: isLoadingQueueMetrics,
-    error: waitingError,
     emergencyEntries,
     urgentEntries,
     notUrgentEntries,
+    isValidating: isValidatingQueueMetrics,
   } = useConsultationQueueMetrics(activeQueue);
   const {
     awaitingCount,
     completedCount,
-    totalCount,
     lab,
     radiology,
     procedures,
     isLoading: isLoadingInvestigations,
     refresh: refreshInvestigations,
     investigationCategorizedEntries,
+    isValidating: isValidatingInvestigations,
   } = useInvestigationStats(activeQueue);
   // Single refresh handler for all investigations
   const handleRefresh = useCallback(async () => {
@@ -66,7 +73,7 @@ const MCHConsultation: React.FC = () => {
     }
   }, [refreshInvestigations]);
 
-  const cards = useMemo(
+  const cards: Array<QueueSummaryCard> = useMemo(
     () => [
       {
         title: t('awaitingConsultation', 'Awaiting consultation'),
@@ -258,7 +265,10 @@ const MCHConsultation: React.FC = () => {
     ],
   );
 
-  if (isLoading || isLoadingTotalVisits || isLoadingInvestigations || isLoadingQueueMetrics) {
+  const isLoading = isLoadingQueues || isLoadingTotalVisits || isLoadingInvestigations || isLoadingQueueMetrics;
+  const isValidating = isValidatingTotalVisits || isValidatingInvestigations || isValidatingQueueMetrics;
+
+  if (isLoading && !isValidating) {
     return <InlineLoading description={t('loadingQueues', 'Loading queues...')} />;
   }
 
@@ -271,14 +281,16 @@ const MCHConsultation: React.FC = () => {
     );
   }
   return (
-    <QueueTab
-      queues={consultationQueues}
-      navigatePath="mch"
-      cards={cards}
-      usePatientChart
-      filters={filters}
-      onFiltersChanged={setFilters}
-    />
+    <>
+      <QueueSummaryCards cards={cards} />
+      <QueueTab
+        queues={consultationQueues}
+        navigatePath="mch"
+        usePatientChart
+        filters={filters}
+        onFiltersChanged={setFilters}
+      />
+    </>
   );
 };