@deenruv/admin-dashboard 1.0.17-dev.7 → 1.0.17-dev.9

package/dist/components/Menu/Navigation.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { NavLink, useLocation } from 'react-router';
-import React, { useMemo } from 'react';
-import { cn, buttonVariants, Routes, usePluginStore, Tooltip, TooltipContent, TooltipTrigger, useServer, Accordion, AccordionItem, AccordionTrigger, AccordionContent, useNotifications, useTranslation, capitalizeFirstLetter, Skeleton, } from '@deenruv/react-ui-devkit';
-import { BarChart, Barcode, Store, ShoppingCart, Images, Folder, Globe2, Tag, UserCog, Users, UserRoundSearch, MapPin, Flag, Coins, Globe, Percent, CreditCard, Truck, Cog, UsersRound, Server, ScanBarcode, } from 'lucide-react';
-import { Permission } from '@deenruv/admin-types';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { cn, buttonVariants, usePluginStore, Tooltip, TooltipContent, TooltipTrigger, useServer, Accordion, AccordionItem, AccordionTrigger, AccordionContent, useNotifications, useTranslation, capitalizeFirstLetter, Skeleton, } from '@deenruv/react-ui-devkit';
+import { adminNavigationGroups, canAccessAdminItem, getActiveNavigationLinkIds, getActiveNavigationGroupIds, getNavigationLinkActivePaths, insertNavigationLink, useAdminAccess, } from "../../access/index.js";
 export function Navigation({ isCollapsed }) {
     const { t } = useTranslation('common');
     const { t: _pluginT } = useTranslation();
     const location = useLocation();
     const { navMenuData, viewMarkers } = usePluginStore();
+    const { routes } = useAdminAccess();
     const userPermissions = useServer((p) => p.userPermissions);
     const loaded = useServer((p) => p.loaded);
     const getNavigationNotification = useNotifications(({ getNavigationNotification }) => getNavigationNotification);
@@ -19,201 +19,34 @@ export function Navigation({ isCollapsed }) {
         return _pluginT(key, { ns });
     };
     const navigationGroups = useMemo(() => {
-        const navData = [
-            {
-                label: t('menuGroups.shop'),
-                id: 'shop-group',
-                links: [
-                    { title: t('menu.dashboard'), href: Routes.dashboard, id: 'link-dashboard', icon: BarChart },
-                    {
-                        title: t('menu.orders'),
-                        href: Routes.orders.list,
-                        id: 'link-orders',
-                        icon: ShoppingCart,
-                        requiredPermissions: [Permission.ReadOrder],
-                    },
-                    {
-                        title: t('menu.customers'),
-                        href: Routes.customers.list,
-                        id: 'link-customers',
-                        icon: UserRoundSearch,
-                        requiredPermissions: [Permission.ReadCustomer],
-                    },
-                    {
-                        title: t('menu.customerGroups'),
-                        href: Routes.customerGroups.list,
-                        id: 'link-customerGroups',
-                        icon: UsersRound,
-                        requiredPermissions: [Permission.ReadCustomerGroup],
-                    },
-                ],
-            },
-            {
-                label: t('menuGroups.assortment'),
-                id: 'assortment-group',
-                links: [
-                    {
-                        title: t('menu.products'),
-                        href: Routes.products.list,
-                        id: 'link-products',
-                        icon: Barcode,
-                        requiredPermissions: [Permission.ReadProduct, Permission.ReadCatalog],
-                    },
-                    {
-                        title: t('menu.productVariants'),
-                        href: Routes.productVariants.list,
-                        id: 'link-product-variants',
-                        icon: ScanBarcode,
-                        requiredPermissions: [Permission.ReadProduct, Permission.ReadCatalog],
-                    },
-                    {
-                        title: t('menu.collections'),
-                        href: Routes.collections.list,
-                        id: 'link-collections',
-                        icon: Folder,
-                        requiredPermissions: [Permission.ReadCollection, Permission.ReadCatalog],
-                    },
-                    {
-                        title: t('menu.facets'),
-                        href: Routes.facets.list,
-                        id: 'link-facets',
-                        icon: Tag,
-                        requiredPermissions: [Permission.ReadFacet, Permission.ReadCatalog],
-                    },
-                    {
-                        title: t('menu.assets'),
-                        href: Routes.assets.list,
-                        id: 'link-assets',
-                        icon: Images,
-                        requiredPermissions: [Permission.ReadAsset, Permission.ReadCatalog],
-                    },
-                ],
-            },
-            {
-                label: t('menuGroups.users'),
-                id: 'users-group',
-                links: [
-                    {
-                        title: t('menu.admins'),
-                        href: Routes.admins.list,
-                        id: 'link-admins',
-                        icon: UserCog,
-                        requiredPermissions: [Permission.ReadAdministrator],
-                    },
-                    {
-                        title: t('menu.roles'),
-                        href: Routes.roles.list,
-                        id: 'link-roles',
-                        icon: Users,
-                        requiredPermissions: [Permission.ReadAdministrator],
-                    },
-                    {
-                        title: t('menu.sellers'),
-                        href: Routes.sellers.list,
-                        id: 'link-sellers',
-                        icon: Store,
-                        requiredPermissions: [Permission.ReadSeller],
-                    },
-                ],
-            },
-            {
-                label: t('menuGroups.promotions'),
-                id: 'promotions-group',
-                links: [
-                    {
-                        title: t('menu.promotions'),
-                        href: Routes.promotions.list,
-                        id: 'link-promotions',
-                        icon: ShoppingCart,
-                        requiredPermissions: [Permission.ReadPromotion],
-                    },
-                ],
-            },
-            {
-                label: t('menuGroups.shipping'),
-                id: 'shipping-group',
-                links: [
-                    {
-                        title: t('menu.paymentMethods'),
-                        href: Routes.paymentMethods.list,
-                        id: 'link-payment-methods',
-                        icon: CreditCard,
-                        requiredPermissions: [Permission.ReadPaymentMethod],
-                    },
-                    {
-                        title: t('menu.shippingMethods'),
-                        href: Routes.shippingMethods.list,
-                        id: 'link-shipping-methods',
-                        icon: Truck,
-                        requiredPermissions: [Permission.ReadShippingMethod],
-                    },
-                    {
-                        title: t('menu.stock'),
-                        href: Routes.stockLocations.list,
-                        id: 'link-stock',
-                        icon: MapPin,
-                        requiredPermissions: [Permission.ReadStockLocation],
-                    },
-                ],
-            },
-            {
-                label: t('menuGroups.settings'),
-                id: 'settings-group',
-                links: [
-                    {
-                        title: t('menu.channels'),
-                        href: Routes.channels.list,
-                        id: 'link-channels',
-                        icon: Globe2,
-                        requiredPermissions: [Permission.ReadChannel],
-                    },
-                    {
-                        title: t('menu.zones'),
-                        href: Routes.zones.list,
-                        id: 'link-zones',
-                        icon: Globe,
-                        requiredPermissions: [Permission.ReadZone],
-                    },
-                    {
-                        title: t('menu.countries'),
-                        href: Routes.countries.list,
-                        id: 'link-countries',
-                        icon: Flag,
-                        requiredPermissions: [Permission.ReadCountry],
-                    },
-                    {
-                        title: t('menu.taxCategories'),
-                        href: Routes.taxCategories.list,
-                        id: 'link-tax-categories',
-                        icon: Coins,
-                        requiredPermissions: [Permission.ReadTaxCategory],
-                    },
-                    {
-                        title: t('menu.taxRates'),
-                        href: Routes.taxRates.list,
-                        id: 'link-tax-rates',
-                        icon: Percent,
-                        requiredPermissions: [Permission.ReadTaxRate],
-                    },
-                    {
-                        title: t('menu.globalSettings'),
-                        href: Routes.globalSettings,
-                        id: 'link-global-settings',
-                        icon: Cog,
-                        requiredPermissions: [Permission.ReadSettings],
-                    },
-                    {
-                        title: t('menu.systemStatus'),
-                        href: Routes.status,
-                        id: 'link-system-status',
-                        icon: Server,
-                        requiredPermissions: [Permission.ReadSystem],
-                    },
-                ],
-            },
-        ];
+        const navData = adminNavigationGroups.map((group) => ({
+            label: t(`menuGroups.${group.labelKey}`),
+            id: group.id,
+            links: [],
+        }));
+        routes.forEach((route) => {
+            if (!route.nav)
+                return;
+            if (!canAccessAdminItem({ item: route, userPermissions }))
+                return;
+            const foundGroupIdx = navData.findIndex((group) => group.id === route.nav?.groupId);
+            if (foundGroupIdx === -1)
+                return;
+            navData[foundGroupIdx].links.push({
+                title: t(`menu.${route.nav.menuKey}`),
+                href: route.path,
+                id: route.nav.linkId,
+                icon: route.nav.icon,
+                access: route,
+                routeId: route.id,
+                groupId: route.nav.groupId,
+                activePaths: getNavigationLinkActivePaths(route, routes),
+            });
+        });
         const { groups, links } = navMenuData;
-        groups.forEach(({ id, labelId, placement }) => {
+        groups.forEach(({ id, labelId, placement, access }) => {
+            if (!canAccessAdminItem({ item: access, userPermissions }))
+                return;
             let foundGroupIdx = -1;
             const newGroup = { id, label: pluginT(labelId), links: [] };
             if (placement?.groupId) {
@@ -226,46 +59,52 @@ export function Navigation({ isCollapsed }) {
                 navData.splice(foundGroupIdx + 1, 0, newGroup);
             }
         });
-        links.forEach(({ groupId, href, labelId, id, icon, placement }) => {
+        links.forEach(({ groupId, href, labelId, id, icon, placement, access }) => {
+            if (!canAccessAdminItem({ item: access, userPermissions }))
+                return;
             const foundGroupIdx = navData.findIndex((group) => group.id === groupId);
             if (foundGroupIdx == -1)
-                throw new Error(`Navbar menu group with id ${groupId} was not found.\nPlugin navigation href: ${href}`);
-            const newElement = { title: pluginT(labelId), label: pluginT(labelId), href: `/${href}`, id, icon };
+                return;
+            const newElement = {
+                title: pluginT(labelId),
+                label: pluginT(labelId),
+                href: `/${href}`,
+                id,
+                icon,
+                access,
+                groupId,
+            };
             if (!placement) {
                 navData[foundGroupIdx].links.push(newElement);
                 return;
             }
-            const foundIndex = navData[foundGroupIdx].links.findIndex((item) => item.id === placement.linkId);
-            const offset = placement.where === 'above' ? 0 : 1;
-            navData[foundGroupIdx].links.splice(foundIndex + offset, 0, newElement);
+            navData[foundGroupIdx].links = insertNavigationLink(navData[foundGroupIdx].links, newElement, placement);
+        });
+        return navData.filter((group) => group.links.length > 0);
+    }, [navMenuData.groups, navMenuData.links, pluginT, routes, t, userPermissions]);
+    const permittedNavigationGroups = navigationGroups;
+    const activeGroupIds = useMemo(() => getActiveNavigationGroupIds(permittedNavigationGroups.flatMap((group) => group.links), location.pathname), [location.pathname, permittedNavigationGroups]);
+    const activeLinkIds = useMemo(() => new Set(getActiveNavigationLinkIds(permittedNavigationGroups.flatMap((group) => group.links), location.pathname).map((link) => link.id)), [location.pathname, permittedNavigationGroups]);
+    const previousPathname = useRef(location.pathname);
+    const [openGroupIds, setOpenGroupIds] = useState(activeGroupIds);
+    useEffect(() => {
+        const hasPathnameChanged = previousPathname.current !== location.pathname;
+        previousPathname.current = location.pathname;
+        if (!hasPathnameChanged)
+            return;
+        setOpenGroupIds((currentGroupIds) => {
+            const nextGroupIds = [...new Set([...currentGroupIds, ...activeGroupIds])];
+            return nextGroupIds.length === currentGroupIds.length ? currentGroupIds : nextGroupIds;
         });
-        return navData;
-    }, [navMenuData.groups, navMenuData.links, t]);
-    const permittedNavigationGroups = useMemo(() => {
-        return navigationGroups
-            .map((group) => ({
-            ...group,
-            links: group.links.filter((link) => 'requiredPermissions' in link
-                ? link.requiredPermissions?.some((permission) => userPermissions.includes(permission))
-                : true),
-        }))
-            .filter((group) => group.links.length > 0);
-    }, [userPermissions, navigationGroups]);
-    // const defaultAccordionOpenValue = useMemo(
-    //   () =>
-    //     permittedNavigationGroups
-    //       .filter((g) => !navMenuData.groups.find((pluginGroup) => pluginGroup.id === g.id))
-    //       .map((g) => g.id),
-    //   [permittedNavigationGroups, navMenuData],
-    // );
-    const defaultAccordionOpenValue = ['shop-group', 'assortment-group'];
+    }, [activeGroupIds, location.pathname]);
     if (!loaded) {
         return (_jsx("div", { className: "relative overflow-y-auto", children: _jsx("div", { className: "flex h-[calc(100%-64px)] flex-col gap-3 pb-2 lg:h-[calc(100%-72px)]", children: Array.from({ length: 3 }).map((_, groupIdx) => (_jsxs("div", { className: "flex flex-col gap-1 px-2.5", children: [!isCollapsed && (_jsx("div", { className: "px-3 py-2", children: _jsx(Skeleton, { className: "h-3 w-20" }) })), Array.from({ length: groupIdx === 0 ? 4 : groupIdx === 1 ? 5 : 3 }).map((_, linkIdx) => (_jsxs("div", { className: cn('flex items-center px-3 py-2', isCollapsed && 'justify-center px-0'), children: [_jsx(Skeleton, { className: cn('size-4 shrink-0', isCollapsed && 'size-6') }), !isCollapsed && _jsx(Skeleton, { className: "ml-2 h-4 w-24" })] }, linkIdx)))] }, groupIdx))) }) }));
     }
-    return (_jsx("div", { className: "relative overflow-y-auto", children: _jsx("div", { "data-collapsed": isCollapsed, className: "group flex h-[calc(100%-64px)] flex-col gap-2 py-2 data-[collapsed=true]:py-2 lg:h-[calc(100%-72px)]", children: _jsx(Accordion, { type: "multiple", className: "w-full", defaultValue: defaultAccordionOpenValue, value: isCollapsed ? permittedNavigationGroups.map((g) => g.id) : undefined, children: permittedNavigationGroups.map((group) => (_jsxs(AccordionItem, { value: group.id, className: "border-none", children: [!isCollapsed && (_jsx(AccordionTrigger, { className: cn('flex items-center justify-between px-3 py-2 hover:no-underline'), children: _jsxs("div", { className: "flex items-center gap-2 px-1", children: [_jsx("h4", { className: "text-[11px] font-semibold tracking-[0.08em] text-muted-foreground uppercase", children: group.label }), getNavigationNotification(group.id), viewMarkers ? (_jsx("p", { className: "text-xs font-semibold text-muted-foreground lowercase dark:text-muted-foreground", children: group.id })) : null] }) })), _jsx(AccordionContent, { className: cn(isCollapsed ? 'py-1' : 'pb-2'), children: _jsx("nav", { id: group.id, className: "grid gap-1 px-2.5 text-muted-foreground group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2", children: group.links.map((link, index) => {
+    return (_jsx("div", { className: "relative overflow-y-auto", children: _jsx("div", { "data-collapsed": isCollapsed, className: "group flex h-[calc(100%-64px)] flex-col gap-2 py-2 data-[collapsed=true]:py-2 lg:h-[calc(100%-72px)]", children: _jsx(Accordion, { type: "multiple", className: "w-full", value: isCollapsed ? permittedNavigationGroups.map((g) => g.id) : openGroupIds, onValueChange: setOpenGroupIds, children: permittedNavigationGroups.map((group) => (_jsxs(AccordionItem, { value: group.id, className: "border-none", children: [!isCollapsed && (_jsx(AccordionTrigger, { className: cn('flex items-center justify-between px-3 py-2 hover:no-underline'), children: _jsxs("div", { className: "flex items-center gap-2 px-1", children: [_jsx("h4", { className: "text-[11px] font-semibold tracking-[0.08em] text-muted-foreground uppercase", children: group.label }), getNavigationNotification(group.id), viewMarkers ? (_jsx("p", { className: "text-xs font-semibold text-muted-foreground lowercase dark:text-muted-foreground", children: group.id })) : null] }) })), _jsx(AccordionContent, { className: cn(isCollapsed ? 'py-1' : 'pb-2'), children: _jsx("nav", { id: group.id, className: "grid gap-1 px-2.5 text-muted-foreground group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2", children: group.links.map((link, index) => {
                                     const notifications = getNavigationNotification(link.id);
-                                    return (_jsx(React.Fragment, { children: isCollapsed ? (_jsxs(Tooltip, { delayDuration: 0, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { children: _jsx(NavLink, { to: link.href, viewTransition: true, children: _jsxs("div", { className: cn(buttonVariants({ variant: 'navigation-link', size: 'icon' }), 'h-9 w-9', location.pathname === link.href &&
-                                                                    'bg-primary/10 text-primary opacity-100 hover:bg-primary/10 hover:text-primary'), children: [_jsx(link.icon, { className: "size-5" }), _jsx("span", { className: "sr-only", children: link.title })] }) }) }) }), _jsxs(TooltipContent, { side: "right", className: "relative flex items-center gap-4", children: [viewMarkers ? (_jsx("div", { className: "text-xs font-semibold text-muted-foreground lowercase dark:text-muted-foreground", children: link.id })) : null, capitalizeFirstLetter(link.title), notifications] })] }, index)) : (_jsx(NavLink, { to: link.href, viewTransition: true, children: _jsxs("div", { id: link.id, className: cn('relative flex h-9 items-center justify-start px-3 text-sm font-medium capitalize transition-colors hover:bg-muted/70 hover:text-foreground', location.pathname === link.href &&
-                                                    'bg-primary/10 text-primary opacity-100 hover:bg-primary/10 hover:text-primary'), children: [viewMarkers ? (_jsx("div", { className: "absolute top-1/2 right-2 -translate-y-1/2 text-xs font-semibold text-muted-foreground lowercase dark:text-muted-foreground", children: link.id })) : null, _jsx(link.icon, { className: "mr-2 size-4 shrink-0" }), capitalizeFirstLetter(link.title), notifications] }) })) }, link.id));
+                                    const isActive = activeLinkIds.has(link.id);
+                                    return (_jsx(React.Fragment, { children: isCollapsed ? (_jsxs(Tooltip, { delayDuration: 0, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { children: _jsx(NavLink, { to: link.href, viewTransition: true, "aria-current": isActive ? 'page' : undefined, children: _jsxs("div", { className: cn(buttonVariants({ variant: 'navigation-link', size: 'icon' }), 'h-9 w-9 rounded-lg ring-offset-background transition-all hover:scale-[1.03] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', isActive &&
+                                                                    'bg-primary text-primary-foreground opacity-100 shadow-sm hover:scale-100 hover:bg-primary hover:text-primary-foreground'), children: [_jsx(link.icon, { className: "size-5" }), _jsx("span", { className: "sr-only", children: link.title })] }) }) }) }), _jsxs(TooltipContent, { side: "right", className: "relative flex items-center gap-4", children: [viewMarkers ? (_jsx("div", { className: "text-xs font-semibold text-muted-foreground lowercase dark:text-muted-foreground", children: link.id })) : null, capitalizeFirstLetter(link.title), notifications] })] }, index)) : (_jsx(NavLink, { to: link.href, viewTransition: true, "aria-current": isActive ? 'page' : undefined, children: _jsxs("div", { id: link.id, className: cn('relative flex h-10 items-center justify-start rounded-lg px-3 text-sm font-medium capitalize transition-all hover:bg-muted hover:text-foreground', isActive &&
+                                                    'bg-primary text-primary-foreground opacity-100 shadow-sm hover:bg-primary hover:text-primary-foreground'), children: [viewMarkers ? (_jsx("div", { className: "absolute top-1/2 right-2 -translate-y-1/2 text-xs font-semibold text-muted-foreground lowercase dark:text-muted-foreground", children: link.id })) : null, _jsx("span", { className: cn('mr-2.5 flex size-6 shrink-0 items-center justify-center rounded-md bg-muted/80 text-muted-foreground transition-colors', isActive && 'bg-primary-foreground/15 text-primary-foreground'), children: _jsx(link.icon, { className: "size-4" }) }), _jsx("span", { className: "truncate", children: capitalizeFirstLetter(link.title) }), notifications] }) })) }, link.id));
                                 }) }) })] }, group.id))) }) }) }));
 }

package/dist/components/Menu/NavigationFooter.js

@@ -1,12 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Permission } from '@deenruv/admin-types';
 import { capitalizeFirstLetter, cn, Routes, Separator, useServer, useTranslation } from '@deenruv/react-ui-devkit';
 import { Puzzle } from 'lucide-react';
 import { NavLink } from 'react-router';
+import { canAccessAdminItem, useAdminAccess } from "../../access/index.js";
 export const NavigationFooter = ({ isCollapsed }) => {
     const { t } = useTranslation('common');
     const userPermissions = useServer((p) => p.userPermissions);
-    const isPermittedToExtensions = userPermissions.includes(Permission.ReadSettings);
-    return (_jsxs("div", { className: "flex w-full flex-col gap-2 border-t bg-card/80 py-2 text-xs text-muted-foreground select-none", children: [isPermittedToExtensions && !isCollapsed && (_jsxs(_Fragment, { children: [_jsx("div", { children: _jsx(NavLink, { to: Routes.extensions, viewTransition: true, children: _jsxs("div", { className: cn('relative mx-2 flex h-8 items-center justify-center px-3 text-sm font-medium capitalize transition-colors hover:bg-muted/70 hover:text-foreground', location.pathname === Routes.extensions &&
+    const { routes } = useAdminAccess();
+    const extensionsRoute = routes.find((route) => route.id === 'extensions');
+    const isPermittedToExtensions = !!extensionsRoute && canAccessAdminItem({ item: extensionsRoute, userPermissions });
+    const extensionsPath = extensionsRoute?.path || Routes.extensions;
+    return (_jsxs("div", { className: "flex w-full flex-col gap-2 border-t bg-card/80 py-2 text-xs text-muted-foreground select-none", children: [isPermittedToExtensions && !isCollapsed && (_jsxs(_Fragment, { children: [_jsx("div", { children: _jsx(NavLink, { to: extensionsPath, viewTransition: true, children: _jsxs("div", { className: cn('relative mx-2 flex h-8 items-center justify-center px-3 text-sm font-medium capitalize transition-colors hover:bg-muted/70 hover:text-foreground', location.pathname === extensionsPath &&
                                     'bg-primary/10 text-primary opacity-100 hover:bg-primary/10 hover:text-primary'), children: [_jsx(Puzzle, { className: "mr-2 size-4" }), capitalizeFirstLetter(t('menu.extensions'))] }) }) }), _jsx(Separator, {})] })), _jsxs("div", { className: "flex items-center justify-center gap-1 px-2", children: [!isCollapsed && _jsx("p", { className: "uppercase", children: "Deenruv" }), _jsxs("span", { children: [!isCollapsed ? 'ver. ' : 'v. ', window.__DEENRUV_SETTINGS__.appVersion] })] })] }));
 };

package/dist/components/Menu/index.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useMemo, useState } from 'react';
 import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbSeparator, Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, ScrollArea, TooltipProvider, Routes, useSettings, useServer, usePluginStore, cn, dashToCamelCase, apiClient, useGlobalSearch, useTranslation, DropdownMenuGroup, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuPortal, DropdownMenuSubContent, createDialog, buildURL, } from '@deenruv/react-ui-devkit';
+import { Permission } from '@deenruv/admin-types';
 import { useShallow } from 'zustand/react/shallow';
 import { GripVertical, LogOutIcon, MenuIcon, Moon, Slash, Sun, SunMoon, RotateCwSquare, SearchIcon, } from 'lucide-react';
 import * as ResizablePrimitive from 'react-resizable-panels';
@@ -11,6 +12,7 @@ import { BrandLogo } from "../BrandLogo.js";
 import { LanguagesDropdown } from './LanguagesDropdown.js';
 import { Notifications } from './Notifications.js';
 import { NavigationFooter } from "./NavigationFooter.js";
+import { canAccessAdminItem, useAdminAccess } from "../../access/index.js";
 const ResizablePanelGroup = ({ className, ...props }) => (_jsx(ResizablePrimitive.Group, { className: cn('flex h-full w-full data-[orientation=vertical]:flex-col', className), ...props }));
 const ResizablePanel = ResizablePrimitive.Panel;
 const ResizableHandle = ({ withHandle, className, ...props }) => (_jsx(ResizablePrimitive.Separator, { className: cn('relative flex w-px items-center justify-center bg-border/70 after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:translate-x-0 data-[orientation=vertical]:after:-translate-y-1/2 [&[data-orientation=vertical]>div]:rotate-90', className), ...props, children: withHandle && (_jsx("div", { className: "z-10 flex h-4 w-3 items-center justify-center border bg-background text-muted-foreground", children: _jsx(GripVertical, { className: "size-2.5" }) })) }));
@@ -20,6 +22,7 @@ export const Menu = ({ children }) => {
     const linkPath = [];
     const { t } = useTranslation('common');
     const { topNavigationActionsMenu, topNavigationComponents } = usePluginStore();
+    const { routes, defaultRoute } = useAdminAccess();
     const { logOut, theme, setTheme } = useSettings(useShallow((p) => ({
         logOut: p.logOut,
         theme: p.theme,
@@ -29,7 +32,36 @@ export const Menu = ({ children }) => {
     })));
     const navigate = useNavigate();
     const [isCollapsed, setIsCollapsed] = useState(false);
-    const { activeAdministrator, setJobQueue } = useServer();
+    const { activeAdministrator, clearAdministratorAccess, setJobQueue, userPermissions } = useServer();
+    const defaultRoutePath = defaultRoute?.path || Routes.dashboard;
+    const defaultRouteMenuKey = defaultRoute?.nav?.menuKey || defaultRoute?.search?.menuKey || 'dashboard';
+    const globalSearchEnabled = true;
+    const languageSwitcherEnabled = true;
+    const channelSwitcherEnabled = true;
+    const notificationsEnabled = true;
+    const reindexEnabled = canAccessAdminItem({
+        item: { requiredPermissions: [Permission.UpdateCatalog, Permission.UpdateProduct] },
+        userPermissions,
+    });
+    const canAccessPluginSurface = (entry) => canAccessAdminItem({ item: entry.access, userPermissions });
+    const allowedTopNavigationComponents = topNavigationComponents?.filter(canAccessPluginSurface);
+    const allowedTopNavigationActions = topNavigationActionsMenu?.filter(canAccessPluginSurface);
+    const systemStatusRoute = routes.find((route) => route.id === 'system.status');
+    const globalSettingsRoute = routes.find((route) => route.id === 'settings.global');
+    const fastLinks = [
+        systemStatusRoute &&
+            canAccessAdminItem({ item: systemStatusRoute, userPermissions }) && {
+            key: 'systemStatus',
+            label: t('systemStatus'),
+            path: systemStatusRoute.path,
+        },
+        globalSettingsRoute &&
+            canAccessAdminItem({ item: globalSettingsRoute, userPermissions }) && {
+            key: 'globalSettings',
+            label: t('globalSettings'),
+            path: globalSettingsRoute.path,
+        },
+    ].filter(Boolean);
     const rebuildSearchIndex = async () => {
         await apiClient('mutation')({ reindex: { id: true, queueName: true, state: true } }).then(({ reindex: { queueName, state } }) => {
             setJobQueue(queueName, state === 'RUNNING');
@@ -48,10 +80,12 @@ export const Menu = ({ children }) => {
                                     const collapsed = size.asPercentage <= 4;
                                     setIsCollapsed(collapsed);
                                     document.cookie = `react-resizable-panels:collapsed=${JSON.stringify(collapsed)}`;
-                                }, className: cn(isCollapsed && 'min-w-[50px] transition-all duration-300 ease-in-out'), children: [_jsx("div", { className: cn('flex h-[72px] flex-col items-center justify-center gap-4 border-b bg-card/80'), children: _jsx("div", { className: `flex h-full items-center justify-center ${!isCollapsed && 'w-full'} cursor-pointer px-4 py-3`, onClick: () => navigate(Routes.dashboard, { viewTransition: true }), children: _jsx(BrandLogo, { isCollapsed: isCollapsed }) }) }), _jsxs("div", { className: "flex h-[calc(100vh-72px)] flex-col justify-between bg-card/70", children: [_jsx(Navigation, { isCollapsed: isCollapsed }), _jsx(NavigationFooter, { isCollapsed: isCollapsed })] })] }), _jsx(ResizableHandle, { withHandle: true }), _jsxs(ResizablePanel, { id: "content", children: [_jsxs("div", { className: "flex h-[64px] items-center border-b bg-background/95 px-3 backdrop-blur lg:h-[72px] lg:px-5", children: [_jsxs("div", { className: "flex flex-col items-start justify-center", children: [_jsx(Breadcrumb, { children: _jsx(BreadcrumbList, { children: crumbs.length ? (crumbs.map((c, i) => {
+                                }, className: cn(isCollapsed && 'min-w-[50px] transition-all duration-300 ease-in-out'), children: [_jsx("div", { className: cn('flex h-[72px] flex-col items-center justify-center gap-4 border-b bg-card/80'), children: _jsx("div", { className: `flex h-full items-center justify-center ${!isCollapsed && 'w-full'} cursor-pointer px-4 py-3`, onClick: () => navigate(defaultRoutePath, { viewTransition: true }), children: _jsx(BrandLogo, { isCollapsed: isCollapsed }) }) }), _jsxs("div", { className: "flex h-[calc(100vh-72px)] flex-col justify-between bg-card/70", children: [_jsx(Navigation, { isCollapsed: isCollapsed }), _jsx(NavigationFooter, { isCollapsed: isCollapsed })] })] }), _jsx(ResizableHandle, { withHandle: true }), _jsxs(ResizablePanel, { id: "content", children: [_jsxs("div", { className: "flex h-[64px] items-center border-b bg-background/95 px-3 backdrop-blur lg:h-[72px] lg:px-5", children: [_jsxs("div", { className: "flex flex-col items-start justify-center", children: [_jsx(Breadcrumb, { children: _jsx(BreadcrumbList, { children: crumbs.length ? (crumbs.map((c, i) => {
                                                                 linkPath.push(c);
                                                                 return (_jsxs(React.Fragment, { children: [_jsx(BreadcrumbItem, { children: _jsx(NavLink, { to: buildURL(linkPath), viewTransition: true, children: _jsx("p", { className: cn('text-sm font-semibold tracking-tight text-foreground capitalize'), children: i === 0 ? t('menu.' + dashToCamelCase(c)) : c }) }) }), i !== crumbs.length - 1 && (_jsx(BreadcrumbSeparator, { children: _jsx(Slash, { className: "text-muted-foreground" }) }))] }, c));
-                                                            })) : (_jsx(BreadcrumbItem, { children: _jsx(NavLink, { to: Routes.dashboard, viewTransition: true, children: _jsx("p", { className: "text-xl font-semibold tracking-tight text-foreground", children: t('dashboard') }) }) })) }) }), _jsx("div", { className: "flex items-center gap-2" })] }), _jsxs("div", { className: "flex flex-1 items-center justify-end gap-1.5", children: [topNavigationComponents && topNavigationComponents.length > 0 ? (_jsx("div", { className: "flex items-center gap-2", children: topNavigationComponents.map(({ component: Component }, index) => (_jsx(Component, {}, index))) })) : null, _jsx(LanguagesDropdown, {}), _jsx(ChannelSwitcher, { className: "min-w-44" }), _jsx(Button, { onClick: openGlobalSearch, variant: "outline", size: "icon", className: "relative size-9", children: _jsx(SearchIcon, { className: "size-4" }) }), _jsx(Notifications, {}), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "icon", className: "size-9", children: [theme === 'light' ? (_jsx(Sun, { className: "size-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" })) : theme === 'dark' ? (_jsx(Moon, { className: "absolute size-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" })) : (_jsx(SunMoon, { className: "absolute size-[1.2rem] rotate-90 transition-all" })), _jsx("span", { className: "sr-only", children: t('toggleTheme') })] }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuItem, { onClick: () => setTheme('light'), children: t('themeLight') }), _jsx(DropdownMenuItem, { onClick: () => setTheme('dark'), children: t('themeDark') }), _jsx(DropdownMenuItem, { onClick: () => setTheme('system'), children: t('themeSystem') })] })] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", size: "icon", className: "size-9", children: _jsx(MenuIcon, { className: "size-4" }) }) }), _jsxs(DropdownMenuContent, { className: "z-[150] mr-6 min-w-40", children: [activeAdministrator?.emailAddress && (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuLabel, { className: "flex items-center gap-2 px-3 py-2 font-medium", children: [_jsx("div", { className: "flex size-6 items-center justify-center bg-primary/10 text-xs font-semibold text-primary", children: activeAdministrator.firstName.charAt(0).toUpperCase() }), _jsxs("div", { className: "truncate text-sm", children: [activeAdministrator.firstName, " ", activeAdministrator.lastName] })] }), _jsx(DropdownMenuSeparator, { className: "my-1" })] })), _jsxs(DropdownMenuItem, { className: "flex cursor-pointer items-center gap-2 text-nowrap", onSelect: rebuildSearchIndex, children: [_jsx(RotateCwSquare, { className: "size-4" }), t('rebuildSerachIndex')] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuGroup, { children: _jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { children: t('fastLinks') }), _jsx(DropdownMenuPortal, { children: _jsxs(DropdownMenuSubContent, { children: [_jsxs(DropdownMenuItem, { className: "flex cursor-pointer items-center gap-2 text-nowrap", onSelect: () => navigate(Routes.status, { viewTransition: true }), children: [_jsx(RotateCwSquare, { className: "size-4" }), t('systemStatus')] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "flex cursor-pointer items-center gap-2 text-nowrap", onSelect: () => navigate(Routes.globalSettings, { viewTransition: true }), children: [_jsx(RotateCwSquare, { className: "size-4" }), t('globalSettings')] })] }) })] }) }), topNavigationActionsMenu?.length && topNavigationActionsMenu.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), topNavigationActionsMenu.map((action) => (_jsxs(DropdownMenuItem, { className: "flex cursor-pointer items-center gap-2", onSelect: action.onClick, children: [action.icon && _jsx(action.icon, { className: "size-4" }), action.label] }, action.label)))] })) : null, _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "flex cursor-pointer items-center gap-2 text-red-500", onSelect: async () => {
+                                                            })) : (_jsx(BreadcrumbItem, { children: _jsx(NavLink, { to: defaultRoutePath, viewTransition: true, children: _jsx("p", { className: "text-xl font-semibold tracking-tight text-foreground", children: t(defaultRouteMenuKey === 'dashboard'
+                                                                            ? 'dashboard'
+                                                                            : `menu.${dashToCamelCase(defaultRouteMenuKey)}`) }) }) })) }) }), _jsx("div", { className: "flex items-center gap-2" })] }), _jsxs("div", { className: "flex flex-1 items-center justify-end gap-1.5", children: [allowedTopNavigationComponents && allowedTopNavigationComponents.length > 0 ? (_jsx("div", { className: "flex items-center gap-2", children: allowedTopNavigationComponents.map(({ component: Component }, index) => (_jsx(Component, {}, index))) })) : null, languageSwitcherEnabled && _jsx(LanguagesDropdown, {}), channelSwitcherEnabled && _jsx(ChannelSwitcher, { className: "min-w-44" }), globalSearchEnabled && (_jsx(Button, { onClick: openGlobalSearch, variant: "outline", size: "icon", className: "relative size-9", children: _jsx(SearchIcon, { className: "size-4" }) })), notificationsEnabled && _jsx(Notifications, {}), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "icon", className: "size-9", children: [theme === 'light' ? (_jsx(Sun, { className: "size-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" })) : theme === 'dark' ? (_jsx(Moon, { className: "absolute size-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" })) : (_jsx(SunMoon, { className: "absolute size-[1.2rem] rotate-90 transition-all" })), _jsx("span", { className: "sr-only", children: t('toggleTheme') })] }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuItem, { onClick: () => setTheme('light'), children: t('themeLight') }), _jsx(DropdownMenuItem, { onClick: () => setTheme('dark'), children: t('themeDark') }), _jsx(DropdownMenuItem, { onClick: () => setTheme('system'), children: t('themeSystem') })] })] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", size: "icon", className: "size-9", children: _jsx(MenuIcon, { className: "size-4" }) }) }), _jsxs(DropdownMenuContent, { className: "z-[150] mr-6 min-w-40", children: [activeAdministrator?.emailAddress && (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuLabel, { className: "flex items-center gap-2 px-3 py-2 font-medium", children: [_jsx("div", { className: "flex size-6 items-center justify-center bg-primary/10 text-xs font-semibold text-primary", children: activeAdministrator.firstName.charAt(0).toUpperCase() }), _jsxs("div", { className: "truncate text-sm", children: [activeAdministrator.firstName, " ", activeAdministrator.lastName] })] }), _jsx(DropdownMenuSeparator, { className: "my-1" })] })), reindexEnabled && (_jsxs(DropdownMenuItem, { className: "flex cursor-pointer items-center gap-2 text-nowrap", onSelect: rebuildSearchIndex, children: [_jsx(RotateCwSquare, { className: "size-4" }), t('rebuildSerachIndex')] })), reindexEnabled && fastLinks.length > 0 && _jsx(DropdownMenuSeparator, {}), fastLinks.length > 0 && (_jsx(DropdownMenuGroup, { children: _jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { children: t('fastLinks') }), _jsx(DropdownMenuPortal, { children: _jsx(DropdownMenuSubContent, { children: fastLinks.map((link, index) => (_jsxs(React.Fragment, { children: [index > 0 && _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "flex cursor-pointer items-center gap-2 text-nowrap", onSelect: () => navigate(link.path, { viewTransition: true }), children: [_jsx(RotateCwSquare, { className: "size-4" }), link.label] })] }, link.key))) }) })] }) })), allowedTopNavigationActions?.length && allowedTopNavigationActions.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), allowedTopNavigationActions.map((action) => (_jsxs(DropdownMenuItem, { className: "flex cursor-pointer items-center gap-2", onSelect: action.onClick, children: [action.icon && _jsx(action.icon, { className: "size-4" }), action.label] }, action.label)))] })) : null, _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "flex cursor-pointer items-center gap-2 text-red-500", onSelect: async () => {
                                                                             const result = await createDialog({
                                                                                 title: t('logOutConfirmation'),
                                                                                 description: t('logOutConfirmationDescription'),
@@ -60,7 +94,9 @@ export const Menu = ({ children }) => {
                                                                                     { label: t('logOut'), variant: 'destructive', returnValue: true },
                                                                                 ],
                                                                             });
-                                                                            if (result)
+                                                                            if (result) {
+                                                                                clearAdministratorAccess();
                                                                                 logOut();
+                                                                            }
                                                                         }, children: [_jsx(LogOutIcon, { className: "size-4" }), t('logOut')] })] })] })] })] }), _jsx(ScrollArea, { className: "relative h-[calc(100vh-64px)] overflow-y-hidden lg:h-[calc(100vh-72px)]", children: children })] })] }) }) }) }) }));
 };

package/dist/locales/en/admins.json

@@ -32,6 +32,68 @@
             "placeholder": "Adding roles to a user"
         }
     },
+    "provision": {
+        "action": "Create with role",
+        "title": "Create administrator with role",
+        "description": "Use a business preset to create a role and assign it to a new administrator in one flow.",
+        "submit": "Create administrator",
+        "submitting": "Creating...",
+        "admin": {
+            "title": "Administrator account",
+            "description": "Credentials and contact details for the new administrator."
+        },
+        "role": {
+            "title": "Role setup",
+            "description": "Create a new role from the selected preset or reuse an existing role by code.",
+            "code": "Role code",
+            "descriptionLabel": "Role name",
+            "reuseExisting": "Use existing role with this code",
+            "reuseExistingHint": "When enabled, permissions and channels below are ignored and the administrator gets the existing role.",
+            "channels": "Channels",
+            "channelsPlaceholder": "Add channel"
+        },
+        "permissions": {
+            "title": "Permissions",
+            "description": "Review the preset and tweak permissions before creating the role.",
+            "reuseExisting": "Permissions are taken from the existing role when reuse mode is enabled."
+        },
+        "presets": {
+            "title": "Business preset",
+            "description": "Start from a safe operational role and adjust it if needed.",
+            "defaultBadge": "Default",
+            "backendNote": "The backend still enforces every permission. This wizard only provisions roles and administrator accounts.",
+            "shopManager": {
+                "title": "Shop manager",
+                "description": "Order handling, customer support, catalog visibility, payment/shipping lookup and stock-location visibility.",
+                "roleDescription": "Shop manager"
+            }
+        },
+        "summary": {
+            "title": "Summary",
+            "description": "What will be submitted.",
+            "role": "Role",
+            "channels": "Channels",
+            "permissions": "Permissions",
+            "mode": "Mode",
+            "create": "Create role",
+            "reuse": "Reuse role"
+        },
+        "validation": {
+            "emailRequired": "Email is required",
+            "emailInvalid": "Enter a valid email address",
+            "roleCodeRequired": "Role code is required",
+            "channelsRequired": "Select at least one channel",
+            "permissionsRequired": "Select at least one permission",
+            "roleCodeExists": "A role with this code already exists. Enable reuse or choose another code.",
+            "roleNotFound": "No existing role with this code was found."
+        },
+        "toasts": {
+            "success": "Administrator and role were created successfully",
+            "error": "Could not create administrator with role",
+            "roleCodeExists": "A role with this code already exists",
+            "roleNotFound": "No existing role with this code was found"
+        }
+    },
     "toasts": {
         "adminLoadingError": "Failed to load administrator with ID {{value}}",
         "adminUpdateSuccess": "Administrator successfully updated",

package/dist/locales/en/common.json

@@ -582,6 +582,7 @@
         "globalSettings": "global settings",
         "roles": "roles",
         "admins": "administrators",
+        "adminProvision": "administrator provisioning",
         "stock": "storage locations",
         "sellers": "retailers",
         "assets": "assets",

package/dist/locales/pl/admins.json

@@ -32,6 +32,68 @@
             "placeholder": "Dodawanie ról do użytkownika"
         }
     },
+    "provision": {
+        "action": "Utwórz z rolą",
+        "title": "Utwórz administratora z rolą",
+        "description": "Użyj biznesowego presetu, żeby w jednym przepływie utworzyć rolę i przypisać ją do nowego administratora.",
+        "submit": "Utwórz administratora",
+        "submitting": "Tworzenie...",
+        "admin": {
+            "title": "Konto administratora",
+            "description": "Dane logowania i kontaktowe nowego administratora."
+        },
+        "role": {
+            "title": "Konfiguracja roli",
+            "description": "Utwórz nową rolę z wybranego presetu albo użyj istniejącej roli po kodzie.",
+            "code": "Kod roli",
+            "descriptionLabel": "Nazwa roli",
+            "reuseExisting": "Użyj istniejącej roli o tym kodzie",
+            "reuseExistingHint": "Po włączeniu tej opcji uprawnienia i kanały poniżej są ignorowane, a administrator otrzyma istniejącą rolę.",
+            "channels": "Kanały",
+            "channelsPlaceholder": "Dodaj kanał"
+        },
+        "permissions": {
+            "title": "Uprawnienia",
+            "description": "Przejrzyj preset i dostosuj uprawnienia przed utworzeniem roli.",
+            "reuseExisting": "Uprawnienia są pobierane z istniejącej roli, gdy włączone jest użycie istniejącej roli."
+        },
+        "presets": {
+            "title": "Preset biznesowy",
+            "description": "Zacznij od bezpiecznej roli operacyjnej i dostosuj ją, jeśli trzeba.",
+            "defaultBadge": "Domyślny",
+            "backendNote": "Backend nadal egzekwuje każde uprawnienie. Ten wizard tylko zakłada role i konta administratorów.",
+            "shopManager": {
+                "title": "Shop manager",
+                "description": "Obsługa zamówień, wsparcie klienta, widoczność katalogu, podgląd płatności/wysyłki i lokalizacji magazynowych.",
+                "roleDescription": "Shop manager"
+            }
+        },
+        "summary": {
+            "title": "Podsumowanie",
+            "description": "To zostanie wysłane.",
+            "role": "Rola",
+            "channels": "Kanały",
+            "permissions": "Uprawnienia",
+            "mode": "Tryb",
+            "create": "Utwórz rolę",
+            "reuse": "Użyj roli"
+        },
+        "validation": {
+            "emailRequired": "Adres e-mail jest wymagany",
+            "emailInvalid": "Podaj poprawny adres e-mail",
+            "roleCodeRequired": "Kod roli jest wymagany",
+            "channelsRequired": "Wybierz co najmniej jeden kanał",
+            "permissionsRequired": "Wybierz co najmniej jedno uprawnienie",
+            "roleCodeExists": "Rola o tym kodzie już istnieje. Włącz użycie istniejącej roli albo wybierz inny kod.",
+            "roleNotFound": "Nie znaleziono istniejącej roli o tym kodzie."
+        },
+        "toasts": {
+            "success": "Administrator i rola zostały utworzone pomyślnie",
+            "error": "Nie udało się utworzyć administratora z rolą",
+            "roleCodeExists": "Rola o tym kodzie już istnieje",
+            "roleNotFound": "Nie znaleziono istniejącej roli o tym kodzie"
+        }
+    },
     "toasts": {
         "adminLoadingError": "Nie udało się załadować administratora o identyfikatorze {{value}}",
         "adminUpdateSuccess": "Administrator został pomyślnie zaktualizowany",