376 lines
11 KiB
JavaScript
376 lines
11 KiB
JavaScript
// DashboardNavigation.js
|
|
import { useContext, useEffect, useState, useMemo } from 'react'
|
|
import {
|
|
Menu,
|
|
Flex,
|
|
Tag,
|
|
Space,
|
|
Button,
|
|
Tooltip,
|
|
Badge,
|
|
Divider,
|
|
Typography,
|
|
Popover
|
|
} from 'antd'
|
|
import { LoadingOutlined } from '@ant-design/icons'
|
|
import { AuthContext } from '../context/AuthContext'
|
|
import { SpotlightContext } from '../context/SpotlightContext'
|
|
import { ApiServerContext } from '../context/ApiServerContext'
|
|
import { NotificationContext } from '../context/NotificationContext'
|
|
import { useNavigate, useLocation } from 'react-router-dom'
|
|
import { Header } from 'antd/es/layout/layout'
|
|
import { useMediaQuery } from 'react-responsive'
|
|
import KeyboardShortcut from './KeyboardShortcut'
|
|
import UserProfilePopover from './UserProfilePopover'
|
|
|
|
import FarmControlLogo from '../../Logos/FarmControlLogo'
|
|
import FarmControlLogoSmall from '../../Logos/FarmControlLogoSmall'
|
|
import MenuIcon from '../../Icons/MenuIcon'
|
|
import ProductionIcon from '../../Icons/ProductionIcon'
|
|
import InventoryIcon from '../../Icons/InventoryIcon'
|
|
import FinanceIcon from '../../Icons/FinanceIcon'
|
|
import SalesIcon from '../../Icons/SalesIcon'
|
|
import PersonIcon from '../../Icons/PersonIcon'
|
|
import CloudIcon from '../../Icons/CloudIcon'
|
|
import BellIcon from '../../Icons/BellIcon'
|
|
import SearchIcon from '../../Icons/SearchIcon'
|
|
import SettingsIcon from '../../Icons/SettingsIcon'
|
|
import DeveloperIcon from '../../Icons/DeveloperIcon'
|
|
import { ElectronContext } from '../context/ElectronContext'
|
|
import DashboardWindowButtons from './DashboardWindowButtons'
|
|
import WebAppSwitcher from './WebAppSwitcher'
|
|
import {
|
|
getSidebarDefaultPath,
|
|
getSidebarMenuSections
|
|
} from '../../../database/Sidebars'
|
|
|
|
import { useAppUpdateContext } from '../context/AppUpdateContext'
|
|
|
|
const { Text } = Typography
|
|
|
|
const DashboardNavigation = () => {
|
|
const { userProfile } = useContext(AuthContext)
|
|
const { showSpotlight } = useContext(SpotlightContext)
|
|
const { connecting, connected } = useContext(ApiServerContext)
|
|
const { toggleNotificationCenter, unreadCount, notificationCenterVisible } =
|
|
useContext(NotificationContext)
|
|
const [apiServerState, setApiServerState] = useState('disconnected')
|
|
const navigate = useNavigate()
|
|
const location = useLocation()
|
|
const [selectedKey, setSelectedKey] = useState('production')
|
|
const [selectedMenuItem, setSelectedMenuItem] = useState({
|
|
key: 'production',
|
|
label: 'Production',
|
|
icon: <ProductionIcon />
|
|
})
|
|
const isMobile = useMediaQuery({ maxWidth: 768 })
|
|
const { platform, isElectron, isFullScreen, setSidebarViewMenu } =
|
|
useContext(ElectronContext)
|
|
const { availableUpdate, checkForUpdates } = useAppUpdateContext()
|
|
const mainMenuItems = useMemo(
|
|
() => [
|
|
{
|
|
key: 'production',
|
|
label: 'Production',
|
|
icon: <ProductionIcon />
|
|
},
|
|
{
|
|
key: 'inventory',
|
|
label: 'Inventory',
|
|
icon: <InventoryIcon />
|
|
},
|
|
{
|
|
key: 'sales',
|
|
label: 'Sales',
|
|
icon: <SalesIcon />
|
|
},
|
|
{
|
|
key: 'finance',
|
|
label: 'Finance',
|
|
icon: <FinanceIcon />
|
|
},
|
|
{
|
|
key: 'management',
|
|
label: 'Management',
|
|
icon: <SettingsIcon />
|
|
}
|
|
],
|
|
[]
|
|
)
|
|
|
|
const [userPopoverOpen, setUserPopoverOpen] = useState(false)
|
|
|
|
const userPopoverContent = (
|
|
<UserProfilePopover onClose={() => setUserPopoverOpen(false)} />
|
|
)
|
|
|
|
useEffect(() => {
|
|
const pathParts = location.pathname.split('/').filter(Boolean)
|
|
if (pathParts.length > 2) {
|
|
setSelectedMenuItem(
|
|
mainMenuItems.filter((item) => item.key == pathParts[1])[0]
|
|
)
|
|
setSelectedKey(pathParts[1]) // Return the section (production/management)
|
|
}
|
|
}, [location.pathname, mainMenuItems])
|
|
|
|
useEffect(() => {
|
|
if (connecting == true) {
|
|
setApiServerState('connecting')
|
|
} else if (connected == true) {
|
|
setApiServerState('connected')
|
|
} else {
|
|
setApiServerState('disconnected')
|
|
}
|
|
}, [connecting, connected])
|
|
|
|
const handleMainMenuClick = ({ key }) => {
|
|
navigate(getSidebarDefaultPath(key, { includeDev: import.meta.env.DEV }))
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (!isElectron || !setSidebarViewMenu) return
|
|
const includeDev = import.meta.env.DEV
|
|
const sections = getSidebarMenuSections({ includeDev })
|
|
setSidebarViewMenu(sections)
|
|
}, [isElectron, setSidebarViewMenu])
|
|
|
|
const showAppLogo =
|
|
(isElectron && platform == 'darwin' && isFullScreen == true) ||
|
|
(isElectron && platform != 'darwin')
|
|
const isMacOSApp = isElectron && platform == 'darwin'
|
|
const isOtherApp = isElectron && platform != 'darwin'
|
|
|
|
const showDesktopLogo = !isElectron && !isMobile
|
|
const showMobileLogo = !isElectron && isMobile
|
|
|
|
const navigationContents = (
|
|
<Flex style={{ width: '100%' }} align='center'>
|
|
{isMacOSApp ? <DashboardWindowButtons /> : null}
|
|
{showAppLogo == true && (
|
|
<FarmControlLogoSmall
|
|
style={{
|
|
fontSize: '46px',
|
|
height: '16px',
|
|
marginLeft: '15px',
|
|
marginRight: '8px'
|
|
}}
|
|
/>
|
|
)}
|
|
{showDesktopLogo == true ? (
|
|
<FarmControlLogo
|
|
style={{
|
|
fontSize: '200px',
|
|
height: '18px',
|
|
marginRight: '15px'
|
|
}}
|
|
/>
|
|
) : showMobileLogo == true ? (
|
|
<FarmControlLogoSmall
|
|
style={{
|
|
fontSize: '48px',
|
|
marginRight: isElectron ? '20px' : '25px'
|
|
}}
|
|
/>
|
|
) : null}
|
|
{isMobile && (
|
|
<Flex
|
|
gap={'small'}
|
|
align='center'
|
|
style={{
|
|
marginLeft: '16px',
|
|
minWidth: 0, // allow children to shrink
|
|
maxWidth: '100%' // responsive
|
|
}}
|
|
>
|
|
{selectedMenuItem.icon}
|
|
<Text
|
|
ellipsis
|
|
style={{
|
|
minWidth: 0, // CRUCIAL for flex children
|
|
maxWidth: '100%', // Responsive
|
|
whiteSpace: 'nowrap',
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
flex: 1 // Take available space, shrink as needed
|
|
}}
|
|
>
|
|
{selectedMenuItem.label}
|
|
</Text>
|
|
</Flex>
|
|
)}
|
|
<Menu
|
|
mode='horizontal'
|
|
className={isElectron ? 'electron-navigation' : null}
|
|
items={mainMenuItems}
|
|
style={{
|
|
flexWrap: 'wrap',
|
|
flexGrow: isMobile ? 0 : 1,
|
|
border: 0,
|
|
width: isMobile ? '64px' : 'unset'
|
|
}}
|
|
onClick={handleMainMenuClick}
|
|
selectedKeys={[selectedKey]}
|
|
overflowedIndicator={
|
|
<Button
|
|
type='text'
|
|
icon={<MenuIcon />}
|
|
style={{ marginBottom: '4px' }}
|
|
/>
|
|
}
|
|
/>
|
|
{isMobile && <div style={{ flexGrow: 1 }} />}
|
|
<Flex
|
|
gap={'small'}
|
|
align='center'
|
|
style={{ marginTop: '-2px', marginRight: '6px' }}
|
|
>
|
|
<Space>
|
|
<WebAppSwitcher />
|
|
<KeyboardShortcut
|
|
shortcut='alt+q'
|
|
hint='ALT Q'
|
|
onTrigger={() => showSpotlight()}
|
|
>
|
|
<Button
|
|
icon={<SearchIcon />}
|
|
type='text'
|
|
style={{ marginTop: '4px' }}
|
|
onClick={() => showSpotlight()}
|
|
/>
|
|
</KeyboardShortcut>
|
|
<Badge
|
|
count={unreadCount}
|
|
size='small'
|
|
offset={[-5, 8]}
|
|
style={{ padding: 0, fontWeight: 600 }}
|
|
>
|
|
<KeyboardShortcut
|
|
shortcut='alt+n'
|
|
hint='ALT N'
|
|
onTrigger={() => toggleNotificationCenter()}
|
|
>
|
|
<Button
|
|
icon={<BellIcon />}
|
|
type='text'
|
|
style={{ marginTop: '2px' }}
|
|
onClick={() => toggleNotificationCenter()}
|
|
/>
|
|
</KeyboardShortcut>
|
|
</Badge>
|
|
</Space>
|
|
{import.meta.env.MODE === 'development' && (
|
|
<Space>
|
|
{apiServerState === 'connected' ? (
|
|
<Tooltip title='Connected to api server' arrow={false}>
|
|
<Tag
|
|
color='success'
|
|
style={{ marginRight: 0 }}
|
|
icon={<CloudIcon />}
|
|
/>
|
|
</Tooltip>
|
|
) : null}
|
|
{apiServerState === 'connecting' ? (
|
|
<Tooltip title='Connecting to api erver...' arrow={false}>
|
|
<Tag
|
|
color='warning'
|
|
style={{ marginRight: 0 }}
|
|
icon={<LoadingOutlined />}
|
|
/>
|
|
</Tooltip>
|
|
) : null}
|
|
{apiServerState === 'disconnected' ? (
|
|
<Tooltip title='Disconnected from api server' arrow={false}>
|
|
<Tag
|
|
color='error'
|
|
style={{ marginRight: 0 }}
|
|
icon={<CloudIcon />}
|
|
/>
|
|
</Tooltip>
|
|
) : null}
|
|
<Tooltip title='Developer' arrow={false}>
|
|
<Tag
|
|
color='yellow'
|
|
style={{ marginRight: 0 }}
|
|
icon={<DeveloperIcon />}
|
|
onClick={() => {
|
|
navigate('/dashboard/developer/sessionstorage')
|
|
}}
|
|
/>
|
|
</Tooltip>
|
|
</Space>
|
|
)}
|
|
{userProfile ? (
|
|
<Space>
|
|
<Popover
|
|
content={userPopoverContent}
|
|
placement='bottomRight'
|
|
trigger='hover'
|
|
open={userPopoverOpen}
|
|
onOpenChange={setUserPopoverOpen}
|
|
arrow={false}
|
|
>
|
|
<Tag style={{ marginRight: 0 }} icon={<PersonIcon />}>
|
|
{!isMobile && (userProfile?.name || userProfile.username)}
|
|
</Tag>
|
|
</Popover>
|
|
</Space>
|
|
) : null}
|
|
{isElectron && availableUpdate ? (
|
|
<Tag
|
|
icon={<CloudIcon />}
|
|
style={{ cursor: 'pointer', margin: '2px 0 0 0' }}
|
|
color='cyan'
|
|
onClick={() => checkForUpdates()}
|
|
>
|
|
Update Available
|
|
</Tag>
|
|
) : null}
|
|
</Flex>
|
|
{isOtherApp ? <DashboardWindowButtons /> : null}
|
|
</Flex>
|
|
)
|
|
|
|
return (
|
|
<>
|
|
{isElectron ? (
|
|
<Flex
|
|
className={`ant-menu-horizontal ant-menu-light${!notificationCenterVisible ? ' electron-navigation-wrapper' : ''}`}
|
|
style={{ lineHeight: '40px', padding: '0 2px 0 2px' }}
|
|
>
|
|
{navigationContents}
|
|
</Flex>
|
|
) : (
|
|
<Flex vertical>
|
|
<Header
|
|
style={{
|
|
width: '100vw',
|
|
padding: 0,
|
|
marginBottom: '0.1px',
|
|
background: 'unset'
|
|
}}
|
|
theme='light'
|
|
className='ant-menu-horizontal'
|
|
>
|
|
<Flex
|
|
gap={'large'}
|
|
align='center'
|
|
className='ant-menu-light'
|
|
style={{
|
|
padding: '0 26px',
|
|
height: '100%',
|
|
borderBottom: '1px solid rgba(5, 5, 5, 0.00)'
|
|
}}
|
|
>
|
|
{navigationContents}
|
|
</Flex>
|
|
<Divider style={{ margin: 0 }} />
|
|
</Header>
|
|
</Flex>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default DashboardNavigation
|