From 495b4e3a79da95d2b70b8ef6f8e28de218dd2893 Mon Sep 17 00:00:00 2001
From: Nawaz Dhandala <hello@nawazdhandala.com>
Date: Sat, 10 Jan 2026 10:27:16 +0000
Subject: [PATCH] feat: Add ChartPie and Heartbeat icons; update icon usage in
 DashboardNavbar

---
 Common/Types/Icon/IconProp.ts              |  2 ++
 Common/UI/Components/Icon/Icon.tsx         | 32 ++++++++++++++++++++++
 Dashboard/src/Components/NavBar/NavBar.tsx | 10 +++----
 3 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/Common/Types/Icon/IconProp.ts b/Common/Types/Icon/IconProp.ts
index 8047da298a..6cdb3f09a8 100644
--- a/Common/Types/Icon/IconProp.ts
+++ b/Common/Types/Icon/IconProp.ts
@@ -144,6 +144,8 @@ enum IconProp {
   FlowDiagram = "FlowDiagram",
   GitHub = "GitHub",
   Bug = "Bug",
+  ChartPie = "ChartPie",
+  Heartbeat = "Heartbeat",
 }
 
 export default IconProp;
diff --git a/Common/UI/Components/Icon/Icon.tsx b/Common/UI/Components/Icon/Icon.tsx
index 9bae8a152b..2aa688e8a9 100644
--- a/Common/UI/Components/Icon/Icon.tsx
+++ b/Common/UI/Components/Icon/Icon.tsx
@@ -1330,6 +1330,38 @@ const Icon: FunctionComponent<ComponentProps> = ({
         />
       </>,
     );
+  } else if (icon === IconProp.ChartPie) {
+    // Pie chart icon for dashboards - matching home page
+    return getSvgWrapper(
+      <>
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z"
+        />
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z"
+        />
+      </>,
+    );
+  } else if (icon === IconProp.Heartbeat) {
+    // Heartbeat/line chart icon for metrics - matching home page
+    return getSvgWrapper(
+      <>
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M2 12h3l2-4 3 8 3-6 2 4h7"
+        />
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M2 20h20"
+        />
+      </>,
+    );
   }
 
   return <></>;
diff --git a/Dashboard/src/Components/NavBar/NavBar.tsx b/Dashboard/src/Components/NavBar/NavBar.tsx
index ad94d19dea..064ec8ee0d 100644
--- a/Dashboard/src/Components/NavBar/NavBar.tsx
+++ b/Dashboard/src/Components/NavBar/NavBar.tsx
@@ -103,7 +103,7 @@ const DashboardNavbar: FunctionComponent<ComponentProps> = (
       route: RouteUtil.populateRouteParams(RouteMap[PageMap.LOGS] as Route),
       activeRoute: RouteMap[PageMap.LOGS],
       icon: IconProp.Logs,
-      iconColor: "purple",
+      iconColor: "amber",
       category: "Observability",
     },
     {
@@ -111,8 +111,8 @@ const DashboardNavbar: FunctionComponent<ComponentProps> = (
       description: "Monitor system metrics.",
       route: RouteUtil.populateRouteParams(RouteMap[PageMap.METRICS] as Route),
       activeRoute: RouteMap[PageMap.METRICS],
-      icon: IconProp.ChartBar,
-      iconColor: "green",
+      icon: IconProp.Heartbeat,
+      iconColor: "purple",
       category: "Observability",
     },
     {
@@ -121,7 +121,7 @@ const DashboardNavbar: FunctionComponent<ComponentProps> = (
       route: RouteUtil.populateRouteParams(RouteMap[PageMap.TRACES] as Route),
       activeRoute: RouteMap[PageMap.TRACES],
       icon: IconProp.RectangleStack,
-      iconColor: "blue",
+      iconColor: "yellow",
       category: "Observability",
     },
     {
@@ -152,7 +152,7 @@ const DashboardNavbar: FunctionComponent<ComponentProps> = (
         RouteMap[PageMap.DASHBOARDS] as Route,
       ),
       activeRoute: RouteMap[PageMap.DASHBOARDS],
-      icon: IconProp.Window,
+      icon: IconProp.ChartPie,
       iconColor: "indigo",
       category: "Analytics & Automation",
     },