246 lines
12 KiB
TypeScript
246 lines
12 KiB
TypeScript
// Next Imports
|
|
import { useParams } from 'next/navigation'
|
|
|
|
// MUI Imports
|
|
import { useTheme } from '@mui/material/styles'
|
|
|
|
// Third-party Imports
|
|
import PerfectScrollbar from 'react-perfect-scrollbar'
|
|
|
|
// Type Imports
|
|
import type { getDictionary } from '@/utils/getDictionary'
|
|
import type { VerticalMenuContextProps } from '@menu/components/vertical-menu/Menu'
|
|
|
|
// Component Imports
|
|
import { Menu, MenuItem, MenuSection, SubMenu } from '@menu/vertical-menu'
|
|
|
|
// import { GenerateVerticalMenu } from '@components/GenerateMenu'
|
|
|
|
// Hook Imports
|
|
import useVerticalNav from '@menu/hooks/useVerticalNav'
|
|
|
|
// Styled Component Imports
|
|
import StyledVerticalNavExpandIcon from '@menu/styles/vertical/StyledVerticalNavExpandIcon'
|
|
|
|
// Style Imports
|
|
import menuItemStyles from '@core/styles/vertical/menuItemStyles'
|
|
import menuSectionStyles from '@core/styles/vertical/menuSectionStyles'
|
|
|
|
// Menu Data Imports
|
|
// import menuData from '@/data/navigation/verticalMenuData'
|
|
|
|
type RenderExpandIconProps = {
|
|
open?: boolean
|
|
transitionDuration?: VerticalMenuContextProps['transitionDuration']
|
|
}
|
|
|
|
type Props = {
|
|
dictionary: Awaited<ReturnType<typeof getDictionary>>
|
|
scrollMenu: (container: any, isPerfectScrollbar: boolean) => void
|
|
}
|
|
|
|
const RenderExpandIcon = ({ open, transitionDuration }: RenderExpandIconProps) => (
|
|
<StyledVerticalNavExpandIcon open={open} transitionDuration={transitionDuration}>
|
|
<i className='tabler-chevron-right' />
|
|
</StyledVerticalNavExpandIcon>
|
|
)
|
|
|
|
const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
|
|
// Hooks
|
|
const theme = useTheme()
|
|
const verticalNavOptions = useVerticalNav()
|
|
const params = useParams()
|
|
|
|
// Vars
|
|
const { isBreakpointReached, transitionDuration } = verticalNavOptions
|
|
const { lang: locale } = params
|
|
|
|
const ScrollWrapper = isBreakpointReached ? 'div' : PerfectScrollbar
|
|
|
|
return (
|
|
// eslint-disable-next-line lines-around-comment
|
|
/* Custom scrollbar instead of browser scroll, remove if you want browser scroll only */
|
|
<ScrollWrapper
|
|
{...(isBreakpointReached
|
|
? {
|
|
className: 'bs-full overflow-y-auto overflow-x-hidden',
|
|
onScroll: container => scrollMenu(container, false)
|
|
}
|
|
: {
|
|
options: { wheelPropagation: false, suppressScrollX: true },
|
|
onScrollY: container => scrollMenu(container, true)
|
|
})}
|
|
>
|
|
{/* Incase you also want to scroll NavHeader to scroll with Vertical Menu, remove NavHeader from above and paste it below this comment */}
|
|
{/* Vertical Menu */}
|
|
<Menu
|
|
popoutMenuOffset={{ mainAxis: 23 }}
|
|
menuItemStyles={menuItemStyles(verticalNavOptions, theme)}
|
|
renderExpandIcon={({ open }) => <RenderExpandIcon open={open} transitionDuration={transitionDuration} />}
|
|
renderExpandedMenuItemIcon={{ icon: <i className='tabler-circle text-xs' /> }}
|
|
menuSectionStyles={menuSectionStyles(verticalNavOptions, theme)}
|
|
>
|
|
<SubMenu label={dictionary['navigation'].dashboards} icon={<i className='tabler-smart-home' />}>
|
|
<MenuItem href={`/${locale}/dashboards/overview`}>{dictionary['navigation'].overview}</MenuItem>
|
|
</SubMenu>
|
|
<SubMenu label={dictionary['navigation'].reports} icon={<i className='tabler-report' />}>
|
|
<MenuItem href={`/${locale}/dashboards/profit-loss`}>{dictionary['navigation'].profitloss}</MenuItem>
|
|
<MenuItem href={`/${locale}/dashboards/products`}>{dictionary['navigation'].products}</MenuItem>
|
|
<MenuItem href={`/${locale}/dashboards/orders`}>{dictionary['navigation'].orders}</MenuItem>
|
|
<MenuItem href={`/${locale}/dashboards/payment-methods`}>{dictionary['navigation'].paymentMethods}</MenuItem>
|
|
<MenuItem href={`/${locale}/dashboards/daily-report`}>{dictionary['navigation'].dailyReport}</MenuItem>
|
|
</SubMenu>
|
|
<MenuSection label={dictionary['navigation'].appsPages}>
|
|
{/* <SubMenu label={dictionary['navigation'].sales} icon={<i className='tabler-receipt-2' />}>
|
|
<MenuItem href={`/${locale}/apps/sales/overview`}>{dictionary['navigation'].overview}</MenuItem>
|
|
<MenuItem href={`/${locale}/apps/sales/sales-bills`}>{dictionary['navigation'].invoices}</MenuItem>
|
|
<MenuItem href={`/${locale}/apps/sales/sales-deliveries`}>{dictionary['navigation'].deliveries}</MenuItem>
|
|
<MenuItem href={`/${locale}/apps/sales/sales-orders`}>{dictionary['navigation'].sales_orders}</MenuItem>
|
|
<MenuItem href={`/${locale}/apps/sales/sales-quotes`}>{dictionary['navigation'].quotes}</MenuItem>
|
|
</SubMenu> */}
|
|
<SubMenu label={dictionary['navigation'].purchase_text} icon={<i className='tabler-shopping-cart' />}>
|
|
<MenuItem href={`/${locale}/apps/purchase/overview`}>{dictionary['navigation'].overview}</MenuItem>
|
|
{/* <MenuItem href={`/${locale}/apps/purchase/purchase-bills`}>
|
|
{dictionary['navigation'].purchase_bills}
|
|
</MenuItem>
|
|
<MenuItem href={`/${locale}/apps/purchase/purchase-deliveries`}>
|
|
{dictionary['navigation'].purchase_delivery}
|
|
</MenuItem> */}
|
|
<MenuItem href={`/${locale}/apps/purchase/purchase-orders`}>
|
|
{dictionary['navigation'].purchase_orders}
|
|
</MenuItem>
|
|
{/* <MenuItem href={`/${locale}/apps/purchase/purchase-quotes`}>
|
|
{dictionary['navigation'].purchase_quotes}
|
|
</MenuItem> */}
|
|
</SubMenu>
|
|
<MenuItem
|
|
href={`/${locale}/apps/expense`}
|
|
icon={<i className='tabler-cash' />}
|
|
exactMatch={false}
|
|
activeUrl='/apps/expense'
|
|
>
|
|
{dictionary['navigation'].expenses}
|
|
</MenuItem>
|
|
<MenuItem
|
|
href={`/${locale}/apps/cash-bank`}
|
|
icon={<i className='tabler-building-bank' />}
|
|
exactMatch={false}
|
|
activeUrl='/apps/cash-bank'
|
|
>
|
|
{dictionary['navigation'].cash_and_bank}
|
|
</MenuItem>
|
|
<MenuItem
|
|
href={`/${locale}/apps/account`}
|
|
icon={<i className='tabler-align-box-left-stretch' />}
|
|
exactMatch={false}
|
|
activeUrl='/apps/account'
|
|
>
|
|
{dictionary['navigation'].account}
|
|
</MenuItem>
|
|
<MenuItem
|
|
href={`/${locale}/apps/fixed-assets`}
|
|
icon={<i className='tabler-apps' />}
|
|
exactMatch={false}
|
|
activeUrl='/apps/fixed-assets'
|
|
>
|
|
{dictionary['navigation'].fixed_assets}
|
|
</MenuItem>
|
|
<MenuItem
|
|
href={`/${locale}/apps/report`}
|
|
icon={<i className='tabler-file-analytics' />}
|
|
exactMatch={false}
|
|
activeUrl='/apps/report'
|
|
>
|
|
{dictionary['navigation'].reports}
|
|
</MenuItem>
|
|
<SubMenu label={dictionary['navigation'].marketing} icon={<i className='tabler-shopping-cart' />}>
|
|
{/* <MenuItem href={`/${locale}/apps/marketing/loyalty`}>{dictionary['navigation'].loyalty}</MenuItem> */}
|
|
<MenuItem href={`/${locale}/apps/marketing/reward`}>{dictionary['navigation'].reward}</MenuItem>
|
|
{/* <SubMenu label={dictionary['navigation'].gamification}>
|
|
<MenuItem href={`/${locale}/apps/marketing/gamification/wheel-spin`}>
|
|
{dictionary['navigation'].wheel_spin}
|
|
</MenuItem>
|
|
</SubMenu> */}
|
|
<SubMenu label={dictionary['navigation'].games}>
|
|
<MenuItem href={`/${locale}/apps/marketing/games/list`}>{dictionary['navigation'].list}</MenuItem>
|
|
<MenuItem href={`/${locale}/apps/marketing/games/game-prizes`}>
|
|
{dictionary['navigation'].game_prizes}
|
|
</MenuItem>
|
|
</SubMenu>
|
|
<MenuItem href={`/${locale}/apps/marketing/campaign`}>{dictionary['navigation'].campaign}</MenuItem>
|
|
{/* <MenuItem href={`/${locale}/apps/marketing/customer-analytics`}>
|
|
{dictionary['navigation'].customer_analytics}
|
|
</MenuItem> */}
|
|
{/* <MenuItem href={`/${locale}/apps/marketing/voucher`}>{dictionary['navigation'].voucher}</MenuItem> */}
|
|
<MenuItem href={`/${locale}/apps/marketing/tier`}>{dictionary['navigation'].tiers_text}</MenuItem>
|
|
</SubMenu>
|
|
<SubMenu label={dictionary['navigation'].inventory} icon={<i className='tabler-salad' />}>
|
|
<SubMenu label={dictionary['navigation'].products}>
|
|
<MenuItem href={`/${locale}/apps/inventory/products/list`}>{dictionary['navigation'].list}</MenuItem>
|
|
<MenuItem className='hidden' href={`/${locale}/apps/inventory/products/${params.id}/detail`}>
|
|
{dictionary['navigation'].details}
|
|
</MenuItem>
|
|
<MenuItem className='hidden' href={`/${locale}/apps/inventory/products/${params.id}/edit`}>
|
|
{dictionary['navigation'].edit}
|
|
</MenuItem>
|
|
<MenuItem href={`/${locale}/apps/inventory/products/add`}>{dictionary['navigation'].add}</MenuItem>
|
|
<MenuItem href={`/${locale}/apps/inventory/products/category`}>
|
|
{dictionary['navigation'].category}
|
|
</MenuItem>
|
|
<MenuItem href={`/${locale}/apps/inventory/products/units`}>{dictionary['navigation'].units}</MenuItem>
|
|
<MenuItem href={`/${locale}/apps/inventory/products/ingredients`}>
|
|
{dictionary['navigation'].ingredients}
|
|
</MenuItem>
|
|
</SubMenu>
|
|
<SubMenu label={dictionary['navigation'].orders}>
|
|
<MenuItem href={`/${locale}/apps/inventory/orders/list`}>{dictionary['navigation'].list}</MenuItem>
|
|
<MenuItem className='hidden' href={`/${locale}/apps/inventory/orders/${params.id}/details`}>
|
|
{dictionary['navigation'].details}
|
|
</MenuItem>
|
|
</SubMenu>
|
|
<SubMenu label={dictionary['navigation'].customers}>
|
|
<MenuItem href={`/${locale}/apps/inventory/customers/list`}>{dictionary['navigation'].list}</MenuItem>
|
|
</SubMenu>
|
|
<SubMenu label={dictionary['navigation'].stock}>
|
|
<MenuItem href={`/${locale}/apps/inventory/stock/list`}>{dictionary['navigation'].list}</MenuItem>
|
|
<MenuItem href={`/${locale}/apps/inventory/stock/restock`}>{dictionary['navigation'].restock}</MenuItem>
|
|
</SubMenu>
|
|
{/* <MenuItem href={`/${locale}/apps/inventory/settings`}>{dictionary['navigation'].settings}</MenuItem> */}
|
|
</SubMenu>
|
|
<SubMenu label={dictionary['navigation'].organization} icon={<i className='tabler-sitemap' />}>
|
|
<SubMenu label={dictionary['navigation'].outlet}>
|
|
<MenuItem href={`/${locale}/apps/organization/outlets/list`}>{dictionary['navigation'].list}</MenuItem>
|
|
</SubMenu>
|
|
</SubMenu>
|
|
<SubMenu label={dictionary['navigation'].finance} icon={<i className='tabler-coins' />}>
|
|
<SubMenu label={dictionary['navigation'].paymentMethods}>
|
|
<MenuItem href={`/${locale}/apps/finance/payment-methods/list`}>{dictionary['navigation'].list}</MenuItem>
|
|
</SubMenu>
|
|
</SubMenu>
|
|
<MenuItem
|
|
href={`/${locale}/apps/user/list`}
|
|
icon={<i className='tabler-user' />}
|
|
exactMatch={false}
|
|
activeUrl='/apps/user/list'
|
|
>
|
|
{dictionary['navigation'].user}
|
|
</MenuItem>
|
|
<MenuItem
|
|
href={`/${locale}/apps/vendor/list`}
|
|
icon={<i className='tabler-building' />}
|
|
exactMatch={false}
|
|
activeUrl='/apps/vendor/list'
|
|
>
|
|
{dictionary['navigation'].vendor}
|
|
</MenuItem>
|
|
<MenuItem href={`/${locale}/draw`} icon={<i className='tabler-building' />} target='_blank'>
|
|
Random Draw
|
|
</MenuItem>
|
|
</MenuSection>
|
|
</Menu>
|
|
</ScrollWrapper>
|
|
)
|
|
}
|
|
|
|
export default VerticalMenu
|