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

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

@@ -1,5 +1,13 @@
+import React, { useMemo, useState } from 'react';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import capitalize from 'lodash-es/capitalize';
+import lowerCase from 'lodash-es/lowerCase';
+import startCase from 'lodash-es/startCase';
+import { useTranslation } from 'react-i18next';
 import {
   DataTable,
+  InlineLoading,
   OverflowMenu,
   OverflowMenuItem,
   Pagination,
@@ -11,20 +19,13 @@ 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 dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
-import startCase from 'lodash-es/startCase';
-import React, { useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { ConfigurableLink, showModal, useConfig, useDebounce } from '@openmrs/esm-framework';
+import { CardHeader, usePaginationInfo } from '@openmrs/esm-patient-common-lib';
 
-import capitalize from 'lodash-es/capitalize';
-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';
 
 // Extend dayjs with the relativeTime plugin
@@ -34,16 +35,23 @@ type QueueEntryTableProps = {
   navigatePath?: string;
   queueEntries: Array<QueueEntry>;
   usePatientChart?: boolean;
+  pagination?: QueueEntriesPagination;
+  onPageSizeChange?: (pageSize: number) => void;
+  isLoading?: boolean;
+  isValidating?: boolean;
 };
 
 const QueueEntryTable: React.FC<QueueEntryTableProps> = ({
   navigatePath = 'triage',
   queueEntries,
   usePatientChart,
+  pagination,
+  onPageSizeChange,
+  isValidating,
+  isLoading,
 }) => {
   const { visitQueueNumberAttributeUuid } = useConfig<ExpressWorkflowConfig>();
   const [searchString, setSearchString] = useState('');
-  const pageSize = 10;
   const { t } = useTranslation();
   const debouncedSearchString = useDebounce(searchString, 500);
   const filteredQueueEntries = useMemo(() => {
@@ -51,48 +59,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?.defaultPageSize,
+    pagination?.totalCount,
+    pagination?.currentPage,
+    pagination?.currentPageSize.current,
+  );
+
+  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,42 +100,58 @@ 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 (isLoading && queueEntries.length === 0) {
+    return <InlineLoading status="active" description={t('loading', 'Loading...')} />;
+  }
   if (queueEntries.length === 0) {
     return <div>{t('noPatientsAwaiting', 'No patients awaiting service')}</div>;
   }
 
   return (
     <div className={styles.table}>
+      <CardHeader title={t('queueEntries', 'Queue Entries')}>
+        <div className={styles.loadingContainer}>
+          {isValidating && (
+            <InlineLoading
+              className={styles.loading}
+              status="active"
+              description={t('refreshingData', 'Refreshing data...')}
+            />
+          )}
+        </div>
+      </CardHeader>
       <Search
         labelText={t('search', 'Search')}
         placeholder={t('search', 'Search')}
@@ -172,7 +180,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 +191,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-entry/queue-entry-table.scss

@@ -29,3 +29,7 @@
     background-color: colors.$gray-20;
   }
 }
+
+.loadingContainer {
+  margin-right: layout.$spacing-05;
+}

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,18 @@
-import { Tabs, TabList, Tab, TabPanels, TabPanel, InlineLoading, TabsSkeleton } from '@carbon/react';
-import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
+import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
+import { Tabs, TabList, Tab, TabPanels, TabPanel } 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';
+import { useQueueWorkflowContextOptional } from './queue-workflow-context';
 
 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,54 +20,69 @@ type QueueTabProps = {
   onFiltersChanged?: (filters: Array<QueueFilter>) => void;
 };
 
-const QueueTab: React.FC<QueueTabProps> = ({
+const startedOnOrAfter = dayjs().subtract(24, 'hour').format('YYYY-MM-DD HH:mm:ss');
+
+const QueueTabWithContext: React.FC<
+  QueueTabProps & {
+    validQueues: Queue[];
+    workflowContext: NonNullable<ReturnType<typeof useQueueWorkflowContextOptional>>;
+  }
+> = ({
   queues,
-  cards,
   navigatePath,
-  onTabChanged,
   usePatientChart,
-  filters,
-  onFiltersChanged,
+  filters: filtersProp,
+  onFiltersChanged: onFiltersChangedProp,
+  validQueues,
+  workflowContext,
 }) => {
+  const filters = workflowContext.filters ?? filtersProp ?? [];
+  const onFiltersChanged = workflowContext.setFilters ?? onFiltersChangedProp;
+  const onTabChanged = workflowContext.setCurrQueue;
   const { t } = useTranslation();
-
-  // Filter queues with rooms first
-  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(',')),
-  });
+  const activeQueue = workflowContext.activeQueue;
 
   useEffect(() => {
-    if (!isLoading && isInitialLoad) {
-      setIsInitialLoad(false);
+    const index = validQueues.findIndex((q) => q?.uuid === activeQueue?.uuid);
+    if (index >= 0 && index !== selectedTabIndex) {
+      setSelectedTabIndex(index);
     }
-  }, [isLoading, isInitialLoad]);
+  }, [activeQueue?.uuid, validQueues, selectedTabIndex]);
+
+  const {
+    queueEntries,
+    isLoadingQueueEntries,
+    isValidatingQueueEntries,
+    queueEntriesError: error,
+    queueEntriesPagination: pagination,
+    pageSize,
+    setPageSize,
+  } = workflowContext;
+
+  useEffect(() => {
+    pagination?.goTo(1);
+  }, [selectedQueue?.uuid]);
 
   const queueEntriesByService = useMemo(() => {
     if (!queueEntries?.length || !selectedQueue?.uuid) {
       return [];
     }
     const priorityFilter = filters?.find((filter) => filter.key === 'priority')?.value;
-    const serviceAwaitingFilter = filters?.find((filter) => filter.key === 'service_awaiting')?.value?.split(',') ?? []; // Patient UUIDs
+    const statusFilter =
+      filters?.filter((filter) => filter.key === 'status')?.flatMap((filter) => filter.value.split(',')) ?? [];
+    const serviceAwaitingFilter = filters?.find((filter) => filter.key === 'service_awaiting')?.value?.split(',') ?? [];
     const serviceCompletedFilter =
-      filters?.find((filter) => filter.key === 'service_completed')?.value?.split(',') ?? []; // Patient UUIDs
-    const filtered = queueEntries.filter((entry) => {
-      return (
+      filters?.find((filter) => filter.key === 'service_completed')?.value?.split(',') ?? [];
+    return queueEntries.filter(
+      (entry) =>
         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;
+        (serviceCompletedFilter.length > 0 ? serviceCompletedFilter.includes(entry?.patient?.uuid) : true),
+    );
   }, [filters, queueEntries, selectedQueue?.uuid]);
 
   const handleTabChange = useCallback(
@@ -86,21 +96,112 @@ const QueueTab: React.FC<QueueTabProps> = ({
     [validQueues, onTabChanged],
   );
 
-  if (isInitialLoad && isLoading) {
-    return <TabsSkeleton />;
+  if (error) {
+    return (
+      <div>
+        {t('errorLoadingQueueEntries', 'Error loading queue entries')}: {error.message}
+      </div>
+    );
   }
 
-  if (!queues || queues.length === 0) {
-    return <div>{t('noQueuesAvailable', 'No queues available')}</div>;
-  }
+  return (
+    <div className={styles.queueTab}>
+      <FiltersHeader filters={filters} onFiltersChanged={onFiltersChanged} />
+      <div className={styles.tabsContainer}>
+        <Tabs selectedIndex={selectedTabIndex} onChange={handleTabChange}>
+          <TabList contained>
+            {validQueues.map((queue) => (
+              <Tab key={queue?.uuid}>{startCase(queue?.queueRooms[0]?.display)}</Tab>
+            ))}
+          </TabList>
+          <TabPanels>
+            {validQueues.map((queue) => (
+              <TabPanel key={queue?.uuid}>
+                <QueueEntryTable
+                  queueEntries={queueEntriesByService}
+                  navigatePath={navigatePath}
+                  usePatientChart={usePatientChart}
+                  pagination={pagination}
+                  onPageSizeChange={setPageSize}
+                  isLoading={isLoadingQueueEntries}
+                  isValidating={isValidatingQueueEntries}
+                />
+              </TabPanel>
+            ))}
+          </TabPanels>
+        </Tabs>
+      </div>
+    </div>
+  );
+};
 
-  if (validQueues.length === 0) {
-    return <div>{t('noQueueRooms', 'No queue rooms configured')}</div>;
-  }
+const QueueTabWithoutContext: React.FC<QueueTabProps> = ({
+  queues,
+  navigatePath,
+  onTabChanged: onTabChangedProp,
+  usePatientChart,
+  filters: filtersProp,
+  onFiltersChanged: onFiltersChangedProp,
+}) => {
+  const { t } = useTranslation();
+  const [pageSize, setPageSize] = useState(10);
+  const validQueues = useMemo(() => queues.filter((queue) => queue?.queueRooms?.length > 0), [queues]);
+  const [selectedTabIndex, setSelectedTabIndex] = useState(0);
+  const selectedQueue = validQueues[selectedTabIndex];
 
-  if (!selectedQueue) {
-    return <div>{t('noQueueSelected', 'Please select a queue')}</div>;
-  }
+  const {
+    queueEntries,
+    isLoading: isLoadingQueueEntries,
+    isValidating: isValidatingQueueEntries,
+    error,
+    pagination,
+  } = useQueueEntries(
+    {
+      location: selectedQueue?.location?.uuid ? [selectedQueue.location.uuid] : undefined,
+      startedOnOrAfter,
+      queues: [selectedQueue?.uuid],
+    },
+    pageSize,
+  );
+
+  useEffect(() => {
+    pagination?.goTo(1);
+  }, [selectedQueue?.uuid]);
+
+  const filters = filtersProp ?? [];
+  const onFiltersChanged = onFiltersChangedProp;
+  const onTabChanged = onTabChangedProp;
+
+  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(',') ?? [];
+    const serviceCompletedFilter =
+      filters?.find((filter) => filter.key === 'service_completed')?.value?.split(',') ?? [];
+    return queueEntries.filter(
+      (entry) =>
+        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),
+    );
+  }, [filters, queueEntries, selectedQueue?.uuid]);
+
+  const handleTabChange = useCallback(
+    (evt: { selectedIndex: number }) => {
+      setSelectedTabIndex(evt.selectedIndex);
+      const newQueue = validQueues[evt.selectedIndex];
+      if (newQueue) {
+        onTabChanged?.(newQueue);
+      }
+    },
+    [validQueues, onTabChanged],
+  );
 
   if (error) {
     return (
@@ -112,18 +213,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}>
@@ -133,17 +222,16 @@ const QueueTab: React.FC<QueueTabProps> = ({
             ))}
           </TabList>
           <TabPanels>
-            {validQueues.map((queue, index) => (
+            {validQueues.map((queue) => (
               <TabPanel key={queue?.uuid}>
-                {isLoading && !isInitialLoad && (
-                  <div className={styles.loadingOverlay}>
-                    <InlineLoading description={t('loadingQueueEntries', 'Loading queue entries...')} />
-                  </div>
-                )}
                 <QueueEntryTable
                   queueEntries={queueEntriesByService}
                   navigatePath={navigatePath}
                   usePatientChart={usePatientChart}
+                  pagination={pagination}
+                  onPageSizeChange={setPageSize}
+                  isLoading={isLoadingQueueEntries}
+                  isValidating={isValidatingQueueEntries}
                 />
               </TabPanel>
             ))}
@@ -154,4 +242,28 @@ const QueueTab: React.FC<QueueTabProps> = ({
   );
 };
 
+const QueueTab: React.FC<QueueTabProps> = (props) => {
+  const workflowContext = useQueueWorkflowContextOptional();
+  const { t } = useTranslation();
+  const validQueues = useMemo(() => props.queues.filter((queue) => queue?.queueRooms?.length > 0), [props.queues]);
+
+  if (!props.queues || props.queues.length === 0) {
+    return <div>{t('noQueuesAvailable', 'No queues available')}</div>;
+  }
+
+  if (validQueues.length === 0) {
+    return <div>{t('noQueueRooms', 'No queue rooms configured')}</div>;
+  }
+
+  if (!validQueues[0]) {
+    return <div>{t('noQueueSelected', 'Please select a queue')}</div>;
+  }
+
+  if (workflowContext) {
+    return <QueueTabWithContext {...props} validQueues={validQueues} workflowContext={workflowContext} />;
+  }
+
+  return <QueueTabWithoutContext {...props} />;
+};
+
 export default QueueTab;

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;
 }