@digihmis/esm-triage-app 1.0.0

package/src/record-vitals-workspace/type/index.ts

@@ -0,0 +1,170 @@
+import type { FetchResponse, FHIRResource } from '@openmrs/esm-framework';
+
+export interface ConceptAnswers {
+  display: string;
+  uuid: string;
+}
+
+export interface ConceptResponse {
+  uuid: string;
+  display: string;
+  datatype: {
+    uuid: string;
+    display: string;
+  };
+  answers: Array<ConceptAnswers>;
+  setMembers: Array<ConceptAnswers>;
+}
+export interface Identifier {
+  identifierType: { uuid: string; display: string };
+  identifier: string;
+}
+export interface Person {
+  uuid: string;
+  display: string;
+  identifiers?: Array<Identifier>;
+  person?: Person;
+  gender: string;
+  age: number;
+  birthdate: string;
+  birthdateEstimated: boolean;
+}
+export interface Patient {
+  uuid: string;
+  display: string;
+  identifiers: Array<Identifier>;
+  person: Person;
+}
+
+type ReferenceRangeValue = number | null | undefined;
+
+export type FHIRSearchBundleResponse = FetchResponse<{
+  entry: Array<FHIRResource>;
+  link: Array<{ relation: string; url: string }>;
+}>;
+
+export interface ObsReferenceRanges {
+  hiAbsolute: ReferenceRangeValue;
+  hiCritical: ReferenceRangeValue;
+  hiNormal: ReferenceRangeValue;
+  lowNormal: ReferenceRangeValue;
+  lowCritical: ReferenceRangeValue;
+  lowAbsolute: ReferenceRangeValue;
+}
+
+export type ObservationInterpretation = 'critically_low' | 'critically_high' | 'high' | 'low' | 'normal';
+
+export type MappedVitals = {
+  code: string;
+  interpretation: ObservationInterpretation;
+  recordedDate: string | Date;
+  value: number;
+  encounterId: string;
+};
+
+export type FHIRInterpretation = 'Critically Low' | 'Critically High' | 'High' | 'Low' | 'Normal';
+
+export interface FHIRObservationResource {
+  resourceType: string;
+  id: string;
+  category: Array<{
+    coding: Array<{
+      system: string;
+      code: string;
+      display: string;
+    }>;
+  }>;
+  code: {
+    coding: Array<{
+      code: string;
+      display: string;
+    }>;
+    text: string;
+  };
+  encounter?: {
+    reference: string;
+    type: string;
+  };
+  effectiveDateTime: string;
+  issued: string;
+  valueString?: string;
+  valueQuantity?: {
+    value: number;
+    unit: string;
+    system: string;
+    code: string;
+  };
+  valueCodeableConcept?: {
+    coding: [
+      {
+        code: string;
+        display: string;
+      },
+    ];
+    text: string;
+  };
+  referenceRange: Array<{
+    low?: {
+      value: number;
+    };
+    high?: {
+      value: number;
+    };
+    type: {
+      coding: Array<{
+        system: string;
+        code: string;
+      }>;
+    };
+  }>;
+  hasMember?: Array<{
+    reference: string;
+  }>;
+  interpretation?: Array<{
+    coding: Array<{
+      code: string;
+      display: FHIRInterpretation;
+      system: string;
+    }>;
+    text: string;
+  }>;
+}
+
+export interface PatientVitalsAndBiometrics {
+  id: string;
+  date: string;
+  systolic?: number;
+  systolicRenderInterpretation?: ObservationInterpretation;
+  diastolic?: number;
+  diastolicRenderInterpretation?: ObservationInterpretation;
+  bloodPressureRenderInterpretation?: ObservationInterpretation;
+  pulse?: number;
+  pulseRenderInterpretation?: ObservationInterpretation;
+  temperature?: number;
+  temperatureRenderInterpretation?: ObservationInterpretation;
+  spo2?: number;
+  spo2RenderInterpretation?: ObservationInterpretation;
+  height?: number;
+  weight?: number;
+  bmi?: number | null;
+  respiratoryRate?: number;
+  respiratoryRateRenderInterpretation?: ObservationInterpretation;
+  muac?: number;
+}
+
+export interface VitalsResponse {
+  entry: Array<{
+    resource: FHIRObservationResource;
+  }>;
+  id: string;
+  meta: {
+    lastUpdated: string;
+  };
+  link: Array<{
+    relation: string;
+    url: string;
+  }>;
+  resourceType: string;
+  total: number;
+  type: string;
+}

package/src/record-vitals-workspace/utils/index.ts

@@ -0,0 +1,100 @@
+import isNumber from 'lodash/isNumber';
+import { type ConceptMetadata } from '../common';
+
+export function calculateBodyMassIndex(
+  weight: number,
+  height: number,
+  weightUnit: 'lb' | 'lbs' | 'g',
+  heightUnit: 'm' | 'cm' | 'in',
+): number {
+  if (!weight || !height) {
+    return;
+  }
+
+  if (weight > 0 && height > 0) {
+    if (weightUnit === 'lb' || weightUnit === 'lbs') {
+      weight = weight * 0.45359237;
+    }
+    if (weightUnit === 'g') {
+      weight = weight / 1000;
+    }
+    if (heightUnit === 'cm') {
+      height = height / 100;
+    }
+    if (heightUnit === 'in') {
+      height = height * 0.0254;
+    }
+    return Number((weight / height ** 2).toFixed(1));
+  }
+}
+
+export function isValueWithinReferenceRange(
+  conceptMetadata: Array<ConceptMetadata>,
+  conceptUuid: string,
+  value: string | number,
+) {
+  const concept = conceptMetadata?.find((c) => c.uuid === conceptUuid);
+
+  if (value === undefined || value === '' || concept === undefined) {
+    return true;
+  }
+
+  return isNumber(concept?.lowAbsolute) && isNumber(concept?.hiAbsolute)
+    ? Number(value) >= Number(concept.lowAbsolute) && Number(value) <= Number(concept.hiAbsolute)
+    : true;
+}
+
+// Convert age into an integer (whole number)
+export function extractNumbers(str: string) {
+  const regex = /\d+/g;
+  const match = str.match(regex);
+  if (!match) {
+    return null;
+  }
+  return parseInt(match[0], 10);
+}
+
+export function getMuacColorCode(age: number, muac: number, setColorCode: (color) => void) {
+  switch (true) {
+    // children 5 years and below with a muac equal to 14
+    case age <= 5 && muac <= 11.5 && muac > 0:
+      setColorCode('red');
+      break;
+    case age < 5 && muac > 11.5 && muac < 12.5:
+      setColorCode('yellow');
+      break;
+    case age < 5 && muac > 12.5:
+      setColorCode('green');
+      break;
+    // above 5 but less than 10
+    case age > 5 && age < 10 && muac <= 13.5 && muac > 0:
+      setColorCode('red');
+      break;
+    case age > 5 && age < 10 && muac > 13.5 && muac < 14.5:
+      setColorCode('yellow');
+      break;
+    case age > 5 && age < 10 && muac > 14.5:
+      setColorCode('green');
+      break;
+    //above 10 but less than 18
+    case age > 10 && age < 18 && muac <= 16.5 && muac > 0:
+      setColorCode('red');
+      break;
+    case age > 10 && age < 18 && muac > 16.5 && muac < 19.0:
+      setColorCode('yellow');
+      break;
+    case age > 10 && age < 18 && muac > 19.0:
+      setColorCode('green');
+      break;
+    // above 18
+    case age > 18 && muac <= 19.5 && muac > 0:
+      setColorCode('red');
+      break;
+    case age > 18 && muac > 19.0 && muac < 22.0:
+      setColorCode('yellow');
+      break;
+    case age > 18 && muac > 22.0:
+      setColorCode('green');
+      break;
+  }
+}

package/src/routes.json

@@ -0,0 +1,70 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "fhir2": ">=1.2",
+    "webservices.rest": "^2.24.0"
+  },
+  "extensions": [
+    {
+      "name": "triage-dashboard-header",
+      "slot": "triage-sidebar-slot",
+      "component": "triageDashboardHeader",
+      "order": 0,
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "triage-db-link",
+      "slot": "triage-dashboard-slot",
+      "component": "leftPanelLink",
+      "meta": {
+        "name": "triage",
+        "slot": "triage-homepage-dashboard-slot",
+        "title": "Triage Queue"
+      },
+      "order": 1,
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "triage-queue-dashboard",
+      "slot": "triage-homepage-dashboard-slot",
+      "component": "triageQueueDashboard"
+    },
+    {
+      "name": "patient-vitals-link",
+      "slot": "triage-dashboard-slot",
+      "component": "patientVitalsLink",
+      "meta": {
+        "name": "triage/:patientUuid/vitals",
+        "slot": "triage-vitals-dashboard-slot",
+        "title": "Patient Vitals",
+        "showOnlyOnRoute": "/vitals"
+      },
+      "order": 2,
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "patient-vitals-history",
+      "slot": "triage-vitals-dashboard-slot",
+      "component": "patientVitalsHistory"
+    },{
+      "name": "vitals-header",
+      "slot": "patient-vitals-header-slot",
+      "component": "vitalsHeader",
+      "online": true,
+      "offline": true
+    }
+  ],
+  "workspaces": [
+    {
+      "name": "record-vitals-workspace",
+      "component": "recordVitalsWorkspace",
+      "title": "Record Vitals",
+      "type": "other-form",
+      "canMaximize": true,
+      "width": "extra-wide"
+    }
+  ]
+}

package/src/setup-tests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/src/triage-queue-dashboard/triage-dashboard.resource.ts

@@ -0,0 +1,75 @@
+import { type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { type ProviderSession, type QueueMetricsResponse } from './type';
+
+// Clock out API call
+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 }),
+    }),
+  });
+};
+
+// Get active sessions for provider
+export const useActiveSessions = (providerUuid: string, shouldRefresh: boolean = false) => {
+  // ✅ Remove the custom representation parameter since backend now handles it by default
+  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,
+  };
+};
+
+// Get queue metrics
+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/triage-queue-dashboard/triage-queue-dashboard.component.tsx

@@ -0,0 +1,261 @@
+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 './triage-queue-dashboard.scss';
+
+import { type ProviderSession } from './type';
+import { clockOutProvider, useActiveSessions, useQueueMetrics } from './triage-dashboard.resource';
+import { ConfigObject } from '../config-schema';
+import { QueueRoomTable } from '../queue-room-table/queue-room-table.component';
+
+export const TriageQueueDashboard: React.FC = () => {
+  const { t } = useTranslation();
+  const { currentProvider } = useSession();
+  const { triageQueueUuid } = 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(triageQueueUuid, activeSession?.queueRoom?.uuid, currentProvider?.uuid, isClockedIn);
+
+  useEffect(() => {
+    if (activeSessions && activeSessions.length > 0) {
+      const triageSession = activeSessions.find((session) => session.queueRoom?.queue?.uuid === triageQueueUuid);
+      setActiveSession(triageSession || null);
+    } else {
+      setActiveSession(null);
+    }
+  }, [activeSessions, triageQueueUuid]);
+
+  const handleClockIn = () => {
+    const dispose = showModal('generic-clock-in-modal', {
+      moduleName: 'Triage',
+      url: window.location.pathname,
+      queueUuid: triageQueueUuid,
+      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: 'Triage',
+        url: window.location.pathname,
+        queueUuid: triageQueueUuid,
+        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('triageQueue', 'Triage 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 ? (
+          <QueueRoomTable queueRoomUuid={activeSession.queueRoom.uuid} queueUuid={triageQueueUuid} />
+        ) : (
+          <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>
+  );
+};