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

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

@@ -1,14 +1,13 @@
-import { IconButton, InlineLoading } from '@carbon/react';
-import { Renew } from '@carbon/react/icons';
-import { ExtensionSlot, HomePictogram, PageHeader, PageHeaderContent, useConfig } from '@openmrs/esm-framework';
+import React, { useMemo, useState } from 'react';
 import capitalize from 'lodash-es/capitalize';
-import React, { useCallback, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { ExpressWorkflowConfig } from '../../config-schema';
+import { TabsSkeleton } from '@carbon/react';
+import { ExtensionSlot, HomePictogram, PageHeader, PageHeaderContent, useConfig } from '@openmrs/esm-framework';
+
+import { type ExpressWorkflowConfig } from '../../config-schema';
 import { useQueues } from '../../hooks/useServiceQueues';
 import QueueTab from '../../shared/queue/queue-tab.component';
-import { Queue, QueueFilter } from '../../types';
-import { useConsultationQueueMetrics, useInvestigationStats, useTotalVisits } from './consultation.resource';
+import ConsultationSummaryCards from './consultation-summary-cards.component';
+import { ConsultationProvider } from './consultation-context';
 import styles from './consultation.scss';
 
 type ConsultationProps = {
@@ -16,269 +15,43 @@ type ConsultationProps = {
 };
 
 const Consultation: React.FC<ConsultationProps> = ({ dashboardTitle }) => {
-  const { t } = useTranslation();
-  const {
-    priorities: { emergencyPriorityConceptUuid, urgentPriorityConceptUuid, notUrgentPriorityConceptUuid },
-    queueServiceConceptUuids,
-  } = useConfig<ExpressWorkflowConfig>();
-  const [currQueue, setCurrQueue] = useState<Queue>();
-  const { queues, isLoading, error } = useQueues();
-  const [isRefreshing, setIsRefreshing] = useState(false);
-
-  const consultationQueues = queues.filter(
-    (queue) =>
-      queue.service.uuid === queueServiceConceptUuids.consultationService &&
-      !queue.location.display.toLowerCase().includes('mch') &&
-      queue?.queueRooms?.length > 0,
-  );
-  const activeQueue = useMemo(() => currQueue ?? consultationQueues[0], [currQueue, consultationQueues]);
-  const {
-    waitingEntries,
-    isLoading: isLoadingQueuemetrics,
-    error: waitingError,
-    emergencyEntries,
-    urgentEntries,
-    notUrgentEntries,
-  } = useConsultationQueueMetrics(activeQueue);
-  const { data: totalVisits, isLoading: isLoadingTotalVisits } = useTotalVisits();
-
-  // Use the updated investigation stats hook with single refresh function
-  const {
-    awaitingCount,
-    completedCount,
-    totalCount,
-    lab,
-    radiology,
-    procedures,
-    isLoading: isLoadingInvestigations,
-    refresh: refreshInvestigations,
-    investigationCategorizedEntries,
-  } = useInvestigationStats(activeQueue);
-  const [filters, setFilters] = useState<Array<QueueFilter>>([]);
-  // Single refresh handler for all investigations
-  const handleRefresh = useCallback(async () => {
-    setIsRefreshing(true);
-    try {
-      await refreshInvestigations();
-    } catch (error) {
-      console.error('Error refreshing investigations:', error);
-    } finally {
-      setIsRefreshing(false);
-    }
-  }, [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',
-      },
-    ],
-    [
-      t,
-      waitingEntries.length,
-      emergencyEntries.length,
-      urgentEntries.length,
-      notUrgentEntries.length,
-      awaitingCount,
-      lab.awaiting,
-      lab.completed,
-      radiology.awaiting,
-      radiology.completed,
-      procedures.awaiting,
-      procedures.completed,
-      isRefreshing,
-      isLoadingInvestigations,
-      handleRefresh,
-      completedCount,
-      totalVisits?.length,
-      emergencyPriorityConceptUuid,
-      urgentPriorityConceptUuid,
-      notUrgentPriorityConceptUuid,
-      investigationCategorizedEntries.newLabOrders,
-      investigationCategorizedEntries.newRadiologyOrders,
-      investigationCategorizedEntries.newProcedureOrders,
-      investigationCategorizedEntries.completedLabOrders,
-      investigationCategorizedEntries.completedRadiologyOrders,
-      investigationCategorizedEntries.completedProcedureOrders,
-    ],
+  const { queueServiceConceptUuids } = useConfig<ExpressWorkflowConfig>();
+  const [, setSummaryCardsLoadingState] = useState({
+    isLoading: false,
+    isValidating: false,
+  });
+  const { queues, isLoading: isLoadingQueues } = useQueues();
+
+  const consultationQueues = useMemo(
+    () =>
+      queues.filter(
+        (queue) =>
+          queue.service.uuid === queueServiceConceptUuids.consultationService &&
+          !queue.location.display.toLowerCase().includes('mch') &&
+          queue?.queueRooms?.length > 0,
+      ),
+    [queues, queueServiceConceptUuids.consultationService],
   );
 
-  if (isLoading || isLoadingTotalVisits || isLoadingInvestigations || isLoadingQueuemetrics) {
-    return <InlineLoading description={t('loadingQueues', 'Loading queues...')} />;
-  }
-
   return (
-    <div className={`omrs-main-content`}>
-      <PageHeader className={styles.pageHeader}>
-        <PageHeaderContent title={capitalize(dashboardTitle)} illustration={<HomePictogram />} />
-        <ExtensionSlot name="provider-banner-info-slot" />
-      </PageHeader>
-      <QueueTab
-        queues={consultationQueues}
-        cards={cards}
-        navigatePath="consultation"
-        usePatientChart
-        filters={filters}
-        onFiltersChanged={setFilters}
-        onTabChanged={setCurrQueue}
-      />
-    </div>
+    <ConsultationProvider consultationQueues={consultationQueues}>
+      <div className={`omrs-main-content`} style={{ position: 'relative' }}>
+        <div>
+          <PageHeader className={styles.pageHeader}>
+            <PageHeaderContent title={capitalize(dashboardTitle)} illustration={<HomePictogram />} />
+            <ExtensionSlot name="provider-banner-info-slot" />
+          </PageHeader>
+          <ConsultationSummaryCards onLoadingStateChange={setSummaryCardsLoadingState} />
+          {isLoadingQueues ? (
+            <div className={styles.queueTabPlaceholder}>
+              <TabsSkeleton />
+            </div>
+          ) : (
+            <QueueTab queues={consultationQueues} navigatePath="consultation" usePatientChart />
+          )}
+        </div>
+      </div>
+    </ConsultationProvider>
   );
 };
 

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

@@ -13,6 +13,39 @@ export interface UseLabOrdersParams {
   excludeCanceled?: boolean;
 }
 
+function categorizeEntriesByPriority(
+  entries: Array<QueueEntry> | undefined | null,
+  priorities:
+    | {
+        emergencyPriorityConceptUuid?: string;
+        urgentPriorityConceptUuid?: string;
+        notUrgentPriorityConceptUuid?: string;
+      }
+    | undefined
+    | null,
+): { emergencyEntries: Array<QueueEntry>; urgentEntries: Array<QueueEntry>; notUrgentEntries: Array<QueueEntry> } {
+  if (!entries?.length || !priorities) {
+    return { emergencyEntries: [], urgentEntries: [], notUrgentEntries: [] };
+  }
+  const emergencyEntries: Array<QueueEntry> = [];
+  const urgentEntries: Array<QueueEntry> = [];
+  const notUrgentEntries: Array<QueueEntry> = [];
+  for (const entry of entries) {
+    const priorityUuid = entry?.priority?.uuid;
+    if (!priorityUuid) {
+      continue;
+    }
+    if (priorityUuid === priorities.emergencyPriorityConceptUuid) {
+      emergencyEntries.push(entry);
+    } else if (priorityUuid === priorities.urgentPriorityConceptUuid) {
+      urgentEntries.push(entry);
+    } else if (priorityUuid === priorities.notUrgentPriorityConceptUuid) {
+      notUrgentEntries.push(entry);
+    }
+  }
+  return { emergencyEntries, urgentEntries, notUrgentEntries };
+}
+
 const getTodayRange = (daysBack: number = 0) => ({
   start: dayjs().subtract(daysBack, 'day').startOf('day').toISOString(),
   end: dayjs().endOf('day').toISOString(),
@@ -25,17 +58,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 +237,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,40 +419,45 @@ export const useInvestigationStats = (queue?: Queue) => {
     isLoading,
     refresh,
     investigationCategorizedEntries,
+    isValidating,
   };
 };
 
-export const useConsultationQueueMetrics = (queue?: Queue) => {
+export const useConsultationQueueMetrics = (queue?: Queue, pageSize?: number) => {
   const { queueServiceConceptUuids, queueStatusConceptUuids, priorities } = useConfig<ExpressWorkflowConfig>();
   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,
-  });
+  } = 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'),
+      queues: [queue?.uuid],
+    },
+    pageSize,
+  );
 
   const _waitingEntries = useMemo(
     () => waitingEntries.filter((entry) => entry?.queue?.uuid === queue?.uuid),
     [waitingEntries, queue],
   );
+
+  const { emergencyEntries, urgentEntries, notUrgentEntries } = useMemo(
+    () => categorizeEntriesByPriority(_waitingEntries, priorities),
+    [_waitingEntries, priorities],
+  );
+
   return {
     isLoading: isLoadingWaiting,
     error: waitingError,
     waitingEntries: _waitingEntries,
-    emergencyEntries: useMemo(
-      () => _waitingEntries.filter((entry) => entry.priority.uuid === priorities?.emergencyPriorityConceptUuid),
-      [_waitingEntries, priorities?.emergencyPriorityConceptUuid],
-    ),
-    urgentEntries: useMemo(
-      () => _waitingEntries.filter((entry) => entry.priority.uuid === priorities?.urgentPriorityConceptUuid),
-      [_waitingEntries, priorities?.urgentPriorityConceptUuid],
-    ),
-    notUrgentEntries: useMemo(
-      () => _waitingEntries.filter((entry) => entry.priority.uuid === priorities?.notUrgentPriorityConceptUuid),
-      [_waitingEntries, priorities?.notUrgentPriorityConceptUuid],
-    ),
+    isValidating: isValidatingWaiting,
+    emergencyEntries,
+    urgentEntries,
+    notUrgentEntries,
   };
 };

package/src/components/consultation/consultation.scss

@@ -16,3 +16,8 @@
   display: flex;
   flex-direction: row;
 }
+
+.queueTabPlaceholder {
+  padding: layout.$spacing-05;
+  min-height: 200px;
+}