Refactor Styling for Queue stats & Table (#173)

* Style patient served metrics * Refactor code * Style active visit table for reception * Stling for active visits
METS-Programme · Feb 21, 2024 · dd4edc8 · dd4edc8
1 parent d2c6e76
commit dd4edc8
Show file tree

Hide file tree

Showing 11 changed files with 196 additions and 62 deletions.
diff --git a/packages/esm-patient-queues-app/package.json b/packages/esm-patient-queues-app/package.json
@@ -52,6 +52,7 @@
     "react-router-dom": "6.x"
   },
   "devDependencies": {
+    "react-tooltip": "^5.26.3",
     "webpack": "^5.83.1"
   }
 }
diff --git a/...queues-app/src/active-visit-patient-reception/active-visits-reception-table.component.tsx b/...queues-app/src/active-visit-patient-reception/active-visits-reception-table.component.tsx
@@ -181,6 +181,7 @@ function ActiveVisitsReceptionTable() {
                 <TableToolbarContent className={styles.toolbarContent}>
                   <Layer>
                     <TableToolbarSearch
+                      expanded
                       className={styles.search}
                       onChange={onInputChange}
                       placeholder={t('searchThisList', 'Search this list')}

diff --git a/...es/esm-patient-queues-app/src/active-visit-patient-reception/active-visits-reception.scss b/...es/esm-patient-queues-app/src/active-visit-patient-reception/active-visits-reception.scss
@@ -3,7 +3,7 @@
 @import '~@openmrs/esm-styleguide/src/vars';
 
 .container {
-  background-color: $ui-01;
+  //background-color: $ui-01;
 }
 
 .headerContainer {
@@ -69,7 +69,7 @@
 }
 
 .tableContainer {
-  background-color: $ui-01;
+  border: 1px solid $ui-03;
   margin: 0 spacing.$spacing-05;
   padding: 0;
 
@@ -89,6 +89,10 @@
     height: spacing.$spacing-07;
     margin-bottom: spacing.$spacing-02;
   }
+
+  :global(.cds--toolbar-search-container-active.cds--search) {
+    margin-right: 1rem;
+  }
 }
 
 .emptyRow {

diff --git a/packages/esm-patient-queues-app/src/active-visits/active-visits-table.component.tsx b/packages/esm-patient-queues-app/src/active-visits/active-visits-table.component.tsx
@@ -215,6 +215,7 @@ const ActiveVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status }) => {
                 <TableToolbarContent className={styles.toolbarContent}>
                   <Layer>
                     <TableToolbarSearch
+                      expanded
                       className={styles.search}
                       onChange={onInputChange}
                       placeholder={t('searchThisList', 'Search this list')}

diff --git a/packages/esm-patient-queues-app/src/active-visits/active-visits-table.scss b/packages/esm-patient-queues-app/src/active-visits/active-visits-table.scss
@@ -3,7 +3,11 @@
 @import '~@openmrs/esm-styleguide/src/vars';
 
 .container {
-  background-color: $ui-01;
+  :global(.cds--tabs.cds--tabs--contained .cds--tabs__nav-item--selected) {
+    background-color: transparent;
+    border-left: 1px solid $ui-03;
+    border-right: 1px solid $ui-03;
+  }
 }
 
 .headerContainer {
@@ -69,7 +73,7 @@
 }
 
 .tableContainer {
-  background-color: $ui-01;
+  border: 1px solid $ui-03;
   margin: 0 spacing.$spacing-05;
   padding: 0;
 
@@ -88,6 +92,10 @@
   .toolbarContent {
     height: spacing.$spacing-07;
     margin-bottom: spacing.$spacing-02;
+
+    :global(.cds--toolbar-search-container-active.cds--search) {
+      margin-right: 1rem;
+    }
   }
 }
 

diff --git a/packages/esm-patient-queues-app/src/patient-queue-header/patient-queue-header.scss b/packages/esm-patient-queues-app/src/patient-queue-header/patient-queue-header.scss
@@ -11,6 +11,7 @@
   border-left: 0px;
   display: flex;
   justify-content: space-between;
+  margin-bottom: 2rem;
 }
 
 .left-justified-items {

diff --git a/packages/esm-patient-queues-app/src/patient-queue-metrics/clinic-metrics.component.tsx b/packages/esm-patient-queues-app/src/patient-queue-metrics/clinic-metrics.component.tsx
@@ -1,5 +1,5 @@
 import { UserHasAccess, useSession } from '@openmrs/esm-framework';
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PRIVILEGE_RECEPTION_METRIC, PRIVILIGE_TRIAGE_METRIC } from '../constants';
 
@@ -13,42 +13,21 @@ import styles from './clinic-metrics.scss';
 import MetricsCard from './metrics-card.component';
 import { useParentLocation } from '../active-visits/patient-queues.resource';
 import { usePatientQueuesList } from '../active-visit-patient-reception/active-visits-reception.resource';
+import { CheckmarkOutline, Pending, ProgressBarRound } from '@carbon/react/icons';
+import { Tooltip as ReactTooltip } from 'react-tooltip';
+import { values } from 'lodash-es';
 
-function ClinicMetrics() {
+const ClinicMetrics: React.FC = () => {
   const { t } = useTranslation();
   const session = useSession();
   const { location } = useParentLocation(session?.sessionLocation?.uuid);
   const { servedCount } = usePatientsServed(session?.sessionLocation?.uuid, 'picked');
   const { patientQueueCount: pendingCount } = usePatientQueuesList(location?.parentLocation?.uuid);
   const { appointmentList } = useAppointmentList('Scheduled');
   const creatorUuid = session?.user?.person?.display;
-
   const { patientQueueCount } = usePatientsBeingServed(session?.sessionLocation?.uuid, 'pending', creatorUuid);
 
-  const { stats: patientStats } = useServicePointCount(location?.parentLocation?.uuid, new Date(), new Date());
-
-  const getMetrics = (locationTag) => {
-    const stats = patientStats?.find((item) => item.locationTag?.display === locationTag) || {
-      pending: 0,
-      serving: 0,
-      completed: 0,
-    };
-    return {
-      label: locationTag,
-      value: stats.serving + stats.completed + stats.pending,
-      status: [
-        { status: 'Pending', value: stats.pending, color: 'orange' },
-        { status: 'Serving', value: stats.serving, color: 'green' },
-        { status: 'Completed', value: stats.completed, color: 'blue' },
-      ],
-    };
-  };
-
-  const triage = getMetrics('Triage');
-  const clinicalRoom = getMetrics('Clinical Room');
-  const laboratory = getMetrics('Laboratory');
-  const radiology = getMetrics('Radiology');
-  const pharmacy = getMetrics('Main Pharmacy');
+  const { stats } = useServicePointCount(location?.parentLocation?.uuid, new Date(), new Date());
 
   return (
     <div className={styles.cardContainer}>
@@ -61,10 +40,7 @@ function ClinicMetrics() {
           values={[{ label: 'Expected Appointments', value: appointmentList?.length }]}
           headerLabel={t('noOfExpectedAppointments', 'No. Of Expected Appointments')}
         />
-        <MetricsCard
-          values={[triage, clinicalRoom, laboratory, radiology, pharmacy]}
-          headerLabel={t('currentlyServing', 'No. of Currently being Served')}
-        />
+        <MetricsCard values={stats} headerLabel={t('currentlyServing', 'No. of Currently being Served')} />
       </UserHasAccess>
 
       <UserHasAccess privilege={PRIVILIGE_TRIAGE_METRIC}>
@@ -83,6 +59,50 @@ function ClinicMetrics() {
       </UserHasAccess>
     </div>
   );
-}
+};
+
+export const getMetrics = (locationTag, patientStats) => {
+  const stats = patientStats?.find((item) => item.locationTag?.display === locationTag) || {
+    pending: 0,
+    serving: 0,
+    completed: 0,
+  };
+  return {
+    label: locationTag,
+    value: stats.serving + stats.completed + stats.pending,
+    status: [
+      {
+        status: (
+          <>
+            <Pending data-tooltip-id="tooltip-pending" />
+            <ReactTooltip id="tooltip-pending" place="right" content="Pending" variant="warning" />
+          </>
+        ),
+        value: stats.pending,
+        color: 'orange',
+      },
+      {
+        status: (
+          <>
+            <ProgressBarRound data-tooltip-id="tooltip-serving" />
+            <ReactTooltip id="tooltip-serving" place="right" content="Serving" variant="info" />
+          </>
+        ),
+        value: stats.serving,
+        color: 'blue',
+      },
+      {
+        status: (
+          <>
+            <CheckmarkOutline data-tooltip-id="tooltip-completed" />
+            <ReactTooltip id="tooltip-completed" place="right" content="Completed" variant="success" />
+          </>
+        ),
+        value: stats.completed,
+        color: 'green',
+      },
+    ],
+  };
+};
 
 export default ClinicMetrics;
diff --git a/packages/esm-patient-queues-app/src/patient-queue-metrics/clinic-metrics.resource.tsx b/packages/esm-patient-queues-app/src/patient-queue-metrics/clinic-metrics.resource.tsx
@@ -16,6 +16,8 @@ import { PatientQueue } from '../types/patient-queues';
 import { omrsDateFormat } from '../constants';
 import { amPm } from '../helpers/time-helpers';
 import { configSchema } from '../config-schema';
+import { Value } from './metrics-card.component';
+import { getMetrics } from './clinic-metrics.component';
 
 export type PickedResponse = {
   results: IResultsItem[];
@@ -577,17 +579,22 @@ export interface Link {
   resourceAlias: string;
 }
 
-// patients in the different service points
-
 export function useServicePointCount(parentLocation: string, beforeDate: Date, afterDate: Date) {
-  const apiUrl = `/ws/rest/v1/queuestatistics?parentLocation=${parentLocation}&after=${afterDate}&before=${beforeDate}`;
+  const apiUrl = `/ws/rest/v1/queuestatistics?parentLocation=${parentLocation}&toDate=${afterDate}&fromDate=${beforeDate}`;
   const { data, error, isLoading, isValidating, mutate } = useSWR<{ data: { results: Array<PatientStats> } }, Error>(
     apiUrl,
     openmrsFetch,
   );
 
+  const servicePoints = ['Triage', 'Clinical Room', 'Laboratory', 'Radiology', 'Main Pharmacy'];
+  let patientStatsArray: Array<Value> = [];
+
+  servicePoints.map((servicePoint) => {
+    patientStatsArray.push(getMetrics(servicePoint, data?.data?.results));
+  });
+
   return {
-    stats: data?.data.results,
+    stats: patientStatsArray,
     isLoading,
     isError: error,
     isValidating,

diff --git a/packages/esm-patient-queues-app/src/patient-queue-metrics/metrics-card.component.tsx b/packages/esm-patient-queues-app/src/patient-queue-metrics/metrics-card.component.tsx
@@ -1,6 +1,5 @@
 import { Layer, Tile } from '@carbon/react';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 import styles from './metrics-card.scss';
 
 export interface Value {
@@ -10,7 +9,7 @@ export interface Value {
 }
 
 interface Status {
-  status: string;
+  status: any;
   value: number;
   color: string;
 }
@@ -21,7 +20,6 @@ interface MetricsCardProps {
 }
 
 const MetricsCard: React.FC<MetricsCardProps> = ({ values, headerLabel }) => {
-  // Assuming "styles" is imported from a CSS module or styling library
   return (
     <Layer className={`${styles.cardWithChildren} ${styles.container}`}>
       <Tile className={styles.tileContainer}>
@@ -30,25 +28,28 @@ const MetricsCard: React.FC<MetricsCardProps> = ({ values, headerLabel }) => {
             <label className={styles.headerLabel}>{headerLabel}</label>
           </div>
         </div>
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-          {values.map((value) => (
-            <div key={value.label}>
-              <label className={styles.totalsLabel}>{value.label}</label>
-              <p className={styles.totalsValue}>{value.value}</p>
-              <div style={{ display: 'flex', flexDirection: 'row' }}>
+        <div className={styles.valueContainer}>
+          {values?.map((value) => (
+            <div className={styles.valueInnerContainer}>
+              <div key={value.label}>
+                <label className={styles.totalsLabel}>{value.label}</label>
+                <p className={styles.totalsValue}>{value.value}</p>
+              </div>
+              <div className={styles.valueStatus}>
                 {value?.status?.map((status, index) => (
-                  <div
-                    key={index}
-                    style={{
-                      display: 'flex',
-                      flexDirection: 'column',
-                      alignItems: 'start',
-                      marginRight: '10px',
-                      color: `${status.color}`,
-                    }}
-                  >
-                    <p style={{ margin: 0, fontSize: '0.8em', marginRight: '5px' }}>{status.value}</p>
-                    <label style={{ margin: 0, fontSize: '0.8em' }}>{status.status}</label>
+                  <div key={index} className={styles.status}>
+                    <p className={styles.statusValue}>{status.value}</p>
+                    <label
+                      className={`${styles.statusLabel} ${
+                        status.color === 'orange'
+                          ? styles.statusOrange
+                          : status.color === 'green'
+                          ? styles.statusGreen
+                          : styles.statusBlue
+                      }`}
+                    >
+                      {status.status}
+                    </label>
                   </div>
                 ))}
               </div>

diff --git a/packages/esm-patient-queues-app/src/patient-queue-metrics/metrics-card.scss b/packages/esm-patient-queues-app/src/patient-queue-metrics/metrics-card.scss
@@ -1,5 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/colors';
 @import '~@openmrs/esm-styleguide/src/vars';
 
 .container {
@@ -34,7 +35,7 @@
 }
 
 .totalsLabel {
-  font-weight: bold;
+  font-weight: bold !important;
   @include type.type-style('label-01');
   color: $text-02;
 }
@@ -68,3 +69,45 @@
     margin-left: spacing.$spacing-03;
   }
 }
+
+.valueContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.valueInnerContainer {
+  display: flex;
+}
+
+.valueStatus {
+  padding-left: 0.5rem;
+}
+
+.status {
+  display: flex;
+  align-items: start;
+  margin-right: 10px;
+}
+
+.statusValue {
+  margin: 0 5px 0 0;
+  font-size: 0.8em;
+}
+
+.statusLabel {
+  margin: 0;
+  font-size: 0.8em;
+}
+
+.statusOrange {
+  color: colors.$orange-30;
+}
+
+.statusGreen {
+  color: colors.$green-50;
+}
+
+.statusBlue {
+  color: colors.$blue-30;
+}