@kenyaemr/esm-service-queues-app 8.1.1-pre.114 → 8.1.1-pre.118

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.0","queue":"^2.4.0-0"},"extensions":[{"name":"outpatient-side-nav-ext","component":"outpatientSideNav","slot":"outpatient-sidebar-slot","online":true,"offline":true},{"name":"service-queues-dashboard-link","component":"serviceQueuesDashboardLink","slot":"homepage-dashboard-slot","meta":{"name":"service-queues","slot":"service-queues-dashboard-slot","title":"Service queues"},"online":true,"offline":true},{"name":"queue-table-by-status-menu-dashboard-link","component":"queueTableByStatusMenu","meta":{"name":"service-queues","slot":"service-queues-dashboard-slot","title":"Service queues"},"online":true,"offline":true},{"component":"root","name":"service-queues-dashboard","slot":"service-queues-dashboard-slot"},{"name":"edit-queue-entry-status-modal","component":"editQueueEntryStatusModal"},{"name":"patient-info-banner-slot","component":"patientInfoBannerSlot"},{"name":"remove-queue-entry","component":"removeQueueEntry"},{"name":"clear-all-queue-entries","component":"clearAllQueueEntries"},{"name":"add-visit-to-queue-modal","component":"addVisitToQueueModal"},{"name":"transition-queue-entry-status-modal","component":"transitionQueueEntryStatusModal"},{"name":"previous-visit-summary-widget","component":"pastVisitSummary","slot":"previous-visit-summary-slot"},{"name":"add-provider-to-room-modal","component":"addProviderToRoomModal"},{"name":"transition-queue-entry-modal","component":"transitionQueueEntryModal"},{"name":"edit-queue-entry-modal","component":"editQueueEntryModal"},{"name":"undo-transition-queue-entry-modal","component":"undoTransitionQueueEntryModal"},{"name":"void-queue-entry-modal","component":"voidQueueEntryModal"},{"name":"end-queue-entry-modal","component":"endQueueEntryModal"},{"name":"active-visits-row-actions","component":"activeVisitsRowActions","slot":"queue-table-serve-patient-slot"},{"name":"visit-form-queue-fields","component":"visitFormQueueFields","slot":"visit-form-queue-slot"}],"workspaces":[{"name":"service-queues-service-form","title":"addNewQueueService","component":"addNewQueueServiceWorkspace","type":"service-queues"},{"name":"service-queues-room-form","title":"addNewQueueServiceRoom","component":"addNewQueueServiceRoomWorkspace","type":"service-queues"},{"name":"service-queues-linelist-filter","title":"filter","component":"queueLinelistFilterWorkspace","type":"service-queues"},{"name":"service-queues-patient-search","title":"searchPatient","component":"patientSearchWorkspace","type":"service-queues"}],"version":"8.1.1-pre.114"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.0","queue":"^2.4.0-0"},"extensions":[{"name":"outpatient-side-nav-ext","component":"outpatientSideNav","slot":"outpatient-sidebar-slot","online":true,"offline":true},{"name":"service-queues-dashboard-link","component":"serviceQueuesDashboardLink","slot":"homepage-dashboard-slot","meta":{"name":"service-queues","slot":"service-queues-dashboard-slot","title":"Service queues"},"online":true,"offline":true},{"name":"queue-table-by-status-menu-dashboard-link","component":"queueTableByStatusMenu","meta":{"name":"service-queues","slot":"service-queues-dashboard-slot","title":"Service queues"},"online":true,"offline":true},{"component":"root","name":"service-queues-dashboard","slot":"service-queues-dashboard-slot"},{"name":"edit-queue-entry-status-modal","component":"editQueueEntryStatusModal"},{"name":"patient-info-banner-slot","component":"patientInfoBannerSlot"},{"name":"remove-queue-entry","component":"removeQueueEntry"},{"name":"clear-all-queue-entries","component":"clearAllQueueEntries"},{"name":"add-visit-to-queue-modal","component":"addVisitToQueueModal"},{"name":"transition-queue-entry-status-modal","component":"transitionQueueEntryStatusModal"},{"name":"previous-visit-summary-widget","component":"pastVisitSummary","slot":"previous-visit-summary-slot"},{"name":"add-provider-to-room-modal","component":"addProviderToRoomModal"},{"name":"transition-queue-entry-modal","component":"transitionQueueEntryModal"},{"name":"transition-patient-to-latest-queue-modal","component":"transitionPatientToLatestQueue"},{"name":"edit-queue-entry-modal","component":"editQueueEntryModal"},{"name":"undo-transition-queue-entry-modal","component":"undoTransitionQueueEntryModal"},{"name":"void-queue-entry-modal","component":"voidQueueEntryModal"},{"name":"end-queue-entry-modal","component":"endQueueEntryModal"},{"name":"active-visits-row-actions","component":"activeVisitsRowActions","slot":"queue-table-serve-patient-slot"},{"name":"visit-form-queue-fields","component":"visitFormQueueFields","slot":"visit-form-queue-slot"}],"workspaces":[{"name":"service-queues-service-form","title":"addNewQueueService","component":"addNewQueueServiceWorkspace","type":"service-queues"},{"name":"service-queues-room-form","title":"addNewQueueServiceRoom","component":"addNewQueueServiceRoomWorkspace","type":"service-queues"},{"name":"service-queues-linelist-filter","title":"filter","component":"queueLinelistFilterWorkspace","type":"service-queues"},{"name":"service-queues-patient-search","title":"searchPatient","component":"patientSearchWorkspace","type":"service-queues"}],"version":"8.1.1-pre.118"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-service-queues-app",
-  "version": "8.1.1-pre.114",
+  "version": "8.1.1-pre.118",
   "description": "Outpatient front-end module for the OpenMRS SPA",
   "browser": "dist/kenyaemr-esm-service-queues-app.js",
   "main": "src/index.ts",

package/src/active-visits/change-status-dialog.component.tsx

@@ -1,31 +1,32 @@
 import React, { useMemo } from 'react';
 import {
   Button,
+  ContentSwitcher,
+  Form,
+  InlineLoading,
+  InlineNotification,
   ModalBody,
   ModalFooter,
   ModalHeader,
-  Form,
-  ContentSwitcher,
-  Switch,
-  Select,
-  SelectItem,
-  InlineNotification,
   RadioButton,
   RadioButtonGroup,
-  InlineLoading,
+  Select,
+  SelectItem,
+  Stack,
+  Switch,
 } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { navigate, showSnackbar, useConfig } from '@openmrs/esm-framework';
-import { type MappedQueueEntry } from '../types';
-import { updateQueueEntry } from './active-visits-table.resource';
-import { useQueueLocations } from '../patient-search/hooks/useQueueLocations';
-import styles from './change-status-dialog.scss';
-import { useQueues } from '../hooks/useQueues';
 import { useForm, Controller } from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { navigate, showSnackbar, useConfig } from '@openmrs/esm-framework';
+import { type MappedQueueEntry } from '../types';
 import { type ConfigObject } from '../config-schema';
+import { useQueues } from '../hooks/useQueues';
+import { updateQueueEntry } from './active-visits-table.resource';
 import { useMutateQueueEntries } from '../hooks/useQueueEntries';
+import { useQueueLocations } from '../patient-search/hooks/useQueueLocations';
+import styles from './change-status-dialog.scss';
 
 interface ChangeStatusDialogProps {
   queueEntry: MappedQueueEntry;
@@ -41,9 +42,9 @@ const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, closeModa
     () =>
       z.object({
         location: z.string({ required_error: t('queueLocationRequired', 'Queue location is required') }),
+        priority: z.string({ required_error: t('priorityIsRequired', 'Priority is required') }),
         service: z.string({ required_error: t('serviceIsRequired', 'Service is required') }),
         status: z.string({ required_error: t('statusIsRequired', 'Status is required') }),
-        priority: z.string({ required_error: t('priorityIsRequired', 'Priority is required') }),
       }),
     [],
   );
@@ -82,18 +83,16 @@ const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, closeModa
       endDate,
       sortWeight,
     ).then(
-      ({ status }) => {
-        if (status === 201) {
-          showSnackbar({
-            isLowContrast: true,
-            title: t('updateEntry', 'Update entry'),
-            kind: 'success',
-            subtitle: t('queueEntryUpdateSuccessfully', 'Queue Entry Updated Successfully'),
-          });
-          closeModal();
-          mutateQueueEntries();
-          navigate({ to: `${window.spaBase}/home/service-queues` });
-        }
+      () => {
+        showSnackbar({
+          isLowContrast: true,
+          title: t('updateEntry', 'Update entry'),
+          kind: 'success',
+          subtitle: t('queueEntryUpdateSuccessfully', 'Queue Entry Updated Successfully'),
+        });
+        closeModal();
+        mutateQueueEntries();
+        navigate({ to: `${window.spaBase}/home/service-queues` });
       },
       (error) => {
         showSnackbar({
@@ -121,127 +120,131 @@ const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, closeModa
           <ModalBody>
             <div className={styles.modalBody}>
               <h5>
-                {queueEntry.name} &nbsp; · &nbsp;{queueEntry.patientSex} &nbsp; · &nbsp;{queueEntry.patientAge}&nbsp;
-                {t('years', 'Years')}
+                {t('patientInfo', '{{name}}{{sexInfo}}{{ageInfo}}', {
+                  name: queueEntry.name,
+                  sexInfo: queueEntry.patientSex ? ` · ${queueEntry.patientSex} · ` : '',
+                  ageInfo: queueEntry.patientAge ? `${queueEntry.patientAge} ${t('years', 'Years')}` : '',
+                })}
               </h5>
             </div>
-            <section>
-              <Controller
-                name="location"
-                control={control}
-                render={({ field: { onChange, value } }) => (
-                  <Select
-                    labelText={t('selectQueueLocation', 'Select a queue location')}
-                    id="location"
-                    invalid={!!errors.location}
-                    invalidText={errors.location?.message}
-                    value={value}
-                    onChange={(event) => {
-                      onChange(event.target.value);
-                    }}>
-                    {!getValues()?.location && (
-                      <SelectItem text={t('selectQueueLocation', 'Select a queue location')} value="" />
-                    )}
-                    {queueLocations?.length > 0 &&
-                      queueLocations.map((location) => (
-                        <SelectItem key={location.id} text={location.name} value={location.id}>
-                          {location.name}
-                        </SelectItem>
-                      ))}
-                  </Select>
-                )}
-              />
-            </section>
-
-            <section className={styles.section}>
-              <div className={styles.sectionTitle}>{t('queueService', 'Queue service')}</div>
-              <Controller
-                name="service"
-                control={control}
-                render={({ field: { onChange, value } }) => (
-                  <Select
-                    labelText={t('selectService', 'Select a service')}
-                    id="service"
-                    invalid={!!errors.service}
-                    invalidText={errors.service?.message}
-                    value={value}
-                    onChange={(event) => onChange(event.target.value)}>
-                    {!getValues()?.service && <SelectItem text={t('selectService', 'Select a service')} value="" />}
-                    {queues?.length > 0 &&
-                      queues.map((service) => (
-                        <SelectItem key={service.uuid} text={service.display} value={service.uuid}>
-                          {service.display}
-                        </SelectItem>
-                      ))}
-                  </Select>
-                )}
-              />
-            </section>
-
-            <section className={styles.section}>
-              <div className={styles.sectionTitle}>{t('queueStatus', 'Queue status')}</div>
-              {!allowedStatuses?.length ? (
-                <InlineNotification
-                  className={styles.inlineNotification}
-                  kind={'error'}
-                  lowContrast
-                  subtitle={t('configureStatus', 'Please configure status to continue.')}
-                  title={t('noStatusConfigured', 'No status configured')}
-                />
-              ) : (
+            <Stack gap={4}>
+              <section>
+                <div className={styles.sectionTitle}>{t('queueLocation', 'Queue location')}</div>
                 <Controller
-                  name="status"
+                  name="location"
                   control={control}
-                  render={({ field: { value, onChange } }) => (
-                    <RadioButtonGroup
-                      className={styles.radioButtonWrapper}
-                      name="status"
-                      invalid={!!errors.status}
-                      invalidText={errors.status?.message}
-                      defaultSelected={value}
-                      onChange={(uuid) => {
-                        onChange(uuid);
+                  render={({ field: { onChange, value } }) => (
+                    <Select
+                      labelText={t('selectQueueLocation', 'Select a queue location')}
+                      id="location"
+                      invalid={!!errors.location}
+                      invalidText={errors.location?.message}
+                      value={value}
+                      onChange={(event) => {
+                        onChange(event.target.value);
                       }}>
-                      {allowedStatuses?.length > 0 &&
-                        allowedStatuses.map(({ uuid, display }) => (
-                          <RadioButton key={uuid} labelText={display} value={uuid} />
+                      {!getValues()?.location && (
+                        <SelectItem text={t('selectQueueLocation', 'Select a queue location')} value="" />
+                      )}
+                      {queueLocations?.length > 0 &&
+                        queueLocations.map((location) => (
+                          <SelectItem key={location.id} text={location.name} value={location.id}>
+                            {location.name}
+                          </SelectItem>
                         ))}
-                    </RadioButtonGroup>
+                    </Select>
                   )}
                 />
-              )}
-            </section>
-
-            <section className={styles.section}>
-              <div className={styles.sectionTitle}>{t('queuePriority', 'Queue priority')}</div>
-              <Controller
-                control={control}
-                name="priority"
-                render={({ field: { onChange } }) => (
-                  <>
-                    <ContentSwitcher
-                      size="sm"
-                      selectedIndex={1}
-                      onChange={(event) => {
-                        onChange(event.name as any);
-                      }}>
-                      {allowedPriorities?.length > 0 ? (
-                        allowedPriorities.map(({ uuid, display }) => {
-                          return <Switch name={uuid} text={display} key={uuid} value={uuid} />;
-                        })
-                      ) : (
-                        <Switch
-                          name={t('noPriorityFound', 'No priority found')}
-                          text={t('noPriorityFound', 'No priority found')}
-                          value={null}
-                        />
-                      )}
-                    </ContentSwitcher>
-                    {errors.priority && <div className={styles.error}>{errors.priority.message}</div>}
-                  </>
+              </section>
+              <section className={styles.section}>
+                <div className={styles.sectionTitle}>{t('queueService', 'Queue service')}</div>
+                <Controller
+                  name="service"
+                  control={control}
+                  render={({ field: { onChange, value } }) => (
+                    <Select
+                      labelText={t('selectService', 'Select a service')}
+                      id="service"
+                      invalid={!!errors.service}
+                      invalidText={errors.service?.message}
+                      value={value}
+                      onChange={(event) => onChange(event.target.value)}>
+                      {!getValues()?.service && <SelectItem text={t('selectService', 'Select a service')} value="" />}
+                      {queues?.length > 0 &&
+                        queues.map((service) => (
+                          <SelectItem key={service.uuid} text={service.display} value={service.uuid}>
+                            {service.display}
+                          </SelectItem>
+                        ))}
+                    </Select>
+                  )}
+                />
+              </section>
+              <section className={styles.section}>
+                <div className={styles.sectionTitle}>{t('queueStatus', 'Queue status')}</div>
+                {!allowedStatuses?.length ? (
+                  <InlineNotification
+                    className={styles.inlineNotification}
+                    kind={'error'}
+                    lowContrast
+                    subtitle={t('configureStatus', 'Please configure status to continue.')}
+                    title={t('noStatusConfigured', 'No status configured')}
+                  />
+                ) : (
+                  <Controller
+                    name="status"
+                    control={control}
+                    render={({ field: { value, onChange } }) => (
+                      <RadioButtonGroup
+                        className={styles.radioButtonWrapper}
+                        id="status"
+                        name="status"
+                        invalid={!!errors.status}
+                        invalidText={errors.status?.message}
+                        defaultSelected={value}
+                        onChange={(uuid) => {
+                          onChange(uuid);
+                        }}>
+                        {allowedStatuses?.length > 0 &&
+                          allowedStatuses.map(({ uuid, display }) => (
+                            <RadioButton key={uuid} labelText={display} value={uuid} />
+                          ))}
+                      </RadioButtonGroup>
+                    )}
+                  />
                 )}
-              />
-            </section>
+              </section>
+              <section className={styles.section}>
+                <div className={styles.sectionTitle}>{t('queuePriority', 'Queue priority')}</div>
+                <Controller
+                  control={control}
+                  name="priority"
+                  render={({ field: { onChange } }) => (
+                    <>
+                      <ContentSwitcher
+                        size="sm"
+                        selectedIndex={1}
+                        onChange={(event) => {
+                          onChange(event.name as any);
+                        }}>
+                        {allowedPriorities?.length > 0 ? (
+                          allowedPriorities.map(({ uuid, display }) => {
+                            return <Switch name={uuid} text={display} key={uuid} value={uuid} />;
+                          })
+                        ) : (
+                          <Switch
+                            name={t('noPriorityFound', 'No priority found')}
+                            text={t('noPriorityFound', 'No priority found')}
+                            value={null}
+                          />
+                        )}
+                      </ContentSwitcher>
+                      {errors.priority && <div className={styles.error}>{errors.priority.message}</div>}
+                    </>
+                  )}
+                />
+              </section>
+            </Stack>
           </ModalBody>
           <ModalFooter>
             <Button kind="secondary" onClick={closeModal}>

package/src/active-visits/change-status-dialog.test.tsx

@@ -39,7 +39,7 @@ jest.mock('../hooks/useQueues', () => {
   };
 });
 
-describe('Queue entry details', () => {
+describe('ChangeStatusDialog', () => {
   beforeEach(() => {
     mockUseConfig.mockReturnValue({
       ...getDefaultsFromConfigSchema(configSchema),
@@ -62,14 +62,14 @@ describe('Queue entry details', () => {
     expect(screen.getByText(/queue service/i)).toBeInTheDocument();
     expect(screen.getByText(/queue priority/i)).toBeInTheDocument();
 
-    // user selects a service
-    const queueServiceTypes = screen.getByRole('combobox', { name: /select a service/i });
-    await user.selectOptions(queueServiceTypes, '176052c7-5fd4-4b33-89cc-7bae6848c65a');
-
     // user selects queue location
     const queueLocation = screen.getByRole('combobox', { name: /Select a queue location/i });
     await user.selectOptions(queueLocation, 'some-uuid1');
 
+    // user selects a service
+    const queueServiceTypes = screen.getByRole('combobox', { name: /select a service/i });
+    await user.selectOptions(queueServiceTypes, '176052c7-5fd4-4b33-89cc-7bae6848c65a');
+
     // user selects queue status
     const queueStatus = screen.getByRole('radio', { name: /Waiting/i });
     await user.click(queueStatus);

package/src/config-schema.ts

@@ -82,6 +82,10 @@ export const configSchema = {
       _description: 'The UUID of the default status for attending a service in the queues eg In Service.',
       _default: 'ca7494ae-437f-4fd0-8aae-b88b9a2ba47d',
     },
+    systolicBloodPressureUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5085AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
     diastolicBloodPressureUuid: {
       _type: Type.ConceptUuid,
       _default: '5086AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
@@ -112,10 +116,6 @@ export const configSchema = {
       _type: Type.ConceptUuid,
       _default: '5242AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
     },
-    systolicBloodPressureUuid: {
-      _type: Type.ConceptUuid,
-      _default: '5085AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-    },
     temperatureUuid: {
       _type: Type.ConceptUuid,
       _default: '5088AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
@@ -242,11 +242,6 @@ export const configSchema = {
             'The header text for the column. Will be translated if it is a valid translation key. If not provided, the header will be based on the columnType.',
           _default: null,
         },
-        headerI18nModule: {
-          _type: Type.String,
-          _description: 'The module to use for translation of the header.',
-          _default: '@openmrs/esm-service-queues-app',
-        },
         config: {
           identifierTypeUuid: {
             _type: Type.UUID,
@@ -440,7 +435,6 @@ export type ColumnDefinition = {
   id: string;
   columnType?: ColumnType;
   header?: string;
-  headerI18nModule?: string;
   config: ColumnConfig;
 };
 

package/src/index.ts

@@ -138,6 +138,13 @@ export const addNewQueueServiceWorkspace = getAsyncLifecycle(
     moduleName,
   },
 );
+export const transitionPatientToLatestQueue = getAsyncLifecycle(
+  () => import('./transition-latest-queue-entry/transition-latest-queue-entry.component'),
+  {
+    featureName: 'transition patient to new queue',
+    moduleName,
+  },
+);
 
 // t('addNewQueueServiceRoom', 'Add new queue service room')
 export const addNewQueueServiceRoomWorkspace = getAsyncLifecycle(

package/src/patient-queue-header/patient-queue-header.component.tsx

@@ -1,11 +1,8 @@
 import React, { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Location } from '@carbon/react/icons';
 import { Dropdown } from '@carbon/react';
-import { useConfig, useSession } from '@openmrs/esm-framework';
-import PatientQueueIllustration from './patient-queue-illustration.component';
+import { useConfig, useSession, PageHeader, PageHeaderContent, ServiceQueuesPictogram } from '@openmrs/esm-framework';
 import { useQueueLocations } from '../patient-search/hooks/useQueueLocations';
-
 import {
   updateSelectedQueueLocationUuid,
   updateSelectedQueueLocationName,
@@ -13,8 +10,8 @@ import {
   useSelectedQueueLocationName,
   useSelectedQueueLocationUuid,
 } from '../helpers/helpers';
-import styles from './patient-queue-header.scss';
 import type { ConfigObject } from '../config-schema';
+import styles from './patient-queue-header.scss';
 
 interface PatientQueueHeaderProps {
   title?: string | JSX.Element;
@@ -27,7 +24,6 @@ const PatientQueueHeader: React.FC<PatientQueueHeaderProps> = ({ title, showLoca
   const { queueLocations, isLoading, error } = useQueueLocations();
   const { dashboardTitle } = useConfig<ConfigObject>();
   const userSession = useSession();
-  const userLocation = userSession?.sessionLocation?.display;
   const currentQueueLocationName = useSelectedQueueLocationName();
   const currentQueueLocationUuid = useSelectedQueueLocationUuid();
 
@@ -69,39 +65,30 @@ const PatientQueueHeader: React.FC<PatientQueueHeaderProps> = ({ title, showLoca
   ]);
 
   return (
-    <div className={styles.header} data-testid="patient-queue-header">
-      <div className={styles['left-justified-items']}>
-        <PatientQueueIllustration />
-        <div className={styles['page-labels']}>
-          <p>{dashboardTitle ? t(dashboardTitle.key, dashboardTitle.value) : t('serviceQueues', 'Service queues')}</p>
-          <p className={styles['page-name']}>{title ?? t('home', 'Home')}</p>
-        </div>
-      </div>
-      <div className={styles['right-justified-items']}>
-        <div className={styles['date-and-location']}>
-          <Location size={16} />
-          <span className={styles.value}>{userLocation}</span>
-        </div>
-        <div className={styles.dropdownContainer}>
-          {showLocationDropdown && (
-            <Dropdown
-              aria-label="Select queue location"
-              className={styles.dropdown}
-              id="queueLocationDropdown"
-              label={currentQueueLocationName ?? t('all', 'All')}
-              items={
-                queueLocations.length !== 1 ? [{ id: 'all', name: t('all', 'All') }, ...queueLocations] : queueLocations
-              }
-              itemToString={(item) => (item ? item.name : '')}
-              titleText={t('location', 'Location')}
-              type="inline"
-              onChange={handleQueueLocationChange}
-            />
-          )}
-          {actions}
-        </div>
+    <PageHeader className={styles.header} data-testid="patient-queue-header">
+      <PageHeaderContent
+        title={title ? title : t(dashboardTitle.key, dashboardTitle.value)}
+        illustration={<ServiceQueuesPictogram />}
+      />
+      <div className={styles.dropdownContainer}>
+        {showLocationDropdown && (
+          <Dropdown
+            aria-label={t('selectQueueLocation', 'Select queue location')}
+            className={styles.dropdown}
+            id="queueLocationDropdown"
+            label={currentQueueLocationName ?? t('all', 'All')}
+            items={
+              queueLocations.length !== 1 ? [{ id: 'all', name: t('all', 'All') }, ...queueLocations] : queueLocations
+            }
+            itemToString={(item) => (item ? item.name : '')}
+            titleText={t('location', 'Location')}
+            type="inline"
+            onChange={handleQueueLocationChange}
+          />
+        )}
+        {actions}
       </div>
-    </div>
+    </PageHeader>
   );
 };
 

package/src/patient-queue-header/patient-queue-header.scss

@@ -3,63 +3,25 @@
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
 .header {
-  @include type.type-style('body-compact-02');
-  color: $text-02;
   background-color: $ui-02;
   border: 1px solid $ui-03;
   border-left: 0px;
   display: flex;
   justify-content: space-between;
-  padding-right: layout.$spacing-05;
+  padding-right: layout.$spacing-03;
 }
 
-.left-justified-items {
+.dropdownContainer {
   display: flex;
-  flex-direction: row;
   align-items: center;
-}
-
-.right-justified-items {
-  @include type.type-style('body-compact-02');
-  color: $text-02;
-  padding-top: layout.$spacing-05;
-}
-
-.page-name {
-  @include type.type-style('heading-04');
-}
-
-.page-labels {
-  p:first-of-type {
-    margin-bottom: layout.$spacing-02;
-  }
-}
-
-.date-and-location {
-  display: flex;
   justify-content: flex-end;
-  align-items: center;
-}
-
-.value {
-  margin-left: layout.$spacing-02;
-}
-
-.middot {
-  margin: 0 layout.$spacing-03;
+  margin-top: layout.$spacing-03;
 }
 
 .view {
   @include type.type-style('label-01');
 }
 
-.dropdownContainer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  margin-top: layout.$spacing-03;
-}
-
 .dropdown {
   :global(.cds--list-box__field) {
     width: 14rem;