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

package/src/shared/queue/queue-entry/queue-entry-table.component.tsx

@@ -11,8 +11,7 @@ import {
   TableHeader,
   TableRow,
 } from '@carbon/react';
-import { ConfigurableLink, showModal, useConfig, useDebounce, usePagination } from '@openmrs/esm-framework';
-import { usePaginationInfo } from '@openmrs/esm-patient-common-lib';
+import { ConfigurableLink, showModal, useConfig, useDebounce } from '@openmrs/esm-framework';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import startCase from 'lodash-es/startCase';
@@ -24,8 +23,9 @@ import lowerCase from 'lodash-es/lowerCase';
 import { type ExpressWorkflowConfig } from '../../../config-schema';
 import { spaBasePath } from '../../../constants';
 import { serveQueueEntry } from '../../../hooks/useServiceQueues';
-import { type QueueEntry } from '../../../types/index';
+import { type QueueEntriesPagination, type QueueEntry } from '../../../types/index';
 import styles from './queue-entry-table.scss';
+import { usePaginationInfo } from '@openmrs/esm-patient-common-lib/src';
 
 // Extend dayjs with the relativeTime plugin
 dayjs.extend(relativeTime);
@@ -34,16 +34,19 @@ type QueueEntryTableProps = {
   navigatePath?: string;
   queueEntries: Array<QueueEntry>;
   usePatientChart?: boolean;
+  pagination?: QueueEntriesPagination;
+  onPageSizeChange?: (pageSize: number) => void;
 };
 
 const QueueEntryTable: React.FC<QueueEntryTableProps> = ({
   navigatePath = 'triage',
   queueEntries,
   usePatientChart,
+  pagination,
+  onPageSizeChange,
 }) => {
   const { visitQueueNumberAttributeUuid } = useConfig<ExpressWorkflowConfig>();
   const [searchString, setSearchString] = useState('');
-  const pageSize = 10;
   const { t } = useTranslation();
   const debouncedSearchString = useDebounce(searchString, 500);
   const filteredQueueEntries = useMemo(() => {
@@ -51,48 +54,32 @@ const QueueEntryTable: React.FC<QueueEntryTableProps> = ({
       return queueEntry.patient.person.display.toLowerCase().includes(debouncedSearchString.toLowerCase());
     });
   }, [queueEntries, debouncedSearchString]);
-  const { currentPage, goTo, results } = usePagination(filteredQueueEntries, pageSize);
-  const { pageSizes } = usePaginationInfo(pageSize, queueEntries.length, currentPage, results.length);
 
-  const headers = [
-    {
-      header: t('name', 'Name'),
-      key: 'patientName',
-    },
-    {
-      header: t('queueNumber', 'Queue Number'),
-      key: 'queueNumber',
-    },
-    {
-      header: t('comingFrom', 'Coming from'),
-      key: 'previousQueue',
-    },
-    {
-      header: t('priority', 'Priority'),
-      key: 'priority',
-    },
-    {
-      header: t('priorityComment', 'Priority Comment'),
-      key: 'priorityComment',
-    },
-    {
-      header: t('status', 'status'),
-      key: 'status',
-    },
-    {
-      header: t('queue', 'Queue'),
-      key: 'queue',
-    },
-    {
-      header: t('waitTime', 'Wait time'),
-      key: 'waitTime',
-    },
-  ];
+  const { pageSizes } = usePaginationInfo(
+    pagination.currentPageSize.current,
+    pagination.totalCount,
+    pagination.currentPage,
+    filteredQueueEntries.length,
+  );
+
+  const headers = useMemo(
+    () => [
+      { header: t('name', 'Name'), key: 'patientName' },
+      { header: t('queueNumber', 'Queue Number'), key: 'queueNumber' },
+      { header: t('comingFrom', 'Coming from'), key: 'previousQueue' },
+      { header: t('priority', 'Priority'), key: 'priority' },
+      { header: t('priorityComment', 'Priority Comment'), key: 'priorityComment' },
+      { header: t('status', 'status'), key: 'status' },
+      { header: t('queue', 'Queue'), key: 'queue' },
+      { header: t('waitTime', 'Wait time'), key: 'waitTime' },
+    ],
+    [t],
+  );
 
   const handleCallQueueEntry = async (queueEntry: QueueEntry) => {
-    const queueNumber = queueEntry.visit.attributes?.filter(
+    const queueNumber = queueEntry.visit.attributes?.find(
       (attr) => attr['attributeType']?.uuid === visitQueueNumberAttributeUuid,
-    )?.[0];
+    );
     const response = await serveQueueEntry(
       queueEntry.queue.name,
       queueNumber.value,
@@ -108,35 +95,37 @@ const QueueEntryTable: React.FC<QueueEntryTableProps> = ({
     }
   };
 
-  const rows = results?.map((queueEntry) => {
-    const visitNumber = queueEntry?.visit?.attributes?.find(
-      (attr) => attr?.attributeType?.uuid === visitQueueNumberAttributeUuid,
-    );
+  const rows = useMemo(() => {
+    return filteredQueueEntries?.map((queueEntry) => {
+      const visitNumber = queueEntry?.visit?.attributes?.find(
+        (attr) => attr?.attributeType?.uuid === visitQueueNumberAttributeUuid,
+      );
 
-    const patientChartUrl = usePatientChart
-      ? `${window.spaBase}/patient/${queueEntry.patient.uuid}/chart/Patient Summary?path=${navigatePath}`
-      : `${spaBasePath}/${navigatePath}/${queueEntry.patient.uuid}`;
+      const patientChartUrl = usePatientChart
+        ? `${globalThis.spaBase}/patient/${queueEntry.patient.uuid}/chart/Patient Summary?path=${navigatePath}`
+        : `${spaBasePath}/${navigatePath}/${queueEntry.patient.uuid}`;
 
-    return {
-      id: queueEntry.uuid,
-      queueNumber: visitNumber?.value ?? '--',
-      previousQueue: startCase(queueEntry.previousQueueEntry?.queue?.display?.toLowerCase() ?? '--'),
-      patientName: (
-        <ConfigurableLink className={styles.link} to={patientChartUrl}>
-          {startCase(queueEntry.patient.person.display.toLowerCase())}
-        </ConfigurableLink>
-      ),
-      priority: (
-        <div className={styles.priorityPill} data-priority={lowerCase(queueEntry?.priority?.display)}>
-          {t(queueEntry?.priority?.display, capitalize(queueEntry?.priority?.display.replace('_', ' ')))}
-        </div>
-      ),
-      priorityComment: startCase(queueEntry.priorityComment?.toLowerCase() ?? '--'),
-      status: queueEntry?.status?.display ?? '--',
-      queue: startCase(queueEntry?.queue?.display?.toLowerCase() ?? '--'),
-      waitTime: dayjs(queueEntry.startedAt).fromNow(),
-    };
-  });
+      return {
+        id: queueEntry.uuid,
+        queueNumber: visitNumber?.value ?? '--',
+        previousQueue: startCase(queueEntry.previousQueueEntry?.queue?.display?.toLowerCase() ?? '--'),
+        patientName: (
+          <ConfigurableLink className={styles.link} to={patientChartUrl}>
+            {startCase(queueEntry.patient.person.display.toLowerCase())}
+          </ConfigurableLink>
+        ),
+        priority: (
+          <div className={styles.priorityPill} data-priority={lowerCase(queueEntry?.priority?.display)}>
+            {t(queueEntry?.priority?.display, capitalize(queueEntry?.priority?.display.replace('_', ' ')))}
+          </div>
+        ),
+        priorityComment: startCase(queueEntry.priorityComment?.toLowerCase() ?? '--'),
+        status: queueEntry?.status?.display ?? '--',
+        queue: startCase(queueEntry?.queue?.display?.toLowerCase() ?? '--'),
+        waitTime: dayjs(queueEntry.startedAt).fromNow(),
+      };
+    });
+  }, [filteredQueueEntries, visitQueueNumberAttributeUuid, navigatePath, usePatientChart, t]);
 
   if (queueEntries.length === 0) {
     return <div>{t('noPatientsAwaiting', 'No patients awaiting service')}</div>;
@@ -172,7 +161,7 @@ const QueueEntryTable: React.FC<QueueEntryTableProps> = ({
                   <TableCell className="cds--table-column-menu">
                     <OverflowMenu size="sm" aria-label="overflow-menu" flipped align="right">
                       <OverflowMenuItem
-                        onClick={() => handleCallQueueEntry(results[index])}
+                        onClick={() => handleCallQueueEntry(filteredQueueEntries[index])}
                         itemText={t('call', 'Call')}
                       />
                     </OverflowMenu>
@@ -183,17 +172,20 @@ const QueueEntryTable: React.FC<QueueEntryTableProps> = ({
           </Table>
         )}
       </DataTable>
-      <Pagination
-        pageSizes={pageSizes}
-        forwardText={t('nextPage', 'Next page')}
-        backwardText={t('previousPage', 'Previous page')}
-        page={currentPage}
-        pageSize={pageSize}
-        totalItems={filteredQueueEntries.length}
-        onChange={({ page }) => {
-          goTo(page);
-        }}
-      />
+      {pagination && (
+        <Pagination
+          pageSizes={pageSizes}
+          forwardText={t('nextPage', 'Next page')}
+          backwardText={t('previousPage', 'Previous page')}
+          page={pagination.currentPage}
+          pageSize={pagination.currentPageSize.current}
+          totalItems={pagination.totalCount}
+          onChange={({ page, pageSize }) => {
+            pagination.goTo(page);
+            onPageSizeChange?.(pageSize as number);
+          }}
+        />
+      )}
     </div>
   );
 };

package/src/shared/queue/queue-summary-cards.component.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import Card from '../cards/card.component';
+import styles from './queue-tab.scss';
+
+export type QueueSummaryCard = {
+  title: string;
+  value: string;
+  categories?: Array<{ label: string; value: number; onClick?: () => void }>;
+  onClick?: () => void;
+  refreshButton?: React.ReactNode;
+};
+
+interface QueueSummaryCardsProps {
+  cards?: Array<QueueSummaryCard>;
+}
+
+const QueueSummaryCards: React.FC<QueueSummaryCardsProps> = ({ cards }) => (
+  <div className={styles.cards}>
+    {cards?.map((card) => (
+      <Card
+        key={card.title}
+        title={card.title}
+        total={card.value}
+        categories={card.categories}
+        onClick={card.onClick}
+        refreshButton={card.refreshButton}
+      />
+    ))}
+  </div>
+);
+
+export default QueueSummaryCards;

package/src/shared/queue/queue-tab.component.tsx

@@ -1,23 +1,17 @@
-import { Tabs, TabList, Tab, TabPanels, TabPanel, InlineLoading, TabsSkeleton } from '@carbon/react';
-import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
+import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
+import { Tabs, TabList, Tab, TabPanels, TabPanel, InlineLoading, TabsSkeleton } from '@carbon/react';
 import startCase from 'lodash-es/startCase';
-import Card from '../cards/card.component';
-import { Queue, QueueFilter } from '../../types/index';
-import QueueEntryTable from './queue-entry/queue-entry-table.component';
+
+import FiltersHeader from './filters-header.component';
+import { type Queue, type QueueFilter } from '../../types/index';
 import { useQueueEntries } from '../../hooks/useServiceQueues';
+import QueueEntryTable from './queue-entry/queue-entry-table.component';
 import styles from './queue-tab.scss';
-import FiltersHeader from './filters-header.component';
 
 type QueueTabProps = {
   queues: Array<Queue>;
-  cards?: Array<{
-    title: string;
-    value: string;
-    categories?: Array<{ label: string; value: number; onClick?: () => void }>;
-    onClick?: () => void;
-    refreshButton?: React.ReactNode; // Add this property
-  }>;
   navigatePath: string;
   onTabChanged?: (queue: Queue) => void;
   usePatientChart?: boolean;
@@ -25,9 +19,10 @@ type QueueTabProps = {
   onFiltersChanged?: (filters: Array<QueueFilter>) => void;
 };
 
+const startedOnOrAfter = dayjs().subtract(24, 'hour').format('YYYY-MM-DD HH:mm:ss');
+
 const QueueTab: React.FC<QueueTabProps> = ({
   queues,
-  cards,
   navigatePath,
   onTabChanged,
   usePatientChart,
@@ -37,43 +32,49 @@ const QueueTab: React.FC<QueueTabProps> = ({
   const { t } = useTranslation();
 
   // Filter queues with rooms first
+  const [pageSize, setPageSize] = useState(100);
   const validQueues = useMemo(() => queues.filter((queue) => queue?.queueRooms?.length > 0), [queues]);
 
   // Set initial selected queue to first valid queue
   const [selectedTabIndex, setSelectedTabIndex] = useState(0);
-  const [isInitialLoad, setIsInitialLoad] = useState(true);
 
   const selectedQueue = validQueues[selectedTabIndex];
 
-  const { queueEntries, isLoading, error } = useQueueEntries({
-    location: selectedQueue?.location?.uuid ? [selectedQueue.location.uuid] : undefined,
-    statuses: filters?.filter((filter) => filter.key === 'status')?.flatMap((filter) => filter.value.split(',')),
-  });
-
-  useEffect(() => {
-    if (!isLoading && isInitialLoad) {
-      setIsInitialLoad(false);
-    }
-  }, [isLoading, isInitialLoad]);
+  const {
+    queueEntries,
+    isLoading: isLoadingQueueEntries,
+    isValidating: isValidatingQueueEntries,
+    error,
+    pagination,
+  } = useQueueEntries(
+    {
+      location: selectedQueue?.location?.uuid ? [selectedQueue.location.uuid] : undefined,
+      startedOnOrAfter: startedOnOrAfter,
+    },
+    pageSize,
+  );
 
   const queueEntriesByService = useMemo(() => {
     if (!queueEntries?.length || !selectedQueue?.uuid) {
       return [];
     }
     const priorityFilter = filters?.find((filter) => filter.key === 'priority')?.value;
+    const statusFilter =
+      filters?.filter((filter) => filter.key === 'status')?.flatMap((filter) => filter.value.split(',')) ?? [];
     const serviceAwaitingFilter = filters?.find((filter) => filter.key === 'service_awaiting')?.value?.split(',') ?? []; // Patient UUIDs
     const serviceCompletedFilter =
       filters?.find((filter) => filter.key === 'service_completed')?.value?.split(',') ?? []; // Patient UUIDs
     const filtered = queueEntries.filter((entry) => {
       return (
         entry?.queue?.uuid === selectedQueue?.uuid &&
+        (statusFilter.length > 0 ? statusFilter.includes(entry?.status?.uuid) : true) &&
         (priorityFilter ? entry?.priority?.uuid === priorityFilter : true) &&
         (serviceAwaitingFilter.length > 0 ? serviceAwaitingFilter.includes(entry?.patient?.uuid) : true) &&
         (serviceCompletedFilter.length > 0 ? serviceCompletedFilter.includes(entry?.patient?.uuid) : true)
       );
     });
     return filtered;
-  }, [filters, queueEntries, selectedQueue?.uuid]);
+  }, [filters, queueEntries?.length, selectedQueue?.uuid]);
 
   const handleTabChange = useCallback(
     (evt: { selectedIndex: number }) => {
@@ -86,7 +87,9 @@ const QueueTab: React.FC<QueueTabProps> = ({
     [validQueues, onTabChanged],
   );
 
-  if (isInitialLoad && isLoading) {
+  const isLoading = isLoadingQueueEntries && !isValidatingQueueEntries;
+
+  if (isLoading) {
     return <TabsSkeleton />;
   }
 
@@ -112,18 +115,6 @@ const QueueTab: React.FC<QueueTabProps> = ({
 
   return (
     <div className={styles.queueTab}>
-      <div className={styles.cards}>
-        {cards?.map((card) => (
-          <Card
-            key={card.title}
-            title={card.title}
-            total={card.value}
-            categories={card.categories}
-            onClick={card.onClick}
-            refreshButton={card.refreshButton}
-          />
-        ))}
-      </div>
       <FiltersHeader filters={filters} onFiltersChanged={onFiltersChanged} />
       <div className={styles.tabsContainer}>
         <Tabs selectedIndex={selectedTabIndex} onChange={handleTabChange}>
@@ -135,7 +126,7 @@ const QueueTab: React.FC<QueueTabProps> = ({
           <TabPanels>
             {validQueues.map((queue, index) => (
               <TabPanel key={queue?.uuid}>
-                {isLoading && !isInitialLoad && (
+                {isLoading && (
                   <div className={styles.loadingOverlay}>
                     <InlineLoading description={t('loadingQueueEntries', 'Loading queue entries...')} />
                   </div>
@@ -144,6 +135,10 @@ const QueueTab: React.FC<QueueTabProps> = ({
                   queueEntries={queueEntriesByService}
                   navigatePath={navigatePath}
                   usePatientChart={usePatientChart}
+                  pagination={pagination}
+                  onPageSizeChange={(pageSize) => {
+                    setPageSize(pageSize as number);
+                  }}
                 />
               </TabPanel>
             ))}

package/src/shared/queue/queue-tab.scss

@@ -24,4 +24,5 @@
   display: flex;
   flex-direction: row;
   column-gap: layout.$spacing-05;
+  margin: layout.$spacing-05;
 }

package/src/types/index.ts

@@ -1,4 +1,5 @@
 import { type OpenmrsResource, type OpenmrsResourceStrict, type Visit } from '@openmrs/esm-framework';
+import { MutableRefObject } from 'react';
 
 export interface DashboardConfig {
   name: string;
@@ -11,8 +12,8 @@ export type Queue = {
   name: string;
   location: OpenmrsResource;
   service: OpenmrsResource;
-  allowedPriorities: Array<OpenmrsResource>;
-  allowedStatuses: Array<OpenmrsResource>;
+  allowedPriorities?: Array<OpenmrsResource>;
+  allowedStatuses?: Array<OpenmrsResource>;
   queueRooms: Array<OpenmrsResource>;
 };
 
@@ -95,3 +96,16 @@ export type QueueFilter = {
   value: string;
   label: string;
 };
+
+export type QueueEntriesPagination = {
+  totalPages: number;
+  totalCount: number;
+  currentPage: number;
+  currentPageSize: MutableRefObject<number>;
+  paginated: boolean;
+  showNextButton: boolean;
+  showPreviousButton: boolean;
+  goTo: (page: number) => void;
+  goToNext: () => void;
+  goToPrevious: () => void;
+};