@digihmis/esm-triage-app 1.0.0 → 1.0.2

package/dist/routes.json

@@ -1 +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"}
+{"$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.2"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digihmis/esm-triage-app",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Triage microfrontend for the OpenMRS SPA",
   "browser": "dist/digihmis-esm-triage-app.js",
   "main": "src/index.ts",
@@ -18,7 +18,8 @@
     "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"
+    "typescript": "tsc",
+    "prepublishOnly": "rspack --mode=production"
   },
   "browserslist": [
     "extends browserslist-config-openmrs"
@@ -37,6 +38,7 @@
     "url": "https://github.com/its-kios09/DigiHMIS-apps/issues"
   },
   "dependencies": {
+    "@digihmis/esm-commons-lib": "1.0.0",
     "lodash-es": "^4.17.15",
     "react-to-print": "2.14.13"
   },

package/src/config-schema.ts

@@ -83,13 +83,14 @@ export const configSchema: ConfigSchema = {
   },
   OpenmrsIdentifierTypeUuid: {
     _type: Type.UUID,
-    _default: 'dfacd928-0370-4315-99d7-6ec1c9f7ae76',
+    _default: '8d793bee-c2cc-11de-8d13-0010c6dffd0f',
     _description: 'UUID for OpenMRS Identifier Type',
   },
   vitals: {
     encounterTypeUuid: {
       _type: Type.UUID,
-      _default: 'd1059fb9-a079-4feb-a749-eedd709ae542',
+      _default: 'c0136e8e-a430-4e47-a1cc-327efa99b62a',
+      _description: 'Encounter type recorded at triage (DigiHMIS Triage encounter type)',
     },
     vitalsOverdueThresholdHours: {
       _type: Type.Number,

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

@@ -1,17 +1,2 @@
-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} />;
-};
+// Moved to the shared library so every app uses one implementation.
+export { IconWrapper, type IconWrapperProps } from '@digihmis/esm-commons-lib';

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

@@ -1,100 +1,6 @@
-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;
+// Moved to the shared library so every app uses one implementation.
+export {
+  DashboardLink as default,
+  createDashboardLink,
+  type DashboardLinkConfig,
+} from '@digihmis/esm-commons-lib';

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

@@ -1,35 +1,12 @@
 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 { useConfig } from '@openmrs/esm-framework';
+import { PageHeader as CommonPageHeader } from '@digihmis/esm-commons-lib';
 import { ConfigObject } from '../config-schema';
-import { IconWrapper } from '../icon-wrapper/icon-wrapper.extension';
 
+// The shared header lives in @digihmis/esm-commons-lib; this passes the module's title + icon.
 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>
-  );
+  return <CommonPageHeader title={t('triage', 'Triage')} iconSrc={triageIcon.src} iconAlt={triageIcon.alt} />;
 };

package/src/routes.json

@@ -2,7 +2,7 @@
   "$schema": "https://json.openmrs.org/routes.schema.json",
   "backendDependencies": {
     "fhir2": ">=1.2",
-    "webservices.rest": "^2.24.0"
+    "webservices.rest": ">=2.24.0"
   },
   "extensions": [
     {
@@ -49,7 +49,8 @@
       "name": "patient-vitals-history",
       "slot": "triage-vitals-dashboard-slot",
       "component": "patientVitalsHistory"
-    },{
+    },
+    {
       "name": "vitals-header",
       "slot": "patient-vitals-header-slot",
       "component": "vitalsHeader",
@@ -67,4 +68,4 @@
       "width": "extra-wide"
     }
   ]
-}
+}

package/src/triage-queue-dashboard/triage-queue-dashboard.component.tsx

@@ -1,152 +1,31 @@
-import React, { useState, useEffect } from 'react';
+import React 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 { ConnectionTwoWay, Login, Logout } 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 { useConfig } from '@openmrs/esm-framework';
+import { ClockInBanner, useProviderClockIn } from '@digihmis/esm-commons-lib';
 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 {
+    activeSession,
+    isClockedIn,
+    isProcessing,
     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);
-    }
-  };
+    isLoadingSessions,
+    isLoadingMetrics,
+    handleClockIn,
+    handleClockOut,
+    handleSwitchServicePoint,
+  } = useProviderClockIn({ queueUuid: triageQueueUuid, moduleName: 'Triage' });
 
   const isLoading = isLoadingSessions || isLoadingMetrics;
 
@@ -192,19 +71,7 @@ export const TriageQueueDashboard: React.FC = () => {
         </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>
+          <ClockInBanner roomDisplay={activeSession?.queueRoom?.display} clockInTime={activeSession.clockInTime} />
         )}
 
         <div className={styles.cardHeaderContainer}>