feat: Add ChartPie and Heartbeat icons; update icon usage in DashboardNavbar

Common/Types/Icon/IconProp.ts

@@ -144,6 +144,8 @@ enum IconProp {
   FlowDiagram = "FlowDiagram",
   GitHub = "GitHub",
   Bug = "Bug",
+  ChartPie = "ChartPie",
+  Heartbeat = "Heartbeat",
 }
 
 export default IconProp;

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 <></>;

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",
     },