From 439286908eb333ed12f9ddff281c8dc94d3a7329 Mon Sep 17 00:00:00 2001
From: NyashaMuusha <nyashamuusha@gmail.com>
Date: Thu, 29 Aug 2024 10:24:45 +0200
Subject: [PATCH] Navigate to notifications page on "New/Open" IconButton click

---
 .../src/components/dashboard/Dashboard.tsx     | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/JeMPI_Apps/JeMPI_UI/src/components/dashboard/Dashboard.tsx b/JeMPI_Apps/JeMPI_UI/src/components/dashboard/Dashboard.tsx
index 9b7b6e47c..f6009506f 100644
--- a/JeMPI_Apps/JeMPI_UI/src/components/dashboard/Dashboard.tsx
+++ b/JeMPI_Apps/JeMPI_UI/src/components/dashboard/Dashboard.tsx
@@ -2,6 +2,7 @@ import {
   Box,
   Container,
   Grid,
+  IconButton,
   Stack,
   Tab,
   Tabs,
@@ -21,6 +22,7 @@ import ConfusionMatrix from './widgets/ConfusionMatrixWidget'
 import { useState } from 'react'
 import { ImportProcessWidget } from './widgets/ImportProcessWidget'
 import { useDashboardData } from 'hooks/useDashboardData'
+import { useNavigate } from 'react-router-dom'
 interface TabPanelProps {
   children?: React.ReactNode
   index: number
@@ -53,6 +55,8 @@ const tabProps = (index: number) => {
 const Dashboard = () => {
   const dashboardData = useDashboardData()
   const [currentTabIndex, setCurrentTabIndex] = useState(0)
+
+  const navigate = useNavigate()
   const handleChangeTab = (event: React.SyntheticEvent, newValue: number) => {
     setCurrentTabIndex(newValue)
   }
@@ -146,7 +150,19 @@ const Dashboard = () => {
                                 : 0
                             }
                             icon={
-                              <NotificationAdd sx={{ fontSize: '3.5rem' }} />
+                              <IconButton
+                                onClick={() => {
+                                  navigate('/notifications')
+                                }}
+                                sx={{
+                                  backgroundColor: '#76ff03',
+                                  '&:hover': {
+                                    backgroundColor: '#64dd17'
+                                  }
+                                }}
+                              >
+                                <NotificationAdd sx={{ fontSize: '3.5rem' }} />
+                              </IconButton>
                             }
                             iconBackgroundColor={'#76ff03'}
                           />