56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
import {NavLink} from "react-router-dom";
|
|
import {useMemo} from "react";
|
|
import {useTranslation} from "react-i18next";
|
|
|
|
import useAuth from "@/hooks/useAuth.ts";
|
|
import {IconPermission, IconQRCode, IconQuery, IconReconciliation} from "@/components/logo";
|
|
|
|
export const AllDashboardMenu = [
|
|
{
|
|
key: 'manual',
|
|
icon: <IconQRCode/>,
|
|
path: '/dashboard/manual',
|
|
permission: 'manual_payment',
|
|
},
|
|
{
|
|
key: 'bill',
|
|
icon: <IconQuery/>,
|
|
path: '/dashboard/bill',
|
|
permission: 'bill_page',
|
|
},
|
|
{
|
|
key: 'check',
|
|
icon: <IconReconciliation/>,
|
|
path: '/dashboard/reconciliation',
|
|
permission: 'apply_page',
|
|
},
|
|
{
|
|
key: 'permission',
|
|
icon: <IconPermission/>,
|
|
path: '/dashboard/permission',
|
|
permission: 'permission_edit',
|
|
}
|
|
]
|
|
|
|
export function DashboardNavigation() {
|
|
const {t} = useTranslation()
|
|
|
|
const {user} = useAuth();
|
|
const navItems = useMemo(() => {
|
|
if (!user || !user.permissions) return [];
|
|
|
|
return AllDashboardMenu.filter(it => {
|
|
if(user.permissions && user.permissions[it.permission]) return true;
|
|
return false
|
|
});
|
|
}, [user])
|
|
return (<div className={'dashboard-menu-container'}>
|
|
{navItems.map((it) => (
|
|
<NavLink to={it.path} key={it.key} className={'nav-item'}>
|
|
{it.icon}
|
|
<span className="menu-text">{t(`layout.menu.${it.key}`)}</span>
|
|
</NavLink>
|
|
))}
|
|
</div>
|
|
);
|
|
} |