@digihmis/esm-triage-app 1.0.0

package/dist/routes.json

@@ -0,0 +1 @@
+{"$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"}],"version":"1.0.0"}

package/jest.config.js

@@ -0,0 +1,26 @@
+/** @type {import('jest').Config} */
+module.exports = {
+  clearMocks: true,
+  transform: {
+    '^.+\\.[jt]sx?$': ['@swc/jest'],
+  },
+  transformIgnorePatterns: ['/node_modules/(?!@openmrs|.+\\.pnp\\.[^\\/]+$)'],
+  moduleNameMapper: {
+    '\\.(s?css)$': 'identity-obj-proxy',
+    '@openmrs/esm-framework': '@openmrs/esm-framework/mock',
+    'lodash-es': 'lodash',
+    '^dexie$': require.resolve('dexie'),
+  },
+  collectCoverageFrom: [
+    '**/src/**/*.tsx',
+    '!**/node_modules/**',
+    '!**/vendor/**',
+    '!**/src/**/*.test.*',
+    '!**/src/declarations.d.ts',
+  ],
+  setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
+  testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    url: 'http://localhost/',
+  },
+};

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@digihmis/esm-triage-app",
+  "version": "1.0.0",
+  "description": "Triage microfrontend for the OpenMRS SPA",
+  "browser": "dist/digihmis-esm-triage-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "license": "MPL-2.0",
+  "homepage": "https://github.com/its-kios09/DigiHMIS-apps#readme",
+  "scripts": {
+    "analyze": "rspack --mode=production --env analyze=true",
+    "build": "rspack --mode=production",
+    "coverage": "yarn test --coverage",
+    "debug": "npm run serve",
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js",
+    "lint": "eslint src --ext ts,tsx",
+    "serve": "rspack serve --mode=development",
+    "start": "openmrs develop",
+    "test": "cross-env TZ=UTC jest --config jest.config.js --verbose false --passWithNoTests",
+    "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js",
+    "typescript": "tsc"
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "keywords": [
+    "openmrs"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/its-kios09/DigiHMIS-apps.git#readme"
+  },
+  "bugs": {
+    "url": "https://github.com/its-kios09/DigiHMIS-apps/issues"
+  },
+  "dependencies": {
+    "lodash-es": "^4.17.15",
+    "react-to-print": "2.14.13"
+  },
+  "peerDependencies": {
+    "@carbon/react": "1.x",
+    "@openmrs/esm-framework": "8.x",
+    "react": "^18.1.0",
+    "react-i18next": "16.x",
+    "react-router-dom": "6.x",
+    "swr": "2.x"
+  }
+}

package/rspack.config.js

@@ -0,0 +1 @@
+module.exports = require('../../tools/rs-pack-code-spliting');

package/src/config-schema.ts

@@ -0,0 +1,142 @@
+import { ConfigSchema, Type, validators } from '@openmrs/esm-framework';
+
+export const configSchema: ConfigSchema = {
+  triageIcon: {
+    src: {
+      _type: Type.String,
+      _default: '/openmrs/spa/triage_2.svg',
+      _description:
+        'The path or URL to the logo image. If set to an empty string, the default OpenMRS SVG sprite will be used.',
+      _validators: [validators.isUrl],
+    },
+  },
+  triageQueueUuid: {
+    _type: Type.String,
+    _description: 'The UUID of the queue room to be used for triage.',
+    _default: 'd692a223-e140-11ee-bad2-0242ac120002',
+  },
+  concepts: {
+    waitingStatusUuid: {
+      _type: Type.UUID,
+      _default: '167407AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      _description: 'UUID for waiting status concept',
+    },
+    inServiceStatusUuid: {
+      _type: Type.UUID,
+      _default: '167408AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      _description: 'UUID for in-service status concept',
+    },
+    completedStatusUuid: {
+      _type: Type.UUID,
+      _default: '167409AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      _description: 'UUID for completed status concept',
+    },
+    systolicBloodPressureUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5085AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    diastolicBloodPressureUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5086AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    pulseUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5087AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    temperatureUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5088AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    oxygenSaturationUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5092AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    heightUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5090AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    weightUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5089AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    respiratoryRateUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5242AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    generalPatientNoteUuid: {
+      _type: Type.ConceptUuid,
+      _default: '159395AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    midUpperArmCircumferenceUuid: {
+      _type: Type.ConceptUuid,
+      _default: '1343AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    vitalSignsConceptSetUuid: {
+      _type: Type.ConceptUuid,
+      _default: '1114AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+  },
+  weightStatusUuid: {
+    _type: Type.UUID,
+    _default: '163515AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    _description: 'UUID for weight status concept',
+  },
+  OpenmrsIdentifierTypeUuid: {
+    _type: Type.UUID,
+    _default: 'dfacd928-0370-4315-99d7-6ec1c9f7ae76',
+    _description: 'UUID for OpenMRS Identifier Type',
+  },
+  vitals: {
+    encounterTypeUuid: {
+      _type: Type.UUID,
+      _default: 'd1059fb9-a079-4feb-a749-eedd709ae542',
+    },
+    vitalsOverdueThresholdHours: {
+      _type: Type.Number,
+      _default: 12,
+      _description: 'Hours at or above which vitals are considered overdue',
+    },
+    useMuacColors: {
+      _type: Type.Boolean,
+      _default: true,
+      _description: 'Whether to show/use MUAC color codes. If set to true, the input will show status colors.',
+    },
+  },
+  biometrics: {
+    bmiUnit: {
+      _type: Type.String,
+      _default: 'kg / m²',
+    },
+  },
+};
+
+export type ConfigObject = {
+  triageIcon: { src: string; alt: string };
+  triageQueueUuid: string;
+  weightStatusUuid: string;
+  OpenmrsIdentifierTypeUuid: string;
+  concepts: {
+    waitingStatusUuid: string;
+    inServiceStatusUuid: string;
+    completedStatusUuid: string;
+    systolicBloodPressureUuid: string;
+    diastolicBloodPressureUuid: string;
+    pulseUuid: string;
+    temperatureUuid: string;
+    oxygenSaturationUuid: string;
+    heightUuid: string;
+    weightUuid: string;
+    respiratoryRateUuid: string;
+    generalPatientNoteUuid: string;
+    midUpperArmCircumferenceUuid: string;
+    vitalSignsConceptSetUuid: string;
+  };
+  vitals: {
+    encounterTypeUuid: string;
+    vitalsOverdueThresholdHours: number;
+    useMuacColors: boolean;
+  };
+  biometrics: {
+    bmiUnit: string;
+  };
+};

package/src/dashboard.meta.ts

@@ -0,0 +1,16 @@
+import { IbmLpa, TemperatureFeelsLike } from '@carbon/react/icons';
+
+export const dashboardMeta = {
+  name: 'triage',
+  slot: 'triage-dashboard-slot',
+  title: 'Triage queue',
+  icon: TemperatureFeelsLike,
+};
+
+export const patientVitalsMeta = {
+  name: 'triage/patient/:patientUuid/vitals',
+  slot: 'triage-vitals-dashboard-slot',
+  title: 'Patient Vitals',
+  icon: IbmLpa,
+  showOnlyOnRoute: '/vitals',
+};

package/src/declarations.d.ts

@@ -0,0 +1,6 @@
+declare module '@carbon/react';
+declare module '*.css';
+declare module '*.scss';
+declare module '*.png';
+
+declare type SideNavProps = object;

package/src/icon-wrapper/icon-wrapper.extension.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+interface IconWrapperProps {
+  src: string;
+  alt?: string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export const IconWrapper: React.FC<IconWrapperProps> = ({
+  src,
+  alt = 'Icon',
+  className,
+  style = { width: '100px', height: '148px' },
+}) => {
+  return <img src={src} alt={alt} className={className} style={style} />;
+};

package/src/index.ts

@@ -0,0 +1,41 @@
+import { getAsyncLifecycle, defineConfigSchema, getSyncLifecycle } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+import { dashboardMeta, patientVitalsMeta } from './dashboard.meta';
+import { createDashboardLink } from './left-panel/left-panel.component';
+import { TriageQueueDashboard } from './triage-queue-dashboard/triage-queue-dashboard.component';
+import PatientVitalsHistory from './past-vitals/patient-vitals-history.component';
+import PatientBanner from './past-vitals/patient-banner/patient-banner.component';
+import VitalsHeader from './past-vitals/vitals-and-biometrics-header/vitals-header.extension';
+const moduleName = '@digihmis/esm-triage-app';
+const pageName = 'triage';
+
+const options = {
+  featureName: pageName,
+  moduleName,
+};
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+export const leftPanelLink = getSyncLifecycle(createDashboardLink(dashboardMeta), options);
+export const patientVitalsLink = getSyncLifecycle(createDashboardLink(patientVitalsMeta), options);
+
+export const triageQueueDashboard = getSyncLifecycle(TriageQueueDashboard, options);
+
+// t('patientVitals', 'Patient Vitals')
+export const patientVitalsHistory = getSyncLifecycle(PatientVitalsHistory, options);
+// t('recordVitals', 'Record Vitals')
+export const recordVitalsWorkspace = getAsyncLifecycle(
+  () => import('./record-vitals-workspace/record-vitals.workspace'),
+  {
+    featureName: 'record-vitals-workspace',
+    moduleName,
+  },
+);
+
+export const vitalsHeader = getSyncLifecycle(VitalsHeader, options);
+
+export const patientBanner = getSyncLifecycle(PatientBanner, options);
+
+export function startupApp() {
+  defineConfigSchema(moduleName, configSchema);
+}

package/src/left-panel/left-panel.component.tsx

@@ -0,0 +1,100 @@
+import React, { useMemo } from 'react';
+import { ConfigurableLink, MaybeIcon } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { BrowserRouter, useLocation, useParams } from 'react-router-dom';
+import { type CarbonIconType } from '@carbon/react/icons';
+import last from 'lodash-es/last';
+import styles from './left-panel.scss';
+
+export interface DashboardLinkConfig {
+  name: string;
+  title: string;
+  icon?: string | CarbonIconType;
+  showOnlyOnRoute?: string;
+}
+
+const DashboardLink = ({ dashboardLinkConfig }: { dashboardLinkConfig: DashboardLinkConfig }) => {
+  const { t } = useTranslation();
+  const { name, title, icon, showOnlyOnRoute } = dashboardLinkConfig;
+  const location = useLocation();
+  const params = useParams();
+  const spaBasePath = window.getOpenmrsSpaBase() + 'home';
+
+  // Extract patientUuid from the current URL path if params.patientUuid is not available
+  const patientUuid = useMemo(() => {
+    if (params.patientUuid) {
+      return params.patientUuid;
+    }
+    // Extract UUID from path like /triage/UUID/vitals or /triage/patient/UUID/vitals
+    const pathParts = location.pathname.split('/');
+    const triageIndex = pathParts.indexOf('triage');
+    if (triageIndex !== -1 && pathParts.length > triageIndex + 1) {
+      const nextPart = pathParts[triageIndex + 1];
+      // Check if it's a UUID pattern (basic check)
+      if (nextPart && nextPart.length > 20 && nextPart.includes('-')) {
+        return nextPart;
+      }
+      // Check if path is /triage/patient/UUID/vitals
+      if (nextPart === 'patient' && pathParts.length > triageIndex + 2) {
+        const uuidPart = pathParts[triageIndex + 2];
+        if (uuidPart && uuidPart.length > 20 && uuidPart.includes('-')) {
+          return uuidPart;
+        }
+      }
+    }
+    return null;
+  }, [params.patientUuid, location.pathname]);
+
+  const shouldShow = useMemo(() => {
+    if (!showOnlyOnRoute) {
+      return true;
+    }
+    return location.pathname.includes(showOnlyOnRoute);
+  }, [showOnlyOnRoute, location.pathname]);
+
+  const linkPath = useMemo(() => {
+    let path = name;
+    if (name.includes(':patientUuid') && patientUuid) {
+      path = name.replace(':patientUuid', patientUuid);
+    }
+    return path;
+  }, [name, patientUuid]);
+
+  const isActive = useMemo(() => {
+    if (name.includes(':patientUuid')) {
+      return location.pathname.includes('/vitals');
+    }
+    const urlSegment = decodeURIComponent(last(location.pathname.split('/')));
+    const nameSegment = name.split('/').at(-1);
+    return nameSegment === urlSegment;
+  }, [location.pathname, name]);
+
+  if (!shouldShow) {
+    return null;
+  }
+
+  const IconComp = typeof icon !== 'string' ? (icon as CarbonIconType) : null;
+
+  return (
+    <ConfigurableLink
+      to={`${spaBasePath}/${linkPath}`}
+      className={`cds--side-nav__link ${isActive && 'active-left-nav-link'}`}>
+      {typeof icon === 'string' ? (
+        <MaybeIcon icon={icon} className={styles.icon} size={16} />
+      ) : (
+        IconComp && <IconComp className={styles.icon} />
+      )}
+      {t(title)}
+    </ConfigurableLink>
+  );
+};
+
+export const createDashboardLink = (dashboardLinkConfig: DashboardLinkConfig) => () => {
+  return (
+    <BrowserRouter>
+      <DashboardLink dashboardLinkConfig={dashboardLinkConfig} />
+    </BrowserRouter>
+  );
+};
+
+export default DashboardLink;

package/src/left-panel/left-panel.scss

@@ -0,0 +1,13 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.menu {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon {
+  margin-right: layout.$spacing-05;
+  fill: colors.$gray-70;
+}

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 { triageIcon } = useConfig<ConfigObject>();
+  const userLocation = userSession?.sessionLocation?.display;
+
+  return (
+    <div className={styles.header}>
+      <div className={styles['left-justified-items']}>
+        <IconWrapper src={triageIcon.src} alt={triageIcon.alt} />
+        <div className={styles['page-labels']}>
+          <p className={styles['page-name']}>{userLocation}</p>
+          <p className={styles['page-subtitle']}>{t('triage', 'Triage')}</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>
+  );
+};

package/src/page-header/page-header.scss

@@ -0,0 +1,76 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.header {
+  @include type.type-style('body-compact-02');
+  height: layout.$spacing-12;
+  border: 1px solid colors.$gray-20;
+  border-left: 0px;
+  display: flex;
+  background: var(--cds-field);
+  justify-content: space-between;
+  margin-top: 1.5rem;
+}
+
+.left-justified-items {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.right-justified-items {
+  @include type.type-style('body-01');
+  color: colors.$gray-80;
+  padding-top: layout.$spacing-05;
+  padding-bottom: layout.$spacing-07;
+}
+
+.page-subtitle {
+  @include type.type-style('caption-01');
+  color: colors.$gray-70;
+  font-size: layout.$spacing-06;
+}
+.page-name {
+  @include type.type-style('caption-01');
+  color: colors.$gray-80;
+  font-size: layout.$spacing-05;
+}
+
+.page-labels {
+  p:first-of-type {
+    margin-bottom: layout.$spacing-02;
+  }
+}
+
+.date-and-location {
+  margin-top: layout.$spacing-03;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-right: layout.$spacing-05;
+  @include type.type-style('caption-01');
+  font-size: 0.83rem;
+}
+
+.value {
+  margin-left: layout.$spacing-02;
+}
+
+.middot {
+  margin: 0 layout.$spacing-03;
+}
+
+.view {
+  @include type.type-style('caption-01');
+}
+
+svg.iconOverrides {
+  width: 72 !important;
+  height: 72 !important;
+}
+
+.svgContainer svg {
+  width: 72px;
+  height: 72px;
+}

package/src/past-vitals/action-menu/vitals-anthropometrics.component.tsx

@@ -0,0 +1,44 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Layer, OverflowMenu, OverflowMenuItem } from '@carbon/react';
+import { launchWorkspace, showModal, useLayoutType } from '@openmrs/esm-framework';
+import styles from './vitals-anthropometrics.scss';
+
+interface VitalsAndBiometricsActionMenuProps {
+  patient: fhir.Patient;
+  encounterUuid: string;
+}
+
+export const VitalsAndBiometricsActionMenu = ({ encounterUuid, patient }: VitalsAndBiometricsActionMenuProps) => {
+  const { t } = useTranslation();
+  const patientUuid = patient.id;
+  const isTablet = useLayoutType() === 'tablet';
+
+  const handleLaunchVitalsAndBiometricsForm = useCallback(() => {
+    launchWorkspace('record-vitals-workspace', {
+      workspaceTitle: t('editVitalsAndBiometrics', 'Edit Vitals and Biometrics'),
+      editEncounterUuid: encounterUuid,
+      patientUuid,
+      formContext: 'editing',
+    });
+  }, [encounterUuid, patientUuid, t]);
+
+  return (
+    <Layer className={styles.layer}>
+      <OverflowMenu
+        aria-label={t('editOrDeleteVitalsAndBiometrics', 'Edit or delete Vitals and Biometrics')}
+        size={isTablet ? 'lg' : 'sm'}
+        flipped
+        iconDescription=""
+        id={encounterUuid}
+        align="end">
+        <OverflowMenuItem
+          className={styles.menuItem}
+          id="editVitalsAndBiometrics"
+          onClick={handleLaunchVitalsAndBiometricsForm}
+          itemText={t('edit', 'Edit')}
+        />
+      </OverflowMenu>
+    </Layer>
+  );
+};