From 414a77bdc8596a81e764d3d5e993a0e9ca0b6d29 Mon Sep 17 00:00:00 2001
From: Jovan Ssebaggala <jssebaggala@outlook.com>
Date: Sat, 18 Jan 2025 01:19:13 +0300
Subject: [PATCH] (feat) O3-3773 Support for Patient Program Summary in Patient
 Chart (#1969)

* Introduce summary card

* add logic

* clean up

* code review

* code review

* Introduce summary card

* add logic

* clean up

* code review

* code review

* Restructure directories and fix conflicts

* code review

* code review

* code review

* Update encounter-list.component.tsx

---------

Co-authored-by: CynthiaKamau <cynthiakamau54@gmail.com>
Co-authored-by: Ian <52504170+ibacher@users.noreply.github.com>
---
 .../encounter-list-tabs.component.tsx         |   0
 .../encounter-list}/encounter-list-tabs.scss  |   0
 .../encounter-list.component.tsx              |  16 +-
 .../encounter-list}/encounter-list.scss       |   0
 .../encounter-list}/table.component.tsx       |   0
 .../encounter-list}/table.scss                |   0
 .../encounter-list}/tag.component.tsx         |   2 +-
 .../clinical-views-summary.component.tsx      |  40 ++++
 .../encounter-tile.component.tsx              |  84 +++++++
 .../clinical-views/encounter-tile/tile.scss   |  87 ++++++++
 .../hooks/index.ts                            |   1 +
 .../hooks/useEncounterRows.ts                 |   0
 .../hooks/useFormsJson.ts                     |   0
 .../clinical-views/hooks/useLastEncounter.ts  |  29 +++
 .../types.ts                                  | 100 ++++++++-
 .../utils/encounter-list-config-builder.ts    |  57 +++--
 .../utils}/encounter-list.resource.ts         |   0
 .../src/clinical-views/utils/helpers.ts       | 211 ++++++++++++++++++
 .../src/clinical-views/utils/index.ts         |  86 +++++++
 .../src/encounter-list/utils/helpers.ts       | 182 ---------------
 packages/esm-patient-chart-app/src/index.ts   |   9 +-
 .../esm-patient-chart-app/src/routes.json     |   6 +
 .../esm-patient-common-lib/src/types/index.ts |  12 +
 23 files changed, 696 insertions(+), 226 deletions(-)
 rename packages/esm-patient-chart-app/src/{encounter-list/components => clinical-views/encounter-list}/encounter-list-tabs.component.tsx (100%)
 rename packages/esm-patient-chart-app/src/{encounter-list/components => clinical-views/encounter-list}/encounter-list-tabs.scss (100%)
 rename packages/esm-patient-chart-app/src/{encounter-list/components => clinical-views/encounter-list}/encounter-list.component.tsx (95%)
 rename packages/esm-patient-chart-app/src/{encounter-list/components => clinical-views/encounter-list}/encounter-list.scss (100%)
 rename packages/esm-patient-chart-app/src/{encounter-list/components => clinical-views/encounter-list}/table.component.tsx (100%)
 rename packages/esm-patient-chart-app/src/{encounter-list/components => clinical-views/encounter-list}/table.scss (100%)
 rename packages/esm-patient-chart-app/src/{encounter-list/components => clinical-views/encounter-list}/tag.component.tsx (87%)
 create mode 100644 packages/esm-patient-chart-app/src/clinical-views/encounter-tile/clinical-views-summary.component.tsx
 create mode 100644 packages/esm-patient-chart-app/src/clinical-views/encounter-tile/encounter-tile.component.tsx
 create mode 100644 packages/esm-patient-chart-app/src/clinical-views/encounter-tile/tile.scss
 rename packages/esm-patient-chart-app/src/{encounter-list => clinical-views}/hooks/index.ts (65%)
 rename packages/esm-patient-chart-app/src/{encounter-list => clinical-views}/hooks/useEncounterRows.ts (100%)
 rename packages/esm-patient-chart-app/src/{encounter-list => clinical-views}/hooks/useFormsJson.ts (100%)
 create mode 100644 packages/esm-patient-chart-app/src/clinical-views/hooks/useLastEncounter.ts
 rename packages/esm-patient-chart-app/src/{encounter-list => clinical-views}/types.ts (66%)
 rename packages/esm-patient-chart-app/src/{encounter-list => clinical-views}/utils/encounter-list-config-builder.ts (82%)
 rename packages/esm-patient-chart-app/src/{encounter-list => clinical-views/utils}/encounter-list.resource.ts (100%)
 create mode 100644 packages/esm-patient-chart-app/src/clinical-views/utils/helpers.ts
 create mode 100644 packages/esm-patient-chart-app/src/clinical-views/utils/index.ts
 delete mode 100644 packages/esm-patient-chart-app/src/encounter-list/utils/helpers.ts

diff --git a/packages/esm-patient-chart-app/src/encounter-list/components/encounter-list-tabs.component.tsx b/packages/esm-patient-chart-app/src/clinical-views/encounter-list/encounter-list-tabs.component.tsx
similarity index 100%
rename from packages/esm-patient-chart-app/src/encounter-list/components/encounter-list-tabs.component.tsx
rename to packages/esm-patient-chart-app/src/clinical-views/encounter-list/encounter-list-tabs.component.tsx
diff --git a/packages/esm-patient-chart-app/src/encounter-list/components/encounter-list-tabs.scss b/packages/esm-patient-chart-app/src/clinical-views/encounter-list/encounter-list-tabs.scss
similarity index 100%
rename from packages/esm-patient-chart-app/src/encounter-list/components/encounter-list-tabs.scss
rename to packages/esm-patient-chart-app/src/clinical-views/encounter-list/encounter-list-tabs.scss
diff --git a/packages/esm-patient-chart-app/src/encounter-list/components/encounter-list.component.tsx b/packages/esm-patient-chart-app/src/clinical-views/encounter-list/encounter-list.component.tsx
similarity index 95%
rename from packages/esm-patient-chart-app/src/encounter-list/components/encounter-list.component.tsx
rename to packages/esm-patient-chart-app/src/clinical-views/encounter-list/encounter-list.component.tsx
index 127d1cbb11..77d955e000 100644
--- a/packages/esm-patient-chart-app/src/encounter-list/components/encounter-list.component.tsx
+++ b/packages/esm-patient-chart-app/src/clinical-views/encounter-list/encounter-list.component.tsx
@@ -1,17 +1,15 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import { navigate, showModal, showSnackbar, type Visit } from '@openmrs/esm-framework';
-import { EmptyState } from '@openmrs/esm-patient-common-lib';
 import { useTranslation } from 'react-i18next';
-import { EncounterListDataTable } from './table.component';
 import { Button, Link, OverflowMenu, OverflowMenuItem, DataTableSkeleton, Pagination } from '@carbon/react';
-import { Add } from '@carbon/react/icons';
+import { AddIcon, navigate, showModal, showSnackbar, type Visit } from '@openmrs/esm-framework';
+import { EmptyState } from '@openmrs/esm-patient-common-lib';
+import { EncounterListDataTable } from './table.component';
 import { launchEncounterForm } from '../utils/helpers';
-import { deleteEncounter } from '../encounter-list.resource';
+import { deleteEncounter } from '../utils/encounter-list.resource';
 import { useEncounterRows, useFormsJson } from '../hooks';
-
+import type { TableRow, Encounter, Mode, ColumnValue, FormattedColumn } from '../types';
 import styles from './encounter-list.scss';
-import { type TableRow, type Encounter, type Mode, type ColumnValue } from '../types';
-import { type FormattedColumn } from '../utils/encounter-list-config-builder';
+
 
 export interface EncounterListColumn {
   key: string;
@@ -243,7 +241,7 @@ export const EncounterList: React.FC<EncounterListProps> = ({
       return (
         <Button
           kind="ghost"
-          renderIcon={Add}
+          renderIcon={AddIcon}
           iconDescription="Add"
           onClick={(e) => {
             e.preventDefault();
diff --git a/packages/esm-patient-chart-app/src/encounter-list/components/encounter-list.scss b/packages/esm-patient-chart-app/src/clinical-views/encounter-list/encounter-list.scss
similarity index 100%
rename from packages/esm-patient-chart-app/src/encounter-list/components/encounter-list.scss
rename to packages/esm-patient-chart-app/src/clinical-views/encounter-list/encounter-list.scss
diff --git a/packages/esm-patient-chart-app/src/encounter-list/components/table.component.tsx b/packages/esm-patient-chart-app/src/clinical-views/encounter-list/table.component.tsx
similarity index 100%
rename from packages/esm-patient-chart-app/src/encounter-list/components/table.component.tsx
rename to packages/esm-patient-chart-app/src/clinical-views/encounter-list/table.component.tsx
diff --git a/packages/esm-patient-chart-app/src/encounter-list/components/table.scss b/packages/esm-patient-chart-app/src/clinical-views/encounter-list/table.scss
similarity index 100%
rename from packages/esm-patient-chart-app/src/encounter-list/components/table.scss
rename to packages/esm-patient-chart-app/src/clinical-views/encounter-list/table.scss
diff --git a/packages/esm-patient-chart-app/src/encounter-list/components/tag.component.tsx b/packages/esm-patient-chart-app/src/clinical-views/encounter-list/tag.component.tsx
similarity index 87%
rename from packages/esm-patient-chart-app/src/encounter-list/components/tag.component.tsx
rename to packages/esm-patient-chart-app/src/clinical-views/encounter-list/tag.component.tsx
index 5176174c6f..a4e04f92de 100644
--- a/packages/esm-patient-chart-app/src/encounter-list/components/tag.component.tsx
+++ b/packages/esm-patient-chart-app/src/clinical-views/encounter-list/tag.component.tsx
@@ -9,7 +9,7 @@ export const renderTag = (
   statusColorMappings: Record<string, string>,
   config: ConfigConcepts,
 ) => {
-  const columnStatus = getObsFromEncounter(encounter, concept, false, false, undefined, undefined, undefined, config);
+  const columnStatus = getObsFromEncounter({ encounter: encounter, obsConcept: concept, config: config });
   const columnStatusObs = findObs(encounter, concept);
 
   if (columnStatus == '--') {
diff --git a/packages/esm-patient-chart-app/src/clinical-views/encounter-tile/clinical-views-summary.component.tsx b/packages/esm-patient-chart-app/src/clinical-views/encounter-tile/clinical-views-summary.component.tsx
new file mode 100644
index 0000000000..01712834c6
--- /dev/null
+++ b/packages/esm-patient-chart-app/src/clinical-views/encounter-tile/clinical-views-summary.component.tsx
@@ -0,0 +1,40 @@
+import React, { memo, useMemo } from 'react';
+
+import { useTranslation } from 'react-i18next';
+import { useConfig } from '@openmrs/esm-framework';
+import { getEncounterTileColumns } from '../utils';
+import { EncounterTile } from './encounter-tile.component';
+import { type MenuCardProps } from '../types';
+
+interface OverviewListProps {
+  patientUuid: string;
+}
+
+const ClinicalViewsSummary: React.FC<OverviewListProps> = memo(({ patientUuid }) => {
+  const { tileDefinitions, trueConceptUuid, falseConceptUuid, otherConceptUuid } = useConfig();
+
+  const { t } = useTranslation();
+
+  const tilesData = useMemo(() => {
+    const configConcepts = {
+      trueConceptUuid,
+      falseConceptUuid,
+      otherConceptUuid,
+    };
+
+    return tileDefinitions?.map((tile: MenuCardProps) => ({
+      title: t(tile.tileHeader),
+      columns: getEncounterTileColumns(tile, configConcepts),
+    }));
+  }, [tileDefinitions, t, trueConceptUuid, falseConceptUuid, otherConceptUuid]);
+
+  return tilesData?.length > 0 ? (
+    <>
+      {tilesData.map((tile, index) => (
+        <EncounterTile key={index} patientUuid={patientUuid} columns={tile.columns} headerTitle={tile.title} />
+      ))}
+    </>
+  ) : null;
+});
+
+export default ClinicalViewsSummary;
diff --git a/packages/esm-patient-chart-app/src/clinical-views/encounter-tile/encounter-tile.component.tsx b/packages/esm-patient-chart-app/src/clinical-views/encounter-tile/encounter-tile.component.tsx
new file mode 100644
index 0000000000..c5fd98c278
--- /dev/null
+++ b/packages/esm-patient-chart-app/src/clinical-views/encounter-tile/encounter-tile.component.tsx
@@ -0,0 +1,84 @@
+import React, { memo, useMemo } from 'react';
+import { useLayoutType } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { CodeSnippetSkeleton, Tile, Column, Layer } from '@carbon/react';
+import { groupColumnsByEncounterType } from '../utils/helpers';
+import { useLastEncounter } from '../hooks';
+import type { EncounterTileColumn, EncounterTileProps } from '../types';
+import styles from './tile.scss';
+
+export const EncounterTile = memo(({ patientUuid, columns, headerTitle }: EncounterTileProps) => {
+  const columnsByEncounterType = useMemo(() => groupColumnsByEncounterType(columns), [columns]);
+  const isTablet = useLayoutType() === 'tablet';
+
+  return (
+    <Layer className={styles.layer}>
+      <Tile className={styles.tile}>
+        <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
+          <h4 className={styles.title}>{headerTitle}</h4>
+        </div>
+        <Column className={styles.columnContainer}>
+          {Object.entries(columnsByEncounterType).map(([encounterTypeUuid, columns]) => (
+            <EncounterData
+              key={encounterTypeUuid}
+              patientUuid={patientUuid}
+              encounterType={encounterTypeUuid}
+              columns={columns}
+            />
+          ))}
+        </Column>
+      </Tile>
+    </Layer>
+  );
+});
+
+const EncounterData: React.FC<{
+  patientUuid: string;
+  encounterType: string;
+  columns: EncounterTileColumn[];
+}> = ({ patientUuid, encounterType, columns }) => {
+  const { lastEncounter, isLoading, error, isValidating } = useLastEncounter(patientUuid, encounterType);
+  const { t } = useTranslation();
+
+  if (isLoading || isValidating) {
+    return <CodeSnippetSkeleton type="multi" role="progressbar" />;
+  }
+
+  if (error || lastEncounter == undefined) {
+    return (
+      <div className={styles.tileBox}>
+        {columns.map((column, ind) => (
+          <div key={ind}>
+            <span className={styles.tileTitle}>{t(column.title)}</span>
+            <span className={styles.tileValue}>{error?.message}</span>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.tileBox}>
+      {columns.map((column, ind) => {
+        return (
+          <div key={ind}>
+            <span className={styles.tileTitle}>{column.header}</span>
+            <span className={styles.tileValue}>
+              <p>{column.getObsValue(lastEncounter)}</p>
+            </span>
+            {column.hasSummary && (
+              <>
+                <span className={styles.tileValue}>
+                  <p>{column.getSummaryObsValue(lastEncounter)}</p>
+                </span>
+                <span className={styles.tileValue}>
+                  <p>{column.getObsValue(lastEncounter)}</p>
+                </span>
+              </>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
diff --git a/packages/esm-patient-chart-app/src/clinical-views/encounter-tile/tile.scss b/packages/esm-patient-chart-app/src/clinical-views/encounter-tile/tile.scss
new file mode 100644
index 0000000000..5264d16b1a
--- /dev/null
+++ b/packages/esm-patient-chart-app/src/clinical-views/encounter-tile/tile.scss
@@ -0,0 +1,87 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.title {
+  @include type.type-style('productive-heading-03');
+}
+
+.title:after {
+  content: '';
+  display: block;
+  width: layout.$spacing-07;
+  padding-top: layout.$spacing-01;
+  border-bottom: layout.$spacing-03 solid $brand-teal-01;
+}
+
+.tileTitle {
+  @include type.type-style('body-long-01');
+  display: block;
+  padding-top: layout.$spacing-05;
+}
+
+.columnContainer {
+  display: flex;
+  flex-direction: row;
+}
+
+.tileSubTitle {
+  @include type.type-style('body-compact-01');
+}
+
+.tileValue {
+  @include type.type-style('label-01');
+  margin: layout.$spacing-04 0 layout.$spacing-04;
+  display: block;
+}
+
+.tileBox {
+  display: flex;
+  gap: layout.$spacing-05;
+}
+
+.desktopHeading {
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+  }
+}
+
+.tabletHeading {
+  h4 {
+    @include type.type-style('heading-03');
+    color: $text-02;
+  }
+}
+
+.desktopHeading,
+.tabletHeading {
+  text-align: left;
+  text-transform: capitalize;
+  margin-bottom: layout.$spacing-05;
+
+  h4:after {
+    content: '';
+    display: block;
+    width: layout.$spacing-07;
+    padding-top: layout.$spacing-01;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+}
+
+.heading:after {
+  content: '';
+  display: block;
+  width: layout.$spacing-07;
+  padding-top: layout.$spacing-01;
+  border-bottom: 0.375rem solid var(--brand-03);
+}
+
+.tile {
+  border: 1px solid $ui-03;
+  margin-bottom: layout.$spacing-03;
+}
+
+[data-extension-id='clinical-views-summary'] {
+  height: auto;
+}
diff --git a/packages/esm-patient-chart-app/src/encounter-list/hooks/index.ts b/packages/esm-patient-chart-app/src/clinical-views/hooks/index.ts
similarity index 65%
rename from packages/esm-patient-chart-app/src/encounter-list/hooks/index.ts
rename to packages/esm-patient-chart-app/src/clinical-views/hooks/index.ts
index fd15cbc4d2..f435cd40f9 100644
--- a/packages/esm-patient-chart-app/src/encounter-list/hooks/index.ts
+++ b/packages/esm-patient-chart-app/src/clinical-views/hooks/index.ts
@@ -1,2 +1,3 @@
 export * from './useEncounterRows';
 export * from './useFormsJson';
+export * from './useLastEncounter';
diff --git a/packages/esm-patient-chart-app/src/encounter-list/hooks/useEncounterRows.ts b/packages/esm-patient-chart-app/src/clinical-views/hooks/useEncounterRows.ts
similarity index 100%
rename from packages/esm-patient-chart-app/src/encounter-list/hooks/useEncounterRows.ts
rename to packages/esm-patient-chart-app/src/clinical-views/hooks/useEncounterRows.ts
diff --git a/packages/esm-patient-chart-app/src/encounter-list/hooks/useFormsJson.ts b/packages/esm-patient-chart-app/src/clinical-views/hooks/useFormsJson.ts
similarity index 100%
rename from packages/esm-patient-chart-app/src/encounter-list/hooks/useFormsJson.ts
rename to packages/esm-patient-chart-app/src/clinical-views/hooks/useFormsJson.ts
diff --git a/packages/esm-patient-chart-app/src/clinical-views/hooks/useLastEncounter.ts b/packages/esm-patient-chart-app/src/clinical-views/hooks/useLastEncounter.ts
new file mode 100644
index 0000000000..8ece9879f5
--- /dev/null
+++ b/packages/esm-patient-chart-app/src/clinical-views/hooks/useLastEncounter.ts
@@ -0,0 +1,29 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { type Encounter } from '../types';
+import useSWR from 'swr';
+
+const encounterRepresentation =
+  'custom:(uuid,encounterDatetime,encounterType,location:(uuid,name),' +
+  'patient:(uuid,display,age,identifiers,person),encounterProviders:(uuid,provider:(uuid,name)),' +
+  'obs:(uuid,obsDatetime,voided,groupMembers,concept:(uuid,display,name:(uuid,name)),value:(uuid,name:(uuid,name,display),' +
+  'names:(uuid,conceptNameType,name,display))),form:(uuid,name))';
+
+export function useLastEncounter(patientUuid: string, encounterType: string) {
+  const query = `encounterType=${encounterType}&patient=${patientUuid}`;
+  const endpointUrl =
+    patientUuid && encounterType
+      ? `/ws/rest/v1/encounter?${query}&v=${encounterRepresentation}&limit=1&order=desc&startIndex=0`
+      : null;
+
+  const { data, error, isLoading, isValidating } = useSWR<{ data: { results: Array<Encounter> } }, Error>(
+    endpointUrl,
+    openmrsFetch,
+  );
+
+  return {
+    lastEncounter: data?.data.results?.length > 0 ? data?.data.results[0] : null,
+    error,
+    isLoading,
+    isValidating,
+  };
+}
diff --git a/packages/esm-patient-chart-app/src/encounter-list/types.ts b/packages/esm-patient-chart-app/src/clinical-views/types.ts
similarity index 66%
rename from packages/esm-patient-chart-app/src/encounter-list/types.ts
rename to packages/esm-patient-chart-app/src/clinical-views/types.ts
index c11972e56c..c1e47ce60d 100644
--- a/packages/esm-patient-chart-app/src/encounter-list/types.ts
+++ b/packages/esm-patient-chart-app/src/clinical-views/types.ts
@@ -31,6 +31,7 @@ export interface Observation {
         uuid: string;
         name: {
           name: string;
+          display?: string;
         };
         names?: Array<{ uuid: string; name: string; conceptNameType: string }>;
       }
@@ -141,7 +142,7 @@ export interface ColumnDefinition {
   conditionalActionOptions?: Array<ConditionalActionProps>;
   isDate?: boolean;
   isTrueFalseConcept?: boolean;
-  type?: string;
+  type?: EncounterPropertyType;
   isLink?: boolean;
   useMultipleObs?: boolean;
   valueMappings?: Record<string, string>;
@@ -150,6 +151,9 @@ export interface ColumnDefinition {
   isConditionalConcept?: boolean;
   conditionalConceptMappings?: Record<string, string>;
   conditionalEncounterMappings?: Record<string, ConditionalEncounterMapping>;
+  encounterType: string;
+  hasSummary?: boolean;
+  summaryConcept?: SummaryConcept;
 }
 
 export interface ConditionalEncounterMapping {
@@ -209,3 +213,97 @@ export interface ConfigConcepts {
   falseConceptUuid: string;
   otherConceptUuid: string;
 }
+
+export interface FormattedColumn {
+  key: string;
+  header: string;
+  getValue: (encounter: Encounter) => ColumnValue;
+  link?: { getUrl: (encounter: Encounter) => string; handleNavigate?: (encounter: Encounter) => void };
+  concept?: string;
+}
+
+export interface EncounterTileColumn {
+  key: string;
+  header: string;
+  encounterTypeUuid: string;
+  concept: string;
+  title?: string;
+  getObsValue: (encounter: Encounter) => string;
+  getSummaryObsValue?: (encounter: Encounter) => string;
+  encounter?: Encounter;
+  hasSummary?: Boolean;
+}
+export interface EncounterTileProps {
+  patientUuid: string;
+  columns: Array<EncounterTileColumn>;
+  headerTitle: string;
+}
+
+export interface MenuCardProps {
+  tileHeader: string;
+  columns: Array<ColumnDefinition>;
+}
+
+interface SummaryConcept {
+  primaryConcept: string;
+  secondaryConcept?: string;
+  isDate?: boolean;
+  hasCalculatedDate?: boolean;
+}
+
+export interface FormattedCardColumn {
+  key: string;
+  header: string;
+  concept: string;
+  encounterUuid: string;
+  title?: string;
+  getObsValue: (encounter: Encounter) => string;
+  getSummaryObsValue?: (encounter: Encounter) => string;
+  hasSummary: boolean;
+}
+
+export interface ConfigConcepts {
+  trueConceptUuid: string;
+  falseConceptUuid: string;
+  otherConceptUuid: string;
+}
+
+export interface Encounter extends OpenmrsResource {
+  encounterDatetime: Date;
+  encounterType: { uuid: string; name: string };
+  patient: {
+    uuid: string;
+    display: string;
+    age: number;
+    birthDate: string;
+  };
+  location: {
+    uuid: string;
+    display: string;
+    name: string;
+  };
+  encounterProviders?: Array<{ encounterRole: string; provider: { uuid: string; name: string } }>;
+  obs: Array<Observation>;
+  form?: {
+    uuid: string;
+  };
+  visit?: string;
+}
+
+export enum EncounterPropertyType {
+  location = 'location',
+  provider = 'provider',
+  visitType = 'visitType',
+  ageAtEncounter = 'ageAtEncounter',
+}
+
+export interface GetObsFromEncounterParams {
+  encounter: Encounter;
+  obsConcept: string;
+  isDate?: boolean;
+  isTrueFalseConcept?: boolean;
+  type?: EncounterPropertyType;
+  fallbackConcepts?: Array<string>;
+  secondaryConcept?: string;
+  config?: ConfigConcepts;
+}
diff --git a/packages/esm-patient-chart-app/src/encounter-list/utils/encounter-list-config-builder.ts b/packages/esm-patient-chart-app/src/clinical-views/utils/encounter-list-config-builder.ts
similarity index 82%
rename from packages/esm-patient-chart-app/src/encounter-list/utils/encounter-list-config-builder.ts
rename to packages/esm-patient-chart-app/src/clinical-views/utils/encounter-list-config-builder.ts
index 6a0b25297c..2fa53c016e 100644
--- a/packages/esm-patient-chart-app/src/encounter-list/utils/encounter-list-config-builder.ts
+++ b/packages/esm-patient-chart-app/src/clinical-views/utils/encounter-list-config-builder.ts
@@ -15,7 +15,7 @@ import {
   type NamedColumn,
   type ConfigConcepts,
 } from '../types';
-import { renderTag } from '../components/tag.component';
+import { renderTag } from '../encounter-list/tag.component';
 
 export interface FormattedColumn {
   key: string;
@@ -49,16 +49,16 @@ const getColumnValue = (encounter: Encounter, column: ColumnDefinition, config:
     return getMappedConceptValue(encounter, column, config);
   }
 
-  return getObsFromEncounter(
-    encounter,
-    column.concept,
-    column.isDate,
-    column.isTrueFalseConcept,
-    column.type,
-    column.fallbackConcepts,
-    column.secondaryConcept,
-    config,
-  );
+  return getObsFromEncounter({
+    encounter: encounter,
+    obsConcept: column.concept,
+    isDate: column.isDate,
+    isTrueFalseConcept: column.isTrueFalseConcept,
+    type: column.type,
+    fallbackConcepts: column.fallbackConcepts,
+    secondaryConcept: column.secondaryConcept,
+    config: config,
+  });
 };
 
 const createActionObject = (encounter: Encounter, action: ActionProps | ConditionalActionProps) => ({
@@ -81,16 +81,11 @@ const getActions = (encounter: Encounter, column: ColumnDefinition, config: Conf
 };
 
 const createConditionalAction = (encounter: Encounter, action: ConditionalActionProps, config: ConfigConcepts) => {
-  const dependantObsValue = getObsFromEncounter(
-    encounter,
-    action.dependantConcept,
-    false,
-    false,
-    undefined,
-    undefined,
-    undefined,
-    config,
-  );
+  const dependantObsValue = getObsFromEncounter({
+    encounter: encounter,
+    obsConcept: action.dependantConcept,
+    config: config,
+  });
   if (dependantObsValue === action.dependsOn) {
     return createActionObject(encounter, action);
   }
@@ -105,16 +100,16 @@ const createConditionalAction = (encounter: Encounter, action: ConditionalAction
 
 const getMappedConceptValue = (encounter: Encounter, column: ColumnDefinition, config: ConfigConcepts): NamedColumn => {
   const concept = getConceptFromMappings(encounter, column.conceptMappings);
-  return getObsFromEncounter(
-    encounter,
-    concept,
-    column.isDate,
-    column.isTrueFalseConcept,
-    column.type,
-    column.fallbackConcepts,
-    column.secondaryConcept,
-    config,
-  );
+  return getObsFromEncounter({
+    encounter: encounter,
+    obsConcept: concept,
+    isDate: column.isDate,
+    isTrueFalseConcept: column.isTrueFalseConcept,
+    type: column.type,
+    fallbackConcepts: column.fallbackConcepts,
+    secondaryConcept: column.secondaryConcept,
+    config: config,
+  });
 };
 
 export const getTabColumns = (columnsDefinition: Array<ColumnDefinition>, config: ConfigConcepts) => {
diff --git a/packages/esm-patient-chart-app/src/encounter-list/encounter-list.resource.ts b/packages/esm-patient-chart-app/src/clinical-views/utils/encounter-list.resource.ts
similarity index 100%
rename from packages/esm-patient-chart-app/src/encounter-list/encounter-list.resource.ts
rename to packages/esm-patient-chart-app/src/clinical-views/utils/encounter-list.resource.ts
diff --git a/packages/esm-patient-chart-app/src/clinical-views/utils/helpers.ts b/packages/esm-patient-chart-app/src/clinical-views/utils/helpers.ts
new file mode 100644
index 0000000000..9d25bd405e
--- /dev/null
+++ b/packages/esm-patient-chart-app/src/clinical-views/utils/helpers.ts
@@ -0,0 +1,211 @@
+import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
+import { age, formatDate, parseDate, type Visit } from '@openmrs/esm-framework';
+import type {
+  ConfigConcepts,
+  Encounter,
+  EncounterPropertyType,
+  EncounterTileColumn,
+  Form,
+  GetObsFromEncounterParams,
+  Observation,
+} from '../types';
+
+type LaunchAction = 'add' | 'view' | 'edit' | 'embedded-view';
+
+export function launchEncounterForm(
+  form: Form,
+  visit: Visit,
+  action: LaunchAction = 'add',
+  onFormSave: () => void,
+  encounterUuid?: string,
+  intent: string = '*',
+  patientUuid?: string,
+) {
+  launchPatientWorkspace('patient-form-entry-workspace', {
+    workspaceTitle: form?.name,
+    mutateForm: onFormSave,
+    formInfo: {
+      encounterUuid,
+      formUuid: form?.uuid,
+      patientUuid: patientUuid,
+      visit: visit,
+      additionalProps: {
+        mode: action === 'add' ? 'enter' : action,
+        formSessionIntent: intent,
+        openClinicalFormsWorkspaceOnFormClose: false,
+      },
+    },
+  });
+}
+
+export function getEncounterValues(encounter: Encounter, param: string, isDate?: Boolean) {
+  if (isDate) return formatDate(encounter[param]);
+  else return encounter[param] ?? '--';
+}
+
+export function obsArrayDateComparator(left: Observation, right: Observation) {
+  return new Date(right.obsDatetime).getTime() - new Date(left.obsDatetime).getTime();
+}
+
+export function findObs(encounter: Encounter, obsConcept: string): Observation {
+  const allObs = encounter?.obs?.filter((observation) => observation.concept.uuid === obsConcept) || [];
+  return allObs?.length == 1 ? allObs[0] : allObs.sort(obsArrayDateComparator)[0];
+}
+
+export function getObsFromEncounters(encounters: Encounter, obsConcept: string, config: ConfigConcepts) {
+  const filteredEnc = encounters?.find((enc) => enc.obs.find((obs) => obs.concept.uuid === obsConcept));
+  return getObsFromEncounter({ encounter: filteredEnc, obsConcept: obsConcept, config: config });
+}
+
+export function resolveValueUsingMappings(encounter: Encounter, concept: string, mappings) {
+  const obs = findObs(encounter, concept);
+  for (const key in mappings) {
+    if (typeof obs?.value === 'object' && 'uuid' in obs.value && mappings[key] === obs?.value?.uuid) {
+      return key;
+    }
+  }
+  return '--';
+}
+
+export function getConditionalConceptValue(
+  encounter: Encounter,
+  conditionalConceptMappings,
+  isDate: boolean,
+  config: ConfigConcepts,
+) {
+  const { trueConcept, nonTrueConcept, dependantConcept, conditionalConcept } = conditionalConceptMappings;
+  const dependantValue = findObs(encounter, dependantConcept)?.value;
+  const dependantUuid =
+    typeof dependantValue === 'object' && 'uuid' in dependantValue ? dependantValue.uuid : undefined;
+  const finalConcept = dependantUuid === conditionalConcept ? trueConcept : nonTrueConcept;
+  return getObsFromEncounter({
+    encounter: encounter,
+    obsConcept: finalConcept,
+    isDate: isDate,
+    isTrueFalseConcept: false,
+    config: config,
+  });
+}
+
+export function getConceptFromMappings(encounter: Encounter, concepts: Array<string>) {
+  for (const concept of concepts) {
+    const obs = findObs(encounter, concept);
+    if (obs && obs.value) {
+      return concept;
+    }
+  }
+  return null;
+}
+
+export function getMultipleObsFromEncounter(encounter: Encounter, obsConcepts: Array<string>, config: ConfigConcepts) {
+  let observations = [];
+  obsConcepts.map((concept) => {
+    const obs = getObsFromEncounter({ encounter: encounter, obsConcept: concept, config: config });
+    if (obs !== '--') {
+      observations.push(obs);
+    }
+  });
+
+  return observations.length ? observations.join(', ') : '--';
+}
+
+/**
+ * Retrieves and formats an observation from an encounter based on the provided concept and various options.
+ *
+ * @param encounter - The encounter object from which observations will be extracted.
+ * @param obsConcept - The main concept to search for in the encounter's observations.
+ * @param isDate - Optional flag to indicate if the observation value should be treated as a date.
+ * @param isTrueFalseConcept - Optional flag to check if the observation concept represents a true/false value.
+ * @param type - Optional property type for filtering or fetching additional encounter properties.
+ * @param fallbackConcepts - Optional list of alternative concepts to use if the primary concept is not found.
+ * @param secondaryConcept - Optional secondary concept to check if the primary value matches a specific condition.
+ * @param t - Optional translation function.
+ * @returns The value of the observation, formatted appropriately, or '--' if not found or applicable.
+ */
+export function getObsFromEncounter({
+  encounter,
+  obsConcept,
+  isDate = false,
+  isTrueFalseConcept = false,
+  type,
+  fallbackConcepts = [],
+  secondaryConcept,
+  config,
+}: GetObsFromEncounterParams) {
+  let obs = findObs(encounter, obsConcept);
+  if (!encounter || !obsConcept) {
+    return '--';
+  }
+
+  if (isTrueFalseConcept) {
+    if (typeof obs?.value === 'object') {
+      return obs?.value?.name?.name;
+    }
+  }
+
+  // handles things like location, provider, visit type, etc. that are not in the encounter
+  if (type) {
+    getEncounterProperty(encounter, type);
+  }
+
+  if (secondaryConcept && typeof obs.value === 'object' && obs.value.names) {
+    const primaryValue = obs.value.name.display;
+    if (primaryValue === config.otherConceptUuid) {
+      const secondaryObs = findObs(encounter, secondaryConcept);
+      return secondaryObs ? secondaryObs.value : '--';
+    }
+  }
+
+  if (!obs && fallbackConcepts?.length) {
+    const concept = fallbackConcepts.find((c) => findObs(encounter, c) != null);
+    obs = findObs(encounter, concept);
+  }
+
+  if (!obs) {
+    return '--';
+  }
+
+  // format format obs date or datetime based on the obs value's type
+  if (isDate) {
+    if (typeof obs.value === 'object' && obs.value?.names) {
+      return formatDate(parseDate(obs.obsDatetime), { mode: 'wide' });
+    } else if (typeof obs.value === 'string') {
+      return formatDate(parseDate(obs.value), { mode: 'wide' });
+    }
+  }
+
+  if (typeof obs.value === 'object' && obs.value?.name) {
+    return obs.value?.name?.display;
+  }
+  return obs.value;
+}
+
+export const groupColumnsByEncounterType = (columns: EncounterTileColumn[]): Record<string, EncounterTileColumn[]> => {
+  return columns.reduce((acc: Record<string, EncounterTileColumn[]>, column) => {
+    if (!acc[column.encounterTypeUuid]) {
+      acc[column.encounterTypeUuid] = [];
+    }
+    acc[column.encounterTypeUuid].push(column);
+    return acc;
+  }, {});
+};
+
+export const getEncounterProperty = (encounter: Encounter, type: EncounterPropertyType) => {
+  if (type === 'location') {
+    return encounter.location.display;
+  }
+
+  if (type === 'provider') {
+    return encounter.encounterProviders.map((p) => p.provider.name).join(' | ');
+  }
+
+  if (type === 'visitType') {
+    return encounter.encounterType.name;
+  }
+
+  if (type === 'ageAtEncounter') {
+    return age(encounter.patient.birthDate, encounter.encounterDatetime);
+  }
+};
+
+export const filter = (encounter: Encounter, formUuid: string) => encounter?.form?.uuid === formUuid;
diff --git a/packages/esm-patient-chart-app/src/clinical-views/utils/index.ts b/packages/esm-patient-chart-app/src/clinical-views/utils/index.ts
new file mode 100644
index 0000000000..eb6069e2d7
--- /dev/null
+++ b/packages/esm-patient-chart-app/src/clinical-views/utils/index.ts
@@ -0,0 +1,86 @@
+import { getConceptFromMappings, getObsFromEncounter } from './helpers';
+import type { Encounter, ColumnDefinition, ConfigConcepts, EncounterTileColumn, MenuCardProps } from '../types';
+import dayjs from 'dayjs';
+
+const calculateDateDifferenceInDate = (givenDate: string): string => {
+  return `${dayjs().diff(dayjs(givenDate), 'days')} days`;
+};
+
+export const getEncounterTileColumns = (tileDefinition: MenuCardProps, config: ConfigConcepts) => {
+  const columns: Array<EncounterTileColumn> = tileDefinition.columns?.map((column: ColumnDefinition) => ({
+    key: column.title,
+    header: column.title,
+    concept: column.concept,
+    encounterTypeUuid: column.encounterType,
+    hasSummary: column.hasSummary || false,
+    getObsValue: (encounter: Encounter) => {
+      let obsValue;
+      if (column.conceptMappings) {
+        const concept = getConceptFromMappings(encounter, column.conceptMappings);
+        obsValue = getObsFromEncounter({
+          encounter: encounter,
+          obsConcept: concept,
+          isDate: column.isDate,
+          isTrueFalseConcept: column.isTrueFalseConcept,
+          type: column.type,
+          fallbackConcepts: column.fallbackConcepts,
+          secondaryConcept: column.summaryConcept?.secondaryConcept,
+          config: config,
+        });
+      } else {
+        obsValue = getObsFromEncounter({
+          encounter: encounter,
+          obsConcept: column.concept,
+          isDate: column.isDate,
+          config: config,
+        });
+      }
+      return typeof obsValue === 'string' ? obsValue : obsValue?.name?.name ?? '--';
+    },
+    getSummaryObsValue: column.hasSummary
+      ? (encounter: Encounter) => {
+          let summaryValue;
+
+          if (column.summaryConcept?.secondaryConcept) {
+            const primaryConceptType = getObsFromEncounter({
+              encounter: encounter,
+              obsConcept: column.summaryConcept.primaryConcept,
+              config: config,
+            });
+
+            if (primaryConceptType !== '--') {
+              summaryValue = primaryConceptType;
+            } else {
+              summaryValue = getObsFromEncounter({
+                encounter: encounter,
+                obsConcept: column.summaryConcept.secondaryConcept,
+                config: config,
+              });
+            }
+          } else if (column.summaryConcept?.hasCalculatedDate) {
+            const primaryDate = getObsFromEncounter({
+              encounter: encounter,
+              obsConcept: column.summaryConcept.primaryConcept,
+              isDate: column.summaryConcept.isDate,
+              config,
+            });
+
+            if (typeof primaryDate === 'string' && primaryDate !== '--') {
+              summaryValue = calculateDateDifferenceInDate(primaryDate);
+            } else {
+              summaryValue = '--';
+            }
+          } else {
+            summaryValue = getObsFromEncounter({
+              encounter: encounter,
+              obsConcept: column.summaryConcept?.primaryConcept,
+              isDate: column.summaryConcept?.isDate,
+              config: config,
+            });
+          }
+          return typeof summaryValue === 'string' ? summaryValue : summaryValue?.name?.name || '--';
+        }
+      : null,
+  }));
+  return columns;
+};
diff --git a/packages/esm-patient-chart-app/src/encounter-list/utils/helpers.ts b/packages/esm-patient-chart-app/src/encounter-list/utils/helpers.ts
deleted file mode 100644
index b189eaea0c..0000000000
--- a/packages/esm-patient-chart-app/src/encounter-list/utils/helpers.ts
+++ /dev/null
@@ -1,182 +0,0 @@
-import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
-import { formatDate, parseDate, formatDatetime, type Concept, age, type Visit } from '@openmrs/esm-framework';
-import { type Observation, type Encounter, type Form, type ConfigConcepts } from '../types';
-
-type LaunchAction = 'add' | 'view' | 'edit' | 'embedded-view';
-
-export function launchEncounterForm(
-  form: Form,
-  visit: Visit,
-  action: LaunchAction = 'add',
-  onFormSave: () => void,
-  encounterUuid?: string,
-  intent: string = '*',
-  patientUuid?: string,
-) {
-  launchPatientWorkspace('patient-form-entry-workspace', {
-    workspaceTitle: form?.name,
-    mutateForm: onFormSave,
-    formInfo: {
-      encounterUuid,
-      formUuid: form?.uuid,
-      patientUuid: patientUuid,
-      visit: visit,
-      additionalProps: {
-        mode: action === 'add' ? 'enter' : action,
-        formSessionIntent: intent,
-        openClinicalFormsWorkspaceOnFormClose: false,
-      },
-    },
-  });
-}
-
-export function formatDateTime(dateString: string): string {
-  const parsedDate = parseDate(dateString.includes('.') ? dateString.split('.')[0] : dateString);
-  return formatDatetime(parsedDate);
-}
-
-export function obsArrayDateComparator(left: Observation, right: Observation): number {
-  const leftDate = new Date(left.obsDatetime);
-  const rightDate = new Date(right.obsDatetime);
-  return rightDate.getTime() - leftDate.getTime();
-}
-
-export function findObs(encounter: Encounter, obsConcept: string): Observation | undefined {
-  const allObs = encounter?.obs?.filter((observation) => observation.concept.uuid === obsConcept) || [];
-  return !allObs ? undefined : allObs.length === 1 ? allObs[0] : allObs.sort(obsArrayDateComparator)[0];
-}
-
-export function getObsFromEncounters(encounters: Encounter, obsConcept: Concept) {
-  const filteredEnc = encounters?.find((enc) => enc.obs.find((obs) => obs.concept.uuid === obsConcept));
-  return getObsFromEncounter(filteredEnc, obsConcept);
-}
-
-export function resolveValueUsingMappings(encounter: Encounter, concept: string, mappings) {
-  const obs = findObs(encounter, concept);
-  for (const key in mappings) {
-    if (typeof obs?.value === 'object' && 'uuid' in obs.value) {
-      if (mappings[key] === obs.value.uuid) {
-        return key;
-      }
-    }
-  }
-  return '--';
-}
-
-export function getConditionalConceptValue(
-  encounter: Encounter,
-  conditionalConceptMappings,
-  isDate: boolean,
-  config: ConfigConcepts,
-) {
-  const { trueConcept, nonTrueConcept, dependantConcept, conditionalConcept } = conditionalConceptMappings;
-  const obsValue = findObs(encounter, dependantConcept)?.value;
-  const dependantUuid = typeof obsValue === 'object' && 'uuid' in obsValue ? obsValue.uuid : null;
-  const finalConcept = dependantUuid === conditionalConcept ? trueConcept : nonTrueConcept;
-  return getObsFromEncounter(encounter, finalConcept, isDate, false, undefined, undefined, undefined, config);
-}
-
-export function getConceptFromMappings(encounter: Encounter, concepts) {
-  for (const concept of concepts) {
-    const obs = findObs(encounter, concept);
-    if (obs && obs.value) {
-      return concept;
-    }
-  }
-  return null;
-}
-
-export function getMultipleObsFromEncounter(encounter: Encounter, obsConcepts: Array<string>, config: ConfigConcepts) {
-  let observations = [];
-  obsConcepts.map((concept) => {
-    const obs = getObsFromEncounter(encounter, concept, false, false, undefined, undefined, undefined, config);
-    if (obs !== '--') {
-      observations.push(obs);
-    }
-  });
-
-  return observations.length ? observations.join(', ') : '--';
-}
-
-export function getObsFromEncounter(
-  encounter: Encounter,
-  obsConcept,
-  isDate?: Boolean,
-  isTrueFalseConcept?: Boolean,
-  type?: string,
-  fallbackConcepts?: Array<string>,
-  secondaryConcept?: string,
-  config?: ConfigConcepts,
-) {
-  let obs = findObs(encounter, obsConcept);
-
-  if (!encounter || !obsConcept) {
-    return '--';
-  }
-
-  if (isTrueFalseConcept) {
-    if (typeof obs?.value === 'object') {
-      if (obs?.value?.uuid === config.falseConceptUuid || obs?.value?.uuid === config.trueConceptUuid) {
-        return obs?.value?.name?.name;
-      }
-    }
-  }
-
-  if (type === 'location') {
-    return encounter.location.name;
-  }
-
-  if (type === 'provider') {
-    return encounter.encounterProviders.map((p) => p.provider.name).join(' | ');
-  }
-
-  // TODO: This needs to be added later
-  if (type === 'mothersName') {
-    return;
-  }
-
-  if (type === 'visitType') {
-    return encounter.encounterType.name;
-  }
-
-  // TODO: Need to get a better place for this
-  if (type === 'ageAtHivTest') {
-    return age(encounter.patient.birthDate, encounter.encounterDatetime);
-  }
-
-  //
-  if (secondaryConcept && typeof obs.value === 'object' && obs.value.names) {
-    const primaryValue =
-      obs.value.names.find((conceptName) => conceptName.conceptNameType === 'SHORT')?.name || obs.value.name.name;
-    if (primaryValue === config.otherConceptUuid) {
-      const secondaryObs = findObs(encounter, secondaryConcept);
-      return secondaryObs ? secondaryObs.value : '--';
-    }
-  }
-
-  if (!obs && fallbackConcepts?.length) {
-    const concept = fallbackConcepts.find((c) => findObs(encounter, c) != null);
-    obs = findObs(encounter, concept);
-  }
-
-  if (!obs) {
-    return '--';
-  }
-
-  if (isDate) {
-    if (typeof obs.value === 'object' && obs.value?.names) {
-      return formatDate(parseDate(obs.obsDatetime), { mode: 'wide' });
-    } else {
-      return typeof obs.value === 'string' ? formatDate(parseDate(obs.value), { mode: 'wide' }) : '--';
-    }
-  }
-
-  if (typeof obs.value === 'object' && obs.value?.names) {
-    return (
-      obs.value?.names?.find((conceptName) => conceptName.conceptNameType === 'SHORT')?.name || obs.value.name.name
-    );
-  }
-  return obs.value;
-}
-
-export const filter = (encounter: Encounter, formUuid: string) => encounter?.form?.uuid === formUuid;
diff --git a/packages/esm-patient-chart-app/src/index.ts b/packages/esm-patient-chart-app/src/index.ts
index 8424a07477..2b831a7906 100644
--- a/packages/esm-patient-chart-app/src/index.ts
+++ b/packages/esm-patient-chart-app/src/index.ts
@@ -12,7 +12,7 @@ import genericDashboardComponent, { genericDashboardConfigSchema } from './side-
 import genericNavGroupComponent, { genericNavGroupConfigSchema } from './side-nav/generic-nav-group.component';
 import { moduleName } from './constants';
 import { setupCacheableRoutes, setupOfflineVisitsSync } from './offline';
-import { encountersDashboardMeta, summaryDashboardMeta } from './dashboard.meta';
+import { summaryDashboardMeta, encountersDashboardMeta } from './dashboard.meta';
 import addPastVisitActionButtonComponent from './actions-buttons/add-past-visit.component';
 import cancelVisitActionButtonComponent from './actions-buttons/cancel-visit.component';
 import currentVisitSummaryComponent from './visit/visits-widget/current-visit-summary.component';
@@ -103,6 +103,11 @@ export const stopVisitPatientSearchActionButton = getSyncLifecycle(stopVisitActi
   moduleName,
 });
 
+export const clinicalViewsSummary = getAsyncLifecycle(
+  () => import('./clinical-views/encounter-tile/clinical-views-summary.component'),
+  { featureName: 'clinical-views-summary', moduleName },
+);
+
 export const cancelVisitPatientSearchActionButton = getSyncLifecycle(cancelVisitActionButtonComponent, {
   featureName: 'patient-actions-slot-cancel-visit-button',
   moduleName,
@@ -227,6 +232,6 @@ export const activeVisitActionsComponent = getAsyncLifecycle(
 );
 
 export const encounterListTableTabs = getAsyncLifecycle(
-  () => import('./encounter-list/components/encounter-list-tabs.component'),
+  () => import('./clinical-views/encounter-list/encounter-list-tabs.component'),
   { featureName: 'encounter-list-table-tabs', moduleName },
 );
diff --git a/packages/esm-patient-chart-app/src/routes.json b/packages/esm-patient-chart-app/src/routes.json
index f8c5c44ce5..8df32fbcba 100644
--- a/packages/esm-patient-chart-app/src/routes.json
+++ b/packages/esm-patient-chart-app/src/routes.json
@@ -36,6 +36,12 @@
       "online": true,
       "offline": true
     },
+    {
+      "name": "clinical-views-summary",
+      "component": "clinicalViewsSummary",
+      "online": true,
+      "offline": true
+    },
     {
       "name": "stop-visit-button",
       "component": "stopVisitActionButton",
diff --git a/packages/esm-patient-common-lib/src/types/index.ts b/packages/esm-patient-common-lib/src/types/index.ts
index 7ef7db6a5a..9907db70ca 100644
--- a/packages/esm-patient-common-lib/src/types/index.ts
+++ b/packages/esm-patient-common-lib/src/types/index.ts
@@ -1,3 +1,5 @@
+import { type OpenmrsResource } from '@openmrs/esm-framework';
+
 export * from './test-results';
 
 export interface DashboardLinkConfig {
@@ -55,3 +57,13 @@ export interface HtmlFormEntryForm {
   formUiPage: 'enterHtmlFormWithSimpleUi' | 'enterHtmlFormWithStandardUi';
   formEditUiPage: 'editHtmlFormWithSimpleUi' | 'editHtmlFormWithStandardUi';
 }
+
+export interface OpenmrsEncounter extends OpenmrsResource {
+  encounterDatetime: Date;
+  encounterType: string;
+  patient: string;
+  location: string;
+  encounterProviders?: Array<{ encounterRole: string; provider: string }>;
+  obs: Array<OpenmrsResource>;
+  form?: string;
+}