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

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

@@ -0,0 +1,22 @@
+import React from 'react';
+
+const PatientQueueIllustration: React.FC = () => {
+  return (
+    <svg width="92" height="94" viewBox="0 0 92 94" xmlns="http://www.w3.org/2000/svg">
+      <title>Patient queue illustration</title>
+      <g fill="none" fillRule="evenodd">
+        <path fill="#FFF" d="M0 0h92v94H0z" />
+        <path
+          d="M40 32c.84-.602 1.12-1.797 1-3 .12-5.005-3.96-9-9-9s-9.12 3.995-9 9c-.12 3.572 2.1 6.706 5 8-6.76 1.741-12 7.91-12 15v15h28V32h-4zM76 67V52c0-7.09-5.24-13.278-12-15 2.9-1.294 5.12-4.428 5-8 .12-5.005-3.96-9-9-9s-9.12 3.995-9 9c-.12 1.203.14 2.398 1 3h-4v35h28z"
+          fill="#CEE6E5"
+        />
+        <path
+          d="M32 75V60.312c0-7.402 5.24-13.59 12.3-15.216-3.2-1.39-5.42-4.523-5.42-8.166 0-4.935 4.08-8.93 9.12-8.93 5.04 0 9.12 3.995 9.12 8.93 0 3.642-2.22 6.776-5.42 8.166C58.76 46.741 64 52.91 64 60.313V75"
+          fill="#7BBCB9"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default PatientQueueIllustration;

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

@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+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 { 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';
+
+export interface Service {
+  uuid: string;
+  display: string;
+}
+
+function ClinicMetrics() {
+  const { t } = useTranslation();
+
+  const currentQueueLocation = useSelectedQueueLocationUuid();
+  const { queues } = useQueues(currentQueueLocation);
+  const currentServiceUuid = useSelectedServiceUuid();
+  const currentServiceName = useSelectedServiceName();
+  const { serviceCount } = useServiceMetricsCount(currentServiceUuid, currentQueueLocation);
+  const [initialSelectedItem, setInitialSelectItem] = useState(() => {
+    if (currentServiceName && currentServiceUuid) {
+      return false;
+    } else if (currentServiceName === t('all', 'All')) {
+      return true;
+    } else {
+      return true;
+    }
+  });
+  const { queueEntries, totalCount } = useQueueEntries({
+    queue: currentServiceUuid,
+    location: currentQueueLocation,
+    isEnded: false,
+  });
+  const { activeVisitsCount, isLoading: loading } = useActiveVisits();
+  const { waitTime } = useAverageWaitTime(currentServiceUuid, '');
+
+  const handleServiceChange = ({ selectedItem }) => {
+    updateSelectedServiceUuid(selectedItem.uuid);
+    updateSelectedServiceName(selectedItem.display);
+    if (selectedItem.uuid == undefined) {
+      setInitialSelectItem(true);
+    } else {
+      setInitialSelectItem(false);
+    }
+  };
+
+  return (
+    <>
+      <MetricsHeader />
+      <div className={styles.cardContainer} data-testid="clinic-metrics">
+        <MetricsCard
+          label={t('patients', 'Patients')}
+          value={loading ? '--' : activeVisitsCount}
+          headerLabel={t('checkedInPatients', 'Checked in patients')}
+          service="scheduled"
+        />
+        <MetricsCard
+          label={t('patients', 'Patients')}
+          value={initialSelectedItem ? totalCount ?? '--' : serviceCount}
+          headerLabel={`${t('waitingFor', 'Waiting for')}:`}
+          service={currentServiceName}
+          serviceUuid={currentServiceUuid}
+          locationUuid={currentQueueLocation}>
+          <Dropdown
+            id="inline"
+            type="inline"
+            label={currentServiceName ?? `${t('all', 'All')}`}
+            items={[{ display: `${t('all', 'All')}` }, ...queues]}
+            itemToString={(item) =>
+              item ? `${item.display} ${item.location?.display ? `- ${item.location.display}` : ''}` : ''
+            }
+            onChange={handleServiceChange}
+          />
+        </MetricsCard>
+        <MetricsCard
+          label={t('minutes', 'Minutes')}
+          value={waitTime ? waitTime.averageWaitTime : '--'}
+          headerLabel={t('averageWaitTime', 'Average wait time today')}
+          service="waitTime"
+        />
+      </div>
+    </>
+  );
+}
+
+export default ClinicMetrics;

package/src/patient-queue-metrics/clinic-metrics.resource.ts

@@ -0,0 +1,58 @@
+import { useSession, type Visit, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import dayjs from 'dayjs';
+import useSWR from 'swr';
+import { type WaitTime } from '../types';
+
+export function useActiveVisits() {
+  const currentUserSession = useSession();
+  const startDate = dayjs().format('YYYY-MM-DD');
+  const sessionLocation = currentUserSession?.sessionLocation?.uuid;
+
+  const customRepresentation =
+    'custom:(uuid,patient:(uuid,identifiers:(identifier,uuid),person:(age,display,gender,uuid)),' +
+    'visitType:(uuid,name,display),location:(uuid,name,display),startDatetime,' +
+    'stopDatetime)&fromStartDate=' +
+    startDate +
+    '&location=' +
+    sessionLocation;
+  const url = `${restBaseUrl}/visit?includeInactive=false&v=${customRepresentation}`;
+  const { data, error, isLoading, isValidating } = useSWR<{ data: { results: Array<Visit> } }, Error>(
+    sessionLocation ? url : null,
+    openmrsFetch,
+  );
+
+  // Create a Set to store unique patient UUIDs
+  const uniquePatientUUIDs = new Set();
+
+  data?.data?.results.forEach((visit) => {
+    const patientUUID = visit.patient?.uuid;
+    const isToday = dayjs(visit.startDatetime).isToday();
+    if (patientUUID && isToday) {
+      uniquePatientUUIDs.add(patientUUID);
+    }
+  });
+
+  return {
+    activeVisitsCount: uniquePatientUUIDs.size,
+    isLoading,
+    isError: error,
+    isValidating,
+  };
+}
+
+export function useAverageWaitTime(serviceUuid: string, statusUuid: string) {
+  const apiUrl = `${restBaseUrl}/queue-metrics?queue=${serviceUuid}&status=${statusUuid}`;
+
+  const { data, error, isLoading, isValidating, mutate } = useSWR<{ data: WaitTime }, Error>(
+    serviceUuid && statusUuid ? apiUrl : null,
+    openmrsFetch,
+  );
+
+  return {
+    waitTime: data ? data?.data : null,
+    isLoading,
+    isError: error,
+    isValidating,
+    mutate,
+  };
+}

package/src/patient-queue-metrics/clinic-metrics.scss

@@ -0,0 +1,11 @@
+@use '@carbon/styles/scss/spacing';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.cardContainer {
+  background-color: $ui-02;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 spacing.$spacing-05 spacing.$spacing-07 spacing.$spacing-03;
+  flex-flow: row wrap;
+  margin-top: -(spacing.$spacing-03);
+}

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

@@ -0,0 +1,76 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { openmrsFetch, useConfig } from '@openmrs/esm-framework';
+import { mockMetrics, mockServiceTypes, mockLocations, mockSession } from '__mocks__';
+import ClinicMetrics from './clinic-metrics.component';
+
+const mockedOpenmrsFetch = openmrsFetch as jest.Mock;
+const mockedUseConfig = useConfig as jest.Mock;
+
+jest.mock('./queue-metrics.resource', () => {
+  const originalModule = jest.requireActual('./queue-metrics.resource');
+
+  return {
+    ...originalModule,
+    useServiceMetricsCount: jest.fn().mockReturnValue(5),
+  };
+});
+
+jest.mock('../hooks/useQueues', () => {
+  return {
+    useQueues: jest.fn().mockReturnValue({ queues: mockServiceTypes.data }),
+  };
+});
+
+jest.mock('./clinic-metrics.resource', () => {
+  const originalModule = jest.requireActual('./clinic-metrics.resource');
+
+  return {
+    ...originalModule,
+    useAverageWaitTime: jest.fn().mockImplementation(() => ({ waitTime: mockMetrics.waitTime })),
+    useActiveVisits: jest.fn().mockImplementation(() => ({ activeVisitsCount: mockMetrics.activeVisitsCount })),
+  };
+});
+
+jest.mock('@openmrs/esm-framework', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-framework');
+
+  return {
+    ...originalModule,
+    useLocations: jest.fn().mockImplementation(() => mockLocations.data),
+    useSession: jest.fn().mockImplementation(() => mockSession.data),
+  };
+});
+
+jest.mock('../helpers/helpers', () => {
+  const originalModule = jest.requireActual('../helpers/helpers');
+
+  return {
+    ...originalModule,
+    useSelectedServiceName: jest.fn().mockReturnValue('All'),
+  };
+});
+
+describe('Clinic metrics', () => {
+  it('renders a dashboard outlining metrics from the outpatient clinic', async () => {
+    mockedUseConfig.mockReturnValue({
+      visitQueueNumberAttributeUuid: 'c61ce16f-272a-41e7-9924-4c555d0932c5',
+    });
+
+    mockedOpenmrsFetch.mockReturnValue({ data: mockMetrics });
+
+    renderClinicMetrics();
+
+    await screen.findByText(/Checked in patients/i);
+    expect(screen.getByText(/100/i)).toBeInTheDocument();
+    expect(screen.getAllByText(/patient list/i));
+    expect(screen.getByText(/Average wait time today/i)).toBeInTheDocument();
+    expect(screen.getByText(/minutes/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /queue screen/i })).toBeInTheDocument();
+    expect(screen.getByText(/69/i)).toBeInTheDocument();
+  });
+});
+
+function renderClinicMetrics() {
+  render(<ClinicMetrics />);
+}

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Layer, Tile } from '@carbon/react';
+import { ArrowRight } from '@carbon/react/icons';
+import { ConfigurableLink } from '@openmrs/esm-framework';
+import styles from './metrics-card.scss';
+
+interface MetricsCardProps {
+  label: string;
+  value: number | string;
+  headerLabel: string;
+  children?: React.ReactNode;
+  service?: string;
+  serviceUuid?: string;
+  locationUuid?: string;
+}
+
+const MetricsCard: React.FC<MetricsCardProps> = ({
+  label,
+  value,
+  headerLabel,
+  children,
+  service,
+  serviceUuid,
+  locationUuid,
+}) => {
+  const { t } = useTranslation();
+  const queueListPath =
+    window.getOpenmrsSpaBase() + `home/service-queues/queue-list/${service}/${serviceUuid}/${locationUuid}`;
+
+  return (
+    <Layer
+      className={classNames(styles.container, {
+        [styles.cardWithChildren]: children,
+      })}>
+      <Tile className={styles.tileContainer}>
+        <div className={styles.tileHeader}>
+          <div className={styles.headerLabelContainer}>
+            <label className={styles.headerLabel}>{headerLabel}</label>
+            {children}
+          </div>
+          {service == 'scheduled' ? (
+            <div className={styles.link}>
+              <ConfigurableLink className={styles.link} to={`\${openmrsSpaBase}/home`}>
+                {t('patientList', 'Patient list')}
+              </ConfigurableLink>
+              <ArrowRight size={16} />
+            </div>
+          ) : service == 'waitTime' ? null : (
+            <div className={styles.link}>
+              <ConfigurableLink className={styles.link} to={queueListPath}>
+                {t('patientList', 'Patient list')}
+              </ConfigurableLink>
+              <ArrowRight size={16} />
+            </div>
+          )}
+        </div>
+        <div>
+          <label className={styles.totalsLabel}>{label}</label>
+          <p className={styles.totalsValue}>{value}</p>
+        </div>
+      </Tile>
+    </Layer>
+  );
+};
+
+export default MetricsCard;

package/src/patient-queue-metrics/metrics-card.scss

@@ -0,0 +1,80 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.container {
+  flex-grow: 1;
+}
+
+/* Tablet viewport */
+:global(.omrs-breakpoint-lt-desktop) {
+  // The card containing the dropdown element should be the first to overflow on tablet
+  .cardWithChildren {
+    order: 3;
+  }
+}
+
+.tileContainer {
+  border: 0.0625rem solid $ui-03;
+  height: 7.875rem;
+  padding: spacing.$spacing-05;
+  margin: spacing.$spacing-03 spacing.$spacing-03;
+}
+
+.tileHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: spacing.$spacing-03;
+}
+
+.headerLabel {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+}
+
+.totalsLabel {
+  @include type.type-style('label-01');
+  color: $text-02;
+}
+
+.totalsValue {
+  @include type.type-style('heading-04');
+  color: $ui-05;
+}
+
+.headerLabelContainer {
+  display: flex;
+  height: spacing.$spacing-07;
+
+  :global(.cds--dropdown__wrapper--inline) {
+    gap: 0;
+    margin-top: -0.75rem;
+  }
+
+  :global(.cds--list-box__menu-icon) {
+    height: 1rem;
+  }
+}
+
+.link {
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  color: $interactive-01;
+
+  svg {
+    margin-left: spacing.$spacing-03;
+  }
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .link {
+    svg {
+      margin-right: spacing.$spacing-03;
+      margin-left: unset;
+      transform: scale(-1, 1);
+    }
+  }
+}

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

@@ -0,0 +1,61 @@
+import { ComboButton, MenuItem } from '@carbon/react';
+import {
+  UserHasAccess,
+  isDesktop,
+  launchWorkspace,
+  navigate,
+  showModal,
+  useLayoutType,
+  useSession,
+} from '@openmrs/esm-framework';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { spaBasePath } from '../constants';
+import styles from './metrics-header.scss';
+
+const MetricsHeader = () => {
+  const { t } = useTranslation();
+  const metricsTitle = t('clinicMetrics', 'Clinic metrics');
+  const queueScreenText = t('queueScreen', 'Queue screen');
+  const currentUserSession = useSession();
+  const providerUuid = currentUserSession?.currentProvider?.uuid;
+  const layout = useLayoutType();
+
+  const navigateToQueueScreen = () => {
+    navigate({ to: `${spaBasePath}/service-queues/screen` });
+  };
+  return (
+    <div className={styles.metricsContainer}>
+      <span className={styles.metricsTitle}>{metricsTitle}</span>
+      <ComboButton
+        label={queueScreenText}
+        size={isDesktop(layout) ? 'sm' : 'lg'}
+        menuAlignment="bottom-end"
+        className={styles.comboBtn}
+        tooltipAlignment="top-right"
+        onClick={navigateToQueueScreen}>
+        <UserHasAccess privilege="Emr: View Legacy Interface">
+          <MenuItem
+            label={t('addNewService', 'Add new service')}
+            onClick={() => launchWorkspace('service-queues-service-form')}
+          />
+          <MenuItem
+            label={t('addNewServiceRoom', 'Add new service room')}
+            onClick={() => launchWorkspace('service-queues-room-form')}
+          />
+        </UserHasAccess>
+        <MenuItem
+          label={t('addProviderQueueRoom', 'Add provider queue room')}
+          onClick={() => {
+            const dispose = showModal('add-provider-to-room-modal', {
+              closeModal: () => dispose(),
+              providerUuid,
+            });
+          }}
+        />
+      </ComboButton>
+    </div>
+  );
+};
+
+export default MetricsHeader;

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

@@ -0,0 +1,26 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.metricsContainer {
+  display: flex;
+  justify-content: space-between;
+  background-color: $ui-02;
+  height: layout.$spacing-10;
+  align-items: center;
+  padding: 0 layout.$spacing-05;
+}
+
+.metricsTitle {
+  @include type.type-style('heading-03');
+  color: $ui-05;
+}
+
+.actionBtn {
+  display: flex;
+  column-gap: 0.5rem;
+}
+
+.comboBtn {
+  cursor: default;
+}

package/src/patient-queue-metrics/queue-metrics.resource.ts

@@ -0,0 +1,42 @@
+import useSWR from 'swr';
+import useSWRImmutable from 'swr/immutable';
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { type Appointment, type QueueServiceInfo } from '../types';
+import { startOfDay } from '../constants';
+
+export function useServiceMetricsCount(service: string, location: string) {
+  const status = 'Waiting';
+  const apiUrl =
+    `${restBaseUrl}/queue-entry-metrics?status=${status}&isEnded=false` +
+    (service ? `&service=${service}` : '') +
+    (location ? `&location=${location}` : '');
+
+  const { data } = useSWRImmutable<
+    {
+      data: {
+        count: number;
+      };
+    },
+    Error
+  >(service ? apiUrl : null, openmrsFetch);
+
+  return {
+    serviceCount: data ? data?.data?.count : 0,
+  };
+}
+
+export const useAppointmentMetrics = () => {
+  const apiUrl = `${restBaseUrl}/appointment/all?forDate=${startOfDay}`;
+
+  const { data, error, isLoading } = useSWR<{
+    data: Array<Appointment>;
+  }>(apiUrl, openmrsFetch);
+
+  const totalScheduledAppointments = data?.data.length ?? 0;
+
+  return {
+    isLoading,
+    error,
+    totalScheduledAppointments,
+  };
+};