From 05dcca4d8243e5a8da1ce3cc4590fa337e443d58 Mon Sep 17 00:00:00 2001
From: leandrofars <leandrofars@gmail.com>
Date: Thu, 5 Sep 2024 13:04:42 -0300
Subject: [PATCH] feat(frotnend): devices tooltip warn to upgrade to business
 plan

---
 frontend/src/pages/devices/cwmp/[...id].js | 21 ++++++++-----
 frontend/src/pages/devices/usp/[...id].js  | 34 ++++++++++++----------
 2 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/frontend/src/pages/devices/cwmp/[...id].js b/frontend/src/pages/devices/cwmp/[...id].js
index 303f0ad..b30ac99 100644
--- a/frontend/src/pages/devices/cwmp/[...id].js
+++ b/frontend/src/pages/devices/cwmp/[...id].js
@@ -78,42 +78,47 @@ const Page = () => {
                         label="Wi-Fi" 
                         onClick={()=>{router.push(`/devices/cwmp/${deviceID}/wifi`)}} 
                         value={"wifi"}/>
+                        <Tooltip title="Upgrade to Business Plan" placement="bottom">
                         <Tab 
                         icon={<SvgIcon><SignalIcon/></SvgIcon>} 
                         iconPosition={"end"} 
                         label="Site Survey" 
                         onClick={()=>{router.push(`/devices/cwmp/${deviceID}/site-survey`)}} 
                         value={"site-survey"} 
-                        disabled={true}/>
+                        style={{opacity:"0.5", cursor:"default"}}/></Tooltip>
+                        <Tooltip title="Upgrade to Business Plan" placement="bottom">
                         <Tab 
                         icon={<SvgIcon><DevicePhoneMobile/></SvgIcon>} 
                         iconPosition={"end"} 
                         label="Connected Devices" 
-                        disabled={true}
+                        style={{opacity:"0.5", cursor:"default"}}
                         onClick={()=>{router.push(`/devices/cwmp/${deviceID}/connected-devices`)}} 
                         value={"connected-devices"} 
-                        />
+                        /></Tooltip>
+                        <Tooltip title="Upgrade to Business Plan" placement="bottom">
                         <Tab 
                         icon={<SvgIcon><WrenchScrewDriverIcon/></SvgIcon>} 
                         iconPosition={"end"} 
                         label="Diagnostic" 
                         onClick={()=>{router.push(`/devices/cwmp/${deviceID}/diagnostic`)}} 
                         value={"diagnostic"} 
-                        disabled={true}/>
+                        style={{opacity:"0.5", cursor:"default"}}/></Tooltip>
+                        <Tooltip title="Upgrade to Business Plan" placement="bottom">
                         <Tab 
                         icon={<SvgIcon><ServerStackIcon/></SvgIcon>} 
                         iconPosition={"end"} 
                         label="Ports" 
                         onClick={()=>{router.push(`/devices/usp/${deviceID}/ports`)}}
-                        disabled={true} 
-                        value={"ports"} />
+                        style={{opacity:"0.5", cursor:"default"}} 
+                        value={"ports"} /></Tooltip>
+                        <Tooltip title="Upgrade to Business Plan" placement="bottom">
                         <Tab 
                         icon={<SvgIcon><CommandLineIcon/></SvgIcon>} 
                         iconPosition={"end"} 
                         label="Actions" 
                         onClick={()=>{router.push(`/devices/usp/${deviceID}/actions`)}}
-                        disabled={true} 
-                        value={"actions"} />
+                        style={{opacity:"0.5", cursor:"default"}} 
+                        value={"actions"} /></Tooltip>
                         <Tab 
                         value={"msg"} 
                         onClick={()=>{router.push(`/devices/cwmp/${deviceID}/msg`)}} 
diff --git a/frontend/src/pages/devices/usp/[...id].js b/frontend/src/pages/devices/usp/[...id].js
index b5fd4b5..986c10b 100644
--- a/frontend/src/pages/devices/usp/[...id].js
+++ b/frontend/src/pages/devices/usp/[...id].js
@@ -75,51 +75,53 @@ const Page = () => {
                 }}
                 mb={3}>
                     <Tabs value={router.query.id[1]}  aria-label="icon label tabs example">
+                        <Tooltip title="Upgrade to Business Plan" placement="bottom">
                         <Tab 
                         icon={<SvgIcon><WifiIcon/></SvgIcon>} 
                         iconPosition={"end"} 
                         label="Wi-Fi" 
-                        onClick={()=>{router.push(`/devices/usp/${deviceID}/wifi`)}}
-                        disabled={true} 
+                        style={{cursor:"default", opacity: 0.5}}
                         value={"wifi"}/>
+                        </Tooltip>
+                        <Tooltip title="Upgrade to Business Plan" placement="bottom">
                         <Tab 
                             icon={<SvgIcon><SignalIcon/></SvgIcon>} 
                             iconPosition={"end"} 
                             label="Site Survey" 
-                            style={{opacity:"0.5"}}
-                            onClick={()=>{router.push(`/devices/usp/${deviceID}/site-survey`)}}
-                            disabled={true} 
+                            style={{cursor:"default", opacity: 0.5}} 
                             value={"site-survey"} 
                         />
+                        </Tooltip>
+                        <Tooltip title="Upgrade to Business Plan" placement="bottom">
                         <Tab 
                         icon={<SvgIcon><DevicePhoneMobile/></SvgIcon>} 
                         iconPosition={"end"} 
                         label="Connected Devices" 
-                        onClick={()=>{router.push(`/devices/usp/${deviceID}/connected-devices`)}}
-                        disabled={true} 
+                        style={{cursor:"default", opacity: 0.5}}
                         value={"connected-devices"} 
                         />
+                        </Tooltip>
+                        <Tooltip title="Upgrade to Business Plan" placement="bottom">
                         <Tab 
                         icon={<SvgIcon><WrenchScrewDriverIcon/></SvgIcon>} 
                         iconPosition={"end"} 
                         label="Diagnostic" 
-                        onClick={()=>{router.push(`/devices/usp/${deviceID}/diagnostic`)}}
-                        disabled={true} 
-                        value={"diagnostic"} />
+                        style={{cursor:"default", opacity: 0.5}}
+                        value={"diagnostic"} /></Tooltip>
+                        <Tooltip title="Upgrade to Business Plan" placement="bottom">
                         <Tab 
                         icon={<SvgIcon><ServerStackIcon/></SvgIcon>} 
                         iconPosition={"end"} 
                         label="Ports" 
-                        onClick={()=>{router.push(`/devices/usp/${deviceID}/ports`)}}
-                        disabled={true} 
-                        value={"ports"} />
+                        style={{cursor:"default", opacity: 0.5}}
+                        value={"ports"} /></Tooltip>
+                        <Tooltip title="Upgrade to Business Plan" placement="bottom">
                         <Tab 
                         icon={<SvgIcon><CommandLineIcon/></SvgIcon>} 
                         iconPosition={"end"} 
                         label="Actions" 
-                        onClick={()=>{router.push(`/devices/usp/${deviceID}/actions`)}}
-                        disabled={true} 
-                        value={"actions"} />
+                        style={{cursor:"default", opacity: 0.5}}
+                        value={"actions"} /></Tooltip>
                         <Tab 
                         value={"discovery"} 
                         onClick={()=>{router.push(`/devices/usp/${deviceID}/discovery`)}}