@kenyaemr/esm-express-workflow-app 5.4.3 → 5.4.4-pre.1

package/src/components/appointments/index.ts

@@ -1,5 +1,4 @@
-import { getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
-import { createDashboardLink } from '@openmrs/esm-patient-common-lib';
+import { getAsyncLifecycle } from '@openmrs/esm-framework';
 
 const options = {
   featureName: 'express-workflow',
@@ -8,11 +7,14 @@ const options = {
 
 export const appointmentsDashboard = getAsyncLifecycle(() => import('./dashboard.component'), options);
 // t('appointments', 'Appointments')
-export const appointmentsDashboardLink = getSyncLifecycle(
-  createDashboardLink({
-    path: `appointments`,
-    title: 'appointments',
-    icon: 'omrs-icon-calendar',
-  }),
+export const appointmentsDashboardLink = getAsyncLifecycle(
+  () =>
+    import('@openmrs/esm-patient-common-lib').then((m) => ({
+      default: m.createDashboardLink({
+        path: 'appointments',
+        title: 'appointments',
+        icon: 'omrs-icon-calendar',
+      }),
+    })),
   options,
 );

package/src/components/consultation/clinical-encounter/clinical-encounter.component.tsx

@@ -1,28 +1,12 @@
-import React, { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Layer } from '@carbon/react';
-import { IbmWatsonDiscovery, Account, Stethoscope } from '@carbon/react/icons';
-import ExtensionTabs, { ExtensionTabItem } from '../../../shared/tabs/extension-tabs.component';
+import React from 'react';
+import ExtensionTabs from '../../../shared/tabs/extension-tabs.component';
 
 type ClinicalEncounterProps = {
   patientUuid: string;
-  patient: fhir.Patient;
 };
 
-const ClinicalEncounter: React.FC<ClinicalEncounterProps> = ({ patientUuid, patient }) => {
-  const { t } = useTranslation();
-  const state = useMemo(() => ({ patientUuid, patient }), [patientUuid, patient]);
-  const items: Array<ExtensionTabItem> = [
-    { label: t('clinicalEncounter', 'Clinical Encounter'), icon: Stethoscope, slotName: 'ewf-clinical-encounter-slot' },
-    { label: t('visits', 'Visits'), icon: Account, slotName: 'ewf-visits-slot' },
-    { label: t('specialClinics', 'Special Clinics'), icon: IbmWatsonDiscovery, slotName: 'ewf-special-clinics-slot' },
-  ];
-
-  return (
-    <Layer>
-      <ExtensionTabs items={items} state={state} />
-    </Layer>
-  );
+const ClinicalEncounter: React.FC<ClinicalEncounterProps> = ({ patientUuid }) => {
+  return <ExtensionTabs extensionSlotName="clinical-encounter-tabs-slot" patientUuid={patientUuid} />;
 };
 
 export default ClinicalEncounter;

package/src/components/consultation/clinical-encounter/encounter-details.component.tsx

@@ -9,7 +9,6 @@ import {
   Dashboard,
   Stethoscope,
   Add,
-  Edit,
   DocumentMultiple_02,
 } from '@carbon/react/icons';
 
@@ -88,6 +87,7 @@ const EncounterDetails: React.FC<EncounterDetailsProps> = ({ patientUuid, patien
         <TabPanels>
           <TabPanel>
             <EncounterCard
+              patientUuid={patientUuid}
               encounterUuid={lastEncounter?.uuid}
               title={t('visitDetails', 'Visit Details')}
               mutateForm={mutate}
@@ -108,6 +108,7 @@ const EncounterDetails: React.FC<EncounterDetailsProps> = ({ patientUuid, patien
           </TabPanel>
           <TabPanel>
             <EncounterCard
+              patientUuid={patientUuid}
               encounterUuid={lastEncounter?.uuid}
               mutateForm={mutate}
               title={t('patientHistory', 'Patient History')}
@@ -116,6 +117,7 @@ const EncounterDetails: React.FC<EncounterDetailsProps> = ({ patientUuid, patien
           </TabPanel>
           <TabPanel>
             <EncounterCard
+              patientUuid={patientUuid}
               encounterUuid={lastEncounter?.uuid}
               mutateForm={mutate}
               title={t('patientExamination', 'Patient Examination')}
@@ -124,6 +126,7 @@ const EncounterDetails: React.FC<EncounterDetailsProps> = ({ patientUuid, patien
           </TabPanel>
           <TabPanel>
             <EncounterCard
+              patientUuid={patientUuid}
               encounterUuid={lastEncounter?.uuid}
               mutateForm={mutate}
               title={t('patientManagement', 'Patient Management')}
@@ -146,24 +149,21 @@ type EncounterCardProps = {
   cardItems: Array<{ title: string; value: string }>;
   mutateForm: () => void;
   encounterUuid?: string;
+  patientUuid: string;
 };
 
-const EncounterCard = ({ title, cardItems, mutateForm, encounterUuid }: EncounterCardProps) => {
+const EncounterCard = ({ title, cardItems, mutateForm, encounterUuid, patientUuid }: EncounterCardProps) => {
   const { t } = useTranslation();
   const {
     clinicalEncounter: { formUuid },
   } = useConfig<ExpressWorkflowConfig>();
-  const launchWorkspaceRequiringVisit = useLaunchWorkspaceRequiringVisit('patient-form-entry-workspace');
+  const launchWorkspaceRequiringVisit = useLaunchWorkspaceRequiringVisit(patientUuid, 'patient-form-entry-workspace');
 
   const handleOpenOrEditClinicalEncounterForm = (encounterUuid?: string) => {
     launchWorkspaceRequiringVisit({
-      workspaceTitle: title,
+      form: { uuid: formUuid },
       mutateForm: mutateForm,
-      formInfo: {
-        encounterUuid: encounterUuid ?? '',
-        formUuid: formUuid,
-        additionalProps: {},
-      },
+      encounterUuid: encounterUuid ?? '',
     });
   };
   return (

package/src/components/consultation/clinical-encounter/encounter-details.test.tsx

@@ -1,27 +1,28 @@
 import React from 'react';
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { vi, type MockedFunction } from 'vitest';
 import { formatDatetime, parseDate } from '@openmrs/esm-framework';
 import { useLaunchWorkspaceRequiringVisit } from '@openmrs/esm-patient-common-lib';
 import EncounterDetails from './encounter-details.component';
 import { usePatientEncounter, useClinicalEncounterForm } from '../../../hooks/usePatientEncounter';
 
 // Create a mock function for the workspace launcher
-const mockLaunchWorkspaceRequiringVisit = jest.fn();
+const mockLaunchWorkspaceRequiringVisit = vi.fn();
 
 // Mock dependencies
-jest.mock('@openmrs/esm-framework', () => ({
-  ...jest.requireActual('@openmrs/esm-framework'),
-  formatDatetime: jest.fn((date, options) => '15-Jan-2024'),
-  parseDate: jest.fn((date) => new Date(date)),
-  openmrsFetch: jest.fn(),
-  useConfig: jest.fn(() => ({
+vi.mock('@openmrs/esm-framework', () => ({
+  ...vi.importActual<typeof import('@openmrs/esm-framework')>('@openmrs/esm-framework'),
+  formatDatetime: vi.fn((date, options) => '15-Jan-2024'),
+  parseDate: vi.fn((date) => new Date(date)),
+  openmrsFetch: vi.fn(),
+  useConfig: vi.fn(() => ({
     clinicalEncounter: {
       encounterTypeUuid: '465a92f2-baf8-42e9-9612-53064be868e8',
       formUuid: 'e958f902-64df-4819-afd4-7fb061f59308',
     },
   })),
-  ErrorState: jest.fn(({ error, headerTitle }) => (
+  ErrorState: vi.fn(({ error, headerTitle }) => (
     <div data-testid="error-state">
       <h2>{headerTitle}</h2>
       <p>{error.message}</p>
@@ -29,26 +30,26 @@ jest.mock('@openmrs/esm-framework', () => ({
   )),
 }));
 
-jest.mock('@openmrs/esm-patient-common-lib', () => ({
+vi.mock('@openmrs/esm-patient-common-lib', () => ({
   CardHeader: ({ title, children }: { title: string; children: React.ReactNode }) => (
     <div data-testid="card-header">
       <h2>{title}</h2>
       {children}
     </div>
   ),
-  useLaunchWorkspaceRequiringVisit: jest.fn(),
+  useLaunchWorkspaceRequiringVisit: vi.fn(),
 }));
 
-jest.mock('@carbon/react', () => ({
-  ...jest.requireActual('@carbon/react'),
-  TabsSkeleton: jest.fn(() => <div data-testid="tabs-skeleton">Loading tabs...</div>),
+vi.mock('@carbon/react', () => ({
+  ...vi.importActual<typeof import('@carbon/react')>('@carbon/react'),
+  TabsSkeleton: vi.fn(() => <div data-testid="tabs-skeleton">Loading tabs...</div>),
 }));
 
-jest.mock('../../../hooks/usePatientEncounter');
+vi.mock('../../../hooks/usePatientEncounter');
 
-const mockUsePatientEncounter = usePatientEncounter as jest.MockedFunction<typeof usePatientEncounter>;
-const mockUseClinicalEncounterForm = useClinicalEncounterForm as jest.MockedFunction<typeof useClinicalEncounterForm>;
-const mockUseLaunchWorkspaceRequiringVisit = useLaunchWorkspaceRequiringVisit as jest.MockedFunction<
+const mockUsePatientEncounter = usePatientEncounter as MockedFunction<typeof usePatientEncounter>;
+const mockUseClinicalEncounterForm = useClinicalEncounterForm as MockedFunction<typeof useClinicalEncounterForm>;
+const mockUseLaunchWorkspaceRequiringVisit = useLaunchWorkspaceRequiringVisit as MockedFunction<
   typeof useLaunchWorkspaceRequiringVisit
 >;
 
@@ -150,7 +151,7 @@ describe('EncounterDetails', () => {
   };
 
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
     mockLaunchWorkspaceRequiringVisit.mockClear();
     mockUseLaunchWorkspaceRequiringVisit.mockReturnValue(mockLaunchWorkspaceRequiringVisit);
     mockUsePatientEncounter.mockReturnValue({

package/src/components/consultation/consultation-context.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Queue } from '../../types';
+import {
+  QueueWorkflowProvider,
+  useQueueWorkflowContext,
+  useQueueWorkflowContextOptional,
+} from '../../shared/queue/queue-workflow-context';
+
+type ConsultationProviderProps = {
+  consultationQueues: Queue[];
+  children: React.ReactNode;
+};
+
+export const ConsultationProvider: React.FC<ConsultationProviderProps> = ({ consultationQueues, children }) => (
+  <QueueWorkflowProvider queues={consultationQueues}>{children}</QueueWorkflowProvider>
+);
+
+export const useConsultationContext = () => useQueueWorkflowContext();
+export const useConsultationContextOptional = () => useQueueWorkflowContextOptional();

package/src/components/consultation/consultation-summary-cards.component.tsx

@@ -0,0 +1,124 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useConfig } from '@openmrs/esm-framework';
+
+import { type ExpressWorkflowConfig } from '../../config-schema';
+import QueueSummaryCards from '../../shared/queue/queue-summary-cards.component';
+import { useConsultationContext } from './consultation-context';
+import { useConsultationQueueMetrics, useInvestigationStats, useTotalVisits } from './consultation.resource';
+import { buildConsultationCards } from './consultation.utils';
+
+type LoadingState = { isLoading: boolean; isValidating: boolean };
+
+type ConsultationSummaryCardsProps = {
+  onLoadingStateChange?: (state: LoadingState) => void;
+};
+
+const ConsultationSummaryCards: React.FC<ConsultationSummaryCardsProps> = ({ onLoadingStateChange }) => {
+  const { activeQueue, setFilters, pageSize } = useConsultationContext();
+  const { t } = useTranslation();
+  const {
+    priorities: { emergencyPriorityConceptUuid, urgentPriorityConceptUuid, notUrgentPriorityConceptUuid },
+  } = useConfig<ExpressWorkflowConfig>();
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const {
+    waitingEntries,
+    isLoading: isLoadingQueueMetrics,
+    isValidating: isValidatingQueueMetrics,
+    emergencyEntries,
+    urgentEntries,
+    notUrgentEntries,
+  } = useConsultationQueueMetrics(activeQueue, pageSize);
+  const {
+    data: totalVisits,
+    isLoading: isLoadingTotalVisits,
+    isValidating: isValidatingTotalVisits,
+  } = useTotalVisits();
+  const {
+    awaitingCount,
+    completedCount,
+    lab,
+    radiology,
+    procedures,
+    isLoading: isLoadingInvestigations,
+    refresh: refreshInvestigations,
+    investigationCategorizedEntries,
+    isValidating: isValidatingInvestigations,
+  } = useInvestigationStats(activeQueue);
+
+  const isLoading =
+    (isLoadingQueueMetrics || isLoadingTotalVisits || isLoadingInvestigations) && !isValidatingQueueMetrics;
+  const isValidating = isValidatingQueueMetrics || isValidatingInvestigations || isValidatingTotalVisits;
+
+  useEffect(() => {
+    onLoadingStateChange?.({ isLoading, isValidating });
+  }, [isLoading, isValidating, onLoadingStateChange]);
+
+  const handleRefresh = useCallback(async () => {
+    setIsRefreshing(true);
+    try {
+      await refreshInvestigations();
+    } catch (error) {
+      console.error('Error refreshing investigations:', error);
+    } finally {
+      setIsRefreshing(false);
+    }
+  }, [refreshInvestigations]);
+
+  const cards = useMemo(
+    () =>
+      buildConsultationCards({
+        t,
+        waitingCount: waitingEntries.length,
+        emergencyCount: emergencyEntries.length,
+        urgentCount: urgentEntries.length,
+        notUrgentCount: notUrgentEntries.length,
+        awaitingCount,
+        completedCount,
+        labAwaiting: lab.awaiting,
+        labCompleted: lab.completed,
+        radiologyAwaiting: radiology.awaiting,
+        radiologyCompleted: radiology.completed,
+        proceduresAwaiting: procedures.awaiting,
+        proceduresCompleted: procedures.completed,
+        isRefreshing,
+        isLoadingInvestigations,
+        onRefreshInvestigations: handleRefresh,
+        totalVisitsCount: totalVisits?.length,
+        setFilters,
+        emergencyPriorityConceptUuid,
+        urgentPriorityConceptUuid,
+        notUrgentPriorityConceptUuid,
+        investigationCategorizedEntries,
+      }),
+    [
+      t,
+      waitingEntries.length,
+      emergencyEntries.length,
+      urgentEntries.length,
+      notUrgentEntries.length,
+      awaitingCount,
+      completedCount,
+      lab.awaiting,
+      lab.completed,
+      radiology.awaiting,
+      radiology.completed,
+      procedures.awaiting,
+      procedures.completed,
+      isRefreshing,
+      isLoadingInvestigations,
+      handleRefresh,
+      totalVisits?.length,
+      setFilters,
+      emergencyPriorityConceptUuid,
+      urgentPriorityConceptUuid,
+      notUrgentPriorityConceptUuid,
+      investigationCategorizedEntries,
+    ],
+  );
+
+  return <QueueSummaryCards cards={cards} />;
+};
+
+export default ConsultationSummaryCards;