louis/oktopus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): layout without disabled tabs

Browse Source
This commit is contained in:
leandrofars 2026-02-20 11:12:18 -03:00
parent 347bbebb5a
commit 96a41aa5ea
5 changed files with 108 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

174
frontend/src/layouts/dashboard/config.js
View File

@ -14,6 +14,8 @@ import UserIcon from '@heroicons/react/24/solid/UserIcon';
import BuildingOffice2Icon from '@heroicons/react/24/solid/BuildingOffice2Icon'; import BuildingOffice2Icon from '@heroicons/react/24/solid/BuildingOffice2Icon';
import BookOpenIcon from '@heroicons/react/24/solid/BookOpenIcon'; import BookOpenIcon from '@heroicons/react/24/solid/BookOpenIcon';
import CommandLineIcon from '@heroicons/react/24/solid/CommandLineIcon'; import CommandLineIcon from '@heroicons/react/24/solid/CommandLineIcon';
import DocumentMagnifyingGlassIcon from '@heroicons/react/24/solid/DocumentMagnifyingGlassIcon';
import MapIcon from '@heroicons/react/24/solid/MapIcon';
export const items = [ export const items = [
{ {
@ -34,44 +36,6 @@ export const items = [
</SvgIcon> </SvgIcon>
) )
}, },
{
title: 'Mass Actions',
icon: (
<SvgIcon fontSize="small">
<RectangleGroupIcon color='gray'/>
</SvgIcon>
),
disabled: true,
children: [
{
title: 'Firmware Update',
icon: (
<SvgIcon fontSize="small">
<ArrowDownOnSquareStackIcon color='gray'/>
</SvgIcon>
),
disabled: true
},
{
title: 'Message',
disabled: true,
icon: (
<SvgIcon fontSize="small">
<EnvelopeIcon color='gray'/>
</SvgIcon>
)
},
]
},
{
title: 'Scripts',
disabled: true,
icon: (
<SvgIcon fontSize="small">
<CommandLineIcon color='gray'/>
</SvgIcon>
)
},
{ {
title: 'Credentials', title: 'Credentials',
path: '/credentials', path: '/credentials',
@ -81,33 +45,6 @@ export const items = [
</SvgIcon> </SvgIcon>
) )
}, },
{
title: 'Access Control',
disabled: true,
icon: (
<SvgIcon fontSize="small">
<UserGroupIcon color='gray'/>
</SvgIcon>
),
children: [
{
title: 'Tenants',
disabled: true,
icon: (
<SvgIcon fontSize="small">
<BuildingOffice2Icon color='gray'/>
</SvgIcon>
)
},
{
title: 'Roles',
disabled: true,
icon: (
<SvgIcon fontSize="small">
<ShieldCheckIcon color='gray'/>
</SvgIcon>
)
},
{ {
title: 'Users', title: 'Users',
path: '/access-control/users', path: '/access-control/users',
@ -117,17 +54,6 @@ export const items = [
</SvgIcon> </SvgIcon>
) )
}, },
]
},
{
title: 'File Server',
disabled: true,
icon: (
<SvgIcon fontSize="small">
<FolderIcon color='gray'/>
</SvgIcon>
)
},
{ {
title: 'Settings', title: 'Settings',
path: '/settings', path: '/settings',
@ -146,7 +72,101 @@ export const items = [
</SvgIcon> </SvgIcon>
), ),
external: true, external: true,
}, }
// {
// title: 'Mass Actions',
// icon: (
// <SvgIcon fontSize="small">
// <RectangleGroupIcon color='gray'/>
// </SvgIcon>
// ),
// disabled: true,
// children: [
// {
// title: 'Firmware Update',
// icon: (
// <SvgIcon fontSize="small">
// <ArrowDownOnSquareStackIcon color='gray'/>
// </SvgIcon>
// ),
// disabled: true
// },
// {
// title: 'Message',
// disabled: true,
// icon: (
// <SvgIcon fontSize="small">
// <EnvelopeIcon color='gray'/>
// </SvgIcon>
// )
// },
// ]
// },
// {
// title: 'Scripts',
// disabled: true,
// icon: (
// <SvgIcon fontSize="small">
// <CommandLineIcon color='gray'/>
// </SvgIcon>
// )
// },
// {
// title: "Map",
// icon: (
// <SvgIcon fontSize="small">
// <MapIcon color={"gray"} />
// </SvgIcon>
// ),
// disabled: true,
// },
// {
// title: 'Access Control',
// disabled: true,
// icon: (
// <SvgIcon fontSize="small">
// <UserGroupIcon color='gray'/>
// </SvgIcon>
// ),
// children: [
// {
// title: 'Tenants',
// disabled: true,
// icon: (
// <SvgIcon fontSize="small">
// <BuildingOffice2Icon color='gray'/>
// </SvgIcon>
// )
// },
// {
// title: 'Roles',
// disabled: true,
// icon: (
// <SvgIcon fontSize="small">
// <ShieldCheckIcon color='gray'/>
// </SvgIcon>
// )
// },
// ]
// },
// {
// title: 'File Server',
// disabled: true,
// icon: (
// <SvgIcon fontSize="small">
// <FolderIcon color='gray'/>
// </SvgIcon>
// )
// },
// {
// title: "Audit Trail",
// disabled: true,
// icon: (
// <SvgIcon fontSize="small">
// <DocumentMagnifyingGlassIcon color='gray'/>
// </SvgIcon>
// ),
// }
]; ];
/* /*

2
frontend/src/layouts/dashboard/side-nav-item.js
View File

@ -60,6 +60,8 @@ export const SideNavItem = (props) => {
...(active && { ...(active && {
backgroundColor: 'rgba(255, 255, 255, 0.04)' backgroundColor: 'rgba(255, 255, 255, 0.04)'
}), }),
width: "100%",
minHeight: "48px",
'&:hover': { '&:hover': {
backgroundColor: 'rgba(255, 255, 255, 0.04)' backgroundColor: 'rgba(255, 255, 255, 0.04)'
} }

4
frontend/src/layouts/dashboard/top-nav.js
View File

@ -28,7 +28,7 @@ import { AccountPopover } from './account-popover';
import { useAuth } from 'src/hooks/use-auth'; import { useAuth } from 'src/hooks/use-auth';
import { WsContext } from 'src/contexts/socketio-context'; import { WsContext } from 'src/contexts/socketio-context';
import { useContext, useEffect } from 'react'; import { useContext, useEffect } from 'react';
import CurrencyDollarIcon from '@heroicons/react/24/outline/CurrencyDollarIcon'; import TrophyIcon from '@heroicons/react/24/outline/TrophyIcon';
const SIDE_NAV_WIDTH = 280; const SIDE_NAV_WIDTH = 280;
const TOP_NAV_HEIGHT = 64; const TOP_NAV_HEIGHT = 64;
@ -104,7 +104,7 @@ export const TopNav = (props) => {
<Tooltip title="Upgrade to Pro"> <Tooltip title="Upgrade to Pro">
<IconButton> <IconButton>
<SvgIcon fontSize="small"> <SvgIcon fontSize="small">
<CurrencyDollarIcon/> <TrophyIcon/>
</SvgIcon> </SvgIcon>
</IconButton> </IconButton>
</Tooltip> </Tooltip>

4
frontend/src/pages/devices/cwmp/[...id].js
View File

@ -75,7 +75,7 @@ const Page = () => {
justifyContent:'center', justifyContent:'center',
}}> }}>
<Tabs value={router.query.id[1]} aria-label="icon label tabs example" variant='scrollable'> <Tabs value={router.query.id[1]} aria-label="icon label tabs example" variant='scrollable'>
<Tooltip placement="bottom"> {/*<Tooltip placement="bottom">
<Tab <Tab
icon={<SvgIcon><WifiIcon/></SvgIcon>} icon={<SvgIcon><WifiIcon/></SvgIcon>}
iconPosition={"end"} iconPosition={"end"}
@ -138,7 +138,7 @@ const Page = () => {
iconPosition={"end"} iconPosition={"end"}
label="Location" label="Location"
style={{opacity:"0.5", cursor:"default"}} style={{opacity:"0.5", cursor:"default"}}
value={"location"} /></Tooltip> value={"location"} /></Tooltip> */}
<Tab <Tab
value={"msg"} value={"msg"}
onClick={()=>{router.push(`/devices/cwmp/${deviceID}/msg`)}} onClick={()=>{router.push(`/devices/cwmp/${deviceID}/msg`)}}

4
frontend/src/pages/devices/usp/[...id].js
View File

@ -77,7 +77,7 @@ const Page = () => {
justifyContent:'center' justifyContent:'center'
}}> }}>
<Tabs value={router.query.id[1]} aria-label="icon label tabs example" variant='scrollable'> <Tabs value={router.query.id[1]} aria-label="icon label tabs example" variant='scrollable'>
<Tooltip placement="bottom"> {/*<Tooltip placement="bottom">
<Tab <Tab
icon={<SvgIcon><WifiIcon/></SvgIcon>} icon={<SvgIcon><WifiIcon/></SvgIcon>}
iconPosition={"end"} iconPosition={"end"}
@ -144,7 +144,7 @@ const Page = () => {
iconPosition={"end"} iconPosition={"end"}
label="Actions" label="Actions"
style={{cursor:"default", opacity: 0.5}} style={{cursor:"default", opacity: 0.5}}
value={"actions"} /></Tooltip> value={"actions"} /></Tooltip> */}
<Tab <Tab
value={"discovery"} value={"discovery"}
onClick={()=>{router.push(`/devices/usp/${deviceID}/discovery`)}} onClick={()=>{router.push(`/devices/usp/${deviceID}/discovery`)}}