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

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}
+      />
+    </>
   );
 };
 

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

@@ -5,13 +5,14 @@ import { ErrorState, useConfig } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 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 { useTriageQueuesMetrics } from '../triage/triage.resource';
 import { ExpressWorkflowConfig } from '../../config-schema';
 
 const MCHTriage: React.FC = () => {
   const { t } = useTranslation();
-  const { queues, isLoading, error } = useQueues();
+  const { queues, isLoading: isLoadingQueues, error } = useQueues();
   const [currQueue, setCurrQueue] = useState<Queue>();
   const [filters, setFilters] = useState<Array<QueueFilter>>([]);
   const {
@@ -31,11 +32,15 @@ const MCHTriage: React.FC = () => {
   const {
     error: metricsError,
     isLoading: isLoadingMetrics,
-    attendedtoEntries,
+    attendedToEntries,
     waitingEntries,
+    isValidating: isValidatingMetrics,
   } = useTriageQueuesMetrics(activeQueue);
 
-  if (isLoading || isLoadingMetrics) {
+  const isLoading = isLoadingQueues || isLoadingMetrics;
+  const isValidating = isValidatingMetrics;
+
+  if (isLoading && !isValidating) {
     return <InlineLoading description={t('loadingQueues', 'Loading queues...')} />;
   }
 
@@ -43,37 +48,41 @@ const MCHTriage: React.FC = () => {
     return <ErrorState error={error ?? metricsError} headerTitle={t('errorLoadingQueues', 'Error loading queues')} />;
   }
 
+  const cards: Array<QueueSummaryCard> = [
+    {
+      title: t('patientsAwaiting', 'Patient awaiting'),
+      value: waitingEntries?.length?.toString(),
+      onClick: () => {
+        setFilters((prevFilters) => [
+          ...prevFilters.filter((f) => f.key !== 'status'),
+          { key: 'status', value: waitingStatus, label: t('waiting', 'Waiting') },
+        ]);
+      },
+    },
+    {
+      title: t('patientAttended', 'Patient attended to'),
+      value: attendedToEntries?.length?.toString(),
+      onClick: () => {
+        setFilters((prevFilters) => [
+          ...prevFilters.filter((f) => f.key !== 'status'),
+          { key: 'status', value: `${finishedStatus},${inServiceStatus}`, label: t('attendedTo', 'Attended to') },
+        ]);
+      },
+    },
+  ];
+
   return (
-    <QueueTab
-      queues={triageQueues}
-      navigatePath="mch"
-      cards={[
-        {
-          title: t('patientsAwaiting', 'Patient awaiting'),
-          value: waitingEntries?.length?.toString(),
-          onClick: () => {
-            setFilters((prevFilters) => [
-              ...prevFilters.filter((f) => f.key !== 'status'),
-              { key: 'status', value: waitingStatus, label: t('waiting', 'Waiting') },
-            ]);
-          },
-        },
-        {
-          title: t('patientAttended', 'Patient attended to'),
-          value: attendedtoEntries?.length?.toString(),
-          onClick: () => {
-            setFilters((prevFilters) => [
-              ...prevFilters.filter((f) => f.key !== 'status'),
-              { key: 'status', value: `${finishedStatus},${inServiceStatus}`, label: t('attendedTo', 'Attended to') },
-            ]);
-          },
-        },
-      ]}
-      onTabChanged={setCurrQueue}
-      usePatientChart
-      filters={filters}
-      onFiltersChanged={setFilters}
-    />
+    <>
+      <QueueSummaryCards cards={cards} />
+      <QueueTab
+        queues={triageQueues}
+        navigatePath="mch"
+        onTabChanged={setCurrQueue}
+        usePatientChart
+        filters={filters}
+        onFiltersChanged={setFilters}
+      />
+    </>
   );
 };
 

package/src/components/triage/triage.component.tsx

@@ -13,6 +13,7 @@ import { InlineLoading } from '@carbon/react';
 
 import { useQueues } from '../../hooks/useServiceQueues';
 import QueueTab from '../../shared/queue/queue-tab.component';
+import QueueSummaryCards, { QueueSummaryCard } from '../../shared/queue/queue-summary-cards.component';
 import styles from './triage.scss';
 import { Queue, QueueFilter } from '../../types';
 import { useTriageQueuesMetrics } from './triage.resource';
@@ -38,13 +39,19 @@ export default Triage;
 
 const TriageQueueTab: React.FC = () => {
   const { t } = useTranslation();
-  const [currQueue, setCurrQueue] = useState<Queue>();
-  const { queues, isLoading, error } = useQueues();
-  const [filters, setFilters] = useState<Array<QueueFilter>>([]);
   const {
     queueStatusConceptUuids: { finishedStatus, waitingStatus, inServiceStatus },
     queueServiceConceptUuids,
   } = useConfig<ExpressWorkflowConfig>();
+  const [currQueue, setCurrQueue] = useState<Queue>();
+  const [filters, setFilters] = useState<Array<QueueFilter>>([]);
+
+  const {
+    queues,
+    isLoading: isLoadingQueues,
+    error: errorLoadingQueues,
+    isValidating: isValidatingQueues,
+  } = useQueues();
 
   const triageQueues = queues
     .filter(
@@ -60,17 +67,25 @@ const TriageQueueTab: React.FC = () => {
     error: metricsError,
     isLoading: isLoadingMetrics,
     waitingEntries,
-    attendedtoEntries,
+    attendedToEntries,
+    isValidating: isValidatingMetrics,
   } = useTriageQueuesMetrics(activeQueue);
 
-  if (isLoadingMetrics) {
+  const isLoading = (isLoadingQueues || isLoadingMetrics) && !isValidatingQueues && !isValidatingMetrics;
+
+  if (isLoading) {
     return <InlineLoading description={t('loadingQueues', 'Loading queues...')} />;
   }
 
-  if (metricsError) {
-    return <ErrorState error={metricsError} headerTitle={t('errorLoadingQueues', 'Error loading queues')} />;
+  if (metricsError || errorLoadingQueues) {
+    return (
+      <ErrorState
+        error={metricsError ?? errorLoadingQueues}
+        headerTitle={t('errorLoadingQueues', 'Error loading queues')}
+      />
+    );
   }
-  const cards = [
+  const cards: Array<QueueSummaryCard> = [
     {
       title: t('clientsPatientsWaiting', 'Clients/Patients waiting'),
       value: waitingEntries.length.toString(),
@@ -83,7 +98,7 @@ const TriageQueueTab: React.FC = () => {
     },
     {
       title: t('clientsPatientsAttendedTo', 'Clients/Patients attended to'),
-      value: attendedtoEntries.length.toString(),
+      value: attendedToEntries.length.toString(),
       onClick: () => {
         setFilters((prevFilters) => [
           ...prevFilters.filter((f) => f.key !== 'status'),
@@ -94,14 +109,16 @@ const TriageQueueTab: React.FC = () => {
   ];
 
   return (
-    <QueueTab
-      queues={triageQueues}
-      navigatePath="triage"
-      usePatientChart
-      cards={cards}
-      onTabChanged={setCurrQueue}
-      filters={filters}
-      onFiltersChanged={setFilters}
-    />
+    <>
+      <QueueSummaryCards cards={cards} />
+      <QueueTab
+        queues={triageQueues}
+        navigatePath="triage"
+        usePatientChart
+        onTabChanged={setCurrQueue}
+        filters={filters}
+        onFiltersChanged={setFilters}
+      />
+    </>
   );
 };

package/src/components/triage/triage.resource.ts

@@ -1,62 +1,68 @@
-import { useConfig } from '@openmrs/esm-framework';
 import { useMemo } from 'react';
-import { ExpressWorkflowConfig } from '../../config-schema';
+import dayjs from 'dayjs';
+import { useConfig } from '@openmrs/esm-framework';
+
+import { type ExpressWorkflowConfig } from '../../config-schema';
 import { useQueueEntries } from '../../hooks/useServiceQueues';
-import { Queue } from '../../types';
+import { type Queue } from '../../types';
 
 export const useTriageQueuesMetrics = (queue?: Queue) => {
-  const { queueServiceConceptUuids, queueStatusConceptUuids } = useConfig<ExpressWorkflowConfig>();
-  const {
-    queueEntries: waitingEntries,
-    isLoading: isLoadingWaiting,
-    error: waitingError,
-  } = useQueueEntries({
-    service: [queueServiceConceptUuids.triageService],
-    statuses: [queueStatusConceptUuids.waitingStatus],
-    location: queue?.location?.uuid ? [queue.location.uuid] : undefined,
-  });
-  const {
-    queueEntries: inServiceEntries,
-    isLoading: isLoadingInService,
-    error: inServiceError,
-  } = useQueueEntries({
-    service: [queueServiceConceptUuids.triageService],
-    statuses: [queueStatusConceptUuids.inServiceStatus],
-    location: queue?.location?.uuid ? [queue.location.uuid] : undefined,
-  });
+  const { queueStatusConceptUuids } = useConfig<ExpressWorkflowConfig>();
+
   const {
-    queueEntries: finishedEntries,
-    isLoading: isLoadingFinished,
-    error: finishedError,
+    queueEntries: allTriageEntries,
+    isLoading,
+    error,
+    isValidating: isValidatingQueueEntries,
   } = useQueueEntries({
-    service: [queueServiceConceptUuids.triageService],
-    statuses: [queueStatusConceptUuids.finishedStatus],
-    location: queue?.location?.uuid ? [queue.location.uuid] : undefined,
-  });
-  const { queueEntries: attendedtoEntries } = useQueueEntries({
-    service: [queueServiceConceptUuids.triageService],
-    statuses: [queueStatusConceptUuids.inServiceStatus, queueStatusConceptUuids.finishedStatus],
     location: queue?.location?.uuid ? [queue.location.uuid] : undefined,
+    startedOnOrAfter: dayjs().subtract(24, 'hour').format('YYYY-MM-DD HH:mm:ss'),
   });
 
+  const queueUuid = queue?.uuid;
+
+  const waitingEntries = useMemo(
+    () =>
+      allTriageEntries.filter(
+        (entry) => entry?.queue?.uuid === queueUuid && entry?.status?.uuid === queueStatusConceptUuids.waitingStatus,
+      ),
+    [allTriageEntries, queueUuid, queueStatusConceptUuids.waitingStatus],
+  );
+
+  const inServiceEntries = useMemo(
+    () =>
+      allTriageEntries.filter(
+        (entry) => entry?.queue?.uuid === queueUuid && entry?.status?.uuid === queueStatusConceptUuids.inServiceStatus,
+      ),
+    [allTriageEntries, queueUuid, queueStatusConceptUuids.inServiceStatus],
+  );
+
+  const finishedEntries = useMemo(
+    () =>
+      allTriageEntries.filter(
+        (entry) => entry?.queue?.uuid === queueUuid && entry?.status?.uuid === queueStatusConceptUuids.finishedStatus,
+      ),
+    [allTriageEntries, queueUuid, queueStatusConceptUuids.finishedStatus],
+  );
+
+  const attendedToEntries = useMemo(
+    () =>
+      allTriageEntries.filter(
+        (entry) =>
+          entry?.queue?.uuid === queueUuid &&
+          (entry?.status?.uuid === queueStatusConceptUuids.inServiceStatus ||
+            entry?.status?.uuid === queueStatusConceptUuids.finishedStatus),
+      ),
+    [allTriageEntries, queueUuid, queueStatusConceptUuids.inServiceStatus, queueStatusConceptUuids.finishedStatus],
+  );
+
   return {
-    isLoading: isLoadingFinished || isLoadingInService || isLoadingWaiting,
-    waitingEntries: useMemo(
-      () => waitingEntries.filter((entry) => entry?.queue?.uuid === queue?.uuid),
-      [waitingEntries, queue],
-    ),
-    inServiceEntries: useMemo(
-      () => inServiceEntries.filter((entry) => entry?.queue?.uuid === queue?.uuid),
-      [inServiceEntries, queue],
-    ),
-    finishedEntries: useMemo(
-      () => finishedEntries.filter((entry) => entry?.queue?.uuid === queue?.uuid),
-      [finishedEntries, queue],
-    ),
-    attendedtoEntries: useMemo(
-      () => attendedtoEntries.filter((entry) => entry?.queue?.uuid === queue?.uuid),
-      [attendedtoEntries, queue],
-    ),
-    error: finishedError ?? inServiceError ?? waitingError,
+    isLoading,
+    waitingEntries,
+    inServiceEntries,
+    finishedEntries,
+    attendedToEntries,
+    error,
+    isValidating: isValidatingQueueEntries,
   };
 };

package/src/hooks/useServiceQueues.tsx

@@ -1,68 +1,136 @@
-import { openmrsFetch, restBaseUrl, useConfig } from '@openmrs/esm-framework';
-import dayjs from 'dayjs';
 import { useMemo } from 'react';
-import useSWR from 'swr';
-import { ExpressWorkflowConfig } from '../config-schema';
-import { Queue, QueueEntry, QueueEntryFilters } from '../types/index';
+import useSWRImmutable from 'swr/immutable';
+import dayjs from 'dayjs';
+import { openmrsFetch, restBaseUrl, useConfig, useOpenmrsPagination } from '@openmrs/esm-framework';
+
+import { type ExpressWorkflowConfig } from '../config-schema';
+import { QueueEntriesPagination, type Queue, type QueueEntry, type QueueEntryFilters } from '../types/index';
+
+const QUEUE_LIST_REP =
+  'custom:(uuid,display,name,location:(uuid,display),service:(uuid,display),queueRooms:(uuid,display))';
+
+const SWR_QUEUE_OPTIONS = {
+  dedupingInterval: 5000,
+  revalidateOnFocus: false,
+} as const;
 
 export const useQueues = () => {
-  const { data, isLoading, error } = useSWR<{ data: { results: Array<Queue> } }>(
-    '/ws/rest/v1/queue?v=full',
+  const queueListKey = `/ws/rest/v1/queue?v=${encodeURIComponent(QUEUE_LIST_REP)}`;
+  const { data, isLoading, error, isValidating } = useSWRImmutable<{ data: { results: Array<Queue> } }>(
+    queueListKey,
     openmrsFetch,
+    SWR_QUEUE_OPTIONS,
   );
 
   return {
     queues: data?.data?.results || [],
     isLoading,
     error,
+    isValidating,
   };
 };
 
-export const useQueueEntries = (filters?: QueueEntryFilters) => {
+export const useQueueEntries = (filters?: QueueEntryFilters, defaultPageSize: number = 100) => {
   const { outpatientVisitTypeUuid } = useConfig<ExpressWorkflowConfig>();
   const repString =
-    'custom:(uuid,display,queue,status,patient:(uuid,display,person,identifiers:(uuid,display,identifier,identifierType)),visit:(uuid,display,startDatetime,visitType:(uuid,display),encounters:(uuid,display,diagnoses,encounterDatetime,encounterType,obs,encounterProviders,voided),attributes:(uuid,display,value,attributeType)),priority,priorityComment,sortWeight,startedAt,endedAt,locationWaitingFor,queueComingFrom,providerWaitingFor,previousQueueEntry)';
+    'custom:(uuid,queue:(uuid,display,name,location:(uuid,display)),status:(uuid,display),patient:(uuid,person:(uuid,display),identifiers),visit:(uuid,visitType:(uuid),attributes:(uuid,value,attributeType:(uuid))),priority:(uuid,display),priorityComment,startedAt,previousQueueEntry:(uuid,queue:(uuid,display)))';
 
-  const buildQueryParams = (filters?: QueueEntryFilters & { status: string[] }): string => {
+  const queryString = useMemo(() => {
     const params = new URLSearchParams();
     params.append('v', repString);
 
-    if (filters) {
-      Object.entries(filters).forEach(([key, value]) => {
-        if (value !== undefined && value !== null) {
-          if (Array.isArray(value)) {
-            value.forEach((v) => params.append(key, v));
-          } else {
-            params.append(key, String(value));
-          }
+    const merged = {
+      ...filters,
+      status: filters?.statuses ?? [],
+      statuses: undefined,
+      startedOnOrAfter: filters?.startedOnOrAfter ?? undefined,
+      startedOnOrBefore: filters?.startedOnOrBefore ?? undefined,
+    };
+    if (merged) {
+      Object.entries(merged).forEach(([key, value]) => {
+        if (key === 'statuses' || value === undefined || value === null) {
+          return;
+        }
+        if (Array.isArray(value)) {
+          [...value].sort((a, b) => String(a).localeCompare(String(b))).forEach((v) => params.append(key, v));
+        } else {
+          params.append(key, String(value));
         }
       });
     }
 
-    if (!filters || filters.isEnded === undefined || filters.isEnded === null) {
+    if (filters?.isEnded == null) {
       params.append('isEnded', 'false');
     }
 
     return params.toString();
-  };
+  }, [
+    filters?.location?.join(','),
+    filters?.service?.join(','),
+    [...(filters?.statuses ?? [])].sort((a, b) => String(a).localeCompare(String(b))).join(','),
+    filters?.priorities?.join(','),
+    filters?.patient,
+    filters?.visit,
+    filters?.hasVisit,
+    filters?.isEnded,
+    filters?.locationsWaitingFor?.join(','),
+    filters?.providersWaitingFor?.join(','),
+    filters?.queuesComingFrom?.join(','),
+  ]);
 
-  const queryString = buildQueryParams({ ...filters, status: filters?.statuses ?? [], statuses: [] });
-  const url = `/ws/rest/v1/queue-entry${queryString ? `?${queryString}` : ''}`;
+  const url = queryString ? `/ws/rest/v1/queue-entry?${queryString}` : '/ws/rest/v1/queue-entry';
+
+  const {
+    data,
+    isLoading,
+    isValidating,
+    error,
+    totalPages,
+    totalCount,
+    currentPage,
+    currentPageSize,
+    paginated,
+    showNextButton,
+    showPreviousButton,
+    goTo,
+    goToNext,
+    goToPrevious,
+  } = useOpenmrsPagination<QueueEntry>(url, defaultPageSize, {
+    swrConfig: {
+      dedupingInterval: 2000,
+      revalidateOnFocus: false,
+      keepPreviousData: true,
+    },
+  });
 
-  const { data, isLoading, error } = useSWR<{ data: { results: Array<QueueEntry> } }>(url, openmrsFetch);
   const queueEntries = useMemo(() => {
-    return (data?.data?.results ?? [])?.filter((entry) => {
+    return (data ?? [])?.filter((entry) => {
       return (
         dayjs(entry.startedAt).isAfter(dayjs().subtract(24, 'hour')) &&
         entry?.visit?.visitType?.uuid === outpatientVisitTypeUuid
       );
     });
-  }, [data?.data?.results, outpatientVisitTypeUuid]);
+  }, [data, outpatientVisitTypeUuid]);
+
+  const pagination: QueueEntriesPagination = {
+    totalPages,
+    totalCount,
+    currentPage,
+    currentPageSize,
+    paginated,
+    showNextButton,
+    showPreviousButton,
+    goTo,
+    goToNext,
+    goToPrevious,
+  };
 
   return {
     queueEntries,
     isLoading,
+    isValidating,
     error,
+    pagination,
   };
 };
 export function serveQueueEntry(servicePointName: string, ticketNumber: string, status: string, locationUuid?: string) {