@digihmis/esm-home-app 1.0.0

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/generic-clock-in-modal/clock-in.scss

@@ -0,0 +1,41 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.patientHeader {
+  padding: layout.$spacing-05;
+  border-bottom: 1px solid colors.$gray-20;
+  background-color: colors.$gray-10;
+
+  .patientName {
+    @include type.type-style('heading-compact-01');
+    font-weight: 600;
+    margin-right: layout.$spacing-03;
+  }
+
+  .patientId {
+    @include type.type-style('body-compact-01');
+    font-weight: 600;
+    margin-right: layout.$spacing-02;
+  }
+
+  .patientDetails {
+    @include type.type-style('body-compact-01');
+    color: colors.$gray-70;
+  }
+  .currentLocation {
+    @include type.type-style('body-compact-01');
+    color: red;
+    float: right;
+  }
+}
+:global(.cds--select-input) {
+  background-color: colors.$gray-20;
+}
+
+@media (min-width: 82rem) {
+  :global(.cds--modal-container) {
+    width: 38%;
+  }
+}

package/src/generic-clock-in-modal/generic-clock-in.modal.tsx

@@ -0,0 +1,295 @@
+import {
+  Button,
+  ModalFooter,
+  ModalHeader,
+  ModalBody,
+  InlineLoading,
+  Select,
+  SelectItem,
+  InlineNotification,
+  Tag,
+} from '@carbon/react';
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { showSnackbar, useSession } from '@openmrs/esm-framework';
+import { Logout } from '@carbon/react/icons';
+import styles from './clock-in.scss';
+import { useQueueRooms, clockInProvider, useActiveSessions, clockOutProvider } from './generic-clock-in.resource';
+
+interface GenericClockInProps {
+  moduleName: string;
+  url: string;
+  queueUuid?: string;
+  closeModal?: () => void;
+  onClockInSuccess?: (sessionData: any) => void;
+}
+
+export const GenericClockIn: React.FC<GenericClockInProps> = ({
+  moduleName,
+  url,
+  queueUuid,
+  closeModal,
+  onClockInSuccess,
+}) => {
+  const { t } = useTranslation();
+  const { currentProvider } = useSession();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [selectedQueueRoom, setSelectedQueueRoom] = useState('');
+  const [errorMessage, setErrorMessage] = useState('');
+  const { queueRooms, isLoading, error } = useQueueRooms(queueUuid);
+
+  // ✅ Check for active sessions
+  const { activeSessions, isLoading: isLoadingSessions, mutate } = useActiveSessions(currentProvider?.uuid || '');
+
+  // ✅ Filter for sessions in OTHER queues (not the current one)
+  const otherQueueSession = activeSessions?.find((session) => session.queueRoom?.queue?.uuid !== queueUuid);
+
+  const handleQueueRoomChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectedQueueRoom(event.target.value);
+    setErrorMessage('');
+  };
+
+  const handleClockOutAndClockIn = async () => {
+    if (!otherQueueSession?.uuid || !selectedQueueRoom) {
+      return;
+    }
+
+    setIsSubmitting(true);
+    setErrorMessage('');
+
+    try {
+      // Step 1: Clock out from current session
+      await clockOutProvider(otherQueueSession.uuid);
+
+      showSnackbar({
+        title: t('clockedOut', 'Clocked Out'),
+        subtitle: t('clockedOutFromPrevious', 'Clocked out from {{location}}', {
+          location: otherQueueSession.queueRoom?.display,
+        }),
+        kind: 'info',
+        timeoutInMs: 2000,
+      });
+
+      // Small delay to ensure backend state is updated
+      await new Promise((resolve) => setTimeout(resolve, 500));
+
+      // Step 2: Clock in to new session
+      const response = await clockInProvider(currentProvider.uuid, selectedQueueRoom);
+      const sessionData = response.data;
+
+      // Refresh sessions list
+      await mutate();
+
+      showSnackbar({
+        title: t('clockInSuccess', 'Clock In Successful'),
+        subtitle: t('switchedStations', 'Successfully switched stations'),
+        kind: 'success',
+        timeoutInMs: 3000,
+      });
+
+      if (onClockInSuccess) {
+        onClockInSuccess(sessionData);
+      }
+
+      closeModal?.();
+    } catch (error) {
+      console.error('Switch station error:', error);
+      const errorMsg =
+        error?.responseBody?.error?.message ||
+        error?.responseBody?.error ||
+        error?.message ||
+        t('switchStationFailed', 'Failed to switch stations');
+      setErrorMessage(errorMsg);
+
+      showSnackbar({
+        title: t('switchStationError', 'Switch Station Failed'),
+        subtitle: errorMsg,
+        kind: 'error',
+        timeoutInMs: 5000,
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleClockIn = async () => {
+    setErrorMessage('');
+
+    if (!selectedQueueRoom) {
+      setErrorMessage(t('pleaseSelectQueueRoom', 'Please select a queue room'));
+      return;
+    }
+
+    if (!currentProvider?.uuid) {
+      setErrorMessage(t('providerNotFound', 'Provider information not found'));
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      const response = await clockInProvider(currentProvider.uuid, selectedQueueRoom);
+      const sessionData = response.data;
+
+      // Refresh sessions list
+      await mutate();
+
+      showSnackbar({
+        title: t('clockInSuccess', 'Clock In Successful'),
+        subtitle: t('clockInSuccessMessage', 'You have been clocked in successfully'),
+        kind: 'success',
+        timeoutInMs: 3000,
+      });
+
+      if (onClockInSuccess) {
+        onClockInSuccess(sessionData);
+      }
+
+      closeModal?.();
+    } catch (error) {
+      console.error('Clock in error:', error);
+      const errorMsg =
+        error?.responseBody?.error?.message ||
+        error?.responseBody?.error ||
+        error?.message ||
+        t('clockInFailed', 'Failed to clock in');
+      setErrorMessage(errorMsg);
+
+      showSnackbar({
+        title: t('clockInError', 'Clock In Failed'),
+        subtitle: errorMsg,
+        kind: 'error',
+        timeoutInMs: 5000,
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (error) {
+    return (
+      <>
+        <ModalHeader closeModal={closeModal} title={t('clockInTo', 'Clock in to {{module}}', { module: moduleName })} />
+        <ModalBody>
+          <InlineNotification
+            kind="error"
+            title={t('error', 'Error')}
+            subtitle={t('errorLoadingRooms', 'Error loading queue rooms. Please try again.')}
+            lowContrast
+            hideCloseButton
+          />
+        </ModalBody>
+        <ModalFooter>
+          <Button kind="secondary" onClick={closeModal} type="button">
+            {t('close', 'Close')}
+          </Button>
+        </ModalFooter>
+      </>
+    );
+  }
+
+  const isLoaderActive = isLoading || isLoadingSessions;
+
+  return (
+    <>
+      <ModalHeader closeModal={closeModal}>
+        <div className={styles.patientHeader}>
+          <span className={styles.patientName}>{t('clockInTo', 'Clock in to {{module}}', { module: moduleName })}</span>
+          {otherQueueSession && (
+            <span className={styles.currentLocation}>
+              ·{' '}
+              {t('currentlyActiveIn', 'Currently active in {{location}}', {
+                location: otherQueueSession.queueRoom?.queue?.display || otherQueueSession.queueRoom?.display,
+              })}
+            </span>
+          )}
+        </div>
+      </ModalHeader>
+      <ModalBody>
+        {errorMessage && (
+          <InlineNotification
+            kind="error"
+            title={t('error', 'Error')}
+            subtitle={errorMessage}
+            lowContrast
+            hideCloseButton
+            style={{ marginBottom: '1rem' }}
+          />
+        )}
+
+        {isLoaderActive ? (
+          <InlineLoading description={t('loadingRooms', 'Loading rooms...')} />
+        ) : (
+          <div className={styles.instructions}>
+            {otherQueueSession && (
+              <div
+                style={{
+                  marginBottom: '1rem',
+                  padding: '0.75rem',
+                  backgroundColor: '#fff3cd',
+                  borderLeft: '4px solid #ffc107',
+                  borderRadius: '4px',
+                }}>
+                <p style={{ margin: 0, fontSize: '0.875rem' }}>
+                  <strong>{t('switchingStations', 'Switching Stations')}</strong>
+                </p>
+                <p style={{ margin: '0.25rem 0 0 0', fontSize: '0.875rem' }}>
+                  {t(
+                    'willAutoClockOut',
+                    'You will be automatically clocked out from {{current}} and clocked in to your selected room.',
+                    {
+                      current: otherQueueSession.queueRoom?.display,
+                    },
+                  )}
+                </p>
+              </div>
+            )}
+            <Select
+              id="queueRoom"
+              labelText={
+                otherQueueSession
+                  ? t('selectRoomToSwitch', 'Select a queue room to switch to:')
+                  : t('selectRoomToClockIn', 'Select a queue room to clock in:')
+              }
+              value={selectedQueueRoom}
+              onChange={handleQueueRoomChange}
+              disabled={isSubmitting}>
+              <SelectItem value="" text={t('chooseQueueRoom', 'Choose queue room')} />
+              {queueRooms?.map((room) => (
+                <SelectItem key={room.uuid} value={room.uuid} text={room.display} />
+              ))}
+            </Select>
+          </div>
+        )}
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal} type="button" disabled={isSubmitting}>
+          {t('cancel', 'Cancel')}
+        </Button>
+
+        {/* ✅ Smart button that changes based on context */}
+        {otherQueueSession ? (
+          <Button
+            onClick={handleClockOutAndClockIn}
+            type="button"
+            disabled={isSubmitting || !selectedQueueRoom || isLoaderActive}
+            renderIcon={Logout}>
+            {isSubmitting ? (
+              <InlineLoading description={t('switchingStation', 'Switching station...')} />
+            ) : (
+              t('switchStation', 'Switch Station')
+            )}
+          </Button>
+        ) : (
+          <Button onClick={handleClockIn} type="button" disabled={isSubmitting || !selectedQueueRoom || isLoaderActive}>
+            {isSubmitting ? (
+              <InlineLoading description={t('clockingIn', 'Clocking in...')} />
+            ) : (
+              t('clockIn', 'Clock In')
+            )}
+          </Button>
+        )}
+      </ModalFooter>
+    </>
+  );
+};

package/src/generic-clock-in-modal/generic-clock-in.resource.ts

@@ -0,0 +1,107 @@
+import { FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { ProviderSessionResponse, QueueResponse, QueueMetricsResponse } from './type';
+import { invalidateAllSessionData } from './util/session-cache';
+
+export const useQueueRooms = (queueUuid?: string) => {
+  const customRepresentation = 'custom:(uuid,display,queueRooms:(uuid,display))';
+  const apiUrl = `${restBaseUrl}/queue?v=${customRepresentation}`;
+  const { data, ...rest } = useSWR<FetchResponse<QueueResponse>>(apiUrl, openmrsFetch);
+
+  const queue = data?.data?.results.find((q) => q.uuid === queueUuid);
+
+  return {
+    queueRooms: queue?.queueRooms ?? [],
+    ...rest,
+  };
+};
+
+// Clock in API call
+export const clockInProvider = async (providerUuid: string, queueRoomUuid: string) => {
+  const postUrl = `${restBaseUrl}/provider-clock/clock-in`;
+
+  const response = await openmrsFetch(postUrl, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      providerUuid,
+      queueRoomUuid,
+    }),
+  });
+
+  await invalidateAllSessionData();
+
+  return response;
+};
+
+// Clock out API call
+export const clockOutProvider = async (sessionUuid?: string, providerUuid?: string) => {
+  const postUrl = `${restBaseUrl}/provider-clock/clock-out`;
+
+  const response = await openmrsFetch(postUrl, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      ...(sessionUuid && { sessionUuid }),
+      ...(providerUuid && { providerUuid }),
+    }),
+  });
+
+  // ✅ Invalidate after successful clock out
+  await invalidateAllSessionData();
+
+  return response;
+};
+
+// Get active sessions for provider
+export const useActiveSessions = (providerUuid: string, shouldRefresh: boolean = false) => {
+  const apiUrl = providerUuid ? `${restBaseUrl}/provider-clock/active-sessions?provider=${providerUuid}` : null;
+
+  const { data, ...rest } = useSWR<FetchResponse<ProviderSessionResponse>>(apiUrl, openmrsFetch, {
+    refreshInterval: shouldRefresh ? 60000 : 0,
+    revalidateOnFocus: true,
+    dedupingInterval: 30000,
+  });
+
+  return {
+    activeSessions: data?.data ?? [],
+    ...rest,
+  };
+};
+
+// 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 = `${restBaseUrl}/provider-clock/metrics${params.toString() ? `?${params.toString()}` : ''}`;
+
+  const { data, ...rest } = useSWR<FetchResponse<QueueMetricsResponse>>(isActive ? apiUrl : null, openmrsFetch, {
+    refreshInterval: isActive ? 60000 : 0,
+    revalidateOnFocus: true,
+    revalidateOnReconnect: true,
+    dedupingInterval: 30000,
+  });
+
+  return {
+    metrics: data?.data,
+    ...rest,
+  };
+};

package/src/generic-clock-in-modal/type/index.ts

@@ -0,0 +1,45 @@
+export interface Queue {
+  uuid: string;
+  display: string;
+  queueRooms: Array<{
+    uuid: string;
+    display: string;
+  }>;
+}
+
+export interface QueueResponse {
+  results: Array<Queue>;
+}
+
+export interface ProviderSession {
+  uuid: string;
+  provider: {
+    uuid: string;
+    display: string;
+  };
+  queueRoom: {
+    uuid: string;
+    display: string;
+    queue: {
+      uuid: string;
+      display: string;
+    };
+  };
+  clockInTime: string;
+  clockOutTime: string | null;
+  status: string;
+}
+
+export type ProviderSessionResponse = Array<ProviderSession>;
+
+export interface QueueMetricsResponse {
+  myQueueWaiting: number;
+  emergencyCases: number;
+  inProgress: number;
+  averageWaitTime: number;
+  totalWaiting: number;
+  completedToday: number;
+  activeStaff: number;
+  longestWait: number;
+  myCompletedToday: number;
+}

package/src/generic-clock-in-modal/util/session-cache.ts

@@ -0,0 +1,48 @@
+import { mutate } from 'swr';
+import { restBaseUrl } from '@openmrs/esm-framework';
+
+// ✅ Helper to build the cache key
+export const getActiveSessionsCacheKey = (providerUuid: string) => {
+  return `${restBaseUrl}/provider-clock/active-sessions?provider=${providerUuid}`;
+};
+
+export const getMetricsCacheKey = (queueUuid?: string, queueRoomUuid?: string, providerUuid?: string) => {
+  const params = new URLSearchParams();
+  if (queueUuid) {
+    params.append('queue', queueUuid);
+  }
+  if (queueRoomUuid) {
+    params.append('queueRoom', queueRoomUuid);
+  }
+  if (providerUuid) {
+    params.append('provider', providerUuid);
+  }
+  return `${restBaseUrl}/provider-clock/metrics${params.toString() ? `?${params.toString()}` : ''}`;
+};
+
+// ✅ Invalidate ALL active sessions regardless of provider
+export const invalidateAllActiveSessions = async () => {
+  await mutate(
+    (key) => {
+      return typeof key === 'string' && key.includes('/provider-clock/active-sessions');
+    },
+    undefined,
+    { revalidate: true },
+  );
+};
+
+// ✅ Invalidate ALL metrics
+export const invalidateAllMetrics = async () => {
+  await mutate(
+    (key) => {
+      return typeof key === 'string' && key.includes('/provider-clock/metrics');
+    },
+    undefined,
+    { revalidate: true },
+  );
+};
+
+// ✅ Invalidate everything
+export const invalidateAllSessionData = async () => {
+  await Promise.all([invalidateAllActiveSessions(), invalidateAllMetrics()]);
+};

package/src/generic-dashboard/generic-dashboard-view.component.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { ExtensionSlot } from '@openmrs/esm-framework';
+import styles from './generic-dashboard-view.scss';
+
+interface DashboardViewProps {
+  dashboardSlot: string;
+  title: string;
+  state?: Record<string, any>;
+}
+
+const DashboardView: React.FC<DashboardViewProps> = ({ dashboardSlot, title, state = {} }) => {
+  return (
+    <div className={styles.dashboardViewWrapper}>
+      <ExtensionSlot
+        className={styles.dashboardView}
+        name={dashboardSlot}
+        state={{ dashboardTitle: title, ...state }}
+      />
+    </div>
+  );
+};
+
+export default DashboardView;

package/src/generic-dashboard/generic-dashboard-view.scss

@@ -0,0 +1,5 @@
+@use '@carbon/colors';
+
+.dashboardView {
+  background-color: colors.$white-0;
+}

package/src/generic-dashboard/generic-dashboard.scss

@@ -0,0 +1,32 @@
+@use '@carbon/colors';
+
+.homePageWrapper {
+  display: flex;
+}
+
+.dashboardContainer {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  margin: 0;
+  height: calc(100vh - 3rem);
+  width: calc(100% - 16rem);
+  background-color: colors.$gray-10;
+
+  & a {
+    width: 100%;
+  }
+
+  &.hasLeftNav {
+    margin-left: 16rem;
+  }
+}
+
+.dashboardContainerTablet {
+  flex-grow: 1;
+}
+
+.logoSection {
+  display: flex;
+  justify-content: center;
+}

package/src/home-grid-dashboard/home-grid-dashboard.component.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import styles from './home-grid-dashboard.scss';
+import ModuleCard from '../module-card/module-card.component';
+import { useModuleLinks } from '../module-card/module-card-utils.component';
+import UserBanner from '../welcome-back-banner/welcome-back-banner.component';
+
+const GridDashboard: React.FC = () => {
+  const moduleLinks = useModuleLinks();
+  return (
+    <>
+      <div className={styles.dashboardContainer}>
+        <div className={styles.dashboardHeader}>
+          <UserBanner />
+        </div>
+
+        <div className={styles.gridContainer}>
+          {moduleLinks.map((link, index) => (
+            <ModuleCard
+              key={`${link.label}-${index}`}
+              imgSrc={link.imgSrc}
+              alt={link.imgAlt}
+              label={link.label}
+              url={link.url}
+              privilege={link.privilege}
+            />
+          ))}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default GridDashboard;

package/src/home-grid-dashboard/home-grid-dashboard.scss

@@ -0,0 +1,56 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.dashboardContainer {
+  padding: layout.$spacing-05;
+  background-color: colors.$gray-10;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    padding: layout.$spacing-03;
+  }
+}
+
+.dashboardHeader {
+  margin-bottom: layout.$spacing-06;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    margin-bottom: layout.$spacing-05;
+  }
+}
+
+.gridContainer {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: layout.$spacing-06;
+  padding: layout.$spacing-03;
+  margin: 0 auto;
+
+  :global(.omrs-breakpoint-gt-lg) & {
+    grid-template-columns: repeat(6, 1fr);
+    gap: layout.$spacing-06;
+    padding: layout.$spacing-05;
+  }
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    gap: layout.$spacing-05;
+    max-width: 900px;
+  }
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    grid-template-columns: repeat(2, 1fr);
+    gap: layout.$spacing-04;
+    padding: layout.$spacing-03;
+    max-width: 600px;
+  }
+
+  :global(.omrs-breakpoint-lt-phone) & {
+    grid-template-columns: 1fr;
+    gap: layout.$spacing-03;
+    padding: layout.$spacing-02;
+  }
+}
+
+.breadcrumbsContainer {
+  margin-top: layout.$spacing-07;
+}