@openmrs/esm-service-queues-app 5.0.1-pre.2087

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Calendar, Location } from '@carbon/react/icons';
+import { Dropdown } from '@carbon/react';
+import { formatDate, useSession } from '@openmrs/esm-framework';
+import PatientQueueIllustration from './patient-queue-illustration.component';
+import { useQueueLocations } from '../patient-search/hooks/useQueueLocations';
+import {
+  updateSelectedQueueLocationUuid,
+  updateSelectedQueueLocationName,
+  updateSelectedServiceName,
+  useSelectedQueueLocationName,
+} from '../helpers/helpers';
+import styles from './patient-queue-header.scss';
+
+const PatientQueueHeader: React.FC<{ title?: string }> = ({ title }) => {
+  const { t } = useTranslation();
+  const userSession = useSession();
+  const userLocation = userSession?.sessionLocation?.display;
+  const { queueLocations } = useQueueLocations();
+  const currentQueueLocationName = useSelectedQueueLocationName();
+
+  const handleQueueLocationChange = ({ selectedItem }) => {
+    updateSelectedQueueLocationUuid(selectedItem.id);
+    updateSelectedQueueLocationName(selectedItem.name);
+    updateSelectedServiceName('All');
+  };
+
+  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>
+        <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.dropdown}>
+            <label className={styles.view}>{t('view', 'View')}:</label>
+            <Dropdown
+              id="typeOfCare"
+              label={currentQueueLocationName ?? queueLocations?.[0]?.name}
+              items={[{ display: `${t('all', 'All')}` }, ...queueLocations]}
+              itemToString={(item) => (item ? item.name : '')}
+              type="inline"
+              onChange={handleQueueLocationChange}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default PatientQueueHeader;

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

@@ -0,0 +1,88 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.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;
+}
+
+.left-justified-items {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.right-justified-items {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  padding-top: 1rem;
+}
+
+.page-name {
+  @include type.type-style('heading-04');
+}
+
+.page-labels {
+  p:first-of-type {
+    margin-bottom: 0.25rem;
+  }
+}
+
+.date-and-location {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-right: 1rem;
+}
+
+.value {
+  margin-left: 0.25rem;
+}
+
+.middot {
+  margin: 0 0.5rem;
+}
+
+.view {
+  @include type.type-style('label-01');
+}
+
+.dropdown {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-top: 0.25rem;
+
+  :global(.cds--dropdown__wrapper--inline) {
+    align-items: center;
+    display: flex;
+  }
+
+  :global(.cds--list-box__menu) {
+    left: -10.15rem;
+  }
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .date-and-location {
+    margin-right: unset;
+    margin-left: spacing.$spacing-05;
+    & > svg:first-child {
+      order: -1;
+    }
+    & > svg:nth-child(4) {
+      order: 1;
+    }
+    & > span:nth-child(2) {
+      order: -2;
+    }
+  }
+}

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,93 @@
+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, useServices } from './queue-metrics.resource';
+import { useVisitQueueEntries } from '../active-visits/active-visits-table.resource';
+import styles from './clinic-metrics.scss';
+import { useQueueLocations } from '../patient-search/hooks/useQueueLocations';
+
+export interface Service {
+  uuid: string;
+  display: string;
+}
+
+function ClinicMetrics() {
+  const { t } = useTranslation();
+
+  const currentQueueLocation = useSelectedQueueLocationUuid();
+  const { queueLocations } = useQueueLocations();
+  const { allServices } = useServices(currentQueueLocation ?? queueLocations?.[0]?.id);
+  const currentServiceUuid = useSelectedServiceUuid();
+  const currentServiceName = useSelectedServiceName();
+  const { serviceCount } = useServiceMetricsCount(currentServiceName, currentQueueLocation ?? queueLocations?.[0]?.id);
+  const [initialSelectedItem, setInitialSelectItem] = useState(() => {
+    if (currentServiceName && currentServiceUuid) {
+      return false;
+    } else if (currentServiceName === t('all', 'All')) {
+      return true;
+    } else {
+      return true;
+    }
+  });
+  const { visitQueueEntriesCount } = useVisitQueueEntries(currentServiceName, currentQueueLocation);
+  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 ? visitQueueEntriesCount : 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')}` }, ...allServices]}
+            itemToString={(item) => (item ? item.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.tsx

@@ -0,0 +1,51 @@
+import { useSession, Visit, openmrsFetch } from '@openmrs/esm-framework';
+import dayjs from 'dayjs';
+import useSWR from 'swr';
+import { 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 = `/ws/rest/v1/visit?includeInactive=false&v=${customRepresentation}`;
+  const { data, error, isLoading, isValidating } = useSWR<{ data: { results: Array<Visit> } }, Error>(
+    sessionLocation ? url : null,
+    openmrsFetch,
+  );
+
+  const activeVisitsCount = data?.data?.results.length
+    ? data.data.results.filter((visit) => dayjs(visit.startDatetime).isToday())?.length
+    : 0;
+
+  return {
+    activeVisitsCount: activeVisitsCount,
+    isLoading,
+    isError: error,
+    isValidating,
+  };
+}
+
+export function useAverageWaitTime(serviceUuid: string, statusUuid: string) {
+  const apiUrl = `/ws/rest/v1/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,87 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { openmrsFetch, useConfig } from '@openmrs/esm-framework';
+import ClinicMetrics from './clinic-metrics.component';
+import { mockMetrics, mockServiceTypes } from '../../../../__mocks__/metrics.mock';
+import { mockLocations } from '../../../../__mocks__/locations.mock';
+import { mockSession } from '../../../../__mocks__/session.mock';
+
+const mockedOpenmrsFetch = openmrsFetch as jest.Mock;
+const mockedUseConfig = useConfig as jest.Mock;
+
+jest.mock('./queue-metrics.resource.ts', () => {
+  const originalModule = jest.requireActual('./queue-metrics.resource.ts');
+
+  return {
+    ...originalModule,
+    useServices: jest.fn().mockImplementation(() => ({ allServices: mockServiceTypes.data })),
+    useServiceMetricsCount: jest.fn().mockReturnValue(5),
+  };
+});
+
+jest.mock('./clinic-metrics.resource.tsx', () => {
+  const originalModule = jest.requireActual('./clinic-metrics.resource.tsx');
+
+  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.ts', () => {
+  const originalModule = jest.requireActual('../helpers/helpers.ts');
+
+  return {
+    ...originalModule,
+    useSelectedServiceName: jest.fn().mockReturnValue('All'),
+  };
+});
+
+jest.mock('../active-visits/active-visits-table.resource.ts', () => {
+  const originalModule = jest.requireActual('../active-visits/active-visits-table.resource.ts');
+
+  return {
+    ...originalModule,
+    useVisitQueueEntries: jest.fn().mockReturnValue(5),
+  };
+});
+
+describe('Clinic metrics', () => {
+  it('renders a dashboard outlining metrics from the outpatient clinic', async () => {
+    mockedUseConfig.mockReturnValue({
+      concepts: {
+        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();
+
+    // Select a different service to show metrics for
+    expect(screen.getByRole('button', { name: /open menu/i }));
+  });
+});
+
+function renderClinicMetrics() {
+  render(<ClinicMetrics />);
+}

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

@@ -0,0 +1,64 @@
+import React from 'react';
+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();
+
+  return (
+    <Layer className={`${children && styles.cardWithChildren} ${styles.container}`}>
+      <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={`\${openmrsSpaBase}/queue-list/${service}/${serviceUuid}/${locationUuid}/`}>
+                {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,74 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { MessageQueue, ArrowRight } from '@carbon/react/icons';
+import { Button } from '@carbon/react';
+import styles from './metrics-header.scss';
+import { navigate, UserHasAccess } from '@openmrs/esm-framework';
+import { spaBasePath } from '../constants';
+import { SearchTypes } from '../types';
+import PatientSearch from '../patient-search/patient-search.component';
+
+const MetricsHeader = () => {
+  const { t } = useTranslation();
+  const metricsTitle = t('clinicMetrics', 'Clinic metrics');
+  const queueScreenText = t('queueScreen', 'Queue screen');
+  const [showOverlay, setShowOverlay] = useState(false);
+  const [view, setView] = useState('');
+  const [viewState, setViewState] = useState<{ selectedPatientUuid: string }>(null);
+  const [overlayHeader, setOverlayTitle] = useState('');
+
+  const navigateToQueueScreen = () => {
+    navigate({ to: `${spaBasePath}/service-queues/screen` });
+  };
+
+  return (
+    <div className={styles.metricsContainer}>
+      <span className={styles.metricsTitle}>{metricsTitle}</span>
+      <div className={styles.actionBtn}>
+        <UserHasAccess privilege="Emr: View Legacy Interface">
+          <Button
+            kind="tertiary"
+            renderIcon={(props) => <ArrowRight size={16} {...props} />}
+            onClick={(selectedPatientUuid) => {
+              setShowOverlay(true);
+              setView(SearchTypes.QUEUE_SERVICE_FORM);
+              setViewState({ selectedPatientUuid });
+              setOverlayTitle(t('addNewQueueService', 'Add new queue service'));
+            }}
+            iconDescription={t('addNewQueueService', 'Add new queue service')}>
+            {t('addNewService', 'Add new service')}
+          </Button>
+          <Button
+            kind="tertiary"
+            renderIcon={(props) => <ArrowRight size={16} {...props} />}
+            onClick={(selectedPatientUuid) => {
+              setShowOverlay(true);
+              setView(SearchTypes.QUEUE_ROOM_FORM);
+              setViewState({ selectedPatientUuid });
+              setOverlayTitle(t('addNewQueueServiceRoom', 'Add new queue service room'));
+            }}
+            iconDescription={t('addNewQueueServiceRoom', 'Add new queue service room')}>
+            {t('addNewServiceRoom', 'Add new service room')}
+          </Button>
+        </UserHasAccess>
+        <Button
+          onClick={navigateToQueueScreen}
+          kind="tertiary"
+          renderIcon={(props) => <MessageQueue size={32} {...props} />}
+          iconDescription={queueScreenText}>
+          {queueScreenText}
+        </Button>
+      </div>
+      {showOverlay && (
+        <PatientSearch
+          view={view}
+          closePanel={() => setShowOverlay(false)}
+          viewState={viewState}
+          headerTitle={overlayHeader}
+        />
+      )}
+    </div>
+  );
+};
+
+export default MetricsHeader;

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

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