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

package/src/components/reports/index.ts

@@ -1,20 +1,22 @@
-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 ReportsDashboard from './dashboard.component';
 
 const options = {
   featureName: 'express-workflow',
   moduleName,
 };
 
-export const reportsDashboard = getSyncLifecycle(ReportsDashboard, options);
+export const reportsDashboard = getAsyncLifecycle(() => import('./dashboard.component'), options);
 // t('reports', 'Reports')
-export const reportsDashboardLink = getSyncLifecycle(
-  createLeftPanelLink({
-    name: 'reports',
-    title: 'reports',
-  }),
+export const reportsDashboardLink = getAsyncLifecycle(
+  () =>
+    import('../../shared/dashboard-link/dashboard-link.component').then((m) => ({
+      default: m.createLeftPanelLink({
+        name: 'reports',
+        title: 'reports',
+        basePath: '',
+      }),
+    })),
   options,
 );

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

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

package/src/components/triage/index.ts

@@ -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 TriageDashboard from './dashboard.component';
 
 const options = {
   featureName: 'express-workflow',
   moduleName,
 };
 
-export const triageDashboard = getSyncLifecycle(TriageDashboard, options);
+export const triageDashboard = getAsyncLifecycle(() => import('./dashboard.component'), options);
 // t('triage', 'Triage')
-export const triageLeftPanelLink = getSyncLifecycle(
-  createLeftPanelLink({
-    name: 'triage',
-    title: 'triage',
-  }),
+export const triageLeftPanelLink = getAsyncLifecycle(
+  () =>
+    import('../../shared/dashboard-link/dashboard-link.component').then((m) => ({
+      default: m.createLeftPanelLink({
+        name: 'triage',
+        title: 'triage',
+      }),
+    })),
   options,
 );

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import capitalize from 'lodash-es/capitalize';
 import { useTranslation } from 'react-i18next';
 import {
@@ -9,13 +9,14 @@ import {
   ExtensionSlot,
   useConfig,
 } from '@openmrs/esm-framework';
-import { InlineLoading } from '@carbon/react';
+import { TabsSkeleton } 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 { QueueWorkflowProvider, useQueueWorkflowContext } from '../../shared/queue/queue-workflow-context';
 import styles from './triage.scss';
-import { Queue, QueueFilter } from '../../types';
-import { useTriageQueuesMetrics } from './triage.resource';
+import { Queue } from '../../types';
 import { ExpressWorkflowConfig } from '../../config-schema';
 
 type TriageProps = {
@@ -38,55 +39,102 @@ 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 triageQueues = queues
-    .filter(
-      (queue) =>
-        queue.service.uuid === queueServiceConceptUuids.triageService &&
-        !queue.location.display.toLowerCase().includes('mch') &&
-        queue?.queueRooms?.length > 0,
-    )
-    .sort((a, b) => a.name.localeCompare(b.name));
-  const activeQueue = useMemo(() => currQueue ?? triageQueues[0], [currQueue, triageQueues]);
+  const { queues, isLoading: isLoadingQueues, error: errorLoadingQueues } = useQueues();
 
-  const {
-    error: metricsError,
-    isLoading: isLoadingMetrics,
-    waitingEntries,
-    attendedtoEntries,
-  } = useTriageQueuesMetrics(activeQueue);
-
-  if (isLoadingMetrics) {
-    return <InlineLoading description={t('loadingQueues', 'Loading queues...')} />;
+  const triageQueues = useMemo(
+    () =>
+      queues
+        .filter(
+          (queue) =>
+            queue.service.uuid === queueServiceConceptUuids.triageService &&
+            !queue.location.display.toLowerCase().includes('mch') &&
+            queue?.queueRooms?.length > 0,
+        )
+        .sort((a, b) => a.name.localeCompare(b.name)),
+    [queues, queueServiceConceptUuids.triageService],
+  );
+
+  if (isLoadingQueues) {
+    return (
+      <div className={styles.contentArea}>
+        <TabsSkeleton />
+      </div>
+    );
+  }
+
+  if (errorLoadingQueues) {
+    return (
+      <div className={styles.contentArea}>
+        <ErrorState error={errorLoadingQueues} headerTitle={t('errorLoadingQueues', 'Error loading queues')} />
+      </div>
+    );
   }
 
-  if (metricsError) {
-    return <ErrorState error={metricsError} headerTitle={t('errorLoadingQueues', 'Error loading queues')} />;
+  if (!triageQueues.length) {
+    return <div className={styles.contentArea} />;
   }
-  const cards = [
+
+  return (
+    <QueueWorkflowProvider queues={triageQueues}>
+      <TriageContent
+        triageQueues={triageQueues}
+        waitingStatus={waitingStatus}
+        finishedStatus={finishedStatus}
+        inServiceStatus={inServiceStatus}
+      />
+    </QueueWorkflowProvider>
+  );
+};
+
+type TriageContentProps = {
+  triageQueues: Queue[];
+  waitingStatus: string;
+  finishedStatus: string;
+  inServiceStatus: string;
+};
+
+const TriageContent: React.FC<TriageContentProps> = ({
+  triageQueues,
+  waitingStatus,
+  finishedStatus,
+  inServiceStatus,
+}) => {
+  const { t } = useTranslation();
+  const { queueEntries, setFilters, queueEntriesError } = useQueueWorkflowContext();
+
+  const waitingEntries = useMemo(
+    () => queueEntries.filter((entry) => entry?.status?.uuid === waitingStatus),
+    [queueEntries, waitingStatus],
+  );
+
+  const attendedToEntries = useMemo(
+    () =>
+      queueEntries.filter((entry) => entry?.status?.uuid === inServiceStatus || entry?.status?.uuid === finishedStatus),
+    [queueEntries, inServiceStatus, finishedStatus],
+  );
+
+  const cards: Array<QueueSummaryCard> = [
     {
       title: t('clientsPatientsWaiting', 'Clients/Patients waiting'),
       value: waitingEntries.length.toString(),
       onClick: () => {
-        setFilters((prevFilters) => [
-          ...prevFilters.filter((f) => f.key !== 'status'),
+        setFilters((prev) => [
+          ...prev.filter((f) => f.key !== 'status'),
           { key: 'status', value: waitingStatus, label: t('waiting', 'Waiting') },
         ]);
       },
     },
     {
       title: t('clientsPatientsAttendedTo', 'Clients/Patients attended to'),
-      value: attendedtoEntries.length.toString(),
+      value: attendedToEntries.length.toString(),
       onClick: () => {
-        setFilters((prevFilters) => [
-          ...prevFilters.filter((f) => f.key !== 'status'),
+        setFilters((prev) => [
+          ...prev.filter((f) => f.key !== 'status'),
           { key: 'status', value: `${finishedStatus},${inServiceStatus}`, label: t('attendedTo', 'Attended to') },
         ]);
       },
@@ -94,14 +142,16 @@ const TriageQueueTab: React.FC = () => {
   ];
 
   return (
-    <QueueTab
-      queues={triageQueues}
-      navigatePath="triage"
-      usePatientChart
-      cards={cards}
-      onTabChanged={setCurrQueue}
-      filters={filters}
-      onFiltersChanged={setFilters}
-    />
+    <div className={styles.contentArea}>
+      <QueueSummaryCards cards={cards} />
+      {queueEntriesError ? (
+        <ErrorState
+          error={queueEntriesError}
+          headerTitle={t('errorLoadingQueueEntries', 'Error loading queue entries')}
+        />
+      ) : (
+        <QueueTab queues={triageQueues} navigatePath="triage" usePatientChart />
+      )}
+    </div>
   );
 };

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/components/triage/triage.scss

@@ -1,6 +1,7 @@
 @use '@carbon/layout';
 @use '@carbon/type';
 @use '@carbon/colors';
+
 .pageHeader {
   @include type.type-style('body-compact-02');
   height: layout.$spacing-12;
@@ -10,3 +11,8 @@
   background: colors.$white-0;
   border-bottom: 1px solid colors.$gray-20;
 }
+
+.contentArea {
+  padding: layout.$spacing-05;
+  min-height: 400px;
+}