@digihmis/esm-outpatient-app 1.0.0

package/src/main-dashboard/outpatient-dashboard.component.tsx

@@ -0,0 +1,264 @@
+import React, { useState, useEffect } from 'react';
+import { PageHeader } from '../page-header/page-header.component';
+import { Button, Tile, InlineLoading } from '@carbon/react';
+import { ConnectionTwoWay, Login, Logout, Alarm } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import { CardHeader } from '@openmrs/esm-patient-common-lib';
+import { useSession, showModal, formatDate, showSnackbar, useConfig } from '@openmrs/esm-framework';
+import styles from './outpatient-dashboard.scss';
+
+import { type ProviderSession } from './type';
+import { clockOutProvider, useActiveSessions, useQueueMetrics } from './outpatient-dashboard.resource';
+import { ConfigObject } from '../config-schema';
+import { QueueRoomTable } from '../queue-room-table/queue-room-table.component';
+
+export const OutpatientQueueDashboard: React.FC = () => {
+  const { t } = useTranslation();
+  const { currentProvider } = useSession();
+  const { outpatientQueueUuid } = useConfig<ConfigObject>();
+
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [activeSession, setActiveSession] = useState<ProviderSession | null>(null);
+  const isClockedIn = activeSession !== null;
+
+  const {
+    activeSessions,
+    mutate: mutateSessions,
+    isLoading: isLoadingSessions,
+  } = useActiveSessions(currentProvider?.uuid || '');
+
+  const {
+    metrics,
+    mutate: mutateMetrics,
+    isLoading: isLoadingMetrics,
+  } = useQueueMetrics(outpatientQueueUuid, activeSession?.queueRoom?.uuid, currentProvider?.uuid, isClockedIn);
+
+  useEffect(() => {
+    if (activeSessions && activeSessions.length > 0) {
+      const outpatientSession = activeSessions.find(
+        (session) => session.queueRoom?.queue?.uuid === outpatientQueueUuid,
+      );
+      setActiveSession(outpatientSession || null);
+    } else {
+      setActiveSession(null);
+    }
+  }, [activeSessions, outpatientQueueUuid]);
+
+  const handleClockIn = () => {
+    const dispose = showModal('generic-clock-in-modal', {
+      moduleName: 'Outpatient',
+      url: window.location.pathname,
+      queueUuid: outpatientQueueUuid,
+      closeModal: () => dispose(),
+      onClockInSuccess: (sessionData: ProviderSession) => {
+        setActiveSession(sessionData);
+        mutateSessions();
+        mutateMetrics();
+      },
+    });
+  };
+
+  const handleClockOut = async () => {
+    if (!activeSession?.uuid) {
+      showSnackbar({
+        title: t('error', 'Error'),
+        subtitle: t('noActiveSession', 'No active session found'),
+        kind: 'error',
+      });
+      return;
+    }
+
+    setIsProcessing(true);
+
+    try {
+      await clockOutProvider(activeSession.uuid);
+
+      showSnackbar({
+        title: t('clockOutSuccess', 'Clock Out Successful'),
+        subtitle: t('clockOutSuccessMessage', 'You have been clocked out successfully'),
+        kind: 'success',
+        timeoutInMs: 3000,
+      });
+
+      setActiveSession(null);
+      mutateSessions();
+      mutateMetrics();
+    } catch (error) {
+      console.error('Clock out error:', error);
+
+      const errorMessage = error?.responseBody?.error || t('clockOutFailed', 'Failed to clock out');
+
+      showSnackbar({
+        title: t('clockOutError', 'Clock Out Failed'),
+        subtitle: errorMessage,
+        kind: 'error',
+        timeoutInMs: 5000,
+      });
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  const handleSwitchServicePoint = async () => {
+    if (!activeSession?.uuid) {
+      showSnackbar({
+        title: t('error', 'Error'),
+        subtitle: t('noActiveSession', 'No active session found'),
+        kind: 'error',
+      });
+      return;
+    }
+
+    setIsProcessing(true);
+
+    try {
+      await clockOutProvider(activeSession.uuid);
+
+      showSnackbar({
+        title: t('switchingStation', 'Switching Station'),
+        subtitle: t('clockedOutFromCurrent', 'Clocked out from current station'),
+        kind: 'info',
+        timeoutInMs: 2000,
+      });
+
+      await mutateSessions();
+      setActiveSession(null);
+
+      const dispose = showModal('generic-clock-in-modal', {
+        moduleName: 'Outpatient',
+        url: window.location.pathname,
+        queueUuid: outpatientQueueUuid,
+        closeModal: () => dispose(),
+        onClockInSuccess: (sessionData: ProviderSession) => {
+          setActiveSession(sessionData);
+          mutateSessions();
+          mutateMetrics();
+        },
+      });
+    } catch (error) {
+      const errorMessage = error?.responseBody?.error || t('switchStationFailed', 'Failed to switch station');
+
+      showSnackbar({
+        title: t('switchStationError', 'Switch Station Failed'),
+        subtitle: errorMessage,
+        kind: 'error',
+        timeoutInMs: 5000,
+      });
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  const isLoading = isLoadingSessions || isLoadingMetrics;
+
+  return (
+    <div>
+      <PageHeader />
+      <div className={styles.dashboardContainer}>
+        <Tile className={styles.tileContainer}>
+          <div className={styles.displayDetails}>
+            <div className={styles.countLabel}>{t('myQueueWaiting', 'My Queue - Waiting')}</div>
+            <div className={styles.displayData}>
+              {isLoading ? <InlineLoading description="" /> : metrics?.myQueueWaiting || 0}
+            </div>
+          </div>
+          <div className={styles.displayDetails}>
+            <div className={styles.countLabel}>{t('myQueueInservice', 'My Queue - In Service')}</div>
+            <div className={styles.displayData}>
+              {isLoading ? <InlineLoading description="" /> : metrics?.inProgress || 0}
+            </div>
+          </div>
+          <div className={styles.displayDetails}>
+            <div className={styles.countLabel}>{t('avgWaitTime', 'Avg. Wait Time')}</div>
+            <div className={styles.displayData}>
+              {isLoading ? (
+                <InlineLoading description="" />
+              ) : (
+                (() => {
+                  const totalMinutes = metrics?.averageWaitTime || 0;
+                  const hours = Math.floor(totalMinutes / 60);
+                  const minutes = totalMinutes % 60;
+                  return hours > 0 ? `${hours}h ${minutes}min` : `${minutes}min`;
+                })()
+              )}
+            </div>
+          </div>
+
+          <div className={styles.displayDetails}>
+            <div className={styles.countLabel}>{t('completedToday', 'Completed Today')}</div>
+            <div className={styles.displayData}>
+              {isLoading ? <InlineLoading description="" /> : metrics?.completedToday || 0}
+            </div>
+          </div>
+        </Tile>
+
+        {isClockedIn && activeSession && (
+          <Tile className={styles.clockInBanner}>
+            <div className={styles.clockInInfo}>
+              <Alarm size={20} className={styles.alarmIcon} />
+              <div className={styles.clockInText}>
+                <strong>{t('clockedInTo', 'Clocked in to')}: </strong>
+                {activeSession?.queueRoom?.display}
+                <span className={styles.clockInTime}>
+                  {' '}
+                  ({t('since', 'since')} {formatDate(new Date(activeSession.clockInTime), { mode: 'wide' })})
+                </span>
+              </div>
+            </div>
+          </Tile>
+        )}
+
+        <div className={styles.cardHeaderContainer}>
+          <CardHeader title={activeSession?.queueRoom?.display || t('outpatientQueue', 'Outpatient Queue')}>
+            <div className={styles.headerActions}>
+              <Button
+                kind={isClockedIn ? 'danger' : 'primary'}
+                size="sm"
+                renderIcon={(props) => (isClockedIn ? <Logout size={16} {...props} /> : <Login size={16} {...props} />)}
+                onClick={isClockedIn ? handleClockOut : handleClockIn}
+                disabled={isProcessing}>
+                {isProcessing ? (
+                  <InlineLoading
+                    description={isClockedIn ? t('clockingOut', 'Clocking out') : t('clockingIn', 'Clocking in')}
+                  />
+                ) : isClockedIn ? (
+                  t('clockOut', 'Clock Out')
+                ) : (
+                  t('clockIn', 'Clock In')
+                )}
+              </Button>
+
+              {isClockedIn && (
+                <Button
+                  kind="secondary"
+                  size="sm"
+                  renderIcon={(props) => <ConnectionTwoWay size={16} {...props} />}
+                  onClick={handleSwitchServicePoint}
+                  disabled={isProcessing}>
+                  {t('changeStation', 'Change Station')}
+                </Button>
+              )}
+            </div>
+          </CardHeader>
+        </div>
+
+        {isClockedIn && activeSession ? (
+          <div className={styles.queueContainer}>
+            <QueueRoomTable queueRoomUuid={activeSession.queueRoom.uuid} queueUuid={outpatientQueueUuid} />
+          </div>
+        ) : (
+          <div className={styles.emptyStateContainer}>
+            <Tile className={styles.tile}>
+              <div className={styles.tileContent}>
+                <p className={styles.content}>{t('pleaseClockIn', 'Please clock in to view the queue')}</p>
+                <p className={styles.emptyStateHelperText}>
+                  {t('clockInPrompt', 'Click the "Clock In" button above to start managing patients')}
+                </p>
+              </div>
+            </Tile>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/main-dashboard/outpatient-dashboard.resource.ts

@@ -0,0 +1,71 @@
+import { type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { type ProviderSession, type QueueMetricsResponse } from './type';
+
+export const clockOutProvider = async (sessionUuid?: string, providerUuid?: string) => {
+  const postUrl = `${restBaseUrl}/provider-clock/clock-out`;
+
+  return openmrsFetch(postUrl, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      ...(sessionUuid && { sessionUuid }),
+      ...(providerUuid && { providerUuid }),
+    }),
+  });
+};
+
+export const useActiveSessions = (providerUuid: string, shouldRefresh: boolean = false) => {
+  const apiUrl = providerUuid ? `${restBaseUrl}/provider-clock/active-sessions?provider=${providerUuid}` : null;
+
+  const { data, error, isLoading, mutate } = useSWR<FetchResponse<Array<ProviderSession>>>(apiUrl, openmrsFetch, {
+    refreshInterval: shouldRefresh ? 60000 : 0,
+    revalidateOnFocus: true,
+    dedupingInterval: 30000,
+  });
+
+  return {
+    activeSessions: data?.data ?? [],
+    error,
+    isLoading,
+    mutate,
+  };
+};
+
+export const useQueueMetrics = (
+  queueUuid?: string,
+  queueRoomUuid?: string,
+  providerUuid?: string,
+  isActive: boolean = false,
+) => {
+  const params = new URLSearchParams();
+  if (queueUuid) {
+    params.append('queue', queueUuid);
+  }
+  if (queueRoomUuid) {
+    params.append('queueRoom', queueRoomUuid);
+  }
+  if (providerUuid) {
+    params.append('provider', providerUuid);
+  }
+
+  const apiUrl = isActive
+    ? `${restBaseUrl}/provider-clock/metrics${params.toString() ? `?${params.toString()}` : ''}`
+    : null;
+
+  const { data, error, isLoading, mutate } = useSWR<FetchResponse<QueueMetricsResponse>>(apiUrl, openmrsFetch, {
+    refreshInterval: isActive ? 60000 : 0,
+    revalidateOnFocus: true,
+    revalidateOnReconnect: true,
+    dedupingInterval: 30000,
+  });
+
+  return {
+    metrics: data?.data,
+    error,
+    isLoading,
+    mutate,
+  };
+};

package/src/main-dashboard/outpatient-dashboard.scss

@@ -0,0 +1,166 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.tileContainer {
+  border: 1px solid colors.$cool-gray-30;
+  margin-bottom: layout.$spacing-04;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  gap: 0;
+  height: 80px;
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    padding: layout.$spacing-04;
+  }
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    padding: layout.$spacing-03;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto;
+    gap: layout.$spacing-04;
+  }
+}
+
+.tileHeader {
+  color: colors.$gray-70;
+  margin-bottom: layout.$spacing-03;
+  text-transform: none;
+  letter-spacing: 0;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    margin-bottom: layout.$spacing-02;
+  }
+}
+
+.displayDetails {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    padding: layout.$spacing-03 0;
+    border-right: none;
+    border-bottom: 1px solid colors.$gray-20;
+    padding-bottom: layout.$spacing-04;
+    margin-bottom: layout.$spacing-03;
+  }
+}
+
+.countLabel {
+  color: colors.$gray-70;
+  margin-bottom: layout.$spacing-02;
+  @include type.type-style('caption-01');
+  font-weight: bold;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    @include type.type-style('caption-01');
+    font-weight: bold;
+    margin-bottom: layout.$spacing-01;
+  }
+}
+
+.displayData {
+  color: colors.$gray-100;
+  font-weight: bold;
+  @include type.type-style('caption-01');
+  font-size: 25px;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    font-size: 2.625rem;
+    line-height: 2.75rem;
+  }
+}
+
+.headerActions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-right: 1rem;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    gap: 0.25rem;
+  }
+}
+
+.dashboardContainer {
+  padding: layout.$spacing-05;
+  padding-bottom: 0;
+  background-color: var(--cds-field);
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    padding: layout.$spacing-02;
+    padding-bottom: 0;
+  }
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    padding: layout.$spacing-03;
+    padding-bottom: 0;
+  }
+}
+
+.clockInInfo {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  gap: layout.$spacing-03;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    flex-direction: row;
+    align-items: center;
+    gap: layout.$spacing-02;
+  }
+}
+
+.clockInText {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    font-size: 0.875rem;
+  }
+}
+
+.clockInTime {
+  color: colors.$gray-70;
+  white-space: nowrap;
+}
+
+.alarmIcon {
+  flex-shrink: 0;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    width: 18px;
+    height: 18px;
+  }
+}
+
+.emptyStateContainer {
+  border: 1px solid colors.$gray-20;
+  padding: 3rem 0;
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+  background: colors.$gray-20;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-70;
+  margin-bottom: layout.$spacing-03;
+}
+.loader {
+  min-height: fit-content;
+}

package/src/main-dashboard/type/index.ts

@@ -0,0 +1,162 @@
+import { type OpenmrsResource } from '@openmrs/esm-framework';
+
+export interface Concept extends OpenmrsResource {
+  setMembers?: Array<Concept>;
+  answers?: Array<ConceptAnswer>;
+}
+
+export interface ConceptAnswer {
+  uuid: string;
+  display: string;
+}
+
+export interface ConceptAnswers {
+  uuid: string;
+  display: string;
+}
+
+export interface ConceptResponse {
+  uuid: string;
+  display: string;
+  answers: Array<ConceptAnswers>;
+}
+
+export interface QueueEntry {
+  uuid: string;
+  queue: {
+    uuid: string;
+    display: string;
+  };
+  queueRoom: {
+    uuid: string;
+    display: string;
+  };
+  status: {
+    uuid: string;
+    display: string;
+  };
+  priority: {
+    uuid: string;
+    display: string;
+  };
+  patient: {
+    uuid: string;
+    display: string;
+    person?: {
+      age: number;
+      gender: string;
+    };
+  };
+  startedAt: string;
+  endedAt?: string;
+  sortWeight?: number;
+  queueComingFrom?: {
+    uuid: string;
+    display: string;
+  };
+  queueRoomComingFrom?: {
+    uuid: string;
+    display: string;
+  };
+  visit?: {
+    uuid: string;
+  };
+}
+
+export interface Queue {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  location: {
+    uuid: string;
+    display: string;
+  };
+  service: {
+    uuid: string;
+    display: string;
+  };
+  allowedPriorities: Array<{
+    uuid: string;
+    display: string;
+  }>;
+  allowedStatuses: Array<{
+    uuid: string;
+    display: string;
+  }>;
+  queueRooms: Array<QueueRoom>;
+}
+
+export interface QueueRoom {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  queue: {
+    uuid: string;
+    display: string;
+  };
+}
+
+export interface Patient {
+  uuid: string;
+  display: string;
+  person: {
+    uuid: string;
+    display: string;
+    gender: string;
+    age: number;
+    birthdate: string;
+    dead: boolean;
+    deathDate?: string;
+    causeOfDeath?: {
+      uuid: string;
+      display: string;
+    };
+    identifiers: Array<{
+      uuid: string;
+      identifier: string;
+      identifierType: {
+        uuid: string;
+        display: string;
+      };
+      preferred: boolean;
+    }>;
+  };
+}
+
+export interface ProviderSession {
+  uuid: string;
+  provider: {
+    uuid: string;
+    display: string;
+  };
+  queueRoom: {
+    uuid: string;
+    display: string;
+    queue: {
+      uuid: string;
+      display: string;
+    };
+  };
+  clockInTime: string;
+  clockOutTime?: string;
+  status: 'ACTIVE' | 'CLOCKED_OUT';
+}
+
+export interface ProviderSessionResponse {
+  results: Array<ProviderSession>;
+}
+
+export interface QueueResponse {
+  results: Array<Queue>;
+}
+
+export interface QueueMetrics {
+  myQueueWaiting: number;
+  inProgress: number;
+  averageWaitTime: number;
+  completedToday: number;
+}
+
+export interface QueueMetricsResponse extends QueueMetrics {}

package/src/page-header/page-header.component.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Calendar } from '@carbon/react/icons';
+import { useSession, formatDate, ExtensionSlot, useConfig } from '@openmrs/esm-framework';
+import styles from './page-header.scss';
+import { ConfigObject } from '../config-schema';
+import { IconWrapper } from '../icon-wrapper/icon-wrapper.extension';
+
+export const PageHeader: React.FC = () => {
+  const { t } = useTranslation();
+  const userSession = useSession();
+  const { outpatientIcon } = useConfig<ConfigObject>();
+  const userLocation = userSession?.sessionLocation?.display;
+
+  return (
+    <div className={styles.header}>
+      <div className={styles['left-justified-items']}>
+        <IconWrapper src={outpatientIcon.src} alt={outpatientIcon.alt} />
+        <div className={styles['page-labels']}>
+          <p className={styles['page-name']}>{userLocation}</p>
+          <p className={styles['page-subtitle']}>{t('outpatient', 'Outpatient')}</p>
+        </div>
+      </div>
+      <div className={styles['right-justified-items']}>
+        <div className={styles.extensionSlot}>
+          <ExtensionSlot name={'provider-banner-slot'} />
+          <div className={styles['date-and-location']}>
+            <Calendar size={16} />
+            <span className={styles.value}>{formatDate(new Date(), { mode: 'wide', noToday: true })}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};