From b7b1b570874da6cb21a457750f68dcf66c0fbdc3 Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Tue, 14 Jan 2025 00:56:27 +0300
Subject: [PATCH] Fixup

---
 .../clinic-metrics.component.tsx              | 30 ++++++++++---------
 .../patient-queue-metrics/metrics-card.scss   |  8 ++++-
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/packages/esm-service-queues-app/src/patient-queue-metrics/clinic-metrics.component.tsx b/packages/esm-service-queues-app/src/patient-queue-metrics/clinic-metrics.component.tsx
index ae9a9d14e..b3bb6caf2 100644
--- a/packages/esm-service-queues-app/src/patient-queue-metrics/clinic-metrics.component.tsx
+++ b/packages/esm-service-queues-app/src/patient-queue-metrics/clinic-metrics.component.tsx
@@ -6,15 +6,15 @@ import { updateSelectedService, useSelectedService, useSelectedQueueLocationUuid
 import { useActiveVisits, useAverageWaitTime } from './clinic-metrics.resource';
 import { useServiceMetricsCount } from './queue-metrics.resource';
 import { useQueueEntries } from '../hooks/useQueueEntries';
+import useQueueServices from '../hooks/useQueueService';
+import { type Concept } from '../types';
 import MetricsCard from './metrics-card.component';
 import MetricsHeader from './metrics-header.component';
-import useQueueServices from '../hooks/useQueueService';
 import styles from './clinic-metrics.scss';
-import { type Concept } from '../types';
 
 export interface Service {
-  uuid: string;
   display: string;
+  uuid?: string;
 }
 
 type ServiceListItem = Service | Concept;
@@ -22,32 +22,34 @@ type ServiceListItem = Service | Concept;
 function ClinicMetrics() {
   const { t } = useTranslation();
   const layout = useLayoutType();
-
   const currentQueueLocation = useSelectedQueueLocationUuid();
-  const { services } = useQueueServices();
   const currentService = useSelectedService();
+
+  const { services } = useQueueServices();
   const { serviceCount } = useServiceMetricsCount(currentService?.serviceUuid, currentQueueLocation);
+
   const [initialSelectedItem, setInitialSelectItem] = useState(() => {
     return !currentService?.serviceDisplay || !currentService?.serviceUuid;
   });
+
   const { totalCount } = useQueueEntries({
     service: currentService?.serviceUuid,
     location: currentQueueLocation,
     isEnded: false,
   });
+
   const { activeVisitsCount, isLoading: loading } = useActiveVisits();
   const { waitTime } = useAverageWaitTime(currentService?.serviceUuid, '');
 
   const defaultServiceItem: Service = {
     display: `${t('all', 'All')}`,
-    uuid: '',
   };
 
   const serviceItems: ServiceListItem[] = [defaultServiceItem, ...(services ?? [])];
 
   const handleServiceChange = ({ selectedItem }) => {
     updateSelectedService(selectedItem.uuid, selectedItem.display);
-    if (selectedItem.uuid == undefined) {
+    if (selectedItem.uuid === undefined) {
       setInitialSelectItem(true);
     } else {
       setInitialSelectItem(false);
@@ -59,18 +61,18 @@ function ClinicMetrics() {
       <MetricsHeader />
       <div className={styles.cardContainer} data-testid="clinic-metrics">
         <MetricsCard
-          label={t('patients', 'Patients')}
-          value={loading ? '--' : activeVisitsCount}
           headerLabel={t('checkedInPatients', 'Checked in patients')}
+          label={t('patients', 'Patients')}
           service="scheduled"
+          value={loading ? '--' : activeVisitsCount}
         />
         <MetricsCard
+          headerLabel=""
           label={t('patients', 'Patients')}
-          value={initialSelectedItem ? totalCount ?? '--' : serviceCount}
-          headerLabel={`${t('waitingFor', 'Waiting for')}:`}
+          locationUuid={currentQueueLocation}
           service={currentService?.serviceDisplay}
           serviceUuid={currentService?.serviceUuid}
-          locationUuid={currentQueueLocation}>
+          value={initialSelectedItem ? totalCount ?? '--' : serviceCount}>
           <Dropdown
             id="inline"
             initialSelectedItem={defaultServiceItem}
@@ -81,15 +83,15 @@ function ClinicMetrics() {
             label=""
             onChange={handleServiceChange}
             size={isDesktop(layout) ? 'sm' : 'lg'}
-            titleText=""
+            titleText={`${t('waitingFor', 'Waiting for')}:`}
             type="inline"
           />
         </MetricsCard>
         <MetricsCard
           label={t('minutes', 'Minutes')}
-          value={waitTime ? waitTime.averageWaitTime : '--'}
           headerLabel={t('averageWaitTime', 'Average wait time today')}
           service="waitTime"
+          value={waitTime ? waitTime.averageWaitTime : '--'}
         />
       </div>
     </>
diff --git a/packages/esm-service-queues-app/src/patient-queue-metrics/metrics-card.scss b/packages/esm-service-queues-app/src/patient-queue-metrics/metrics-card.scss
index 78bd6e115..de777f95d 100644
--- a/packages/esm-service-queues-app/src/patient-queue-metrics/metrics-card.scss
+++ b/packages/esm-service-queues-app/src/patient-queue-metrics/metrics-card.scss
@@ -46,10 +46,16 @@
 .headerLabelContainer {
   display: flex;
   height: layout.$spacing-07;
+  align-items: center;
 
   :global(.cds--dropdown__wrapper--inline) {
     gap: 0;
-    margin-top: -(layout.$spacing-04);
+
+    label {
+      @include type.type-style('heading-compact-01');
+      color: $text-02;
+      margin-right: layout.$spacing-03;
+    }
   }
 
   :global(.cds--list-box__menu-icon) {