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

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":"7.0.2-pre.66"}
+{"$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":"7.0.2-pre.68"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-service-queues-app",
-  "version": "7.0.2-pre.66",
+  "version": "7.0.2-pre.68",
   "description": "Outpatient front-end module for the OpenMRS SPA",
   "browser": "dist/kenyaemr-esm-service-queues-app.js",
   "main": "src/index.ts",
@@ -18,7 +18,7 @@
     "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js --color",
     "coverage": "yarn test --coverage",
     "typescript": "tsc",
-    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.extension.tsx' 'src/**/*.workspace.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.extension.tsx' 'src/**/*modal.tsx' 'src/**/*.workspace.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
   },
   "browserslist": [
     "extends browserslist-config-openmrs"

package/src/add-patient-toqueue/add-patient-toqueue-dialog.component.tsx

@@ -11,17 +11,17 @@ import {
   SelectItem,
   RadioButtonGroup,
   RadioButton,
+  RadioButtonSkeleton,
+  SelectSkeleton,
 } from '@carbon/react';
 import { showSnackbar, useConfig } from '@openmrs/esm-framework';
 import { postQueueEntry } from '../active-visits/active-visits-table.resource';
-import styles from './add-patient-toqueue-dialog.scss';
-import { type ActiveVisit, useMissingQueueEntries } from '../visits-missing-inqueue/visits-missing-inqueue.resource';
+import { type ActiveVisit } from '../visits-missing-inqueue/visits-missing-inqueue.resource';
 import { useQueueLocations } from '../patient-search/hooks/useQueueLocations';
 import { useQueues } from '../hooks/useQueues';
 import { useMutateQueueEntries } from '../hooks/useQueueEntries';
 import { type ConfigObject } from '../config-schema';
-import { RadioButtonSkeleton } from '@carbon/react';
-import { SelectSkeleton } from '@carbon/react';
+import styles from './add-patient-toqueue-dialog.scss';
 
 interface AddVisitToQueueDialogProps {
   visitDetails: ActiveVisit;

package/src/add-provider-queue-room/add-provider-queue-room.component.tsx

@@ -25,15 +25,14 @@ import {
   updateIsPermanentProviderQueueRoom,
   updateSelectedQueueLocationName,
   updateSelectedQueueLocationUuid,
-  updateSelectedServiceName,
-  updateSelectedServiceUuid,
+  updateSelectedService,
   useIsPermanentProviderQueueRoom,
+  useSelectedQueueLocationName,
   useSelectedQueueLocationUuid,
-  useSelectedServiceName,
-  useSelectedServiceUuid,
+  useSelectedService,
 } from '../helpers/helpers';
 import styles from './add-provider-queue-room.scss';
-import { useQueues } from '../hooks/useQueues';
+import useQueueServices from '../hooks/useQueueService';
 
 interface AddProviderQueueRoomProps {
   providerUuid: string;
@@ -43,10 +42,9 @@ interface AddProviderQueueRoomProps {
 const AddProviderQueueRoom: React.FC<AddProviderQueueRoomProps> = ({ providerUuid, closeModal }) => {
   const { t } = useTranslation();
 
-  const currentLocationName = useSelectedServiceName();
+  const currentLocationName = useSelectedQueueLocationName();
   const currentLocationUuid = useSelectedQueueLocationUuid();
-  const currentServiceUuid = useSelectedServiceUuid();
-  const currentServiceName = useSelectedServiceName();
+  const currentService = useSelectedService();
   const currentIsPermanentProviderQueueRoom = useIsPermanentProviderQueueRoom();
   const { providerRoom, isLoading: loading } = useProvidersQueueRoom(providerUuid);
   const [queueRoomUuid, setQueueRoomUuid] = useState('');
@@ -60,16 +58,15 @@ const AddProviderQueueRoom: React.FC<AddProviderQueueRoomProps> = ({ providerUui
   }, [providerRoom]);
 
   const { mutate } = useProvidersQueueRoom(providerUuid);
-  const { queues } = useQueues(currentLocationUuid);
-  const { rooms } = useQueueRooms(currentLocationUuid, currentServiceUuid);
+  const { services } = useQueueServices();
+  const { rooms } = useQueueRooms(currentLocationUuid, currentService?.serviceUuid);
   const { queueLocations } = useQueueLocations();
   const [isMissingQueueRoom, setIsMissingQueueRoom] = useState(false);
 
   const handleServiceChange = ({ selectedItem }) => {
     localStorage.setItem('queueServiceName', selectedItem.name);
-    localStorage.setItem('queueServiceUuid', selectedItem.uuid);
-    updateSelectedServiceName(selectedItem.name);
-    updateSelectedServiceUuid(selectedItem.uuid);
+    localStorage.setItem('queueService', selectedItem.uuid);
+    updateSelectedService(selectedItem.uuid, selectedItem.name);
   };
 
   const handleQueueLocationChange = ({ selectedItem }) => {
@@ -172,11 +169,11 @@ const AddProviderQueueRoom: React.FC<AddProviderQueueRoomProps> = ({ providerUui
               aria-label={t('selectService', 'Select a service')}
               type="default"
               label=""
-              items={queues}
+              items={services ?? []}
               itemToString={(item) => (item ? item.display : '')}
               onChange={handleServiceChange}
               size="md"
-              initialSelectedItem={{ uuid: currentServiceUuid, display: currentServiceName }}
+              initialSelectedItem={{ uuid: currentService?.serviceUuid, display: currentService?.serviceDisplay }}
             />
           </section>
 

package/src/config-schema.ts

@@ -60,6 +60,22 @@ export const defaultQueueTable: TableDefinitions = {
 };
 
 export const configSchema = {
+  dashboardTitle: {
+    _type: Type.Object,
+    _description: 'The title to be displayed on the service queues dashboard',
+    key: {
+      _type: Type.String,
+      _description: 'The translation key of the title to be displayed on the service queues dashboard',
+    },
+    value: {
+      _type: Type.String,
+      _description: 'The translation value of the title to be displayed on the service queues dashboard',
+    },
+    _default: {
+      key: 'serviceQueues',
+      value: 'Service queues',
+    },
+  },
   concepts: {
     defaultPriorityConceptUuid: {
       _type: Type.ConceptUuid,
@@ -377,6 +393,10 @@ function columnHasType(columnDef: ColumnDefinition, type: ColumnType): boolean {
 }
 
 export interface ConfigObject {
+  dashboardTitle: {
+    key: string;
+    value: string;
+  };
   concepts: {
     defaultPriorityConceptUuid: string;
     defaultStatusConceptUuid: string;

package/src/helpers/helpers.ts

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import { getGlobalStore } from '@openmrs/esm-framework';
 import type { AppointmentSummary } from '../types';
-import { useTranslation } from 'react-i18next';
 
 export const getServiceCountByAppointmentType = (
   appointmentSummary: Array<AppointmentSummary>,
@@ -15,22 +14,24 @@ export const getServiceCountByAppointmentType = (
     .reduce((count, val) => count + val, 0);
 };
 
-const initialServiceNameState = { serviceName: sessionStorage.getItem('queueServiceName') };
-const initialServiceUuidState = { serviceUuid: sessionStorage.getItem('queueServiceUuid') };
-const intialStatusNameState = { status: '' };
 const initialQueueLocationNameState = { queueLocationName: sessionStorage.getItem('queueLocationName') };
 const initialQueueLocationUuidState = { queueLocationUuid: sessionStorage.getItem('queueLocationUuid') };
+const initialServiceUuidState = {
+  serviceUuid: sessionStorage.getItem('queueServiceUuid'),
+  serviceDisplay: sessionStorage.getItem('queueServiceDisplay'),
+};
+const intialStatusNameState = { status: '' };
+const initialQueueStatusState = { statusUuid: null, statusDisplay: null };
 const initialSelectedQueueRoomTimestamp = { providerQueueRoomTimestamp: new Date() };
 const initialPermanentProviderQueueRoomState = {
   isPermanentProviderQueueRoom: sessionStorage.getItem('isPermanentProviderQueueRoom'),
 };
 
-export function getSelectedServiceName() {
-  return getGlobalStore<{ serviceName: string }>('queueSelectedServiceName', initialServiceNameState);
-}
-
-export function getSelectedServiceUuid() {
-  return getGlobalStore<{ serviceUuid: string }>('queueSelectedServiceUuid', initialServiceUuidState);
+export function getSelectedService() {
+  return getGlobalStore<{ serviceUuid: string; serviceDisplay: string }>(
+    'queueSelectedServiceUuid',
+    initialServiceUuidState,
+  );
 }
 
 export function getSelectedAppointmentStatus() {
@@ -45,6 +46,13 @@ export function getSelectedQueueLocationUuid() {
   return getGlobalStore<{ queueLocationUuid: string }>('queueLocationUuidSelected', initialQueueLocationUuidState);
 }
 
+export function getSelectedQueueStatus() {
+  return getGlobalStore<{ statusUuid: string; statusDisplay: string }>(
+    'queueStatusUuidSelected',
+    initialQueueStatusState,
+  );
+}
+
 export function getSelectedQueueRoomTimestamp() {
   return getGlobalStore<{ providerQueueRoomTimestamp: Date }>(
     'queueProviderRoomTimestamp',
@@ -59,16 +67,11 @@ export function getIsPermanentProviderQueueRoom() {
   );
 }
 
-export const updateSelectedServiceName = (currentServiceName: string) => {
-  const store = getSelectedServiceName();
-  sessionStorage.setItem('queueServiceName', currentServiceName);
-  store.setState({ serviceName: currentServiceName });
-};
-
-export const updateSelectedServiceUuid = (currentServiceUuid: string) => {
-  const store = getSelectedServiceUuid();
+export const updateSelectedService = (currentServiceUuid: string, currentServiceDisplay: string) => {
+  const store = getSelectedService();
+  sessionStorage.setItem('queueServiceDisplay', currentServiceDisplay);
   sessionStorage.setItem('queueServiceUuid', currentServiceUuid);
-  store.setState({ serviceUuid: currentServiceUuid });
+  store.setState({ serviceUuid: currentServiceUuid, serviceDisplay: currentServiceDisplay });
 };
 
 export const updateSelectedAppointmentStatus = (currentAppointmentStatus: string) => {
@@ -99,24 +102,18 @@ export const updateIsPermanentProviderQueueRoom = (currentIsPermanentProviderQue
   store.setState({ isPermanentProviderQueueRoom: currentIsPermanentProviderQueueRoom });
 };
 
-export const useSelectedServiceName = () => {
-  const { t } = useTranslation();
-  const [currentServiceName, setCurrentServiceName] = useState(initialServiceNameState.serviceName ?? t('all', 'All'));
-
-  useEffect(() => {
-    getSelectedServiceName().subscribe(({ serviceName }) => setCurrentServiceName(serviceName));
-  }, []);
-
-  return currentServiceName;
+export const updateSelectedQueueStatus = (currentQueueStatusUuid: string, currentQueueStatusDisplay: string) => {
+  const store = getSelectedQueueStatus();
+  store.setState({ statusUuid: currentQueueStatusUuid, statusDisplay: currentQueueStatusDisplay });
 };
 
-export const useSelectedServiceUuid = () => {
-  const [currentServiceUuid, setCurrentServiceUuid] = useState(initialServiceUuidState.serviceUuid);
+export const useSelectedService = () => {
+  const [currentService, setCurrentService] = useState(getSelectedService()?.getState());
 
   useEffect(() => {
-    getSelectedServiceUuid().subscribe(({ serviceUuid }) => setCurrentServiceUuid(serviceUuid));
+    getSelectedService().subscribe((newSelectedService) => setCurrentService(newSelectedService));
   }, []);
-  return currentServiceUuid;
+  return currentService;
 };
 
 export const useSelectedAppointmentStatus = () => {
@@ -175,3 +172,16 @@ export const useIsPermanentProviderQueueRoom = () => {
   }, []);
   return currentIsPermanentProviderQueueRoom;
 };
+
+export const useSelectedQueueStatus = () => {
+  const [currentQueueStatus, setCurrentQueueStatus] = useState(getSelectedQueueStatus()?.getState());
+
+  useEffect(() => {
+    getSelectedQueueStatus().subscribe((newStatus) => setCurrentQueueStatus(newStatus));
+  }, []);
+  return currentQueueStatus;
+};
+
+export function isUuid(value: string) {
+  return /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(value) || /^[0-9a-f]{36}$/i.test(value);
+}

package/src/home.component.tsx

@@ -6,7 +6,7 @@ import DefaultQueueTable from './queue-table/default-queue-table.component';
 const Home: React.FC = () => {
   return (
     <>
-      <PatientQueueHeader />
+      <PatientQueueHeader showLocationDropdown />
       <ClinicMetrics />
       <DefaultQueueTable />
     </>

package/src/hooks/useQueueEntries.ts

@@ -154,7 +154,7 @@ export function useQueueEntries(searchCriteria?: QueueEntrySearchCriteria, rep:
   return {
     queueEntries,
     totalCount,
-    isLoading: totalCount && queueEntries.length < totalCount,
+    isLoading: !totalCount || (totalCount && queueEntries.length < totalCount),
     isValidating: isValidating || currentPage < data.length,
     error,
     mutate: mutateQueueEntries,

package/src/hooks/useQueueService.ts

@@ -0,0 +1,21 @@
+import { getLocale } from '@openmrs/esm-framework';
+import { useMemo } from 'react';
+import { useQueues } from './useQueues';
+
+function useQueueServices() {
+  const { queues, isLoading } = useQueues();
+
+  const results = useMemo(
+    () => ({
+      services: [...new Set(queues?.map((queue) => queue.service) ?? [])].sort((a, b) =>
+        a.display.localeCompare(b.display, getLocale()),
+      ),
+      isLoadingQueueServices: isLoading,
+    }),
+    [queues, isLoading],
+  );
+
+  return results;
+}
+
+export default useQueueServices;

package/src/hooks/useQueueStatuses.ts

@@ -0,0 +1,40 @@
+import {
+  type FetchResponse,
+  OpenmrsResource,
+  openmrsFetch,
+  restBaseUrl,
+  useOpenmrsSWR,
+  getLocale,
+} from '@openmrs/esm-framework';
+import { useSystemSetting } from './useSystemSetting';
+import { useMemo } from 'react';
+import type { Concept } from '../types';
+import useSWRImmutable from 'swr/immutable';
+import { useQueues } from './useQueues';
+
+function useQueueStatuses() {
+  const { queues, isLoading } = useQueues();
+
+  const results = useMemo(() => {
+    const allStatuses = ([] as Array<Concept>).concat(...(queues ?? [])?.map((queue) => queue?.allowedStatuses));
+
+    const uuidSet = new Set<string>();
+
+    const statuses: Array<Concept> = [];
+
+    allStatuses.forEach((status) => {
+      if (!uuidSet.has(status?.uuid)) {
+        uuidSet.add(status?.uuid);
+        statuses.push(status);
+      }
+    });
+
+    return {
+      statuses: statuses.sort((a, b) => a.display.localeCompare(b.display, getLocale())),
+      isLoadingQueueStatuses: isLoading,
+    };
+  }, [isLoading, queues]);
+
+  return results;
+}
+export default useQueueStatuses;

package/src/index.ts

@@ -91,7 +91,7 @@ export const addProviderToRoomModal = getAsyncLifecycle(
 );
 
 export const transitionQueueEntryModal = getAsyncLifecycle(
-  () => import('./queue-table/queue-entry-actions/transition-queue-entry-modal.component'),
+  () => import('./queue-table/queue-entry-actions/transition-queue-entry.modal'),
   {
     featureName: 'transfer patient to a different queue',
     moduleName,
@@ -99,7 +99,7 @@ export const transitionQueueEntryModal = getAsyncLifecycle(
 );
 
 export const editQueueEntryModal = getAsyncLifecycle(
-  () => import('./queue-table/queue-entry-actions/edit-queue-entry-modal.component'),
+  () => import('./queue-table/queue-entry-actions/edit-queue-entry.modal'),
   {
     featureName: 'edit queue entry of a patient',
     moduleName,
@@ -107,7 +107,7 @@ export const editQueueEntryModal = getAsyncLifecycle(
 );
 
 export const undoTransitionQueueEntryModal = getAsyncLifecycle(
-  () => import('./queue-table/queue-entry-actions/undo-transition-queue-entry-modal.component'),
+  () => import('./queue-table/queue-entry-actions/undo-transition-queue-entry.modal'),
   {
     featureName: 'undo queue entry transiion of a patient',
     moduleName,
@@ -115,7 +115,7 @@ export const undoTransitionQueueEntryModal = getAsyncLifecycle(
 );
 
 export const voidQueueEntryModal = getAsyncLifecycle(
-  () => import('./queue-table/queue-entry-actions/void-queue-entry-modal.component'),
+  () => import('./queue-table/queue-entry-actions/void-queue-entry.modal'),
   {
     featureName: 'void queue entry of a patient',
     moduleName,
@@ -123,7 +123,7 @@ export const voidQueueEntryModal = getAsyncLifecycle(
 );
 
 export const endQueueEntryModal = getAsyncLifecycle(
-  () => import('./queue-table/queue-entry-actions/end-queue-entry-modal.component'),
+  () => import('./queue-table/queue-entry-actions/end-queue-entry.modal'),
   {
     featureName: 'end queue entry of a patient',
     moduleName,

package/src/patient-info/patient-info.component.tsx

@@ -1,18 +1,18 @@
-import React, { useState } from 'react';
-import classNames from 'classnames';
-import { useTranslation } from 'react-i18next';
 import { ClickableTile } from '@carbon/react';
 import { Edit } from '@carbon/react/icons';
 import {
+  ConfigurableLink,
+  PatientBannerContactDetails,
+  PatientBannerToggleContactDetailsButton,
+  PatientPhoto,
   age,
-  displayName,
   formatDate,
+  getPatientName,
   parseDate,
-  ConfigurableLink,
-  PatientPhoto,
-  PatientBannerToggleContactDetailsButton,
-  PatientBannerContactDetails,
 } from '@openmrs/esm-framework';
+import classNames from 'classnames';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import AppointmentDetails from './appointment-details.component';
 import styles from './patient-info.scss';
 
@@ -24,7 +24,7 @@ interface PatientInfoProps {
 const PatientInfo: React.FC<PatientInfoProps> = ({ patient, handlePatientInfoClick }) => {
   const { t } = useTranslation();
   const [showContactDetails, setShowContactDetails] = useState<boolean>(false);
-  const patientName = displayName(patient);
+  const patientName = getPatientName(patient);
 
   const toggleShowMore = (e: React.MouseEvent) => {
     e.stopPropagation();

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

@@ -1,23 +1,31 @@
 import React, { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Calendar, Location } from '@carbon/react/icons';
+import { Location } from '@carbon/react/icons';
 import { Dropdown } from '@carbon/react';
-import { formatDate, useSession } from '@openmrs/esm-framework';
+import { useConfig, useSession } from '@openmrs/esm-framework';
 import PatientQueueIllustration from './patient-queue-illustration.component';
 import { useQueueLocations } from '../patient-search/hooks/useQueueLocations';
 
 import {
   updateSelectedQueueLocationUuid,
   updateSelectedQueueLocationName,
-  updateSelectedServiceName,
+  updateSelectedService,
   useSelectedQueueLocationName,
   useSelectedQueueLocationUuid,
 } from '../helpers/helpers';
 import styles from './patient-queue-header.scss';
+import type { ConfigObject } from '../config-schema';
 
-const PatientQueueHeader: React.FC<{ title?: string }> = ({ title }) => {
+interface PatientQueueHeaderProps {
+  title?: string | JSX.Element;
+  showLocationDropdown: boolean;
+  actions?: React.ReactNode;
+}
+
+const PatientQueueHeader: React.FC<PatientQueueHeaderProps> = ({ title, showLocationDropdown, actions }) => {
   const { t } = useTranslation();
   const { queueLocations, isLoading, error } = useQueueLocations();
+  const { dashboardTitle } = useConfig<ConfigObject>();
   const userSession = useSession();
   const userLocation = userSession?.sessionLocation?.display;
   const currentQueueLocationName = useSelectedQueueLocationName();
@@ -30,7 +38,7 @@ const PatientQueueHeader: React.FC<{ title?: string }> = ({ title }) => {
     } else {
       updateSelectedQueueLocationUuid(selectedItem.id);
       updateSelectedQueueLocationName(selectedItem.name);
-      updateSelectedServiceName('All');
+      updateSelectedService(null, t('all', 'All'));
     }
   }, []);
 
@@ -58,24 +66,21 @@ const PatientQueueHeader: React.FC<{ title?: string }> = ({ title }) => {
   ]);
 
   return (
-    <>
-      <div className={styles.header} data-testid="patient-queue-header">
-        <div className={styles['left-justified-items']}>
-          <PatientQueueIllustration />
-          <div className={styles['page-labels']}>
-            <p>{t('serviceQueues', 'Service queues')}</p>
-            <p className={styles['page-name']}>{title ?? t('home', 'Home')}</p>
-          </div>
+    <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['right-justified-items']}>
-          <div className={styles['date-and-location']}>
-            <Location size={16} />
-            <span className={styles.value}>{userLocation}</span>
-            <span className={styles.middot}>&middot;</span>
-            <Calendar size={16} />
-            <span className={styles.value}>{formatDate(new Date(), { mode: 'standard' })}</span>
-          </div>
-          <div className={styles.dropdownContainer}>
+        <div className={styles.dropdownContainer}>
+          {showLocationDropdown && (
             <Dropdown
               aria-label="Select queue location"
               className={styles.dropdown}
@@ -89,10 +94,11 @@ const PatientQueueHeader: React.FC<{ title?: string }> = ({ title }) => {
               type="inline"
               onChange={handleQueueLocationChange}
             />
-          </div>
+          )}
+          {actions}
         </div>
       </div>
-    </>
+    </div>
   );
 };
 

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

@@ -5,12 +5,12 @@
 .header {
   @include type.type-style('body-compact-02');
   color: $text-02;
-  height: spacing.$spacing-12;
   background-color: $ui-02;
   border: 1px solid $ui-03;
   border-left: 0px;
   display: flex;
   justify-content: space-between;
+  padding-right: 1rem;
 }
 
 .left-justified-items {
@@ -39,7 +39,6 @@
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  margin-right: 1rem;
 }
 
 .value {

package/src/patient-queue-metrics/clinic-metrics.component.tsx

@@ -3,18 +3,14 @@ import { useTranslation } from 'react-i18next';
 import { Dropdown } from '@carbon/react';
 import MetricsCard from './metrics-card.component';
 import MetricsHeader from './metrics-header.component';
-import {
-  updateSelectedServiceName,
-  updateSelectedServiceUuid,
-  useSelectedServiceName,
-  useSelectedServiceUuid,
-  useSelectedQueueLocationUuid,
-} from '../helpers/helpers';
+import { updateSelectedService, useSelectedService, useSelectedQueueLocationUuid } from '../helpers/helpers';
 import { useActiveVisits, useAverageWaitTime } from './clinic-metrics.resource';
 import { useServiceMetricsCount } from './queue-metrics.resource';
 import styles from './clinic-metrics.scss';
 import { useQueues } from '../hooks/useQueues';
 import { useQueueEntries } from '../hooks/useQueueEntries';
+import useQueueServices from '../hooks/useQueueService';
+import { isDesktop, useLayoutType } from '@openmrs/esm-framework';
 
 export interface Service {
   uuid: string;
@@ -23,32 +19,25 @@ export interface Service {
 
 function ClinicMetrics() {
   const { t } = useTranslation();
+  const layout = useLayoutType();
 
   const currentQueueLocation = useSelectedQueueLocationUuid();
-  const { queues } = useQueues(currentQueueLocation);
-  const currentServiceUuid = useSelectedServiceUuid();
-  const currentServiceName = useSelectedServiceName();
-  const { serviceCount } = useServiceMetricsCount(currentServiceUuid, currentQueueLocation);
+  const { services } = useQueueServices();
+  const currentService = useSelectedService();
+  const { serviceCount } = useServiceMetricsCount(currentService?.serviceUuid, currentQueueLocation);
   const [initialSelectedItem, setInitialSelectItem] = useState(() => {
-    if (currentServiceName && currentServiceUuid) {
-      return false;
-    } else if (currentServiceName === t('all', 'All')) {
-      return true;
-    } else {
-      return true;
-    }
+    return !currentService?.serviceDisplay || !currentService?.serviceUuid;
   });
-  const { queueEntries, totalCount } = useQueueEntries({
-    queue: currentServiceUuid,
+  const { totalCount } = useQueueEntries({
+    service: currentService?.serviceUuid,
     location: currentQueueLocation,
     isEnded: false,
   });
   const { activeVisitsCount, isLoading: loading } = useActiveVisits();
-  const { waitTime } = useAverageWaitTime(currentServiceUuid, '');
+  const { waitTime } = useAverageWaitTime(currentService?.serviceUuid, '');
 
   const handleServiceChange = ({ selectedItem }) => {
-    updateSelectedServiceUuid(selectedItem.uuid);
-    updateSelectedServiceName(selectedItem.display);
+    updateSelectedService(selectedItem.uuid, selectedItem.display);
     if (selectedItem.uuid == undefined) {
       setInitialSelectItem(true);
     } else {
@@ -70,18 +59,18 @@ function ClinicMetrics() {
           label={t('patients', 'Patients')}
           value={initialSelectedItem ? totalCount ?? '--' : serviceCount}
           headerLabel={`${t('waitingFor', 'Waiting for')}:`}
-          service={currentServiceName}
-          serviceUuid={currentServiceUuid}
+          service={currentService?.serviceDisplay}
+          serviceUuid={currentService?.serviceUuid}
           locationUuid={currentQueueLocation}>
           <Dropdown
             id="inline"
             type="inline"
-            label={currentServiceName ?? `${t('all', 'All')}`}
-            items={[{ display: `${t('all', 'All')}` }, ...queues]}
+            items={[{ display: `${t('all', 'All')}` }, ...(services ?? [])]}
             itemToString={(item) =>
               item ? `${item.display} ${item.location?.display ? `- ${item.location.display}` : ''}` : ''
             }
             onChange={handleServiceChange}
+            size={isDesktop(layout) ? 'sm' : 'lg'}
           />
         </MetricsCard>
         <MetricsCard