From 321b86b98c6f6257e61cd8ad660a18ee26d546e7 Mon Sep 17 00:00:00 2001
From: shishiro <bannu1302@gmail.com>
Date: Tue, 1 Oct 2024 22:01:34 +0530
Subject: [PATCH] added the icon to the patient summary on the left menu nav

---
 .../src/dashboard.meta.ts                     | 19 +++++++++++++++++++
 .../side-nav/generic-dashboard.component.tsx  |  7 +++++++
 .../src/dashboards/DashboardExtension.tsx     |  4 +++-
 .../src/dashboards/createDashboardLink.tsx    |  8 +++++++-
 .../esm-patient-common-lib/src/types/index.ts |  1 +
 5 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/packages/esm-patient-chart-app/src/dashboard.meta.ts b/packages/esm-patient-chart-app/src/dashboard.meta.ts
index dc827279a1..620e756c35 100644
--- a/packages/esm-patient-chart-app/src/dashboard.meta.ts
+++ b/packages/esm-patient-chart-app/src/dashboard.meta.ts
@@ -1,7 +1,26 @@
+import React from 'react';
+
 export const summaryDashboardMeta = {
   slot: 'patient-chart-summary-dashboard-slot',
   path: 'Patient Summary',
   title: 'Patient Summary',
+  icon: React.createElement(
+    'svg',
+    {
+      width: '16',
+      height: '16',
+      viewBox: '0 0 16 16',
+      fill: 'none',
+      xmlns: 'http://www.w3.org/2000/svg',
+    },
+    React.createElement('path', { d: 'M9 9H5V10H9V9Z', fill: '#161616' }),
+    React.createElement('path', { d: 'M11 6.5H5V7.5H11V6.5Z', fill: '#161616' }),
+    React.createElement('path', { d: 'M7.5 11.5H5V12.5H7.5V11.5Z', fill: '#161616' }),
+    React.createElement('path', {
+      d: 'M12.5 2.5H11V2C11 1.73478 10.8946 1.48043 10.7071 1.29289C10.5196 1.10536 10.2652 1 10 1H6C5.73478 1 5.48043 1.10536 5.29289 1.29289C5.10536 1.48043 5 1.73478 5 2V2.5H3.5C3.23478 2.5 2.98043 2.60536 2.79289 2.79289C2.60536 2.98043 2.5 3.23478 2.5 3.5V14C2.5 14.2652 2.60536 14.5196 2.79289 14.7071C2.98043 14.8946 3.23478 15 3.5 15H12.5C12.7652 15 13.0196 14.8946 13.2071 14.7071C13.3946 14.5196 13.5 14.2652 13.5 14V3.5C13.5 3.23478 13.3946 2.98043 13.2071 2.79289C13.0196 2.60536 12.7652 2.5 12.5 2.5ZM6 2H10V4H6V2ZM12.5 14H3.5V3.5H5V5H11V3.5H12.5V14Z',
+      fill: '#161616',
+    }),
+  ),
 };
 
 export const encountersDashboardMeta = {
diff --git a/packages/esm-patient-chart-app/src/side-nav/generic-dashboard.component.tsx b/packages/esm-patient-chart-app/src/side-nav/generic-dashboard.component.tsx
index b76c50c192..53739a10dc 100644
--- a/packages/esm-patient-chart-app/src/side-nav/generic-dashboard.component.tsx
+++ b/packages/esm-patient-chart-app/src/side-nav/generic-dashboard.component.tsx
@@ -19,6 +19,11 @@ export const genericDashboardConfigSchema = {
     _default: '',
     _type: Type.String,
   },
+  icon: {
+    _description: 'The icon for this dashboard',
+    _default: '',
+    _type: Type.String,
+  },
 };
 
 export interface GenericDashboardConfig {
@@ -26,6 +31,7 @@ export interface GenericDashboardConfig {
   title: string;
   /** This gets used by the patient chart when it renders the dashboard itself. */
   slot: string;
+  icon?: React.ReactElement;
 }
 
 interface GenericDashboardProps {
@@ -37,6 +43,7 @@ export default function GenericDashboard({ basePath }: GenericDashboardProps) {
   return (
     <BrowserRouter>
       <DashboardExtension
+        icon={config.icon}
         path={config.path}
         title={config.title}
         basePath={basePath}
diff --git a/packages/esm-patient-common-lib/src/dashboards/DashboardExtension.tsx b/packages/esm-patient-common-lib/src/dashboards/DashboardExtension.tsx
index e91d2bdfe7..75d0a83529 100644
--- a/packages/esm-patient-common-lib/src/dashboards/DashboardExtension.tsx
+++ b/packages/esm-patient-common-lib/src/dashboards/DashboardExtension.tsx
@@ -10,9 +10,11 @@ export interface DashboardExtensionProps {
   title: string;
   basePath: string;
   moduleName?: string;
+  icon?: React.ReactElement;
 }
 
 export const DashboardExtension = ({
+  icon,
   path,
   title,
   basePath,
@@ -28,7 +30,7 @@ export const DashboardExtension = ({
         className={classNames('cds--side-nav__link', { 'active-left-nav-link': path === navLink })}
         to={`${basePath}/${encodeURIComponent(path)}`}
       >
-        {t(title)}
+        {icon} {t(title)}
       </ConfigurableLink>
     </div>
   );
diff --git a/packages/esm-patient-common-lib/src/dashboards/createDashboardLink.tsx b/packages/esm-patient-common-lib/src/dashboards/createDashboardLink.tsx
index 9fcfbcc051..6a680ef843 100644
--- a/packages/esm-patient-common-lib/src/dashboards/createDashboardLink.tsx
+++ b/packages/esm-patient-common-lib/src/dashboards/createDashboardLink.tsx
@@ -7,7 +7,13 @@ export const createDashboardLink = (db: DashboardLinkConfig) => {
   return ({ basePath }: { basePath: string }) => {
     return (
       <BrowserRouter>
-        <DashboardExtension basePath={basePath} title={db.title} path={db.path} moduleName={db.moduleName} />
+        <DashboardExtension
+          icon={db.icon}
+          basePath={basePath}
+          title={db.title}
+          path={db.path}
+          moduleName={db.moduleName}
+        />
       </BrowserRouter>
     );
   };
diff --git a/packages/esm-patient-common-lib/src/types/index.ts b/packages/esm-patient-common-lib/src/types/index.ts
index 7ef7db6a5a..68474ead67 100644
--- a/packages/esm-patient-common-lib/src/types/index.ts
+++ b/packages/esm-patient-common-lib/src/types/index.ts
@@ -4,6 +4,7 @@ export interface DashboardLinkConfig {
   path: string;
   title: string;
   moduleName: string;
+  icon?: React.ReactElement;
 }
 
 export interface DashboardConfig extends DashboardLinkConfig {