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

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":">=2.24.0"},"pages":[{"component":"root","route":"express-workflow"},{"component":"queuesAdminHome","route":"queues-admin"},{"component":"appointmentsDashboard","route":"appointments"}],"extensions":[{"component":"appointmentsDashboardLink","name":"appointments-dashboard-link","slot":"appointments-left-panel-slot","meta":{"name":"appointments","slot":"appointments-dashboard-slot","title":"Appointments"}},{"component":"admissionsLeftPanelLink","name":"admissions-dashboard-link","slot":"express-workflow-left-panel-slot","order":9,"meta":{"name":"admissions","slot":"admissions-dashboard-slot","title":"Admissions"}},{"component":"admissionsDashboard","name":"admissions-dashboard","slot":"admissions-dashboard-slot"},{"component":"consultationLeftPanelLink","name":"consultation-dashboard-link","slot":"homepage-dashboard-slot","order":3,"meta":{"name":"consultation","slot":"consultation-dashboard-slot","title":"Consultation"}},{"component":"consultationDashboard","name":"consultation-dashboard","slot":"consultation-dashboard-slot"},{"component":"facilityLeftPanelLink","name":"facility-dashboard-link","slot":"homepage-dashboard-slot","order":0,"meta":{"name":"dashboard","slot":"facility-dashboard-slot","title":"Dashboard"}},{"component":"facilityDashboard","name":"facility-dashboard","slot":"facility-dashboard-slot"},{"component":"mchLeftPanelLink","name":"mch-dashboard-link","slot":"homepage-dashboard-slot","meta":{"name":"mch","slot":"mch-dashboard-slot","title":"MCH"}},{"component":"mchDashboard","name":"mch-dashboard","slot":"mch-dashboard-slot"},{"component":"registrationLeftPanelLink","name":"registration-dashboard-link","slot":"homepage-dashboard-slot","meta":{"name":"registration","slot":"registration-dashboard-slot","title":"Registration"}},{"component":"registrationDashboard","name":"registration-dashboard","slot":"registration-dashboard-slot"},{"component":"triageLeftPanelLink","name":"triage-dashboard-link","slot":"homepage-dashboard-slot","meta":{"name":"triage","slot":"triage-dashboard-slot","title":"Triage"}},{"component":"triageDashboard","name":"triage-dashboard","slot":"triage-dashboard-slot"},{"name":"custom-visit-form-queue-fields","component":"checkinFormExtraExtension","slot":"visit-form-bottom-slot","order":0},{"component":"reportsDashboardLink","name":"reports-homepage-dashboard-link","slot":"homepage-dashboard-slot","meta":{"name":"reports","slot":"reports-homepage-dashboard-slot","title":"Reports"}},{"component":"reportsDashboard","name":"reports-dashboard","slot":"reports-homepage-dashboard-slot"},{"name":"pharmacy-homepage-dashboard-link","component":"pharmacyLink","slot":"homepage-dashboard-slot","meta":{"name":"pharmacy","title":"Pharmacy","path":"pharmacy","slot":"pharmacy-homepage-dashboard-slot"}},{"name":"pharmacy-homepage-dashboard","component":"pharmacy","slot":"pharmacy-homepage-dashboard-slot","online":true,"offline":false},{"name":"ewf-pharmacy-orders-dashboard","component":"pharmacyOrders","slot":"ewf-orders-slot","online":true,"offline":false},{"name":"patient-summary-dashboard","component":"patientSummaryDashboard","slot":"patient-chart-summary-dashboard-slot"},{"name":"ewf-clinical-encounter-link","component":"clinicalEncounterLink","slot":"patient-chart-dashboard-slot","meta":{"name":"ewf-clinical-encounter","title":"Clinical Encounter","slot":"ewf-patient-chart-clinical-encounter-slot","path":"clinical-encounter","layoutMode":"anchored","hideDashboardTitle":true}},{"name":"ewf-clinical-encounter-dashboard","component":"clinicalEncounter","slot":"ewf-patient-chart-clinical-encounter-slot","online":true,"offline":false},{"name":"ewf-laboratory-dashboard-link","component":"laboratoryLeftPanelLink","slot":"patient-chart-dashboard-slot","meta":{"name":"ewf-laboratory","title":"Lab Orders","path":"laboratory","slot":"ewf-patient-chart-laboratory-dashboard-slot","layoutMode":"anchored","hideDashboardTitle":true}},{"name":"ewf-laboratory-dashboard","component":"laboratoryDashboard","slot":"ewf-patient-chart-laboratory-dashboard-slot","online":true,"offline":false},{"name":"ewf-radiology-and-imaging-dashboard-link","component":"radiologyAndImagingLeftPanelLink","slot":"patient-chart-dashboard-slot","meta":{"name":"ewf-radiology-and-imaging","title":"Radiology and Imaging","path":"radiology-and-imaging","slot":"ewf-patient-chart-radiology-and-imaging-dashboard-slot","layoutMode":"anchored","hideDashboardTitle":true}},{"name":"ewf-radiology-and-imaging-dashboard","component":"radiologyAndImagingDashboard","slot":"ewf-patient-chart-radiology-and-imaging-dashboard-slot","online":true,"offline":false},{"name":"ewf-procedures-dashboard-link","component":"proceduresLeftPanelLink","slot":"patient-chart-dashboard-slot","meta":{"name":"ewf-procedures","title":"Procedures","path":"procedures","slot":"ewf-patient-chart-procedures-dashboard-slot","layoutMode":"anchored","hideDashboardTitle":true}},{"name":"ewf-procedures-dashboard","component":"proceduresDashboard","slot":"ewf-patient-chart-procedures-dashboard-slot","online":true,"offline":false},{"name":"ewf-pharmacy-dashboard-link","component":"pharmacyPatientChartDashboardLink","slot":"patient-chart-dashboard-slot","meta":{"name":"ewf-pharmacy","title":"Prescription","path":"pharmacy","slot":"ewf-patient-chart-pharmacy-dashboard-slot","layoutMode":"anchored","hideDashboardTitle":true}},{"name":"ewf-pharmacy-dashboard","component":"pharmacyTabs","slot":"ewf-patient-chart-pharmacy-dashboard-slot","online":true,"offline":false},{"name":"ewf-admissions-dashboard-link","component":"admissionsDashboardLink","slot":"patient-chart-dashboard-slot","meta":{"name":"ewf-admissions","title":"In-patient","path":"admissions","slot":"ewf-patient-chart-admissions-dashboard-slot","layoutMode":"anchored","hideDashboardTitle":true}},{"name":"ewf-admissions-dashboard","component":"admissionsDashboard","slot":"ewf-patient-chart-admissions-dashboard-slot","online":true,"offline":false},{"name":"ewf-homepage-dashboard-link","component":"homepageDashboardLink","slot":"patient-chart-dashboard-slot","order":0},{"name":"ewf-encounter-details-dashboard","component":"encounterDetails","slot":"ewf-clinical-encounter-slot","online":true,"offline":false}],"workspaces":[{"name":"express-workflow-workspace","component":"expressWorkflowWorkspace","title":"Express Workflow Workspace","type":"workspace","canMaximize":true,"canHide":true}],"modals":[{"component":"otpVerificationModal","name":"otp-verification-modal"},{"component":"facilityDashboardAuthorizationModal","name":"facility-dashboard-authorization-form-modal"}],"workspaceGroups":[{"name":"express-workflow","members":["add-drug-order","order-basket","add-lab-order","express-workflow-workspace","start-visit-workspace-form"]}],"version":"5.4.3"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":">=2.24.0"},"pages":[{"component":"root","route":"express-workflow"},{"component":"queuesAdminHome","route":"queues-admin"},{"component":"appointmentsDashboard","route":"appointments"}],"extensions":[{"component":"appointmentsDashboardLink","name":"appointments-dashboard-link","slot":"appointments-left-panel-slot","meta":{"name":"appointments","slot":"appointments-dashboard-slot","title":"Appointments"}},{"component":"admissionsLeftPanelLink","name":"admissions-dashboard-link","slot":"express-workflow-left-panel-slot","order":9,"meta":{"name":"admissions","slot":"admissions-dashboard-slot","title":"Admissions"}},{"component":"admissionsDashboard","name":"admissions-dashboard","slot":"admissions-dashboard-slot"},{"component":"consultationLeftPanelLink","name":"consultation-dashboard-link","slot":"homepage-dashboard-slot","order":3,"meta":{"name":"consultation","slot":"consultation-dashboard-slot","title":"Consultation"}},{"component":"consultationDashboard","name":"consultation-dashboard","slot":"consultation-dashboard-slot"},{"component":"facilityLeftPanelLink","name":"facility-dashboard-link","slot":"homepage-dashboard-slot","order":0,"meta":{"name":"dashboard","slot":"facility-dashboard-slot","title":"Dashboard"}},{"component":"facilityDashboard","name":"facility-dashboard","slot":"facility-dashboard-slot"},{"component":"mchLeftPanelLink","name":"mch-dashboard-link","slot":"homepage-dashboard-slot","meta":{"name":"mch","slot":"mch-dashboard-slot","title":"MCH"}},{"component":"mchDashboard","name":"mch-dashboard","slot":"mch-dashboard-slot"},{"component":"registrationLeftPanelLink","name":"registration-dashboard-link","slot":"homepage-dashboard-slot","meta":{"name":"registration","slot":"registration-dashboard-slot","title":"Registration"}},{"component":"registrationDashboard","name":"registration-dashboard","slot":"registration-dashboard-slot"},{"component":"triageLeftPanelLink","name":"triage-dashboard-link","slot":"homepage-dashboard-slot","meta":{"name":"triage","slot":"triage-dashboard-slot","title":"Triage"}},{"component":"triageDashboard","name":"triage-dashboard","slot":"triage-dashboard-slot"},{"name":"custom-visit-form-queue-fields","component":"checkinFormExtraExtension","slot":"visit-form-bottom-slot","order":0},{"component":"reportsDashboardLink","name":"reports-homepage-dashboard-link","slot":"homepage-dashboard-slot","meta":{"name":"reports","slot":"reports-homepage-dashboard-slot","title":"Reports"}},{"component":"reportsDashboard","name":"reports-dashboard","slot":"reports-homepage-dashboard-slot"},{"name":"pharmacy-homepage-dashboard-link","component":"pharmacyLink","slot":"homepage-dashboard-slot","meta":{"name":"pharmacy","title":"Pharmacy","path":"pharmacy","slot":"pharmacy-homepage-dashboard-slot"}},{"name":"pharmacy-homepage-dashboard","component":"pharmacy","slot":"pharmacy-homepage-dashboard-slot","online":true,"offline":false},{"name":"ewf-pharmacy-orders-dashboard","component":"pharmacyOrders","slot":"ewf-orders-slot","online":true,"offline":false},{"name":"patient-summary-dashboard","component":"patientSummaryDashboard","slot":"patient-chart-summary-dashboard-slot"},{"name":"ewf-clinical-encounter-link","component":"clinicalEncounterLink","slot":"patient-chart-dashboard-slot","meta":{"name":"ewf-clinical-encounter","title":"Clinical Encounter","slot":"ewf-patient-chart-clinical-encounter-slot","path":"clinical-encounter","layoutMode":"anchored","hideDashboardTitle":true}},{"name":"ewf-clinical-encounter-dashboard","component":"clinicalEncounter","slot":"ewf-patient-chart-clinical-encounter-slot","online":true,"offline":false},{"name":"ewf-laboratory-dashboard-link","component":"laboratoryLeftPanelLink","slot":"patient-chart-dashboard-slot","meta":{"name":"ewf-laboratory","title":"Lab Orders","path":"laboratory","slot":"ewf-patient-chart-laboratory-dashboard-slot","layoutMode":"anchored","hideDashboardTitle":true}},{"name":"ewf-laboratory-dashboard","component":"laboratoryDashboard","slot":"ewf-patient-chart-laboratory-dashboard-slot","online":true,"offline":false},{"name":"ewf-radiology-and-imaging-dashboard-link","component":"radiologyAndImagingLeftPanelLink","slot":"patient-chart-dashboard-slot","meta":{"name":"ewf-radiology-and-imaging","title":"Radiology and Imaging","path":"radiology-and-imaging","slot":"ewf-patient-chart-radiology-and-imaging-dashboard-slot","layoutMode":"anchored","hideDashboardTitle":true}},{"name":"ewf-radiology-and-imaging-dashboard","component":"radiologyAndImagingDashboard","slot":"ewf-patient-chart-radiology-and-imaging-dashboard-slot","online":true,"offline":false},{"name":"ewf-procedures-dashboard-link","component":"proceduresLeftPanelLink","slot":"patient-chart-dashboard-slot","meta":{"name":"ewf-procedures","title":"Procedures","path":"procedures","slot":"ewf-patient-chart-procedures-dashboard-slot","layoutMode":"anchored","hideDashboardTitle":true}},{"name":"ewf-procedures-dashboard","component":"proceduresDashboard","slot":"ewf-patient-chart-procedures-dashboard-slot","online":true,"offline":false},{"name":"ewf-pharmacy-dashboard-link","component":"pharmacyPatientChartDashboardLink","slot":"patient-chart-dashboard-slot","meta":{"name":"ewf-pharmacy","title":"Prescription","path":"pharmacy","slot":"ewf-patient-chart-pharmacy-dashboard-slot","layoutMode":"anchored","hideDashboardTitle":true}},{"name":"ewf-pharmacy-dashboard","component":"pharmacyTabs","slot":"ewf-patient-chart-pharmacy-dashboard-slot","online":true,"offline":false},{"name":"ewf-admissions-dashboard-link","component":"admissionsDashboardLink","slot":"patient-chart-dashboard-slot","meta":{"name":"ewf-admissions","title":"In-patient","path":"admissions","slot":"ewf-patient-chart-admissions-dashboard-slot","layoutMode":"anchored","hideDashboardTitle":true}},{"name":"ewf-admissions-dashboard","component":"admissionsDashboard","slot":"ewf-patient-chart-admissions-dashboard-slot","online":true,"offline":false},{"name":"ewf-homepage-dashboard-link","component":"homepageDashboardLink","slot":"patient-chart-dashboard-slot","order":0},{"name":"ewf-encounter-details-dashboard","component":"encounterDetails","slot":"ewf-clinical-encounter-slot","online":true,"offline":false}],"workspaces":[{"name":"express-workflow-workspace","component":"expressWorkflowWorkspace","title":"Express Workflow Workspace","type":"workspace","canMaximize":true,"canHide":true}],"modals":[{"component":"otpVerificationModal","name":"otp-verification-modal"},{"component":"facilityDashboardAuthorizationModal","name":"facility-dashboard-authorization-form-modal"}],"workspaceGroups":[{"name":"express-workflow","members":["add-drug-order","order-basket","add-lab-order","express-workflow-workspace","start-visit-workspace-form"]}],"version":"5.4.4-pre.12"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-express-workflow-app",
-  "version": "5.4.3",
+  "version": "5.4.4-pre.12",
   "description": "Express workflow app for OpenMRS 3",
   "keywords": [
     "openmrs",
@@ -54,5 +54,6 @@
   },
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "stableVersion": "5.4.3"
 }

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

@@ -1,5 +1,4 @@
-import { IconButton, InlineLoading } from '@carbon/react';
-import { Renew } from '@carbon/react/icons';
+import { InlineLoading } from '@carbon/react';
 import { ExtensionSlot, HomePictogram, PageHeader, PageHeaderContent, useConfig } from '@openmrs/esm-framework';
 import capitalize from 'lodash-es/capitalize';
 import React, { useCallback, useMemo, useState } from 'react';
@@ -7,8 +6,10 @@ 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, useInvestigationStats, useTotalVisits } from './consultation.resource';
+import { buildConsultationCards } from './consultation.utils';
 import styles from './consultation.scss';
 
 type ConsultationProps = {
@@ -22,7 +23,7 @@ const Consultation: React.FC<ConsultationProps> = ({ dashboardTitle }) => {
     queueServiceConceptUuids,
   } = useConfig<ExpressWorkflowConfig>();
   const [currQueue, setCurrQueue] = useState<Queue>();
-  const { queues, isLoading, error } = useQueues();
+  const { queues, isLoading: isLoadingQueues, isValidating: isValidatingQueues } = useQueues();
   const [isRefreshing, setIsRefreshing] = useState(false);
 
   const consultationQueues = queues.filter(
@@ -34,8 +35,8 @@ const Consultation: React.FC<ConsultationProps> = ({ dashboardTitle }) => {
   const activeQueue = useMemo(() => currQueue ?? consultationQueues[0], [currQueue, consultationQueues]);
   const {
     waitingEntries,
-    isLoading: isLoadingQueuemetrics,
-    error: waitingError,
+    isLoading: isLoadingQueueMetrics,
+    isValidating: isValidatingQueueMetrics,
     emergencyEntries,
     urgentEntries,
     notUrgentEntries,
@@ -46,7 +47,6 @@ const Consultation: React.FC<ConsultationProps> = ({ dashboardTitle }) => {
   const {
     awaitingCount,
     completedCount,
-    totalCount,
     lab,
     radiology,
     procedures,
@@ -67,168 +67,32 @@ const Consultation: React.FC<ConsultationProps> = ({ dashboardTitle }) => {
     }
   }, [refreshInvestigations]);
 
-  const cards = useMemo(
-    () => [
-      {
-        title: t('awaitingConsultation', 'Awaiting consultation'),
-        value: waitingEntries.length.toString(),
-        categories: [
-          {
-            label: t('emergency', 'Emergency'),
-            value: emergencyEntries.length,
-            onClick: () => {
-              setFilters((prevFilters) => [
-                ...prevFilters.filter((f) => f.key !== 'priority'),
-                { key: 'priority', value: emergencyPriorityConceptUuid, label: t('emergency', 'Emergency') },
-              ]);
-            },
-          },
-          {
-            label: t('urgent', 'Urgent'),
-            value: urgentEntries.length,
-            onClick: () => {
-              setFilters((prevFilters) => [
-                ...prevFilters.filter((f) => f.key !== 'priority'),
-                { key: 'priority', value: urgentPriorityConceptUuid, label: t('urgent', 'Urgent') },
-              ]);
-            },
-          },
-          {
-            label: t('notUrgent', 'Not Urgent'),
-            value: notUrgentEntries.length,
-            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: lab.awaiting,
-            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: radiology.awaiting,
-            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: procedures.awaiting,
-            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={handleRefresh}
-              className={styles.refreshButton}>
-              <Renew size={16} />
-            </IconButton>
-          ),
-      },
-      {
-        title: t('investigationCompleted', 'Investigation Completed'),
-        value: completedCount.toString(),
-        categories: [
-          {
-            label: t('lab', 'Lab'),
-            value: lab.completed,
-            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: radiology.completed,
-            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: procedures.completed,
-            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: totalVisits?.length?.toString() ?? '0',
-      },
-    ],
+  const cards: Array<QueueSummaryCard> = useMemo(
+    () =>
+      buildConsultationCards({
+        t,
+        waitingCount: waitingEntries.length,
+        emergencyCount: emergencyEntries.length,
+        urgentCount: urgentEntries.length,
+        notUrgentCount: notUrgentEntries.length,
+        awaitingCount,
+        completedCount,
+        labAwaiting: lab.awaiting,
+        labCompleted: lab.completed,
+        radiologyAwaiting: radiology.awaiting,
+        radiologyCompleted: radiology.completed,
+        proceduresAwaiting: procedures.awaiting,
+        proceduresCompleted: procedures.completed,
+        isRefreshing,
+        isLoadingInvestigations,
+        onRefreshInvestigations: handleRefresh,
+        totalVisitsCount: totalVisits?.length,
+        setFilters,
+        emergencyPriorityConceptUuid,
+        urgentPriorityConceptUuid,
+        notUrgentPriorityConceptUuid,
+        investigationCategorizedEntries,
+      }),
     [
       t,
       waitingEntries.length,
@@ -236,6 +100,7 @@ const Consultation: React.FC<ConsultationProps> = ({ dashboardTitle }) => {
       urgentEntries.length,
       notUrgentEntries.length,
       awaitingCount,
+      completedCount,
       lab.awaiting,
       lab.completed,
       radiology.awaiting,
@@ -245,21 +110,20 @@ const Consultation: React.FC<ConsultationProps> = ({ dashboardTitle }) => {
       isRefreshing,
       isLoadingInvestigations,
       handleRefresh,
-      completedCount,
       totalVisits?.length,
       emergencyPriorityConceptUuid,
       urgentPriorityConceptUuid,
       notUrgentPriorityConceptUuid,
-      investigationCategorizedEntries.newLabOrders,
-      investigationCategorizedEntries.newRadiologyOrders,
-      investigationCategorizedEntries.newProcedureOrders,
-      investigationCategorizedEntries.completedLabOrders,
-      investigationCategorizedEntries.completedRadiologyOrders,
-      investigationCategorizedEntries.completedProcedureOrders,
+      investigationCategorizedEntries,
     ],
   );
 
-  if (isLoading || isLoadingTotalVisits || isLoadingInvestigations || isLoadingQueuemetrics) {
+  const isLoading =
+    (isLoadingQueues || isLoadingQueueMetrics || isLoadingTotalVisits || isLoadingInvestigations) &&
+    !isValidatingQueues &&
+    !isValidatingQueueMetrics;
+
+  if (isLoading) {
     return <InlineLoading description={t('loadingQueues', 'Loading queues...')} />;
   }
 
@@ -269,9 +133,9 @@ const Consultation: React.FC<ConsultationProps> = ({ dashboardTitle }) => {
         <PageHeaderContent title={capitalize(dashboardTitle)} illustration={<HomePictogram />} />
         <ExtensionSlot name="provider-banner-info-slot" />
       </PageHeader>
+      <QueueSummaryCards cards={cards} />
       <QueueTab
         queues={consultationQueues}
-        cards={cards}
         navigatePath="consultation"
         usePatientChart
         filters={filters}

package/src/components/consultation/consultation.resource.ts

@@ -2,7 +2,7 @@ import { openmrsFetch, restBaseUrl, useConfig, Visit } from '@openmrs/esm-framew
 import { FulfillerStatus, Order } from '@openmrs/esm-patient-common-lib';
 import dayjs from 'dayjs';
 import useSWR from 'swr';
-import { useMemo, useCallback } from 'react';
+import { useMemo, useCallback, useEffect, useState } from 'react';
 import { Queue, QueueEntry } from '../../types';
 import { ExpressWorkflowConfig } from '../../config-schema';
 import { useQueueEntries } from '../../hooks/useServiceQueues';
@@ -25,17 +25,22 @@ export const useTotalVisits = () => {
     'YYYY-MM-DD',
   )}`;
 
-  const { data, error, isLoading, mutate } = useSWR<{ data: { results: Array<Visit> } }>(visitsUrl, openmrsFetch, {
-    revalidateOnFocus: false,
-    revalidateOnReconnect: false,
-    dedupingInterval: 60000,
-  });
+  const { data, error, isLoading, mutate, isValidating } = useSWR<{ data: { results: Array<Visit> } }>(
+    visitsUrl,
+    openmrsFetch,
+    {
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+      dedupingInterval: 60000,
+    },
+  );
 
   return {
     data: data?.data?.results,
     error,
     isLoading,
     mutate,
+    isValidating,
   };
 };
 
@@ -199,7 +204,7 @@ function useProcedureOrders(fulfillerStatus?: string) {
 }
 
 export const useInvestigationStats = (queue?: Queue) => {
-  const { isLoading: isLoadingQueueMetrics, waitingEntries } = useConsultationQueueMetrics(queue);
+  const { isLoading: isLoadingQueueMetrics, waitingEntries, isValidating } = useConsultationQueueMetrics(queue);
 
   // Fetch all investigation orders
   const {
@@ -381,6 +386,7 @@ export const useInvestigationStats = (queue?: Queue) => {
     isLoading,
     refresh,
     investigationCategorizedEntries,
+    isValidating,
   };
 };
 
@@ -389,21 +395,25 @@ export const useConsultationQueueMetrics = (queue?: Queue) => {
   const {
     queueEntries: waitingEntries,
     isLoading: isLoadingWaiting,
+    isValidating: isValidatingWaiting,
     error: waitingError,
   } = useQueueEntries({
     service: [queueServiceConceptUuids.consultationService],
     statuses: [queueStatusConceptUuids.waitingStatus, queueStatusConceptUuids.inServiceStatus],
     location: queue?.location?.uuid ? [queue.location.uuid] : undefined,
+    startedOnOrAfter: dayjs().subtract(24, 'hour').format('YYYY-MM-DD HH:mm:ss'),
   });
 
   const _waitingEntries = useMemo(
     () => waitingEntries.filter((entry) => entry?.queue?.uuid === queue?.uuid),
     [waitingEntries, queue],
   );
+
   return {
     isLoading: isLoadingWaiting,
     error: waitingError,
     waitingEntries: _waitingEntries,
+    isValidating: isValidatingWaiting,
     emergencyEntries: useMemo(
       () => _waitingEntries.filter((entry) => entry.priority.uuid === priorities?.emergencyPriorityConceptUuid),
       [_waitingEntries, priorities?.emergencyPriorityConceptUuid],

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

@@ -0,0 +1,222 @@
+import React from 'react';
+import { IconButton, InlineLoading } from '@carbon/react';
+import { Renew } from '@carbon/react/icons';
+import type { TFunction } from 'react-i18next';
+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',
+    },
+  ];
+}