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

package/src/components/consultation/consultation.utils.tsx

@@ -0,0 +1,222 @@
+import React from 'react';
+import { IconButton, InlineLoading } from '@carbon/react';
+import type { TFunction } from 'i18next';
+import { Renew } from '@carbon/react/icons';
+import type { QueueSummaryCard } from '../../shared/queue/queue-summary-cards.component';
+import type { QueueFilter, QueueEntry } from '../../types';
+import styles from './consultation.scss';
+
+type InvestigationCategorizedEntries = {
+  newLabOrders: QueueEntry[];
+  newRadiologyOrders: QueueEntry[];
+  newProcedureOrders: QueueEntry[];
+  completedLabOrders: QueueEntry[];
+  completedRadiologyOrders: QueueEntry[];
+  completedProcedureOrders: QueueEntry[];
+};
+
+type BuildConsultationCardsParams = {
+  t: TFunction;
+  waitingCount: number;
+  emergencyCount: number;
+  urgentCount: number;
+  notUrgentCount: number;
+  awaitingCount: number;
+  completedCount: number;
+  labAwaiting: number;
+  labCompleted: number;
+  radiologyAwaiting: number;
+  radiologyCompleted: number;
+  proceduresAwaiting: number;
+  proceduresCompleted: number;
+  isRefreshing: boolean;
+  isLoadingInvestigations: boolean;
+  onRefreshInvestigations: () => void;
+  totalVisitsCount?: number;
+  setFilters: React.Dispatch<React.SetStateAction<QueueFilter[]>>;
+  emergencyPriorityConceptUuid: string;
+  urgentPriorityConceptUuid: string;
+  notUrgentPriorityConceptUuid: string;
+  investigationCategorizedEntries: InvestigationCategorizedEntries;
+};
+
+export function buildConsultationCards({
+  t,
+  waitingCount,
+  emergencyCount,
+  urgentCount,
+  notUrgentCount,
+  awaitingCount,
+  completedCount,
+  labAwaiting,
+  labCompleted,
+  radiologyAwaiting,
+  radiologyCompleted,
+  proceduresAwaiting,
+  proceduresCompleted,
+  isRefreshing,
+  isLoadingInvestigations,
+  onRefreshInvestigations,
+  totalVisitsCount,
+  setFilters,
+  emergencyPriorityConceptUuid,
+  urgentPriorityConceptUuid,
+  notUrgentPriorityConceptUuid,
+  investigationCategorizedEntries,
+}: BuildConsultationCardsParams): Array<QueueSummaryCard> {
+  return [
+    {
+      title: t('awaitingConsultation', 'Awaiting consultation'),
+      value: waitingCount.toString(),
+      categories: [
+        {
+          label: t('emergency', 'Emergency'),
+          value: emergencyCount,
+          onClick: () => {
+            setFilters((prevFilters) => [
+              ...prevFilters.filter((f) => f.key !== 'priority'),
+              { key: 'priority', value: emergencyPriorityConceptUuid, label: t('emergency', 'Emergency') },
+            ]);
+          },
+        },
+        {
+          label: t('urgent', 'Urgent'),
+          value: urgentCount,
+          onClick: () => {
+            setFilters((prevFilters) => [
+              ...prevFilters.filter((f) => f.key !== 'priority'),
+              { key: 'priority', value: urgentPriorityConceptUuid, label: t('urgent', 'Urgent') },
+            ]);
+          },
+        },
+        {
+          label: t('notUrgent', 'Not Urgent'),
+          value: notUrgentCount,
+          onClick: () => {
+            setFilters((prevFilters) => [
+              ...prevFilters.filter((f) => f.key !== 'priority'),
+              { key: 'priority', value: notUrgentPriorityConceptUuid, label: t('notUrgent', 'Not Urgent') },
+            ]);
+          },
+        },
+      ],
+    },
+    {
+      title: t('investigationAwaiting', 'Investigation Awaiting'),
+      value: awaitingCount.toString(),
+      categories: [
+        {
+          label: t('lab', 'Lab'),
+          value: labAwaiting,
+          onClick: () => {
+            setFilters((prevFilters) => [
+              ...prevFilters.filter((f) => f.key !== 'service_awaiting'),
+              {
+                key: 'service_awaiting',
+                value: investigationCategorizedEntries.newLabOrders.map((entry) => entry.patient.uuid).join(','),
+                label: t('labAwaiting', 'Lab Awaiting'),
+              },
+            ]);
+          },
+        },
+        {
+          label: t('radiology', 'Radiology'),
+          value: radiologyAwaiting,
+          onClick: () => {
+            setFilters((prevFilters) => [
+              ...prevFilters.filter((f) => f.key !== 'service_awaiting'),
+              {
+                key: 'service_awaiting',
+                value: investigationCategorizedEntries.newRadiologyOrders.map((entry) => entry.patient.uuid).join(','),
+                label: t('radiologyAwaiting', 'Radiology Awaiting'),
+              },
+            ]);
+          },
+        },
+        {
+          label: t('procedures', 'Procedures'),
+          value: proceduresAwaiting,
+          onClick: () => {
+            setFilters((prevFilters) => [
+              ...prevFilters.filter((f) => f.key !== 'service_awaiting'),
+              {
+                key: 'service_awaiting',
+                value: investigationCategorizedEntries.newProcedureOrders.map((entry) => entry.patient.uuid).join(','),
+                label: t('proceduresAwaiting', 'Procedures Awaiting'),
+              },
+            ]);
+          },
+        },
+      ],
+      refreshButton:
+        isRefreshing || isLoadingInvestigations ? (
+          <InlineLoading description={t('refreshing', 'Refreshing...')} />
+        ) : (
+          <IconButton
+            label={t('refreshInvestigations', 'Refresh investigations')}
+            kind="ghost"
+            size="sm"
+            onClick={onRefreshInvestigations}
+            className={styles.refreshButton}>
+            <Renew size={16} />
+          </IconButton>
+        ),
+    },
+    {
+      title: t('investigationCompleted', 'Investigation Completed'),
+      value: completedCount.toString(),
+      categories: [
+        {
+          label: t('lab', 'Lab'),
+          value: labCompleted,
+          onClick: () => {
+            setFilters((prevFilters) => [
+              ...prevFilters.filter((f) => f.key !== 'service_completed'),
+              {
+                key: 'service_completed',
+                value: investigationCategorizedEntries.completedLabOrders.map((entry) => entry.patient.uuid).join(','),
+                label: t('labCompleted', 'Lab Completed'),
+              },
+            ]);
+          },
+        },
+        {
+          label: t('radiology', 'Radiology'),
+          value: radiologyCompleted,
+          onClick: () => {
+            setFilters((prevFilters) => [
+              ...prevFilters.filter((f) => f.key !== 'service_completed'),
+              {
+                key: 'service_completed',
+                value: investigationCategorizedEntries.completedRadiologyOrders
+                  .map((entry) => entry.patient.uuid)
+                  .join(','),
+                label: t('radiologyCompleted', 'Radiology Completed'),
+              },
+            ]);
+          },
+        },
+        {
+          label: t('procedures', 'Procedures'),
+          value: proceduresCompleted,
+          onClick: () => {
+            setFilters((prevFilters) => [
+              ...prevFilters.filter((f) => f.key !== 'service_completed'),
+              {
+                key: 'service_completed',
+                value: investigationCategorizedEntries.completedProcedureOrders
+                  .map((entry) => entry.patient.uuid)
+                  .join(','),
+                label: t('proceduresCompleted', 'Procedures Completed'),
+              },
+            ]);
+          },
+        },
+      ],
+    },
+    {
+      title: t('totalVisits', 'Total Visits'),
+      value: totalVisitsCount?.toString() ?? '0',
+    },
+  ];
+}

package/src/components/consultation/dashboard.component.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { spaBasePath } from '../../constants';
-import PatientChart from '../../shared/patient-chart/patient-chart.component';
 import Consultation from './consultation.component';
 
 type ConsultationDashboardProps = {
@@ -13,7 +12,6 @@ const ConsultationDashboard: React.FC<ConsultationDashboardProps> = ({ dashboard
     <BrowserRouter basename={`${spaBasePath}/consultation`}>
       <Routes>
         <Route path="/" element={<Consultation dashboardTitle={dashboardTitle} />} />
-        <Route path="/:patientUuid" element={<PatientChart navigationPath="consultation" />} />
       </Routes>
     </BrowserRouter>
   );

package/src/components/consultation/index.ts

@@ -1,37 +1,44 @@
-import { getSyncLifecycle } from '@openmrs/esm-framework';
-import { createDashboardLink } from '@openmrs/esm-patient-common-lib';
-
+import { getAsyncLifecycle } from '@openmrs/esm-framework';
+export * from './tabs';
 import { moduleName } from '../../constants';
-import { createLeftPanelLink } from '../../shared/dashboard-link/dashboard-link.component';
-import ClinicalEncounter from './clinical-encounter/clinical-encounter.component';
-import EncounterDetails from './clinical-encounter/encounter-details.component';
-import ConsultationDashboard from './dashboard.component';
 
 const options = {
   featureName: 'express-workflow',
   moduleName,
 };
 
-export const consultationDashboard = getSyncLifecycle(ConsultationDashboard, options);
+export const consultationDashboard = getAsyncLifecycle(() => import('./dashboard.component'), options);
 // t('consultation', 'Consultation')
-export const consultationLeftPanelLink = getSyncLifecycle(
-  createLeftPanelLink({
-    title: 'consultation',
-    name: 'consultation',
-  }),
+export const consultationLeftPanelLink = getAsyncLifecycle(
+  () =>
+    import('../../shared/dashboard-link/dashboard-link.component').then((m) => ({
+      default: m.createLeftPanelLink({
+        title: 'consultation',
+        name: 'consultation',
+      }),
+    })),
   options,
 );
 
-export const clinicalEncounter = getSyncLifecycle(ClinicalEncounter, options);
+export const clinicalEncounter = getAsyncLifecycle(
+  () => import('./clinical-encounter/clinical-encounter.component'),
+  options,
+);
 // TODO: register Stethoscope icon in the icon registry
 // t('clinicalEncounter', 'Clinical Encounter')
-export const clinicalEncounterLink = getSyncLifecycle(
-  createDashboardLink({
-    title: 'clinicalEncounter',
-    path: 'clinical-encounter',
-    icon: 'omrs-icon-syringe',
-  }),
+export const clinicalEncounterLink = getAsyncLifecycle(
+  () =>
+    import('@openmrs/esm-patient-common-lib').then((m) => ({
+      default: m.createDashboardLink({
+        title: 'clinicalEncounter',
+        path: 'clinical-encounter',
+        icon: 'omrs-icon-syringe',
+      }),
+    })),
   options,
 );
 
-export const encounterDetails = getSyncLifecycle(EncounterDetails, options);
+export const encounterDetails = getAsyncLifecycle(
+  () => import('./clinical-encounter/encounter-details.component'),
+  options,
+);

package/src/components/consultation/tabs/index.ts

@@ -0,0 +1,67 @@
+import { getAsyncLifecycle } from '@openmrs/esm-framework';
+
+const options = {
+  featureName: 'express-workflow',
+  moduleName: '@kenyaemr/esm-express-workflow-app',
+};
+
+// t('patientSummaryTab', 'Patient Summary')
+export const patientSummary = getAsyncLifecycle(
+  () => import('../../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);
+// t('vitalsAndAnthropometric', 'Vitals & Anthropometric')
+export const patientVitals = getAsyncLifecycle(
+  () => import('../../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);
+// t('carePanel', 'Care Panel')
+export const carePanel = getAsyncLifecycle(
+  () => import('../../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);
+// t('immunizations', 'Immunizations')
+export const immunization = getAsyncLifecycle(
+  () => import('../../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);
+// t('relationships', 'Relationships')
+export const relationships = getAsyncLifecycle(
+  () => import('../../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);
+// t('appointments', 'Appointments')
+export const appointments = getAsyncLifecycle(
+  () => import('../../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);
+// t("attachments", "Attachments")
+export const attachments = getAsyncLifecycle(
+  () => import('../../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);
+// t('clinicalEncounterTab', 'Clinical Encounter')
+export const patientClinicalEncounter = getAsyncLifecycle(
+  () => import('../../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);
+// t('visits', 'Visits')
+export const patientVisits = getAsyncLifecycle(
+  () => import('../../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);
+// t('specialClinics', 'Special Clinics')
+export const specialClinics = getAsyncLifecycle(
+  () => import('../../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);
+// t('clinicalNotes', 'Clinical Notes')
+export const clinicalNotes = getAsyncLifecycle(
+  () => import('../../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);
+// t('proceduresAndOrders', 'Investigation & Orders')
+export const proceduresAndOrders = getAsyncLifecycle(
+  () => import('../../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);

package/src/components/facility-dashboard/components/header/home-header.component.tsx

@@ -1,7 +1,6 @@
-import React, { useCallback, useMemo } from 'react';
+import React from 'react';
 import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
-import { MultiSelect } from '@carbon/react';
 import {
   PageHeader,
   PageHeaderContent,
@@ -18,17 +17,17 @@ interface HomeHeaderProps {
 
 const HomeHeader: React.FC<HomeHeaderProps> = ({ title, onDateChange }) => {
   const { t } = useTranslation();
-  const today = new Date().toISOString().split('T')[0];
+  const today = dayjs().toDate();
   const [startDate, setStartDate] = React.useState(today);
   const [endDate, setEndDate] = React.useState(today);
 
   const handleDateChange = (type: 'start' | 'end', date: string) => {
     if (type === 'start') {
-      setStartDate(date);
-      onDateChange?.(date, endDate);
+      setStartDate(dayjs(date).startOf('day').toDate());
+      onDateChange?.(dayjs(date).startOf('day').toISOString(), dayjs(endDate).endOf('day').toISOString());
     } else {
-      setEndDate(date);
-      onDateChange?.(startDate, date);
+      setEndDate(dayjs(date).endOf('day').toDate());
+      onDateChange?.(dayjs(startDate).startOf('day').toISOString(), dayjs(date).endOf('day').toISOString());
     }
   };
 
@@ -44,9 +43,7 @@ const HomeHeader: React.FC<HomeHeaderProps> = ({ title, onDateChange }) => {
             id="start-date"
             labelText="Start Date"
             value={startDate}
-            onChange={(date) =>
-              handleDateChange('start', typeof date === 'string' ? date : date.toISOString().split('T')[0])
-            }
+            onChange={(date) => handleDateChange('start', typeof date === 'string' ? date : date.toISOString())}
           />
         </div>
         <div className={styles.dateInput}>
@@ -54,9 +51,7 @@ const HomeHeader: React.FC<HomeHeaderProps> = ({ title, onDateChange }) => {
             id="end-date"
             labelText="End Date"
             value={endDate}
-            onChange={(date) =>
-              handleDateChange('end', typeof date === 'string' ? date : date.toISOString().split('T')[0])
-            }
+            onChange={(date) => handleDateChange('end', typeof date === 'string' ? date : date.toISOString())}
           />
         </div>
       </div>

package/src/components/facility-dashboard/index.tsx

@@ -1,21 +1,22 @@
-import { getSyncLifecycle } from '@openmrs/esm-framework';
+import { getAsyncLifecycle } from '@openmrs/esm-framework';
 
-import FacilityDashboard from './facility-dashboard.component';
 import { moduleName } from '../../constants';
-import { createLeftPanelLink } from '../../shared/dashboard-link/dashboard-link.component';
 
 const options = {
   featureName: 'express-workflow',
   moduleName,
 };
 
-export const facilityDashboard = getSyncLifecycle(FacilityDashboard, options);
+export const facilityDashboard = getAsyncLifecycle(() => import('./facility-dashboard.component'), options);
 
 // t('dashboard', 'Dashboard')
-export const facilityLeftPanelLink = getSyncLifecycle(
-  createLeftPanelLink({
-    title: 'dashboard',
-    name: 'facility-dashboard',
-  }),
+export const facilityLeftPanelLink = getAsyncLifecycle(
+  () =>
+    import('../../shared/dashboard-link/dashboard-link.component').then((m) => ({
+      default: m.createLeftPanelLink({
+        title: 'dashboard',
+        name: 'facility-dashboard',
+      }),
+    })),
   options,
 );

package/src/components/laboratory/index.ts

@@ -1,21 +1,33 @@
-import { getSyncLifecycle } from '@openmrs/esm-framework';
+import { getAsyncLifecycle } from '@openmrs/esm-framework';
 
-import { createDashboardLink } from '@openmrs/esm-patient-common-lib';
 import { moduleName } from '../../constants';
-import LaboratoryTabs from './laboratory-tabs.component';
 
 const options = {
   featureName: 'express-workflow',
   moduleName,
 };
 
-export const laboratoryDashboard = getSyncLifecycle(LaboratoryTabs, options);
+export const laboratoryDashboard = getAsyncLifecycle(() => import('./laboratory-tabs.component'), options);
 // t('labOrders', 'Lab Orders')
-export const laboratoryLeftPanelLink = getSyncLifecycle(
-  createDashboardLink({
-    path: 'laboratory',
-    title: 'labOrders',
-    icon: 'omrs-icon-microscope',
-  }),
+export const laboratoryLeftPanelLink = getAsyncLifecycle(
+  () =>
+    import('@openmrs/esm-patient-common-lib').then((m) => ({
+      default: m.createDashboardLink({
+        path: 'laboratory',
+        title: 'labOrders',
+        icon: 'omrs-icon-microscope',
+      }),
+    })),
+  options,
+);
+
+// t("results", "Results")
+export const patientLaboratoryOrdersResults = getAsyncLifecycle(
+  () => import('./../../shared/tabs/create-tab-extension').then((mod) => ({ default: mod.createTabExtension() })),
+  options,
+);
+// t("order", "Orders")
+export const patientLaboratoryOrdersTab = getAsyncLifecycle(
+  () => import('../../components/laboratory/lab-table.component'),
   options,
 );

package/src/components/laboratory/lab-table.component.tsx

@@ -1,22 +1,47 @@
-import React from 'react';
-import { Order } from '../../types/order/order';
-import { Layer } from '@carbon/react';
+import React, { useMemo } from 'react';
+import { DataTableSkeleton, Layer } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { useConfig } from '@openmrs/esm-framework';
+import { ErrorState, useConfig } from '@openmrs/esm-framework';
 import styles from './laboratory-tabs.scss';
-import { EmptyState, useLaunchWorkspaceRequiringVisit } from '@openmrs/esm-patient-common-lib';
+import { EmptyState, useLaunchWorkspaceRequiringVisit, usePatientChartStore } from '@openmrs/esm-patient-common-lib';
 import { ExpressWorkflowConfig } from '../../config-schema';
 import OrderTable from '../../shared/orders/OrderTable';
+import { usePatientOrders } from '../../hooks/useOrders';
 
 type LabTableProps = {
-  orders: Order[];
+  patientUuid: string;
 };
 
-const LabTable: React.FC<LabTableProps> = ({ orders }) => {
-  const { t } = useTranslation();
+const LabTable: React.FC<LabTableProps> = ({ patientUuid }) => {
   const { labOrderTypeUuid, orderableConceptSets } = useConfig<ExpressWorkflowConfig>();
+  const {
+    data: orders,
+    isLoading,
+    error,
+    mutate: mutateOrders,
+  } = usePatientOrders(patientUuid, 'any', labOrderTypeUuid, undefined, undefined);
+
+  const { t } = useTranslation();
+  const { patient } = usePatientChartStore(patientUuid);
+  const windowProps = useMemo(() => ({ encounterUuid: orders?.[0]?.encounter?.uuid }), [orders]);
+  const groupProps = useMemo(
+    () => ({
+      patient,
+      patientUuid: patient?.id,
+      visitContext: orders?.[0]?.encounter?.visit,
+      mutateVisitContext: mutateOrders,
+    }),
+    [patient, orders, mutateOrders],
+  );
+  const launchAddLabOrder = useLaunchWorkspaceRequiringVisit(patientUuid, 'order-basket');
 
-  const launchAddLabOrder = useLaunchWorkspaceRequiringVisit('add-lab-order');
+  if (isLoading) {
+    return <DataTableSkeleton />;
+  }
+
+  if (error) {
+    return <ErrorState headerTitle={t('laboratoryOrders', 'Laboratory Orders')} error={error} />;
+  }
 
   if (orders?.length === 0) {
     return (
@@ -24,7 +49,9 @@ const LabTable: React.FC<LabTableProps> = ({ orders }) => {
         <EmptyState
           displayText={t('orders', 'Orders')}
           headerTitle={t('laboratoryOrders', 'Laboratory Orders')}
-          launchForm={() => launchAddLabOrder({ orderTypeUuid: labOrderTypeUuid, orderableConceptSets })}
+          launchForm={() =>
+            launchAddLabOrder({ orderTypeUuid: labOrderTypeUuid, orderableConceptSets }, windowProps, groupProps)
+          }
         />
       </Layer>
     );
@@ -33,12 +60,13 @@ const LabTable: React.FC<LabTableProps> = ({ orders }) => {
   return (
     <OrderTable
       title={t('laboratoryOrders', 'Laboratory Orders')}
-      orders={orders}
-      onAdd={() => launchAddLabOrder({ orderTypeUuid: labOrderTypeUuid, orderableConceptSets })}
+      orders={orders ?? []}
+      onAdd={() => launchAddLabOrder(undefined, { encounterUuid: '' }, groupProps)}
       containerClassName={styles.labTableContainer}
       tableCellClassName={styles.tableCell}
       priorityPillClassName={styles.priorityPill}
       statusPillClassName={styles.statusPill}
+      module="@openmrs/esm-laboratory-app"
     />
   );
 };

package/src/components/laboratory/laboratory-tabs.component.tsx

@@ -1,29 +1,15 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import OrdersTabs from '../../shared/orders/OrdersTabs';
-import LabTable from './lab-table.component';
+import ExtensionTabs from '../../shared/tabs/extension-tabs.component';
 
 type LaboratoryTabsProps = {
   patientUuid: string;
-  patient: fhir.Patient;
 };
 
-const LaboratoryTabs: React.FC<LaboratoryTabsProps> = ({ patientUuid, patient }) => {
+const LaboratoryTabs: React.FC<LaboratoryTabsProps> = ({ patientUuid }) => {
   const { t } = useTranslation();
-  const testOrderTypeUuid = '52a447d3-a64a-11e3-9aeb-50e549534c5e';
 
-  return (
-    <OrdersTabs
-      patientUuid={patientUuid}
-      patient={patient}
-      basePath="laboratory"
-      resultsSlotName="ewf-laboratory-results-slot"
-      orderTypeUuid={testOrderTypeUuid}
-      Table={({ orders }) => {
-        return <LabTable orders={orders} />;
-      }}
-    />
-  );
+  return <ExtensionTabs extensionSlotName="patient-laboratory-tabs-slot" patientUuid={patientUuid} />;
 };
 
 export default LaboratoryTabs;

package/src/components/mch/dashboard.component.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { spaBasePath } from '../../constants';
-import PatientChart from '../../shared/patient-chart/patient-chart.component';
 import MCH from './mch.component';
 
 type MchDashboardProps = {
@@ -13,7 +12,6 @@ const MCHDashboard: React.FC<MchDashboardProps> = ({ dashboardTitle }) => {
     <BrowserRouter basename={`${spaBasePath}/mch`}>
       <Routes>
         <Route path="/" element={<MCH dashboardTitle={dashboardTitle} />} />
-        <Route path="/:patientUuid" element={<PatientChart navigationPath="mch" />} />
       </Routes>
     </BrowserRouter>
   );

package/src/components/mch/index.tsx

@@ -1,20 +1,21 @@
-import { getSyncLifecycle } from '@openmrs/esm-framework';
+import { getAsyncLifecycle } from '@openmrs/esm-framework';
 
 import { moduleName } from '../../constants';
-import { createLeftPanelLink } from '../../shared/dashboard-link/dashboard-link.component';
-import MCHDashboard from './dashboard.component';
 
 const options = {
   featureName: 'express-workflow',
   moduleName,
 };
 
-export const mchDashboard = getSyncLifecycle(MCHDashboard, options);
+export const mchDashboard = getAsyncLifecycle(() => import('./dashboard.component'), options);
 // t('mch', 'MCH')
-export const mchLeftPanelLink = getSyncLifecycle(
-  createLeftPanelLink({
-    title: 'mch',
-    name: 'mch',
-  }),
+export const mchLeftPanelLink = getAsyncLifecycle(
+  () =>
+    import('../../shared/dashboard-link/dashboard-link.component').then((m) => ({
+      default: m.createLeftPanelLink({
+        title: 'mch',
+        name: 'mch',
+      }),
+    })),
   options,
 );