@kenyaemr/esm-service-queues-app 7.0.2-pre.67 → 7.0.2-pre.68

package/src/patient-queue-metrics/queue-metrics.resource.ts

@@ -1,5 +1,4 @@
 import useSWR from 'swr';
-import useSWRImmutable from 'swr/immutable';
 import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import { type Appointment, type QueueServiceInfo } from '../types';
 import { startOfDay } from '../constants';
@@ -11,7 +10,7 @@ export function useServiceMetricsCount(service: string, location: string) {
     (service ? `&service=${service}` : '') +
     (location ? `&location=${location}` : '');
 
-  const { data } = useSWRImmutable<
+  const { data } = useSWR<
     {
       data: {
         count: number;

package/src/patient-search/patient-scheduled-visits.scss

@@ -7,7 +7,7 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  height: calc(var(--desktop-workspace-window-height) - 7rem - 2px); // 7rem patient banner, plus border
+  height: 100%;
 }
 
 .grid {

package/src/patient-search/patient-search.scss

@@ -2,6 +2,12 @@
 @use '@carbon/styles/scss/type';
 @import '~@openmrs/esm-styleguide/src/vars';
 
+.patientSearchContainer {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
 .patientBannerContainer {
   display: flex;
   flex-direction: column;

package/src/patient-search/patient-search.workspace.tsx

@@ -4,10 +4,10 @@ import { SearchTypes } from '../types';
 import PatientScheduledVisits from './patient-scheduled-visits.component';
 import VisitForm from './visit-form/visit-form.component';
 import {
-  ArrowLeftIcon,
   type DefaultWorkspaceProps,
-  displayName,
+  ArrowLeftIcon,
   ErrorState,
+  getPatientName,
   PatientBannerContactDetails,
   PatientBannerPatientInfo,
   PatientBannerToggleContactDetailsButton,
@@ -76,35 +76,35 @@ const PatientSearch: React.FC<PatientSearchProps> = ({
     }
   }, [searchType, handleBackToSearchList]);
 
-  const patientName = patient && displayName(patient);
+  const patientName = patient && getPatientName(patient);
   return patient ? (
-    <AddPatientToQueueContext.Provider value={{ currentServiceQueueUuid }}>
-      <div className={styles.patientBannerContainer}>
-        <div className={styles.patientBanner}>
-          <div className={styles.patientPhoto}>
-            <PatientPhoto patientUuid={patient.id} patientName={patientName} />
+    <div className={styles.patientSearchContainer}>
+      <AddPatientToQueueContext.Provider value={{ currentServiceQueueUuid }}>
+        <div className={styles.patientBannerContainer}>
+          <div className={styles.patientBanner}>
+            <div className={styles.patientPhoto}>
+              <PatientPhoto patientUuid={patient.id} patientName={patientName} />
+            </div>
+            <PatientBannerPatientInfo patient={patient} />
+            <PatientBannerToggleContactDetailsButton
+              showContactDetails={showContactDetails}
+              toggleContactDetails={() => setContactDetails(!showContactDetails)}
+            />
           </div>
-          <PatientBannerPatientInfo patient={patient} />
-          <PatientBannerToggleContactDetailsButton
-            showContactDetails={showContactDetails}
-            toggleContactDetails={() => setContactDetails(!showContactDetails)}
-          />
+          {showContactDetails ? (
+            <PatientBannerContactDetails patientId={patient.id} deceased={patient.deceasedBoolean} />
+          ) : null}
+        </div>
+        <div className={styles.backButton}>
+          <Button
+            kind="ghost"
+            renderIcon={(props) => <ArrowLeftIcon size={24} {...props} />}
+            iconDescription={backButtonDescription}
+            size="sm"
+            onClick={handleBackToAction}>
+            <span>{backButtonDescription}</span>
+          </Button>
         </div>
-        {showContactDetails ? (
-          <PatientBannerContactDetails patientId={patient.id} deceased={patient.deceasedBoolean} />
-        ) : null}
-      </div>
-      <div className={styles.backButton}>
-        <Button
-          kind="ghost"
-          renderIcon={(props) => <ArrowLeftIcon size={24} {...props} />}
-          iconDescription={backButtonDescription}
-          size="sm"
-          onClick={() => handleBackToAction()}>
-          <span>{backButtonDescription}</span>
-        </Button>
-      </div>
-      <div>
         {activeVisit ? (
           <ExistingVisitFormComponent visit={activeVisit} closeWorkspace={closeWorkspace} />
         ) : (
@@ -127,8 +127,8 @@ const PatientSearch: React.FC<PatientSearchProps> = ({
             ) : null}
           </>
         )}
-      </div>
-    </AddPatientToQueueContext.Provider>
+      </AddPatientToQueueContext.Provider>
+    </div>
   ) : null;
 };
 

package/src/patient-search/visit-form/visit-form.component.tsx

@@ -327,16 +327,16 @@ const VisitForm: React.FC<VisitFormProps> = ({ patientUuid, closeWorkspace }) =>
           )}
 
           <VisitFormQueueFields setFormFields={setVisitFormFields} />
-          <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
-            <Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
-              {t('discard', 'Discard')}
-            </Button>
-            <Button className={styles.button} disabled={isSubmitting} kind="primary" type="submit">
-              {t('startVisit', 'Start visit')}
-            </Button>
-          </ButtonSet>
         </Stack>
       </div>
+      <ButtonSet className={isTablet ? styles.tabletButtons : styles.desktopButtons}>
+        <Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
+          {t('discard', 'Discard')}
+        </Button>
+        <Button className={styles.button} disabled={isSubmitting} kind="primary" type="submit">
+          {t('startVisit', 'Start visit')}
+        </Button>
+      </ButtonSet>
     </Form>
   );
 };

package/src/patient-search/visit-form/visit-form.scss

@@ -46,7 +46,7 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  height: calc(var(--desktop-workspace-window-height) - 7rem - 2px); // 7rem patient banner, plus border
+  height: 100%;
 }
 
 .button {
@@ -57,13 +57,15 @@
   min-width: 50%;
 }
 
-.tablet {
+.tabletButtons {
   padding: spacing.$spacing-06 spacing.$spacing-05;
+  margin-top: spacing.$spacing-10;
   background-color: $ui-02;
 }
 
-.desktop {
+.desktopButtons {
   padding: 0rem;
+  margin-top: spacing.$spacing-10;
 }
 
 @media screen and (max-width: 600px) {

package/src/patient-search/visit-form-queue-fields/visit-form-queue-fields.component.tsx

@@ -1,15 +1,22 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
-import { InlineNotification, Select, SelectItem, RadioButtonGroup, RadioButton, TextInput } from '@carbon/react';
-import { useQueueLocations } from '../hooks/useQueueLocations';
-import styles from './visit-form-queue-fields.scss';
+import {
+  InlineNotification,
+  RadioButton,
+  RadioButtonGroup,
+  RadioButtonSkeleton,
+  Select,
+  SelectItem,
+  SelectSkeleton,
+  TextInput,
+} from '@carbon/react';
 import { useConfig, ResponsiveWrapper, useSession } from '@openmrs/esm-framework';
-import { useTranslation } from 'react-i18next';
 import { useQueues } from '../../hooks/useQueues';
+import { useQueueLocations } from '../hooks/useQueueLocations';
 import { type ConfigObject } from '../../config-schema';
-import { SelectSkeleton } from '@carbon/react';
-import { RadioButtonSkeleton } from '@carbon/react';
 import { AddPatientToQueueContext } from '../patient-search.workspace';
+import styles from './visit-form-queue-fields.scss';
 
 export interface VisitFormQueueFieldsProps {
   setFormFields: (fields: {

package/src/queue-patient-linelists/queue-linelist-filter.scss

@@ -48,16 +48,6 @@
   margin-top: spacing.$spacing-05;
 }
 
-/* Desktop */
-:global(.omrs-breakpoint-gt-tablet) {
-  .form {
-    height: calc(100vh - 6rem);
-  }
-}
-
-/* Tablet */
-:global(.omrs-breakpoint-lt-desktop) {
-  .form {
-    height: calc(100vh - 3rem);
-  }
+.form {
+  height: 100%;
 }

package/src/queue-rooms/queue-room-form.scss

@@ -25,7 +25,7 @@ $overlay-header-height: 5.5rem;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  height: var(--desktop-workspace-window-height);
+  height: 100%;
 }
 
 .grid {

package/src/queue-screen/queue-screen.component.tsx

@@ -28,7 +28,7 @@ const QueueScreen: React.FC<QueueScreenProps> = () => {
 
   return (
     <div>
-      <PatientQueueHeader title={t('queueScreen', 'Queue screen')} />
+      <PatientQueueHeader title={t('queueScreen', 'Queue screen')} showLocationDropdown />
       <div className={styles.gridFlow}>
         {rowData.map((row) => (
           <div className={styles.card} key={row.id}>

package/src/queue-services/queue-service-form.scss

@@ -23,7 +23,7 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  height: var(--desktop-workspace-window-height);
+  height: 100%;
 }
 
 .grid {
@@ -51,7 +51,7 @@
 /* Tablet */
 :global(.omrs-breakpoint-lt-desktop) {
   .form {
-    height: var(--tablet-workspace-window-height);
+    height: 100%;
   }
 
   .buttonSet {

package/src/queue-table/cells/queue-table-action-cell.component.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
 import { Button, OverflowMenu, OverflowMenuItem } from '@carbon/react';
-import { showModal } from '@openmrs/esm-framework';
+import { isDesktop, showModal, useLayoutType } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 import { type QueueTableColumnFunction, type QueueTableCellComponentProps } from '../../types';
 import styles from './queue-table-action-cell.scss';
 
 export function QueueTableActionCell({ queueEntry }: QueueTableCellComponentProps) {
   const { t } = useTranslation();
+  const layout = useLayoutType();
 
   return (
-    <div className={styles.actionCellContainer}>
+    <div className={styles.actionsCell}>
       <Button
         kind="ghost"
         aria-label={t('actions', 'Actions')}
@@ -18,10 +19,11 @@ export function QueueTableActionCell({ queueEntry }: QueueTableCellComponentProp
             closeModal: () => dispose(),
             queueEntry,
           });
-        }}>
+        }}
+        size={isDesktop(layout) ? 'sm' : 'lg'}>
         {t('transition', 'Transition')}
       </Button>
-      <OverflowMenu aria-label="Actions menu" size="sm" flipped>
+      <OverflowMenu aria-label="Actions menu" size={isDesktop(layout) ? 'sm' : 'lg'} flipped>
         <OverflowMenuItem
           className={styles.menuItem}
           aria-label={t('edit', 'Edit')}

package/src/queue-table/cells/queue-table-action-cell.scss

@@ -5,3 +5,10 @@
 .menuItem {
   max-width: none;
 }
+
+.actionsCell {
+  display: flex;
+  justify-content: flex-end;
+  height: 100%;
+  align-items: center;
+}

package/src/queue-table/default-queue-table.component.tsx

@@ -13,18 +13,19 @@ import {
 import { useTranslation } from 'react-i18next';
 import ClearQueueEntries from '../clear-queue-entries-dialog/clear-queue-entries.component';
 import {
-  updateSelectedServiceName,
-  updateSelectedServiceUuid,
+  updateSelectedQueueStatus,
+  updateSelectedService,
   useSelectedQueueLocationUuid,
-  useSelectedServiceName,
-  useSelectedServiceUuid,
+  useSelectedQueueStatus,
+  useSelectedService,
 } from '../helpers/helpers';
-import { useQueues } from '../hooks/useQueues';
 import { useQueueEntries } from '../hooks/useQueueEntries';
 import QueueTableExpandedRow from './queue-table-expanded-row.component';
 import QueueTable from './queue-table.component';
 import styles from './queue-table.scss';
 import { useColumns } from './cells/columns.resource';
+import useQueueStatuses from '../hooks/useQueueStatuses';
+import useQueueServices from '../hooks/useQueueService';
 
 const serviceQueuesPatientSearchWorkspace = 'service-queues-patient-search';
 
@@ -33,12 +34,14 @@ Component with default values / sub-components passed into the more generic Queu
 This is used in the main dashboard of the queues app. (Currently behind a feature flag)
 */
 function DefaultQueueTable() {
-  const selectedQueueUuid = useSelectedServiceUuid();
+  const selectedService = useSelectedService();
   const currentLocationUuid = useSelectedQueueLocationUuid();
-  const { queueEntries, isLoading, isValidating, error } = useQueueEntries({
-    queue: selectedQueueUuid,
+  const selectedQueueStatus = useSelectedQueueStatus();
+  const { queueEntries, isLoading, error, isValidating } = useQueueEntries({
+    service: selectedService?.serviceUuid,
     location: currentLocationUuid,
     isEnded: false,
+    status: selectedQueueStatus?.statusUuid,
   });
 
   const { t } = useTranslation();
@@ -83,10 +86,6 @@ function DefaultQueueTable() {
     });
   }, [queueEntries, searchTerm]);
 
-  if (isLoading && !queueEntries.length) {
-    return <DataTableSkeleton role="progressbar" />;
-  }
-
   return (
     <div className={styles.container}>
       <div className={styles.headerContainer}>
@@ -113,7 +112,7 @@ function DefaultQueueTable() {
                 setIsPatientSearchOpen(false);
                 launchWorkspace(serviceQueuesPatientSearchWorkspace, {
                   selectedPatientUuid,
-                  currentServiceQueueUuid: selectedQueueUuid,
+                  currentServiceQueueUuid: selectedService?.serviceUuid,
                   handleBackToSearchList,
                 });
               },
@@ -121,23 +120,30 @@ function DefaultQueueTable() {
           />
         </div>
       </div>
-      <QueueTable
-        queueEntries={filteredQueueEntries ?? []}
-        isValidating={isValidating}
-        queueUuid={null}
-        statusUuid={null}
-        ExpandedRow={QueueTableExpandedRow}
-        tableFilter={[
-          <QueueDropdownFilter />,
-          <TableToolbarSearch
-            className={styles.search}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            placeholder={t('searchThisList', 'Search this list')}
-            size={isDesktop(layout) ? 'sm' : 'lg'}
-          />,
-          <ClearQueueEntries queueEntries={filteredQueueEntries} />,
-        ]}
-      />
+      {!isLoading ? (
+        <div className={styles.paddedQueueTable}>
+          <QueueTable
+            queueEntries={filteredQueueEntries ?? []}
+            isValidating={isValidating}
+            queueUuid={null}
+            statusUuid={null}
+            ExpandedRow={QueueTableExpandedRow}
+            tableFilter={[
+              <QueueDropdownFilter />,
+              <StatusDropdownFilter />,
+              <TableToolbarSearch
+                className={styles.search}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                placeholder={t('searchThisList', 'Search this list')}
+                size={isDesktop(layout) ? 'sm' : 'lg'}
+              />,
+              <ClearQueueEntries queueEntries={filteredQueueEntries} />,
+            ]}
+          />
+        </div>
+      ) : (
+        <DataTableSkeleton role="progressbar" />
+      )}
     </div>
   );
 }
@@ -145,12 +151,10 @@ function DefaultQueueTable() {
 function QueueDropdownFilter() {
   const { t } = useTranslation();
   const layout = useLayoutType();
-  const currentQueueLocation = useSelectedQueueLocationUuid();
-  const { queues } = useQueues(currentQueueLocation);
-  const currentServiceName = useSelectedServiceName();
+  const { services } = useQueueServices();
+  const selectedService = useSelectedService();
   const handleServiceChange = ({ selectedItem }) => {
-    updateSelectedServiceUuid(selectedItem.uuid);
-    updateSelectedServiceName(selectedItem.display);
+    updateSelectedService(selectedItem.uuid, selectedItem?.display);
   };
 
   return (
@@ -158,10 +162,37 @@ function QueueDropdownFilter() {
       <div className={styles.filterContainer}>
         <Dropdown
           id="serviceFilter"
-          titleText={t('showPatientsWaitingFor', 'Show patients waiting for') + ':'}
-          label={currentServiceName}
+          titleText={t('filterByService', 'Filter by service :')}
+          label={selectedService?.serviceDisplay ?? t('all', 'All')}
+          type="inline"
+          items={[{ display: `${t('all', 'All')}` }, ...(services ?? [])]}
+          itemToString={(item) => (item ? item.display : '')}
+          onChange={handleServiceChange}
+          size={isDesktop(layout) ? 'sm' : 'lg'}
+        />
+      </div>
+    </>
+  );
+}
+
+function StatusDropdownFilter() {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+  const { statuses } = useQueueStatuses();
+  const queueStatus = useSelectedQueueStatus();
+  const handleServiceChange = ({ selectedItem }) => {
+    updateSelectedQueueStatus(selectedItem.uuid, selectedItem?.display);
+  };
+
+  return (
+    <>
+      <div className={styles.filterContainer}>
+        <Dropdown
+          id="statusFilter"
+          titleText={t('filterByStatus', 'Filter by status :')}
+          label={queueStatus?.statusDisplay ?? t('all', 'All')}
           type="inline"
-          items={[{ display: `${t('all', 'All')}` }, ...queues]}
+          items={[{ display: `${t('all', 'All')}` }, ...(statuses ?? [])]}
           itemToString={(item) => (item ? item.display : '')}
           onChange={handleServiceChange}
           size={isDesktop(layout) ? 'sm' : 'lg'}

package/src/queue-table/queue-entry-actions/{edit-queue-entry-modal.component.tsx → edit-queue-entry.modal.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { type QueueEntry } from '../../types';
-import QueueEntryActionModal from './queue-entry-actions-modal.component';
+import QueueEntryActionModal from './queue-entry-actions.modal';
 import { updateQueueEntry } from './queue-entry-actions.resource';
 import { useQueues } from '../../hooks/useQueues';
 import { convertTime12to24 } from '../../helpers/time-helpers';

package/src/queue-table/queue-entry-actions/{end-queue-entry-modal.component.tsx → end-queue-entry.modal.tsx}

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { type QueueEntry } from '../../types';
 import { updateQueueEntry } from './queue-entry-actions.resource';
-import QueueEntryConfirmActionModal from './queue-entry-confirm-action-modal.component';
+import QueueEntryConfirmActionModal from './queue-entry-confirm-action.modal';
 
 interface EndQueueEntryModalProps {
   queueEntry: QueueEntry;

package/src/queue-table/queue-entry-actions/{queue-entry-actions-modal.test.tsx → queue-entry-actions.test.tsx}

@@ -3,9 +3,9 @@ import { screen } from '@testing-library/react';
 import { mockQueueEntryBrian, mockQueueSurgery, mockStatusInService, mockQueues } from '__mocks__';
 import React from 'react';
 import { renderWithSwr } from 'tools';
-import TransitionQueueEntryModal from './transition-queue-entry-modal.component';
+import TransitionQueueEntryModal from './transition-queue-entry.modal';
 import userEvent from '@testing-library/user-event';
-import EditQueueEntryModal from './edit-queue-entry-modal.component';
+import EditQueueEntryModal from './edit-queue-entry.modal';
 
 const mockedOpenmrsFetch = openmrsFetch as jest.Mock;
 

package/src/queue-table/queue-entry-actions/{queue-entry-confirm-action-modal.test.tsx → queue-entry-confirm-action.test.tsx}

@@ -4,9 +4,9 @@ import { mockQueues, mockQueueEntryAlice } from '__mocks__';
 import React from 'react';
 import { renderWithSwr } from 'tools';
 import userEvent from '@testing-library/user-event';
-import UndoTransitionQueueEntryModal from './undo-transition-queue-entry-modal.component';
-import VoidQueueEntryModal from './void-queue-entry-modal.component';
-import EndQueueEntryModal from './end-queue-entry-modal.component';
+import UndoTransitionQueueEntryModal from './undo-transition-queue-entry.modal';
+import VoidQueueEntryModal from './void-queue-entry.modal';
+import EndQueueEntryModal from './end-queue-entry.modal';
 
 const mockedOpenmrsFetch = openmrsFetch as jest.Mock;
 

package/src/queue-table/queue-entry-actions/{queue-entry-undo-actions-modal.test.tsx → queue-entry-undo-actions.test.tsx}

@@ -4,8 +4,8 @@ import { mockQueues, mockQueueEntryAlice } from '__mocks__';
 import React from 'react';
 import { renderWithSwr } from 'tools';
 import userEvent from '@testing-library/user-event';
-import UndoTransitionQueueEntryModal from './undo-transition-queue-entry-modal.component';
-import VoidQueueEntryModal from './void-queue-entry-modal.component';
+import UndoTransitionQueueEntryModal from './undo-transition-queue-entry.modal';
+import VoidQueueEntryModal from './void-queue-entry.modal';
 
 const mockedOpenmrsFetch = openmrsFetch as jest.Mock;
 

package/src/queue-table/queue-entry-actions/{transition-queue-entry-modal.component.tsx → transition-queue-entry.modal.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { type QueueEntry } from '../../types';
-import QueueEntryActionModal from './queue-entry-actions-modal.component';
+import QueueEntryActionModal from './queue-entry-actions.modal';
 import { transitionQueueEntry } from './queue-entry-actions.resource';
 import { convertTime12to24 } from '../../helpers/time-helpers';
 

package/src/queue-table/queue-entry-actions/{undo-transition-queue-entry-modal.component.tsx → undo-transition-queue-entry.modal.tsx}

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { type QueueEntry } from '../../types';
 import { undoTransition } from './queue-entry-actions.resource';
-import QueueEntryConfirmActionModal from './queue-entry-confirm-action-modal.component';
+import QueueEntryConfirmActionModal from './queue-entry-confirm-action.modal';
 
 interface UndoTransitionQueueEntryModalProps {
   queueEntry: QueueEntry;

package/src/queue-table/queue-entry-actions/{void-queue-entry-modal.component.tsx → void-queue-entry.modal.tsx}

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { type QueueEntry } from '../../types';
 import { voidQueueEntry } from './queue-entry-actions.resource';
-import QueueEntryConfirmActionModal from './queue-entry-confirm-action-modal.component';
+import QueueEntryConfirmActionModal from './queue-entry-confirm-action.modal';
 
 interface VoidQueueEntryModalProps {
   queueEntry: QueueEntry;

package/src/queue-table/queue-table-by-status-skeleton.component.tsx

@@ -2,31 +2,31 @@ import { DataTableSkeleton, SkeletonText, Tab, TabList, TabPanel, TabPanels, Tab
 import { isDesktop, useLayoutType } from '@openmrs/esm-framework';
 import React from 'react';
 import styles from './queue-table.scss';
+import classNames from 'classnames';
 
 export const QueueTableByStatusSkeleton = () => {
   const layout = useLayoutType();
 
   return (
     <div className={styles.container}>
-      <div className={styles.headerContainer}>
-        <div className={!isDesktop(layout) ? styles.tabletHeading : styles.desktopHeading}>
-          <h3>
-            <SkeletonText />
-          </h3>
-        </div>
+      <div className={styles.statusTableContainer}>
+        <h5 className={styles.statusTableHeader}>
+          <SkeletonText width={'40%'} />
+        </h5>
+        <DataTableSkeleton showHeader={false} />
+      </div>
+      <div className={styles.statusTableContainer}>
+        <h5 className={styles.statusTableHeader}>
+          <SkeletonText width={'40%'} />
+        </h5>
+        <DataTableSkeleton showHeader={false} />
+      </div>
+      <div className={styles.statusTableContainer}>
+        <h5 className={styles.statusTableHeader}>
+          <SkeletonText width={'40%'} />
+        </h5>
+        <DataTableSkeleton showHeader={false} />
       </div>
-      <Tabs selectedIndex={0}>
-        <TabList>
-          <Tab>
-            <SkeletonText />
-          </Tab>
-        </TabList>
-      </Tabs>
-      <TabPanels>
-        <TabPanel>
-          <DataTableSkeleton />
-        </TabPanel>
-      </TabPanels>
     </div>
   );
 };

package/src/queue-table/queue-table-metrics-card.scss

@@ -15,7 +15,7 @@
 }
 
 .tileContainerWithoutBorder {
-  height: 4.875rem;
+  padding: spacing.$spacing-04;
 }
 
 .tileHeader {

package/src/queue-table/queue-table-metrics.scss

@@ -7,5 +7,5 @@
   display: flex;
   justify-content: space-between;
   flex-flow: row wrap;
-  margin-top: -(spacing.$spacing-03);
+  margin: spacing.$spacing-05;
 }