From 8e427fc7e5228c306410ce725f00296c472410f0 Mon Sep 17 00:00:00 2001
From: leandrofars <leandrofars@gmail.com>
Date: Thu, 15 May 2025 13:10:38 -0300
Subject: [PATCH] feat(frontend): friendly upgrade to pro message

---
 frontend/src/layouts/dashboard/top-nav.js  | 17 ++++++++++++++---
 frontend/src/pages/devices/cwmp/[...id].js | 18 +++++++++---------
 frontend/src/pages/devices/usp/[...id].js  | 18 +++++++++---------
 3 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/frontend/src/layouts/dashboard/top-nav.js b/frontend/src/layouts/dashboard/top-nav.js
index 0af35e1..0b6e4fe 100644
--- a/frontend/src/layouts/dashboard/top-nav.js
+++ b/frontend/src/layouts/dashboard/top-nav.js
@@ -18,7 +18,8 @@ import {
   DialogActions,
   DialogContent,
   DialogContentText,
-  Button
+  Button,
+  Link
 } from '@mui/material';
 import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
 import { alpha } from '@mui/material/styles';
@@ -27,6 +28,7 @@ import { AccountPopover } from './account-popover';
 import { useAuth } from 'src/hooks/use-auth';
 import { WsContext } from 'src/contexts/socketio-context';
 import { useContext, useEffect } from 'react';
+import CurrencyDollarIcon from '@heroicons/react/24/outline/CurrencyDollarIcon';
 
 const SIDE_NAV_WIDTH = 280;
 const TOP_NAV_HEIGHT = 64;
@@ -91,13 +93,22 @@ export const TopNav = (props) => {
             direction="row"
             spacing={2}
           >
-            {/*<Tooltip title="Contacts">
+            {/* <Tooltip title="Contacts">
               <IconButton>
                 <SvgIcon fontSize="small">
                   <UsersIcon />
                 </SvgIcon>
               </IconButton>
-            </Tooltip>*/}
+            </Tooltip> */}
+            <Link href='https://www.oktopus.app.br/pricing' underline="none" target='_blank'>
+              <Tooltip title="Upgrade to Pro">
+                <IconButton>
+                  <SvgIcon fontSize="small">
+                    <CurrencyDollarIcon/>
+                  </SvgIcon>
+                </IconButton>
+              </Tooltip>
+            </Link>
             {/*<Tooltip title="Notifications">
               <IconButton>
                 <Badge
diff --git a/frontend/src/pages/devices/cwmp/[...id].js b/frontend/src/pages/devices/cwmp/[...id].js
index 6168ac4..e0bd369 100644
--- a/frontend/src/pages/devices/cwmp/[...id].js
+++ b/frontend/src/pages/devices/cwmp/[...id].js
@@ -75,21 +75,21 @@ const Page = () => {
                     justifyContent:'center',
                 }}>                                        
                     <Tabs value={router.query.id[1]}  aria-label="icon label tabs example" variant='scrollable'>
-                        <Tooltip title="Upgrade to Business Plan" placement="bottom">
+                        <Tooltip placement="bottom">
                         <Tab 
                         icon={<SvgIcon><WifiIcon/></SvgIcon>} 
                         iconPosition={"end"} 
                         label="Wi-Fi" 
                         value={"wifi"}
                         style={{opacity:"0.5", cursor:"default"}}/></Tooltip>
-                        <Tooltip title="Upgrade to Business Plan" placement="bottom">
+                        <Tooltip placement="bottom">
                         <Tab 
                         icon={<SvgIcon><SignalIcon/></SvgIcon>} 
                         iconPosition={"end"} 
                         label="Site Survey" 
                         value={"site-survey"} 
                         style={{opacity:"0.5", cursor:"default"}}/></Tooltip>
-                        <Tooltip title="Upgrade to Business Plan" placement="bottom">
+                        <Tooltip placement="bottom">
                         <Tab 
                         icon={<SvgIcon><DevicePhoneMobile/></SvgIcon>} 
                         iconPosition={"end"} 
@@ -97,42 +97,42 @@ const Page = () => {
                         style={{opacity:"0.5", cursor:"default"}}
                         value={"connected-devices"} 
                         /></Tooltip>
-                        <Tooltip title="Upgrade to Business Plan" placement="bottom">
+                        <Tooltip placement="bottom">
                         <Tab 
                         icon={<SvgIcon><WrenchScrewDriverIcon/></SvgIcon>} 
                         iconPosition={"end"} 
                         label="Diagnostic" 
                         value={"diagnostic"} 
                         style={{opacity:"0.5", cursor:"default"}}/></Tooltip>
-                        <Tooltip title="Upgrade to Business Plan" placement="bottom">
+                        <Tooltip placement="bottom">
                         <Tab 
                         icon={<SvgIcon><ServerStackIcon/></SvgIcon>} 
                         iconPosition={"end"} 
                         label="Ports" 
                         style={{opacity:"0.5", cursor:"default"}} 
                         value={"ports"} /></Tooltip>
-                        <Tooltip title="Upgrade to Business Plan" placement="bottom">
+                        <Tooltip placement="bottom">
                         <Tab 
                         icon={<SvgIcon><ArrowTrendingUpIcon/></SvgIcon>} 
                         iconPosition={"end"} 
                         label="Historic" 
                         value={"historic"} 
                         style={{opacity:"0.5", cursor:"default"}}/></Tooltip>
-                        <Tooltip title="Upgrade to Business Plan" placement="bottom">
+                        <Tooltip placement="bottom">
                         <Tab 
                         icon={<SvgIcon><CommandLineIcon/></SvgIcon>} 
                         iconPosition={"end"} 
                         label="Actions" 
                         style={{opacity:"0.5", cursor:"default"}} 
                         value={"actions"} /></Tooltip>
-                        <Tooltip title="Upgrade to Business Plan" placement="bottom">
+                        <Tooltip placement="bottom">
                         <Tab 
                         icon={<SvgIcon><DocumentTextIcon/></SvgIcon>} 
                         iconPosition={"end"} 
                         label="Logs" 
                         style={{opacity:"0.5", cursor:"default"}} 
                         value={"logs"} /></Tooltip>
-                        <Tooltip title="Upgrade to Business Plan" placement="bottom">
+                        <Tooltip placement="bottom">
                         <Tab 
                         icon={<SvgIcon><MapPinIcon/></SvgIcon>} 
                         iconPosition={"end"} 
diff --git a/frontend/src/pages/devices/usp/[...id].js b/frontend/src/pages/devices/usp/[...id].js
index a42bd41..6769a1f 100644
--- a/frontend/src/pages/devices/usp/[...id].js
+++ b/frontend/src/pages/devices/usp/[...id].js
@@ -77,7 +77,7 @@ const Page = () => {
                 justifyContent:'center'
                 }}>
                     <Tabs value={router.query.id[1]}  aria-label="icon label tabs example" variant='scrollable'>
-                        <Tooltip title="Upgrade to Business Plan" placement="bottom">
+                        <Tooltip placement="bottom">
                         <Tab 
                         icon={<SvgIcon><WifiIcon/></SvgIcon>} 
                         iconPosition={"end"} 
@@ -85,7 +85,7 @@ const Page = () => {
                         style={{cursor:"default", opacity: 0.5}}
                         value={"wifi"}/>
                         </Tooltip>
-                        <Tooltip title="Upgrade to Business Plan" placement="bottom">
+                        <Tooltip placement="bottom">
                         <Tab 
                             icon={<SvgIcon><SignalIcon/></SvgIcon>} 
                             iconPosition={"end"} 
@@ -94,7 +94,7 @@ const Page = () => {
                             value={"site-survey"} 
                         />
                         </Tooltip>
-                        <Tooltip title="Upgrade to Business Plan" placement="bottom">
+                        <Tooltip placement="bottom">
                         <Tab 
                         icon={<SvgIcon><DevicePhoneMobile/></SvgIcon>} 
                         iconPosition={"end"} 
@@ -103,42 +103,42 @@ const Page = () => {
                         value={"connected-devices"} 
                         />
                         </Tooltip>
-                        <Tooltip title="Upgrade to Business Plan" placement="bottom">
+                        <Tooltip placement="bottom">
                         <Tab 
                         icon={<SvgIcon><WrenchScrewDriverIcon/></SvgIcon>} 
                         iconPosition={"end"} 
                         label="Diagnostic" 
                         style={{cursor:"default", opacity: 0.5}}
                         value={"diagnostic"} /></Tooltip>
-                        <Tooltip title="Upgrade to Business Plan" placement="bottom">
+                        <Tooltip placement="bottom">
                         <Tab 
                         icon={<SvgIcon><ServerStackIcon/></SvgIcon>} 
                         iconPosition={"end"} 
                         label="Ports" 
                         style={{cursor:"default", opacity: 0.5}}
                         value={"ports"} /></Tooltip>
-                        <Tooltip title="Upgrade to Business Plan" placement="bottom">
+                        <Tooltip placement="bottom">
                         <Tab 
                         icon={<SvgIcon><ArrowTrendingUp/></SvgIcon>} 
                         iconPosition={"end"} 
                         label="Historic" 
                         style={{cursor:"default", opacity: 0.5}}
                         value={"historic"} /></Tooltip>
-                        <Tooltip title="Upgrade to Business Plan" placement="bottom">
+                        <Tooltip placement="bottom">
                         <Tab 
                         icon={<SvgIcon><CubeTransparentIcon/></SvgIcon>} 
                         iconPosition={"end"} 
                         label="LCM" 
                         style={{cursor:"default", opacity: 0.5}}
                         value={"lcm"} /></Tooltip>
-                        <Tooltip title="Upgrade to Business Plan" placement="bottom">
+                        <Tooltip placement="bottom">
                         <Tab 
                         icon={<SvgIcon><MapPin/></SvgIcon>} 
                         iconPosition={"end"} 
                         label="Location" 
                         style={{cursor:"default", opacity: 0.5}}
                         value={"location"} /></Tooltip>
-                        <Tooltip title="Upgrade to Business Plan" placement="bottom">
+                        <Tooltip placement="bottom">
                         <Tab 
                         icon={<SvgIcon><CommandLineIcon/></SvgIcon>} 
                         iconPosition={"end"}