@digihmis/esm-home-app 1.0.0

package/src/config-schema.ts

@@ -0,0 +1,358 @@
+import { ConfigSchema, Type, validators } from '@openmrs/esm-framework';
+
+export const configSchema: ConfigSchema = {
+  excludeLinks: {
+    _type: Type.Array,
+    _elements: {
+      _type: Type.String,
+      _description: 'Label for the link to hide',
+    },
+    _default: [],
+    _description: 'Array of links to hide in the esm home app',
+  },
+  administrationIcon: {
+    src: {
+      _type: Type.String,
+      _default: '/openmrs/spa/administration.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],
+    },
+    alt: {
+      _type: Type.String,
+      _default: 'Logo',
+      _description: 'The alternative text for the logo image, displayed when the image cannot be loaded or on hover.',
+    },
+  },
+  appointmentsIcon: {
+    src: {
+      _type: Type.String,
+      _default: '/openmrs/spa/appointments.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],
+    },
+    alt: {
+      _type: Type.String,
+      _default: 'Logo',
+      _description: 'The alternative text for the logo image, displayed when the image cannot be loaded or on hover.',
+    },
+  },
+  billingIcon: {
+    src: {
+      _type: Type.String,
+      _default: '/openmrs/spa/billing.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],
+    },
+    alt: {
+      _type: Type.String,
+      _default: 'Logo',
+      _description: 'The alternative text for the logo image, displayed when the image cannot be loaded or on hover.',
+    },
+  },
+
+  dentalIcon: {
+    src: {
+      _type: Type.String,
+      _default: '/openmrs/spa/denal.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],
+    },
+    alt: {
+      _type: Type.String,
+      _default: 'Logo',
+      _description: 'The alternative text for the logo image, displayed when the image cannot be loaded or on hover.',
+    },
+  },
+  homeIcon: {
+    src: {
+      _type: Type.String,
+      _default: '/openmrs/spa/home.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],
+    },
+    alt: {
+      _type: Type.String,
+      _default: 'Logo',
+      _description: 'The alternative text for the logo image, displayed when the image cannot be loaded or on hover.',
+    },
+  },
+  inpatientIcon: {
+    src: {
+      _type: Type.String,
+      _default: '/openmrs/spa/Inpatient.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],
+    },
+    alt: {
+      _type: Type.String,
+      _default: 'Logo',
+      _description: 'The alternative text for the logo image, displayed when the image cannot be loaded or on hover.',
+    },
+  },
+  inventoryIcon: {
+    src: {
+      _type: Type.String,
+      _default: '/openmrs/spa/inventory.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],
+    },
+    alt: {
+      _type: Type.String,
+      _default: 'Logo',
+      _description: 'The alternative text for the logo image, displayed when the image cannot be loaded or on hover.',
+    },
+  },
+  laboratoryIcon: {
+    src: {
+      _type: Type.String,
+      _default: '/openmrs/spa/labs.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],
+    },
+    alt: {
+      _type: Type.String,
+      _default: 'Logo',
+      _description: 'The alternative text for the logo image, displayed when the image cannot be loaded or on hover.',
+    },
+  },
+  mchIcon: {
+    src: {
+      _type: Type.String,
+      _default: '/openmrs/spa/mch.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],
+    },
+    alt: {
+      _type: Type.String,
+      _default: 'Logo',
+      _description: 'The alternative text for the logo image, displayed when the image cannot be loaded or on hover.',
+    },
+  },
+  outpatientIcon: {
+    src: {
+      _type: Type.String,
+      _default: '/openmrs/spa/outpatient.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],
+    },
+    alt: {
+      _type: Type.String,
+      _default: 'Logo',
+      _description: 'The alternative text for the logo image, displayed when the image cannot be loaded or on hover.',
+    },
+  },
+  pharmacyIcon: {
+    src: {
+      _type: Type.String,
+      _default: '/openmrs/spa/pharmacy.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],
+    },
+    alt: {
+      _type: Type.String,
+      _default: 'Logo',
+      _description: 'The alternative text for the logo image, displayed when the image cannot be loaded or on hover.',
+    },
+  },
+  proceduresIcon: {
+    src: {
+      _type: Type.String,
+      _default: '/openmrs/spa/procedure.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],
+    },
+    alt: {
+      _type: Type.String,
+      _default: 'Logo',
+      _description: 'The alternative text for the logo image, displayed when the image cannot be loaded or on hover.',
+    },
+  },
+  radiologyIcon: {
+    src: {
+      _type: Type.String,
+      _default: '/openmrs/spa/radiology.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],
+    },
+    alt: {
+      _type: Type.String,
+      _default: 'Logo',
+      _description: 'The alternative text for the logo image, displayed when the image cannot be loaded or on hover.',
+    },
+  },
+  referralIcon: {
+    src: {
+      _type: Type.String,
+      _default: '/openmrs/spa/referral.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],
+    },
+    alt: {
+      _type: Type.String,
+      _default: 'Logo',
+      _description: 'The alternative text for the logo image, displayed when the image cannot be loaded or on hover.',
+    },
+  },
+  registrationIcon: {
+    src: {
+      _type: Type.String,
+      _default: '/openmrs/spa/registration.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],
+    },
+    alt: {
+      _type: Type.String,
+      _default: 'Logo',
+      _description: 'The alternative text for the logo image, displayed when the image cannot be loaded or on hover.',
+    },
+  },
+  specialClinicIcon: {
+    src: {
+      _type: Type.String,
+      _default: '/openmrs/spa/special_clinic.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],
+    },
+    alt: {
+      _type: Type.String,
+      _default: 'Logo',
+      _description: 'The alternative text for the logo image, displayed when the image cannot be loaded or on hover.',
+    },
+  },
+  staffManagementIcon: {
+    src: {
+      _type: Type.String,
+      _default: '/openmrs/spa/staff_management.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],
+    },
+    alt: {
+      _type: Type.String,
+      _default: 'Logo',
+      _description: 'The alternative text for the logo image, displayed when the image cannot be loaded or on hover.',
+    },
+  },
+  triageIcon: {
+    src: {
+      _type: Type.String,
+      _default: '/openmrs/spa/triage_1.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],
+    },
+    alt: {
+      _type: Type.String,
+      _default: 'Logo',
+      _description: 'The alternative text for the logo image, displayed when the image cannot be loaded or on hover.',
+    },
+  },
+  reportsIcon: {
+    src: {
+      _type: Type.String,
+      _default: '/openmrs/spa/reports.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],
+    },
+    alt: {
+      _type: Type.String,
+      _default: 'Logo',
+      _description: 'The alternative text for the logo image, displayed when the image cannot be loaded or on hover.',
+    },
+  },
+  facilityDashboardIcon: {
+    src: {
+      _type: Type.String,
+      _default: '/openmrs/spa/facility_analysis.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],
+    },
+    alt: {
+      _type: Type.String,
+      _default: 'Logo',
+      _description: 'The alternative text for the logo image, displayed when the image cannot be loaded or on hover.',
+    },
+  },
+  legacyUIIcon: {
+    src: {
+      _type: Type.String,
+      _default: '/openmrs/spa/logo.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],
+    },
+    alt: {
+      _type: Type.String,
+      _default: 'Logo',
+      _description: 'The alternative text for the logo image, displayed when the image cannot be loaded or on hover.',
+    },
+  },
+  leftNavMode: {
+    _type: Type.String,
+    _description: 'Sets the left nav mode for the home app.',
+    _validators: [validators.oneOf(['normal', 'collapsed', 'hidden'])],
+    _default: 'normal',
+  },
+  triageQueueUuid: {
+    _type: Type.String,
+    _description: 'The UUID of the triage queue to use for clock-in.',
+    _default: 'd692a223-e140-11ee-bad2-0242ac120002',
+  },
+  outpatientQueueUuid: {
+    _type: Type.String,
+    _description: 'The UUID of the outpatient queue to use for clock-in.',
+    _default: '13b5ce7a-cc47-434f-94d7-c7533f1d4b58',
+  },
+  specialClinicQueueUuid: {
+    _type: Type.String,
+    _description: 'The UUID of the special clinic queue to use for clock-in.',
+    _default: '3fa2f4c9-dbc6-47b5-897e-ae17c007760e',
+  },
+};
+
+export type ConfigObject = {
+  excludeLinks: Array<string>;
+  administrationIcon: { src: string; alt: string };
+  appointmentsIcon: { src: string; alt: string };
+  billingIcon: { src: string; alt: string };
+  dentalIcon: { src: string; alt: string };
+  homeIcon: { src: string; alt: string };
+  inpatientIcon: { src: string; alt: string };
+  inventoryIcon: { src: string; alt: string };
+  laboratoryIcon: { src: string; alt: string };
+  mchIcon: { src: string; alt: string };
+  outpatientIcon: { src: string; alt: string };
+  pharmacyIcon: { src: string; alt: string };
+  proceduresIcon: { src: string; alt: string };
+  radiologyIcon: { src: string; alt: string };
+  referralIcon: { src: string; alt: string };
+  registrationIcon: { src: string; alt: string };
+  specialClinicIcon: { src: string; alt: string };
+  staffManagementIcon: { src: string; alt: string };
+  triageIcon: { src: string; alt: string };
+  reportsIcon: { src: string; alt: string };
+  facilityDashboardIcon: { src: string; alt: string };
+  legacyUIIcon: { src: string; alt: string };
+  leftNavMode: 'normal' | 'collapsed' | 'hidden';
+  triageQueueUuid: string;
+  outpatientQueueUuid: string;
+  specialClinicQueueUuid: string;
+};

package/src/dashboards/administration-dashboard/administration-dashboard.component.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect } from 'react';
+import {
+  ExtensionSlot,
+  WorkspaceContainer,
+  useLayoutType,
+  isDesktop,
+  useConfig,
+  useLeftNav,
+  useExtensionStore,
+} from '@openmrs/esm-framework';
+import classNames from 'classnames';
+import styles from '../../generic-dashboard/generic-dashboard.scss';
+import { ConfigObject } from '../../config-schema';
+import { useParams, useNavigate, useLocation } from 'react-router-dom';
+import { DashboardConfig } from '../../type';
+import DashboardView from '../../generic-dashboard/generic-dashboard-view.component';
+
+export default function AdministrationDashboard() {
+  const extensionStore = useExtensionStore();
+  const params = useParams();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const layout = useLayoutType();
+  const { leftNavMode } = useConfig<ConfigObject>();
+
+  useLeftNav({
+    name: 'administration-dashboard-slot',
+    basePath: `${window.spaBase}/home/administration`,
+    mode: leftNavMode,
+  });
+
+  const ungroupedDashboards =
+    extensionStore.slots['administration-dashboard-slot']?.assignedExtensions
+      .map((e) => e.meta)
+      .filter((e) => Object.keys(e).length) || [];
+  const dashboards = ungroupedDashboards as Array<DashboardConfig>;
+
+  const dashboardParam = params?.dashboard || params?.['*'];
+  const activeDashboard = dashboards.find((dashboard) => dashboard.name === dashboardParam) || dashboards[0];
+
+  useEffect(() => {
+    const basePaths = ['/home/administration', '/home/administration/'];
+    if (basePaths.includes(location.pathname)) {
+      if (dashboards.length > 0 && dashboards[0]?.name) {
+        navigate(`/home/administration/${dashboards[0].name}`, { replace: true });
+      }
+    }
+  }, [location.pathname, dashboards, navigate]);
+
+  return (
+    <div className={styles.homePageWrapper}>
+      <section
+        className={classNames([
+          isDesktop(layout) ? styles.dashboardContainer : styles.dashboardContainerTablet,
+          leftNavMode === 'normal' ? styles.hasLeftNav : '',
+        ])}>
+        {isDesktop(layout) && <ExtensionSlot name="administration-sidebar-slot" />}
+        {activeDashboard && (
+          <DashboardView
+            title={activeDashboard?.title || activeDashboard?.name}
+            dashboardSlot={activeDashboard?.slot}
+          />
+        )}
+      </section>
+      <WorkspaceContainer overlay contextKey="home/administration" />
+    </div>
+  );
+}

package/src/dashboards/billing-dashboard/billing-dashboard.component.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import {
+  ExtensionSlot,
+  WorkspaceContainer,
+  useLayoutType,
+  isDesktop,
+  useConfig,
+  useLeftNav,
+  useExtensionStore,
+} from '@openmrs/esm-framework';
+import classNames from 'classnames';
+import styles from '../../generic-dashboard/generic-dashboard.scss';
+import { ConfigObject } from '../../config-schema';
+import { useParams, useLocation } from 'react-router-dom';
+import { DashboardConfig } from '../../type';
+import DashboardView from '../../generic-dashboard/generic-dashboard-view.component';
+
+export default function BillingDashboard() {
+  const extensionStore = useExtensionStore();
+  const params = useParams();
+  const location = useLocation();
+  const layout = useLayoutType();
+  const { leftNavMode } = useConfig<ConfigObject>();
+
+  const isFileRoute = location.pathname.includes('/bill');
+  const { patientUuid } = params;
+
+  useLeftNav({
+    name: 'billing-dashboard-slot',
+    basePath: `${window.spaBase}/home/billing`,
+    mode: leftNavMode,
+  });
+
+  const ungroupedDashboards =
+    extensionStore.slots['billing-dashboard-slot']?.assignedExtensions
+      .map((e) => e.meta)
+      .filter((e) => Object.keys(e).length) || [];
+
+  const dashboards = ungroupedDashboards as Array<DashboardConfig>;
+
+  const matchedDashboard = dashboards.find((dashboard) => dashboard.name === params?.dashboard);
+  const activeDashboard = matchedDashboard || dashboards[0];
+
+  return (
+    <div className={styles.homePageWrapper}>
+      <section
+        className={classNames([
+          isDesktop(layout) ? styles.dashboardContainer : styles.dashboardContainerTablet,
+          leftNavMode === 'normal' ? styles.hasLeftNav : '',
+        ])}>
+        {isDesktop(layout) && <ExtensionSlot name="billing-sidebar-slot" />}
+
+        {isFileRoute && patientUuid ? (
+          <DashboardView
+            title={activeDashboard?.title || activeDashboard?.name}
+            dashboardSlot="patient-bill-dashboard-slot"
+            state={{ patientUuid }}
+          />
+        ) : (
+          activeDashboard && (
+            <DashboardView
+              title={activeDashboard?.title || activeDashboard?.name}
+              dashboardSlot={activeDashboard?.slot}
+            />
+          )
+        )}
+      </section>
+      <WorkspaceContainer overlay contextKey="home/billing" />
+    </div>
+  );
+}

package/src/dashboards/outpatient-dashboard/outpatient-dashboard.component.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import {
+  ExtensionSlot,
+  WorkspaceContainer,
+  useLayoutType,
+  isDesktop,
+  useConfig,
+  useLeftNav,
+  useExtensionStore,
+} from '@openmrs/esm-framework';
+import classNames from 'classnames';
+import styles from '../../generic-dashboard/generic-dashboard.scss';
+import { ConfigObject } from '../../config-schema';
+import { useParams, useLocation } from 'react-router-dom';
+import { DashboardConfig } from '../../type';
+import DashboardView from '../../generic-dashboard/generic-dashboard-view.component';
+
+export default function OutpatientDashboard() {
+  const extensionStore = useExtensionStore();
+  const params = useParams();
+  const location = useLocation();
+  const layout = useLayoutType();
+  const { leftNavMode } = useConfig<ConfigObject>();
+
+  const isFileRoute = location.pathname.includes('/file');
+  const { patientUuid } = params;
+
+  useLeftNav({
+    name: 'outpatient-dashboard-slot',
+    basePath: `${window.spaBase}/home/outpatient`,
+    mode: leftNavMode,
+  });
+
+  const ungroupedDashboards =
+    extensionStore.slots['outpatient-dashboard-slot']?.assignedExtensions
+      .map((e) => e.meta)
+      .filter((e) => Object.keys(e).length) || [];
+
+  const dashboards = ungroupedDashboards as Array<DashboardConfig>;
+
+  const matchedDashboard = dashboards.find((dashboard) => dashboard.name === params?.dashboard);
+  const activeDashboard = matchedDashboard || dashboards[0];
+
+  return (
+    <div className={styles.homePageWrapper}>
+      <section
+        className={classNames([
+          isDesktop(layout) ? styles.dashboardContainer : styles.dashboardContainerTablet,
+          leftNavMode === 'normal' ? styles.hasLeftNav : '',
+        ])}>
+        {isDesktop(layout) && <ExtensionSlot name="outpatient-sidebar-slot" />}
+
+        {isFileRoute && patientUuid ? (
+          <DashboardView
+            title={activeDashboard?.title || activeDashboard?.name}
+            dashboardSlot="outpatient-file-dashboard-slot"
+            state={{ patientUuid }}
+          />
+        ) : (
+          activeDashboard && (
+            <DashboardView
+              title={activeDashboard?.title || activeDashboard?.name}
+              dashboardSlot={activeDashboard?.slot}
+            />
+          )
+        )}
+      </section>
+      <WorkspaceContainer overlay contextKey="home/outpatient" />
+    </div>
+  );
+}

package/src/dashboards/registration-dashboard/registration-dashboard.component.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import {
+  ExtensionSlot,
+  WorkspaceContainer,
+  useLayoutType,
+  isDesktop,
+  useConfig,
+  useLeftNav,
+  useExtensionStore,
+} from '@openmrs/esm-framework';
+import classNames from 'classnames';
+import { useLocation, useParams } from 'react-router-dom';
+import styles from '../../generic-dashboard/generic-dashboard.scss';
+import { ConfigObject } from '../../config-schema';
+
+export default function RegistrationDashboard() {
+  const location = useLocation();
+  const layout = useLayoutType();
+  const { leftNavMode } = useConfig<ConfigObject>();
+  // const extensionStore = useExtensionStore();
+
+  useLeftNav({
+    name: 'registration-dashboard-slot',
+    basePath: `${window.spaBase}home/registration`,
+    mode: leftNavMode,
+  });
+
+  // const ungroupedDashboards =
+  //   extensionStore.slots['registration-dashboard-slot']?.assignedExtensions
+  //     .map((e) => e.meta)
+  //     .filter((e) => Object.keys(e).length) || [];
+  // const dashboards = ungroupedDashboards as Array<DashboardConfig>;
+
+  const isPatientRegistrationRoute = location.pathname.includes('/patient-registration');
+  return (
+    <div className={styles.homePageWrapper}>
+      <section
+        className={classNames([
+          isDesktop(layout) ? styles.dashboardContainer : styles.dashboardContainerTablet,
+          leftNavMode === 'normal' ? styles.hasLeftNav : '',
+        ])}>
+        {isDesktop(layout) && <ExtensionSlot name="registration-sidebar-slot" />}
+        <div>
+          {isPatientRegistrationRoute ? (
+            <div>
+              <ExtensionSlot name="registration-form-slot" />
+            </div>
+          ) : (
+            <div>
+              <ExtensionSlot name="search-dashboard-slot" />
+            </div>
+          )}
+        </div>
+      </section>
+      <WorkspaceContainer overlay contextKey="home/registration" />
+    </div>
+  );
+}

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import {
+  ExtensionSlot,
+  WorkspaceContainer,
+  useLayoutType,
+  isDesktop,
+  useConfig,
+  useLeftNav,
+  useExtensionStore,
+} from '@openmrs/esm-framework';
+import classNames from 'classnames';
+import styles from '../../generic-dashboard/generic-dashboard.scss';
+import { ConfigObject } from '../../config-schema';
+import { useParams, useLocation } from 'react-router-dom';
+import { DashboardConfig } from '../../type';
+import DashboardView from '../../generic-dashboard/generic-dashboard-view.component';
+
+export default function TriageDashboard() {
+  const extensionStore = useExtensionStore();
+  const params = useParams();
+  const location = useLocation();
+  const layout = useLayoutType();
+  const { leftNavMode } = useConfig<ConfigObject>();
+
+  // Check if we're on the vitals route
+  const isVitalsRoute = location.pathname.includes('/vitals');
+  const { patientUuid } = params;
+
+  useLeftNav({
+    name: 'triage-dashboard-slot',
+    basePath: `${window.spaBase}/home/triage`,
+    mode: leftNavMode,
+  });
+
+  const ungroupedDashboards =
+    extensionStore.slots['triage-dashboard-slot']?.assignedExtensions
+      .map((e) => e.meta)
+      .filter((e) => Object.keys(e).length) || [];
+
+  const dashboards = ungroupedDashboards as Array<DashboardConfig>;
+
+  const matchedDashboard = dashboards.find((dashboard) => dashboard.name === params?.dashboard);
+  const activeDashboard = matchedDashboard || dashboards[0];
+
+  return (
+    <div className={styles.homePageWrapper}>
+      <section
+        className={classNames([
+          isDesktop(layout) ? styles.dashboardContainer : styles.dashboardContainerTablet,
+          leftNavMode === 'normal' ? styles.hasLeftNav : '',
+        ])}>
+        {isDesktop(layout) && <ExtensionSlot name="triage-sidebar-slot" />}
+
+        {isVitalsRoute && patientUuid ? (
+          <DashboardView
+            title={activeDashboard?.title || activeDashboard?.name}
+            dashboardSlot="triage-vitals-dashboard-slot"
+            state={{ patientUuid }}
+          />
+        ) : (
+          activeDashboard && (
+            <DashboardView
+              title={activeDashboard?.title || activeDashboard?.name}
+              dashboardSlot={activeDashboard?.slot}
+            />
+          )
+        )}
+      </section>
+      <WorkspaceContainer overlay contextKey="home/triage" />
+    </div>
+  );
+}