@kenyaemr/esm-service-queues-app 7.0.2-pre.65

package/src/queue-table/queue-entry-actions/queue-entry-confirm-action-modal.component.tsx

@@ -0,0 +1,97 @@
+import React, { type ReactNode, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { type QueueEntry } from '../../types';
+import { Button, ModalHeader, ModalBody, ModalFooter, Stack } from '@carbon/react';
+import { type FetchResponse, showSnackbar } from '@openmrs/esm-framework';
+import { useMutateQueueEntries } from '../../hooks/useQueueEntries';
+
+interface QueueEntryUndoActionsModalProps {
+  queueEntry: QueueEntry;
+  closeModal: () => void;
+  modalParams: ModalParams;
+}
+
+interface ModalParams {
+  modalTitle: string;
+  modalInstruction: ReactNode;
+  submitButtonText: string;
+  submitSuccessTitle: string;
+  submitSuccessText: string;
+  submitFailureTitle: string;
+  submitAction: (queueEntry: QueueEntry) => Promise<FetchResponse<any>>;
+}
+// Modal for confirming a queue entry action that does not require additional form fields / inputs from user
+// Used by UndoTransitionQueueEntryModal, VoidQueueEntryModal and EndQueueEntryModal
+export const QueueEntryConfirmActionModal: React.FC<QueueEntryUndoActionsModalProps> = ({
+  queueEntry,
+  closeModal,
+  modalParams,
+}) => {
+  const { t } = useTranslation();
+  const { mutateQueueEntries } = useMutateQueueEntries();
+  const {
+    modalTitle,
+    modalInstruction,
+    submitButtonText,
+    submitSuccessTitle,
+    submitSuccessText,
+    submitFailureTitle,
+    submitAction,
+  } = modalParams;
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const submitForm = (e) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+
+    submitAction(queueEntry)
+      .then(({ status }) => {
+        const success = status >= 200 && status < 300;
+        if (success) {
+          showSnackbar({
+            isLowContrast: true,
+            title: submitSuccessTitle,
+            kind: 'success',
+            subtitle: submitSuccessText,
+          });
+          mutateQueueEntries();
+          closeModal();
+        } else {
+          throw { message: t('unexpectedServerResponse', 'Unexpected Server Response') };
+        }
+      })
+      .catch((error) => {
+        showSnackbar({
+          title: submitFailureTitle,
+          kind: 'error',
+          subtitle: error?.message,
+        });
+      })
+      .finally(() => {
+        setIsSubmitting(false);
+      });
+  };
+
+  return (
+    <>
+      <ModalHeader closeModal={closeModal} title={modalTitle} />
+      <ModalBody>
+        <Stack gap={4}>
+          <h5>{queueEntry.display}</h5>
+          {modalInstruction}
+        </Stack>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button disabled={isSubmitting} onClick={submitForm}>
+          {submitButtonText}
+        </Button>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default QueueEntryConfirmActionModal;

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

@@ -0,0 +1,106 @@
+import { openmrsFetch, showSnackbar } from '@openmrs/esm-framework';
+import { screen } from '@testing-library/react';
+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';
+
+const mockedOpenmrsFetch = openmrsFetch as jest.Mock;
+
+jest.mock('../../hooks/useQueues', () => {
+  return {
+    useQueues: jest.fn().mockReturnValue({
+      queues: mockQueues,
+    }),
+  };
+});
+
+describe('UndoTransitionQueueEntryModal: ', () => {
+  const queueEntry = mockQueueEntryAlice;
+
+  it('has a cancel button that closes the modal', async () => {
+    const closeModal = jest.fn();
+    const user = userEvent.setup();
+
+    renderWithSwr(<UndoTransitionQueueEntryModal queueEntry={queueEntry} closeModal={closeModal} />);
+    const cancelButton = screen.getByText('Cancel');
+    await user.click(cancelButton);
+    expect(closeModal).toHaveBeenCalled();
+  });
+
+  it('has an working submit button', async () => {
+    mockedOpenmrsFetch.mockResolvedValue({
+      status: 200,
+    });
+    const user = userEvent.setup();
+    renderWithSwr(<UndoTransitionQueueEntryModal queueEntry={queueEntry} closeModal={() => {}} />);
+
+    const submitButton = screen.getByRole('button', { name: /Undo transition/ });
+    expect(submitButton).not.toBeDisabled();
+    await user.click(submitButton);
+
+    expect(mockedOpenmrsFetch).toHaveBeenCalled();
+    expect(showSnackbar).toHaveBeenCalled();
+  });
+});
+
+describe('VoidQueueEntryModal: ', () => {
+  const queueEntry = mockQueueEntryAlice;
+
+  it('has a cancel button that closes the modal', async () => {
+    const closeModal = jest.fn();
+    const user = userEvent.setup();
+
+    renderWithSwr(<VoidQueueEntryModal queueEntry={queueEntry} closeModal={closeModal} />);
+    const cancelButton = screen.getByText('Cancel');
+    await user.click(cancelButton);
+    expect(closeModal).toHaveBeenCalled();
+  });
+
+  it('has an working submit button', async () => {
+    mockedOpenmrsFetch.mockResolvedValue({
+      status: 200,
+    });
+    const user = userEvent.setup();
+    renderWithSwr(<VoidQueueEntryModal queueEntry={queueEntry} closeModal={() => {}} />);
+
+    const submitButton = screen.getByRole('button', { name: /Delete queue entry/ });
+    expect(submitButton).not.toBeDisabled();
+    await user.click(submitButton);
+
+    expect(mockedOpenmrsFetch).toHaveBeenCalled();
+    expect(showSnackbar).toHaveBeenCalled();
+  });
+});
+
+describe('EndQueueEntryModal: ', () => {
+  const queueEntry = mockQueueEntryAlice;
+
+  it('has a cancel button that closes the modal', async () => {
+    const closeModal = jest.fn();
+    const user = userEvent.setup();
+
+    renderWithSwr(<EndQueueEntryModal queueEntry={queueEntry} closeModal={closeModal} />);
+    const cancelButton = screen.getByText('Cancel');
+    await user.click(cancelButton);
+    expect(closeModal).toHaveBeenCalled();
+  });
+
+  it('has an working submit button', async () => {
+    mockedOpenmrsFetch.mockResolvedValue({
+      status: 200,
+    });
+    const user = userEvent.setup();
+    renderWithSwr(<EndQueueEntryModal queueEntry={queueEntry} closeModal={() => {}} />);
+
+    const submitButton = screen.getByRole('button', { name: /Remove patient/ });
+    expect(submitButton).not.toBeDisabled();
+    await user.click(submitButton);
+
+    expect(mockedOpenmrsFetch).toHaveBeenCalled();
+    expect(showSnackbar).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,76 @@
+import { openmrsFetch, showSnackbar } from '@openmrs/esm-framework';
+import { screen } from '@testing-library/react';
+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';
+
+const mockedOpenmrsFetch = openmrsFetch as jest.Mock;
+
+jest.mock('../../hooks/useQueues', () => {
+  return {
+    useQueues: jest.fn().mockReturnValue({
+      queues: mockQueues,
+    }),
+  };
+});
+
+describe('UndoTransitionQueueEntryModal: ', () => {
+  const queueEntry = mockQueueEntryAlice;
+
+  it('has a cancel button that closes the modal', async () => {
+    const closeModal = jest.fn();
+    const user = userEvent.setup();
+
+    renderWithSwr(<UndoTransitionQueueEntryModal queueEntry={queueEntry} closeModal={closeModal} />);
+    const cancelButton = screen.getByText('Cancel');
+    await user.click(cancelButton);
+    expect(closeModal).toHaveBeenCalled();
+  });
+
+  it('has an working submit button', async () => {
+    mockedOpenmrsFetch.mockResolvedValue({
+      status: 200,
+    });
+    const user = userEvent.setup();
+    renderWithSwr(<UndoTransitionQueueEntryModal queueEntry={queueEntry} closeModal={() => {}} />);
+
+    const submitButton = screen.getByRole('button', { name: /Undo transition/ });
+    expect(submitButton).not.toBeDisabled();
+    await user.click(submitButton);
+
+    expect(mockedOpenmrsFetch).toHaveBeenCalled();
+    expect(showSnackbar).toHaveBeenCalled();
+  });
+});
+
+describe('VoidQueueEntryModal: ', () => {
+  const queueEntry = mockQueueEntryAlice;
+
+  it('has a cancel button that closes the modal', async () => {
+    const closeModal = jest.fn();
+    const user = userEvent.setup();
+
+    renderWithSwr(<VoidQueueEntryModal queueEntry={queueEntry} closeModal={closeModal} />);
+    const cancelButton = screen.getByText('Cancel');
+    await user.click(cancelButton);
+    expect(closeModal).toHaveBeenCalled();
+  });
+
+  it('has an working submit button', async () => {
+    mockedOpenmrsFetch.mockResolvedValue({
+      status: 200,
+    });
+    const user = userEvent.setup();
+    renderWithSwr(<VoidQueueEntryModal queueEntry={queueEntry} closeModal={() => {}} />);
+
+    const submitButton = screen.getByRole('button', { name: /Delete queue entry/ });
+    expect(submitButton).not.toBeDisabled();
+    await user.click(submitButton);
+
+    expect(mockedOpenmrsFetch).toHaveBeenCalled();
+    expect(showSnackbar).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { type QueueEntry } from '../../types';
+import QueueEntryActionModal from './queue-entry-actions-modal.component';
+import { transitionQueueEntry } from './queue-entry-actions.resource';
+import { convertTime12to24 } from '../../helpers/time-helpers';
+
+interface TransitionQueueEntryModalProps {
+  queueEntry: QueueEntry;
+  closeModal: () => void;
+}
+
+const TransitionQueueEntryModal: React.FC<TransitionQueueEntryModalProps> = ({ queueEntry, closeModal }) => {
+  const { t } = useTranslation();
+  return (
+    <QueueEntryActionModal
+      queueEntry={queueEntry}
+      closeModal={closeModal}
+      modalParams={{
+        modalTitle: t('transitionPatient', 'Transition patient'),
+        modalInstruction: t(
+          'transitionPatientStatusOrQueue',
+          'Select a new status or queue for patient to transition to.',
+        ),
+        submitButtonText: t('transitionPatient', 'Transition patient'),
+        submitSuccessTitle: t('queueEntryTransitioned', 'Queue entry transitioned'),
+        submitSuccessText: t('queueEntryTransitionedSuccessfully', 'Queue entry transitioned successfully'),
+        submitFailureTitle: t('queueEntryTransitionFailed', 'Error transitioning queue entry'),
+        submitAction: (queueEntry, formState) => {
+          const transitionDate = new Date(formState.transitionDate);
+          const [hour, minute] = convertTime12to24(formState.transitionTime, formState.transitionTimeFormat);
+          transitionDate.setHours(hour, minute, 0, 0);
+
+          return transitionQueueEntry({
+            queueEntryToTransition: queueEntry.uuid,
+            newQueue: formState.selectedQueue,
+            newStatus: formState.selectedStatus,
+            newPriority: formState.selectedPriority,
+            newPriorityComment: formState.prioritycomment,
+            ...(formState.modifyDefaultTransitionDateTime ? { transitionDate: transitionDate.toISOString() } : {}),
+          });
+        },
+        disableSubmit: (queueEntry, formState) =>
+          formState.selectedQueue == queueEntry.queue.uuid && formState.selectedStatus == queueEntry.status.uuid,
+        isTransition: true,
+      }}
+    />
+  );
+};
+
+export default TransitionQueueEntryModal;

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

@@ -0,0 +1,58 @@
+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';
+
+interface UndoTransitionQueueEntryModalProps {
+  queueEntry: QueueEntry;
+  closeModal: () => void;
+}
+
+const UndoTransitionQueueEntryModal: React.FC<UndoTransitionQueueEntryModalProps> = ({ queueEntry, closeModal }) => {
+  const { t } = useTranslation();
+  const { previousQueueEntry, queueComingFrom } = queueEntry;
+
+  const previousEntrySameQueue = queueComingFrom.uuid == queueEntry.queue.uuid;
+  const modalInstruction = previousEntrySameQueue ? (
+    <p>
+      {t('confirmMoveBackStatus', 'Are you sure you want to move patient back to status "{{status}}"?', {
+        status: previousQueueEntry.status.display,
+        interpolation: { escapeValue: false },
+      })}
+    </p>
+  ) : (
+    <p>
+      {t(
+        'confirmMoveBackQueueAndStatus',
+        'Are you sure you want to move patient back to queue "{{queue}}" with status "{{status}}"?',
+        {
+          queue: queueComingFrom.display,
+          status: previousQueueEntry.status.display,
+          interpolation: { escapeValue: false },
+        },
+      )}
+    </p>
+  );
+
+  return (
+    <QueueEntryConfirmActionModal
+      queueEntry={queueEntry}
+      closeModal={closeModal}
+      modalParams={{
+        modalTitle: t('undoTransition', 'Undo transition'),
+        modalInstruction,
+        submitButtonText: t('undoTransition', 'Undo transition'),
+        submitSuccessTitle: t('undoQueueEntryTransitionSuccess', 'Undo transition success'),
+        submitSuccessText: t('queueEntryTransitionUndoSuccessful', 'Queue entry transition undo success'),
+        submitFailureTitle: t('queueEntryTransitionUndoFailed', 'Error undoing transition'),
+        submitAction: (queueEntry) =>
+          undoTransition({
+            queueEntry: queueEntry.uuid,
+          }),
+      }}
+    />
+  );
+};
+
+export default UndoTransitionQueueEntryModal;

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

@@ -0,0 +1,34 @@
+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';
+
+interface VoidQueueEntryModalProps {
+  queueEntry: QueueEntry;
+  closeModal: () => void;
+}
+
+const VoidQueueEntryModal: React.FC<VoidQueueEntryModalProps> = ({ queueEntry, closeModal }) => {
+  const { t } = useTranslation();
+
+  const modalInstruction = <p>{t('confirmDeleteQueueEntry', 'Are you sure you want to delete this queue entry?')}</p>;
+
+  return (
+    <QueueEntryConfirmActionModal
+      queueEntry={queueEntry}
+      closeModal={closeModal}
+      modalParams={{
+        modalTitle: t('deleteQueueEntry', 'Delete queue entry'),
+        modalInstruction,
+        submitButtonText: t('deleteQueueEntry', 'Delete queue entry'),
+        submitSuccessTitle: t('queueEntryDeleteSuccessful', 'Queue entry deleted successfully'),
+        submitSuccessText: t('queueEntryDeleteSuccessful', 'Queue entry deleted successfully'),
+        submitFailureTitle: t('queueEntryDeleteFailed', 'Error deleting queue entry'),
+        submitAction: (queueEntry) => voidQueueEntry(queueEntry.uuid),
+      }}
+    />
+  );
+};
+
+export default VoidQueueEntryModal;

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

@@ -0,0 +1,42 @@
+import { SideNavMenu } from '@carbon/react';
+import { ConfigurableLink } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { type Queue } from '../types';
+import { useQueues } from '../hooks/useQueues';
+import classNames from 'classnames';
+import { BrowserRouter, useMatch, generatePath } from 'react-router-dom';
+import styles from './queue-table-by-status-menu.scss';
+
+// (Non-standard UI) A menu in the left nav to display a list of queues. Intended to be used
+// by slotting into the left nav as an extension
+export default function QueueTableByStatusMenu() {
+  const { t } = useTranslation();
+  const { queues } = useQueues();
+
+  return (
+    <SideNavMenu title={t('serviceQueues', 'Service queues')} className={styles.queueTableByStatusNavMenu}>
+      <BrowserRouter>
+        {queues.map((queue) => (
+          <QueueTableByStatusLink queue={queue} />
+        ))}
+      </BrowserRouter>
+    </SideNavMenu>
+  );
+}
+
+function QueueTableByStatusLink({ queue }: { queue: Queue }) {
+  const path = `${window.spaBase}/home/service-queues/queue-table-by-status/:uuid`;
+  const matcher = useMatch({ path, end: false });
+  const uuid = matcher?.params?.uuid;
+
+  return (
+    <ConfigurableLink
+      className={classNames('cds--side-nav__link', {
+        'active-left-nav-link': queue.uuid == uuid,
+      })}
+      to={generatePath(path, { uuid: queue.uuid })}>
+      {queue.display}
+    </ConfigurableLink>
+  );
+}

package/src/queue-table/queue-table-by-status-menu.scss

@@ -0,0 +1,11 @@
+.queueTableByStatusNavMenu {
+  // override `li` element styles from <SideNavMenu>
+  // (since none of the items in side nav is `li`)
+  line-height: 0px;
+  display: block;
+
+  :global(.active-left-nav-link) {
+    // override padding for sub-menu items
+    padding-left: 1.75rem !important;
+  }
+}

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

@@ -0,0 +1,32 @@
+import { DataTableSkeleton, SkeletonText, Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import { isDesktop, useLayoutType } from '@openmrs/esm-framework';
+import React from 'react';
+import styles from './queue-table.scss';
+
+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>
+      <Tabs selectedIndex={0}>
+        <TabList>
+          <Tab>
+            <SkeletonText />
+          </Tab>
+        </TabList>
+      </Tabs>
+      <TabPanels>
+        <TabPanel>
+          <DataTableSkeleton />
+        </TabPanel>
+      </TabPanels>
+    </div>
+  );
+};

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

@@ -0,0 +1,96 @@
+import { InlineNotification, Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import { isDesktop, useLayoutType } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import styles from './queue-table.scss';
+import { useQueueEntries } from '../hooks/useQueueEntries';
+import { type Concept, type Queue, type QueueTableTabConfig } from '../types';
+import { QueueTableByStatusSkeleton } from './queue-table-by-status-skeleton.component';
+import QueueTable from './queue-table.component';
+
+interface QueueTableByStatusProps {
+  selectedQueue: Queue; // the selected queue
+  selectedStatus: Concept; // the selected status
+  allStatusTabConfig?: QueueTableTabConfig; // If provided, we display an additional tab for *all* statuses with the given config
+}
+
+// displays the queue entries of a given queue by
+// showing a list of tabs (one tab per status), each showing
+// queue entries within that status
+const QueueTableByStatus: React.FC<QueueTableByStatusProps> = ({
+  selectedQueue,
+  selectedStatus,
+  allStatusTabConfig,
+}) => {
+  const layout = useLayoutType();
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const { queueEntries, isLoading, isValidating } = useQueueEntries({ queue: selectedQueue.uuid, isEnded: false });
+  const allowedStatuses = selectedQueue.allowedStatuses;
+
+  const currentStatusUuid = selectedStatus?.uuid ?? allowedStatuses?.[0]?.uuid;
+  const currentStatusIndex = allowedStatuses?.findIndex((s) => s.uuid == currentStatusUuid);
+
+  const noStatuses = !allowedStatuses?.length;
+  if (isLoading && !queueEntries.length) {
+    return <QueueTableByStatusSkeleton />;
+  } else if (noStatuses) {
+    return (
+      <InlineNotification
+        kind={'error'}
+        lowContrast
+        subtitle={t('configureStatus', 'Please configure status to continue.')}
+        title={t('noStatusConfigured', 'No status configured')}
+      />
+    );
+  }
+
+  const queueEntriesForCurrentStatus = queueEntries?.filter((entry) => entry.status.uuid == currentStatusUuid);
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.headerContainer}>
+        <div className={isDesktop(layout) ? styles.desktopHeading : styles.tabletHeading}>
+          <h3>{selectedQueue.display}</h3>
+        </div>
+      </div>
+      <Tabs
+        selectedIndex={currentStatusIndex}
+        onChange={({ selectedIndex }) => {
+          const newStatusUuid = allowedStatuses[selectedIndex]?.uuid;
+          const url = `/queue-table-by-status/${selectedQueue.uuid}` + (newStatusUuid ? '/' + newStatusUuid : '');
+          navigate(url);
+        }}>
+        <TabList className={styles.tabList} aria-label={t('queueStatus', 'Queue status')} contained>
+          {allowedStatuses?.map((s) => <Tab key={s?.uuid}>{s?.display}</Tab>)}
+          {allStatusTabConfig && <Tab>{t('all', 'All')}</Tab>}
+        </TabList>
+        <TabPanels>
+          {allowedStatuses?.map((s) => (
+            <TabPanel key={s.uuid}>
+              <QueueTable
+                queueEntries={queueEntriesForCurrentStatus}
+                queueUuid={selectedQueue.uuid}
+                statusUuid={s.uuid}
+              />
+            </TabPanel>
+          ))}
+          {allStatusTabConfig && (
+            <TabPanel>
+              <QueueTable
+                queueEntries={queueEntriesForCurrentStatus}
+                isValidating={isValidating}
+                queueUuid={selectedQueue.uuid}
+                statusUuid={null}
+              />
+            </TabPanel>
+          )}
+        </TabPanels>
+      </Tabs>
+    </div>
+  );
+};
+
+export default QueueTableByStatus;

package/src/queue-table/queue-table-expanded-row.component.tsx

@@ -0,0 +1,29 @@
+import React, { type FC } from 'react';
+import { Tab, Tabs, TabPanels, TabPanel, TabList } from '@carbon/react';
+
+import CurrentVisit from '../current-visit/current-visit-summary.component';
+import PastVisit from '../past-visit/past-visit.component';
+import { type QueueEntry } from '../types';
+import { useTranslation } from 'react-i18next';
+
+const QueueTableExpandedRow: FC<{ queueEntry: QueueEntry }> = ({ queueEntry }) => {
+  const { t } = useTranslation();
+  return (
+    <Tabs>
+      <TabList aria-label={t('visitTabs', 'Visit tabs')}>
+        <Tab>{t('currentVisit', 'Current visit')}</Tab>
+        <Tab>{t('previousVisit', 'Previous visit')} </Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel>
+          <CurrentVisit patientUuid={queueEntry.patient.uuid} visitUuid={queueEntry.visit.uuid} />
+        </TabPanel>
+        <TabPanel>
+          <PastVisit patientUuid={queueEntry.patient.uuid} />
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+};
+
+export default QueueTableExpandedRow;