From ea12eeebcb5556f45f87c2cc95393204c26acef3 Mon Sep 17 00:00:00 2001
From: Dotty <dottykurmi123@gmail.com>
Date: Fri, 29 Nov 2024 13:01:07 -0400
Subject: [PATCH] [TM-1392] edit toolgle in secDashboard

---
 src/components/elements/Toggle/Toggle.tsx   |  2 +-
 src/pages/dashboard/index.page.tsx          | 10 ++++++++--
 src/pages/dashboard/mockedData/dashboard.ts |  6 +++---
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/elements/Toggle/Toggle.tsx b/src/components/elements/Toggle/Toggle.tsx
index 02c388aad..6e8da9ae2 100644
--- a/src/components/elements/Toggle/Toggle.tsx
+++ b/src/components/elements/Toggle/Toggle.tsx
@@ -56,7 +56,7 @@ const Toggle = (props: ToggleProps) => {
           transform: `translateX(calc(${buttonRefs.current[activeIndex]?.offsetLeft || 0}px - 4px))`
         }}
       />
-      {items.map((tab, index) => (
+      {items.map((tab: TogglePropsItem, index) => (
         <button
           key={tab.key}
           ref={el => (buttonRefs.current[index] = el)}
diff --git a/src/pages/dashboard/index.page.tsx b/src/pages/dashboard/index.page.tsx
index a5bbb8601..0728356f1 100644
--- a/src/pages/dashboard/index.page.tsx
+++ b/src/pages/dashboard/index.page.tsx
@@ -85,8 +85,14 @@ const Dashboard = () => {
     isUserAllowed
   } = useDashboardData(filters);
 
-  const dataToggle = ["Absolute", "Relative"];
-  const dataToggleGraphic = ["Table", "Graph"];
+  const dataToggle = [
+    { tooltip: { key: "Absolute", render: "Absolute" } },
+    { tooltip: { key: "Relative", render: "Relative" } }
+  ];
+  const dataToggleGraphic = [
+    { tooltip: { key: "Table", render: "Table" } },
+    { tooltip: { key: "Graph", render: "Graph" } }
+  ];
 
   useEffect(() => {
     refetchTotalSectionHeader();
diff --git a/src/pages/dashboard/mockedData/dashboard.ts b/src/pages/dashboard/mockedData/dashboard.ts
index 9d90e569a..4af76ca33 100644
--- a/src/pages/dashboard/mockedData/dashboard.ts
+++ b/src/pages/dashboard/mockedData/dashboard.ts
@@ -1,14 +1,14 @@
 export const LABEL_LEGEND = [
   {
-    label: "Total",
+    tooltip: { key: "Total", render: "Total" },
     color: "bg-blueCustom-900"
   },
   {
-    label: "Non-Profit",
+    tooltip: { key: "Non-Profit", render: "Non-Profit" },
     color: "bg-secondary-600"
   },
   {
-    label: "Enterprise",
+    tooltip: { key: "Enterprise", render: "Enterprise" },
     color: "bg-primary"
   }
 ];