@deenruv/admin-dashboard 1.0.16 → 1.0.17-dev.14

package/dist/components/GlobalSearch.js

@@ -1,16 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, usePluginStore, Routes, useGlobalSearch, capitalizeFirstLetter, useTranslation, } from '@deenruv/react-ui-devkit';
+import { CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, useGlobalSearch, capitalizeFirstLetter, useTranslation, useServer, } from '@deenruv/react-ui-devkit';
 import { useEffect, useMemo } from 'react';
 import { useNavigate } from 'react-router';
 import { LayoutDashboard, ListPlus, FileText, Puzzle, ArrowRight } from 'lucide-react';
+import { canAccessAdminItem, useAdminAccess } from "../access/index.js";
 export const GlobalSearch = () => {
     const { t, tEntity } = useTranslation('common');
-    const { plugins } = usePluginStore();
+    const { routes } = useAdminAccess();
+    const userPermissions = useServer((p) => p.userPermissions);
     const isOpen = useGlobalSearch((s) => s.isOpen);
     const toggle = useGlobalSearch((s) => s.toggle);
     const close = useGlobalSearch((s) => s.close);
     const navigate = useNavigate();
+    const isEnabled = true;
     useEffect(() => {
+        if (!isEnabled)
+            return;
         const handleKeyDown = (e) => {
             if ((e.metaKey || e.ctrlKey) && e.key === ' ') {
                 e.preventDefault();
@@ -19,63 +24,33 @@ export const GlobalSearch = () => {
         };
         document.addEventListener('keydown', handleKeyDown);
         return () => document.removeEventListener('keydown', handleKeyDown);
-    }, [toggle]);
+    }, [isEnabled, toggle]);
     const allRoutes = useMemo(() => {
-        const routes = [];
-        Object.entries(Routes).forEach(([key, value]) => {
-            if (typeof value === 'object' && value !== null) {
-                const children = [];
-                if ('new' in value && typeof value.new === 'string') {
-                    children.push({
-                        name: capitalizeFirstLetter(t(`menu.${key}`)),
-                        path: value.new,
-                        type: 'new',
-                        description: tEntity('Utwórz', key),
-                    });
-                }
-                if ('list' in value && typeof value.list === 'string') {
-                    children.push({
-                        name: capitalizeFirstLetter(t(`menu.${key}`)),
-                        path: value.list,
-                        type: 'list',
-                        description: tEntity('Zobacz wszystkie', key, 'many'),
-                    });
-                }
-                routes.push({ name: key, children });
-            }
-            else if (typeof value === 'string') {
-                routes.push({
-                    name: capitalizeFirstLetter(t(`menu.${key}`)),
-                    path: value,
-                    type: 'default',
-                    description: `${t('globalSearch.navigateTo')} ${t(`menu.${key}`)}`,
-                });
-            }
-        });
-        plugins.forEach((plugin) => {
-            plugin.pages?.forEach((page, pageIndex) => {
-                if (page.path) {
-                    routes.push({
-                        name: `${plugin.name} - ${page.path || 'Page'}`,
-                        path: page.path,
-                        type: 'plugin',
-                        description: t('globalSearch.accessPlugin', { pluginName: plugin.name }),
-                    });
-                }
-            });
+        return routes
+            .filter((route) => route.search)
+            .filter((route) => canAccessAdminItem({ item: route, userPermissions }))
+            .map((route) => {
+            const search = route.search;
+            const isPlugin = search.type === 'plugin';
+            const translatedName = isPlugin ? search.menuKey : capitalizeFirstLetter(t(`menu.${search.menuKey}`));
+            const description = search.type === 'new'
+                ? tEntity('Utwórz', search.menuKey)
+                : search.type === 'list'
+                    ? tEntity('Zobacz wszystkie', search.menuKey, 'many')
+                    : search.type === 'plugin'
+                        ? t('globalSearch.accessPlugin', { pluginName: search.menuKey })
+                        : `${t('globalSearch.navigateTo')} ${t(`menu.${search.menuKey}`)}`;
+            return {
+                id: route.id,
+                name: translatedName,
+                path: route.path,
+                type: search.type,
+                description,
+            };
         });
-        return routes.flatMap((route, routeIndex) => route.children?.length
-            ? route.children.map((child, childIndex) => ({
-                ...child,
-                id: `${routeIndex}-${childIndex}-${child.type}-${route.name}`,
-            }))
-            : [
-                {
-                    ...route,
-                    id: `${routeIndex}-main-${route.name}`,
-                },
-            ]);
-    }, [plugins]);
+    }, [routes, t, tEntity, userPermissions]);
+    if (!isEnabled)
+        return null;
     // Group routes by type for better organization
     const groupedRoutes = useMemo(() => {
         const core = [];
@@ -110,25 +85,25 @@ export const GlobalSearch = () => {
                 return _jsx(LayoutDashboard, { className: "mr-2 h-4 w-4 text-gray-500" });
         }
     };
-    return (_jsxs(CommandDialog, { open: isOpen, onOpenChange: toggle, modal: true, children: [_jsx(CommandInput, { placeholder: t('globalSearch.placeholder'), className: "flex-1 bg-transparent text-base outline-none placeholder:text-muted-foreground" }), _jsxs(CommandList, { className: "max-h-[300px] overflow-y-auto py-2", children: [_jsx(CommandEmpty, { className: "py-6 text-center text-sm", children: t('globalSearch.emptyState') }), groupedRoutes.core.length > 0 && (_jsx(CommandGroup, { heading: t('globalSearch.navigation'), className: "px-2", children: groupedRoutes.core.map((route) => (_jsxs(CommandItem, { onSelect: () => {
+    return (_jsxs(CommandDialog, { open: isOpen, onOpenChange: toggle, modal: true, children: [_jsx(CommandInput, { placeholder: t('globalSearch.placeholder'), className: "flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground" }), _jsxs(CommandList, { className: "max-h-[320px] overflow-y-auto py-2", children: [_jsx(CommandEmpty, { className: "py-6 text-center text-sm", children: t('globalSearch.emptyState') }), groupedRoutes.core.length > 0 && (_jsx(CommandGroup, { heading: t('globalSearch.navigation'), className: "px-2", children: groupedRoutes.core.map((route) => (_jsxs(CommandItem, { onSelect: () => {
                                 if (route.path) {
                                     navigate(route.path);
                                 }
                                 close();
-                            }, className: "group flex cursor-pointer items-center rounded-md px-2 py-2 transition-colors hover:bg-accent", children: [getRouteIcon(route.type), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "font-medium", children: route.name }), route.description && _jsx("span", { className: "text-xs text-muted-foreground", children: route.description })] }), _jsx(ArrowRight, { className: "ml-auto h-4 w-4 opacity-0 transition-opacity group-hover:opacity-70" })] }, route.id || `core-${route.name}-${route.path}`))) })), groupedRoutes.newItems.length > 0 && (_jsx(CommandGroup, { heading: t('globalSearch.createNew'), className: "px-2", children: groupedRoutes.newItems.map((route) => (_jsxs(CommandItem, { onSelect: () => {
+                            }, className: "group flex cursor-pointer items-center px-3 py-2.5 transition-colors hover:bg-accent", children: [getRouteIcon(route.type), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "font-medium", children: route.name }), route.description && _jsx("span", { className: "text-xs text-muted-foreground", children: route.description })] }), _jsx(ArrowRight, { className: "ml-auto h-4 w-4 opacity-0 transition-opacity group-hover:opacity-70" })] }, route.id || `core-${route.name}-${route.path}`))) })), groupedRoutes.newItems.length > 0 && (_jsx(CommandGroup, { heading: t('globalSearch.createNew'), className: "px-2", children: groupedRoutes.newItems.map((route) => (_jsxs(CommandItem, { onSelect: () => {
                                 if (route.path) {
                                     navigate(route.path);
                                 }
                                 close();
-                            }, className: "group flex cursor-pointer items-center rounded-md px-2 py-2 transition-colors hover:bg-accent", children: [getRouteIcon(route.type), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "font-medium", children: route.name }), route.description && _jsx("span", { className: "text-xs text-muted-foreground", children: route.description })] }), _jsx(ArrowRight, { className: "ml-auto h-4 w-4 opacity-0 transition-opacity group-hover:opacity-70" })] }, route.id || `new-${route.name}-${route.path}`))) })), groupedRoutes.lists.length > 0 && (_jsx(CommandGroup, { heading: t('globalSearch.viewLists'), className: "px-2", children: groupedRoutes.lists.map((route) => (_jsxs(CommandItem, { onSelect: () => {
+                            }, className: "group flex cursor-pointer items-center px-3 py-2.5 transition-colors hover:bg-accent", children: [getRouteIcon(route.type), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "font-medium", children: route.name }), route.description && _jsx("span", { className: "text-xs text-muted-foreground", children: route.description })] }), _jsx(ArrowRight, { className: "ml-auto h-4 w-4 opacity-0 transition-opacity group-hover:opacity-70" })] }, route.id || `new-${route.name}-${route.path}`))) })), groupedRoutes.lists.length > 0 && (_jsx(CommandGroup, { heading: t('globalSearch.viewLists'), className: "px-2", children: groupedRoutes.lists.map((route) => (_jsxs(CommandItem, { onSelect: () => {
                                 if (route.path) {
                                     navigate(route.path);
                                 }
                                 close();
-                            }, className: "group flex cursor-pointer items-center rounded-md px-2 py-2 transition-colors hover:bg-accent", children: [getRouteIcon(route.type), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "font-medium", children: route.name }), route.description && _jsx("span", { className: "text-xs text-muted-foreground", children: route.description })] }), _jsx(ArrowRight, { className: "ml-auto h-4 w-4 opacity-0 transition-opacity group-hover:opacity-70" })] }, route.id || `list-${route.name}-${route.path}`))) })), groupedRoutes.pluginRoutes.length > 0 && (_jsx(CommandGroup, { heading: t('globalSearch.plugins'), className: "px-2", children: groupedRoutes.pluginRoutes.map((route) => (_jsxs(CommandItem, { onSelect: () => {
+                            }, className: "group flex cursor-pointer items-center px-3 py-2.5 transition-colors hover:bg-accent", children: [getRouteIcon(route.type), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "font-medium", children: route.name }), route.description && _jsx("span", { className: "text-xs text-muted-foreground", children: route.description })] }), _jsx(ArrowRight, { className: "ml-auto h-4 w-4 opacity-0 transition-opacity group-hover:opacity-70" })] }, route.id || `list-${route.name}-${route.path}`))) })), groupedRoutes.pluginRoutes.length > 0 && (_jsx(CommandGroup, { heading: t('globalSearch.plugins'), className: "px-2", children: groupedRoutes.pluginRoutes.map((route) => (_jsxs(CommandItem, { onSelect: () => {
                                 if (route.path) {
                                     navigate(route.path);
                                 }
                                 close();
-                            }, className: "group flex cursor-pointer items-center rounded-md px-2 py-2 transition-colors hover:bg-accent", children: [getRouteIcon(route.type), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "font-medium", children: route.name }), route.description && _jsx("span", { className: "text-xs text-muted-foreground", children: route.description })] }), _jsx(ArrowRight, { className: "ml-auto h-4 w-4 opacity-0 transition-opacity group-hover:opacity-70" })] }, route.id || `plugin-${route.name}-${route.path}`))) }))] }), _jsx("div", { className: "border-t bg-muted/50 p-2", children: _jsxs("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [_jsxs("div", { className: "flex gap-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("kbd", { className: "rounded border bg-muted px-1.5 py-0.5 text-[10px]", children: "\u2191" }), _jsx("kbd", { className: "rounded border bg-muted px-1.5 py-0.5 text-[10px]", children: "\u2193" }), _jsx("span", { children: t('globalSearch.navigate') })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("kbd", { className: "rounded border bg-muted px-1.5 py-0.5 text-[10px]", children: "Enter" }), _jsx("span", { children: t('globalSearch.select') })] })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("kbd", { className: "rounded border bg-muted px-1.5 py-0.5 text-[10px]", children: "Esc" }), _jsx("span", { children: t('globalSearch.close') })] })] }) })] }));
+                            }, className: "group flex cursor-pointer items-center px-3 py-2.5 transition-colors hover:bg-accent", children: [getRouteIcon(route.type), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "font-medium", children: route.name }), route.description && _jsx("span", { className: "text-xs text-muted-foreground", children: route.description })] }), _jsx(ArrowRight, { className: "ml-auto h-4 w-4 opacity-0 transition-opacity group-hover:opacity-70" })] }, route.id || `plugin-${route.name}-${route.path}`))) }))] }), _jsx("div", { className: "border-t bg-card p-2", children: _jsxs("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [_jsxs("div", { className: "flex gap-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("kbd", { className: "border bg-muted px-1.5 py-0.5 text-[10px]", children: "\u2191" }), _jsx("kbd", { className: "border bg-muted px-1.5 py-0.5 text-[10px]", children: "\u2193" }), _jsx("span", { children: t('globalSearch.navigate') })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("kbd", { className: "border bg-muted px-1.5 py-0.5 text-[10px]", children: "Enter" }), _jsx("span", { children: t('globalSearch.select') })] })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("kbd", { className: "border bg-muted px-1.5 py-0.5 text-[10px]", children: "Esc" }), _jsx("span", { children: t('globalSearch.close') })] })] }) })] }));
 };

package/dist/components/Menu/ActiveAdmins.js

@@ -20,5 +20,5 @@ export const ActiveAdmins = () => {
         else
             return t('awesomeMenu.above5MinAgo');
     };
-    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", size: "sm", className: "h-10", children: t('awesomeMenu.activeAdministratorsValue', { value: activeClients.length }) }) }), _jsx(PopoverContent, { className: "mr-4", children: _jsxs("div", { className: "flex flex-col gap-4 rounded-md", children: [_jsx(Label, { className: "select-none", children: t('awesomeMenu.activeAdministrators') }), activeClients.length ? (activeClients.map((client) => (_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { className: "flex w-full flex-col", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-sm font-bold", children: [client.firstName, " ", client.lastName, " ", client.me && '(me)'] }), _jsx(motion.div, { animate: { scale: [1, 1.2, 1] }, transition: { duration: 1.5, repeat: Infinity }, className: "size-2 rounded-full bg-green-500" })] }), _jsx("span", { className: "text-sm text-muted-foreground", children: formatTimeAgo(client.lastActive) }), !client.me && (_jsx(NavLink, { to: client.location, className: "text-sm text-muted-foreground", viewTransition: true, children: client.location.replace(window.location.origin, '') }))] }) }, client.id)))) : (_jsx("div", { children: _jsx("span", { className: "text-sm text-muted-foreground", children: t('awesomeMenu.noActiveAdministrators') }) }))] }) })] }));
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", size: "sm", className: "h-10", children: t('awesomeMenu.activeAdministratorsValue', { value: activeClients.length }) }) }), _jsx(PopoverContent, { className: "mr-4", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(Label, { className: "select-none", children: t('awesomeMenu.activeAdministrators') }), activeClients.length ? (activeClients.map((client) => (_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { className: "flex w-full flex-col", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-sm font-bold", children: [client.firstName, " ", client.lastName, " ", client.me && '(me)'] }), _jsx(motion.div, { animate: { scale: [1, 1.2, 1] }, transition: { duration: 1.5, repeat: Infinity }, className: "size-2 rounded-full bg-green-500" })] }), _jsx("span", { className: "text-sm text-muted-foreground", children: formatTimeAgo(client.lastActive) }), !client.me && (_jsx(NavLink, { to: client.location, className: "text-sm text-muted-foreground", viewTransition: true, children: client.location.replace(window.location.origin, '') }))] }) }, client.id)))) : (_jsx("div", { children: _jsx("span", { className: "text-sm text-muted-foreground", children: t('awesomeMenu.noActiveAdministrators') }) }))] }) })] }));
 };

package/dist/components/Menu/ChannelSwitcher.js

@@ -16,5 +16,5 @@ export function ChannelSwitcher({ className }) {
     if (!channels || channels.length === 0) {
         return null;
     }
-    return (_jsx("div", { className: className, children: _jsxs(Select, { defaultValue: selectedChannel?.id, onValueChange: onChannelChange, value: selectedChannel?.id, children: [_jsx(SelectTrigger, { className: cn('flex items-center gap-2 [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0 [&>span]:line-clamp-1 [&>span]:flex [&>span]:w-full [&>span]:items-center [&>span]:gap-1 [&>span]:truncate'), "aria-label": "Select an channel", children: _jsx(SelectValue, { children: _jsx("span", { className: "ml-2", children: getChannelLabel(channels.find((account) => account.id === selectedChannel?.id)?.code) }) }) }), _jsx(SelectContent, { children: channels.map((channel) => (_jsx(SelectItem, { value: channel.id, children: _jsx("div", { className: "flex items-center gap-3 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-foreground", children: getChannelLabel(channel.code) }) }, channel.code))) })] }) }));
+    return (_jsx("div", { className: className, children: _jsxs(Select, { defaultValue: selectedChannel?.id, onValueChange: onChannelChange, value: selectedChannel?.id, children: [_jsx(SelectTrigger, { className: cn('flex h-9 items-center gap-2 border-border/80 bg-card px-3 text-xs font-medium [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0 [&>span]:line-clamp-1 [&>span]:flex [&>span]:w-full [&>span]:items-center [&>span]:gap-1 [&>span]:truncate'), "aria-label": "Select a channel", children: _jsx(SelectValue, { children: _jsx("span", { className: "ml-1", children: getChannelLabel(channels.find((account) => account.id === selectedChannel?.id)?.code) }) }) }), _jsx(SelectContent, { children: channels.map((channel) => (_jsx(SelectItem, { value: channel.id, children: _jsx("div", { className: "flex items-center gap-3 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-foreground", children: getChannelLabel(channel.code) }) }, channel.code))) })] }) }));
 }

package/dist/components/Menu/LanguagesDropdown.js

@@ -23,5 +23,5 @@ export const LanguagesDropdown = () => {
     })));
     const Flag = langFlagDict[contentLng] || EU;
     const contentLanguages = selectedChannel?.availableLanguageCodes || [];
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", className: "h-9", children: [t('language'), _jsx(Badge, { variant: "outline", className: "ml-2", children: _jsx(Flag, { className: "size-4" }) })] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "z-[150]", children: [_jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { children: _jsx("span", { children: t('content') }) }), _jsx(DropdownMenuPortal, { children: _jsx(DropdownMenuSubContent, { className: "z-[150]", children: contentLanguages.map((lng) => (_jsxs(DropdownMenuItem, { onClick: () => lng !== contentLng && setContentLng(lng), children: [_jsx("span", { children: getLanguageName(lng, uiLng) }), lng === contentLng && _jsx(Check, { className: "ml-auto size-4" })] }, lng))) }) })] }), _jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { children: _jsx("span", { children: "UI" }) }), _jsx(DropdownMenuPortal, { children: _jsx(DropdownMenuSubContent, { className: "z-[150]", children: uiLanguages.map((lng) => (_jsxs(DropdownMenuItem, { onClick: () => lng !== uiLng && setUiLng(lng), children: [_jsx("span", { children: getLanguageName(lng) }), lng === uiLng && _jsx(Check, { className: "ml-auto size-4" })] }, lng))) }) })] })] })] }));
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", className: "h-9 px-3 text-xs", children: [t('language'), _jsx(Badge, { variant: "outline", className: "ml-2 h-5 px-1.5", children: _jsx(Flag, { className: "size-4" }) })] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "z-[150]", children: [_jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { children: _jsx("span", { children: t('content') }) }), _jsx(DropdownMenuPortal, { children: _jsx(DropdownMenuSubContent, { className: "z-[150]", children: contentLanguages.map((lng) => (_jsxs(DropdownMenuItem, { onClick: () => lng !== contentLng && setContentLng(lng), children: [_jsx("span", { children: getLanguageName(lng, uiLng) }), lng === contentLng && _jsx(Check, { className: "ml-auto size-4" })] }, lng))) }) })] }), _jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { children: _jsx("span", { children: "UI" }) }), _jsx(DropdownMenuPortal, { children: _jsx(DropdownMenuSubContent, { className: "z-[150]", children: uiLanguages.map((lng) => (_jsxs(DropdownMenuItem, { onClick: () => lng !== uiLng && setUiLng(lng), children: [_jsx("span", { children: getLanguageName(lng) }), lng === uiLng && _jsx(Check, { className: "ml-auto size-4" })] }, lng))) }) })] })] })] }));
 };

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%-70px)] flex-col gap-4 pb-2 lg:h-[calc(100%-80px)]", children: Array.from({ length: 3 }).map((_, groupIdx) => (_jsxs("div", { className: "flex flex-col gap-1 px-2", children: [!isCollapsed && (_jsx("div", { className: "px-4 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 rounded-md px-4 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", { 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%-70px)] flex-col gap-4 pb-2 data-[collapsed=true]:py-2 lg:h-[calc(100%-80px)]", 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, children: [!isCollapsed && (_jsx(AccordionTrigger, { className: cn('flex items-center justify-between pr-3 hover:no-underline'), children: _jsxs("div", { className: "flex items-center gap-2 px-6", children: [_jsx("h4", { className: "text-xs font-bold uppercase hover:underline", 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-2' : 'pb-4'), children: _jsx("nav", { id: group.id, className: "grid gap-1 px-2 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-muted opacity-100 hover:bg-muted hover:text-muted-foreground dark:bg-muted dark:hover:bg-muted'), children: [_jsx(link.icon, { className: "size-6" }), _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 items-center justify-start rounded-md px-4 py-2 capitalize', location.pathname === link.href &&
-                                                    'bg-muted font-semibold opacity-100 hover:bg-muted hover:text-muted-foreground dark:bg-muted dark:hover:bg-muted'), 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" }), 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 bg-secondary py-2 text-xs shadow-2xl select-none", children: [isPermittedToExtensions && !isCollapsed && (_jsxs(_Fragment, { children: [_jsx("div", { children: _jsx(NavLink, { to: Routes.extensions, viewTransition: true, children: _jsxs("div", { className: cn('relative flex items-center justify-center rounded-md px-4 capitalize', location.pathname === Routes.extensions &&
-                                    'bg-muted font-semibold opacity-100 hover:bg-muted hover:text-muted-foreground dark:bg-muted dark:hover:bg-muted'), children: [_jsx(Puzzle, { className: "mr-2 size-4" }), capitalizeFirstLetter(t('menu.extensions'))] }) }) }), _jsx(Separator, {})] })), _jsxs("div", { className: "flex items-center justify-center gap-1", children: [!isCollapsed && _jsx("p", { className: "uppercase", children: "Deenruv" }), _jsxs("span", { children: [!isCollapsed ? 'ver. ' : 'v. ', window.__DEENRUV_SETTINGS__.appVersion] })] })] }));
+    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/Notifications.js

@@ -87,5 +87,5 @@ export const Notifications = () => {
             prevJobQueuesRef.current = [...jobQueues];
         }
     }, [jobQueues, status]);
-    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "icon", className: "relative size-10", children: [_jsx(Bell, { className: "size-4" }), hasUnread && (_jsx("span", { className: "absolute top-1.5 right-1.5 size-2 rounded-full bg-red-500", children: _jsx("span", { className: "absolute inset-0 animate-ping rounded-full bg-red-400 opacity-75" }) })), _jsx("span", { className: "sr-only", children: t('notificationsBox.toggleNotifications') })] }) }), _jsx(PopoverContent, { className: "z-[2138] w-md p-0", align: "end", children: _jsx(Tabs, { defaultValue: "ALL", className: "w-full", children: _jsxs(Card, { className: "w-full border-0 shadow-none", children: [_jsxs(CardHeader, { className: cn('flex w-full flex-col items-start justify-start gap-2 bg-muted/30 p-0', components.length === 0 && 'pb-3'), children: [_jsxs("div", { className: "flex h-full w-full flex-1 items-center justify-between px-4 pt-3", children: [_jsxs("div", { className: "flex flex-col", children: [_jsx(CardTitle, { className: "text-base", children: t('notificationsBox.notifications') }), _jsx(CardDescription, { className: "mt-1 text-xs", children: t('notificationsBox.recentNotifications') })] }), notifications.length > 0 && (_jsxs(Button, { variant: "ghost", size: "sm", className: "h-8 text-xs", onClick: clearAllNotifications, children: [_jsx(Trash2, { className: "mr-1 size-3" }), t('notificationsBox.clearAll')] }))] }), components.length !== 0 && (_jsxs(TabsList, { className: "m-0 w-full rounded-none", children: [_jsx(TabsTrigger, { value: "ALL", className: "w-full rounded-none text-left", children: t('notificationsBox.all') }), cyclingNotifications.map((notification) => (_jsx(TabsTrigger, { value: notification.id, className: "w-full rounded-none text-left", children: notification.id }, notification.id)))] }))] }), _jsxs(CardContent, { className: "max-h-[400px] overflow-auto p-0", children: [_jsx(TabsContent, { value: "ALL", className: "mt-0", children: notifications.length > 0 ? (_jsx("div", { className: "divide-y", children: notifications.map((notification) => (_jsxs("div", { className: `flex items-start gap-3 p-4 transition-colors ${notification.read ? 'bg-background' : 'bg-muted/20'}`, children: [_jsx("div", { className: "mt-0.5", children: notification.icon }), _jsxs("div", { className: "flex-1 space-y-1", children: [_jsx("p", { className: "text-sm leading-none font-medium", children: notification.title }), _jsx("p", { className: "text-xs text-muted-foreground", children: notification.description }), _jsxs("div", { className: "flex items-center pt-1", children: [_jsx(Clock, { className: "mr-1 size-3 text-muted-foreground" }), _jsx("span", { className: "text-xs text-muted-foreground", children: notification.time })] })] })] }, notification.id))) })) : (_jsxs("div", { className: "flex flex-col items-center justify-center px-4 py-8 text-center", children: [_jsx("div", { className: "mb-3 rounded-full bg-muted p-3", children: _jsx(Bell, { className: "size-6 text-muted-foreground" }) }), _jsx("h3", { className: "text-sm font-medium", children: t('notificationsBox.emptyStateMessage') }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: t('notificationsBox.emptyStateDescription') })] })) }), components.map((notification) => (_jsx(TabsContent, { value: notification.id, children: notification.component }, notification.id)))] }), hasUnread && (_jsx(CardFooter, { className: "flex items-center justify-end p-4", children: _jsxs(Button, { variant: "ghost", size: "sm", className: "h-8 text-xs", onClick: markAllAsRead, children: [_jsx(Check, { className: "mr-1 size-3" }), t('notificationsBox.markAllAsRead')] }) }))] }) }) })] }));
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "icon", className: "relative size-9", children: [_jsx(Bell, { className: "size-4" }), hasUnread && (_jsx("span", { className: "absolute top-1.5 right-1.5 size-2 rounded-full bg-red-500", children: _jsx("span", { className: "absolute inset-0 animate-ping rounded-full bg-red-400 opacity-75" }) })), _jsx("span", { className: "sr-only", children: t('notificationsBox.toggleNotifications') })] }) }), _jsx(PopoverContent, { className: "z-[2138] w-[min(28rem,calc(100vw-2rem))] p-0", align: "end", children: _jsx(Tabs, { defaultValue: "ALL", className: "w-full", children: _jsxs(Card, { className: "w-full border-0 shadow-none", children: [_jsxs(CardHeader, { className: cn('flex w-full flex-col items-start justify-start gap-2 bg-card p-0', components.length === 0 && 'pb-3'), children: [_jsxs("div", { className: "flex h-full w-full flex-1 items-center justify-between px-4 pt-3", children: [_jsxs("div", { className: "flex flex-col", children: [_jsx(CardTitle, { className: "text-base", children: t('notificationsBox.notifications') }), _jsx(CardDescription, { className: "mt-1 text-xs", children: t('notificationsBox.recentNotifications') })] }), notifications.length > 0 && (_jsxs(Button, { variant: "ghost", size: "sm", className: "h-8 text-xs", onClick: clearAllNotifications, children: [_jsx(Trash2, { className: "mr-1 size-3" }), t('notificationsBox.clearAll')] }))] }), components.length !== 0 && (_jsxs(TabsList, { className: "m-0 w-full bg-muted/50", children: [_jsx(TabsTrigger, { value: "ALL", className: "w-full text-left", children: t('notificationsBox.all') }), cyclingNotifications.map((notification) => (_jsx(TabsTrigger, { value: notification.id, className: "w-full text-left", children: notification.id }, notification.id)))] }))] }), _jsxs(CardContent, { className: "max-h-[400px] overflow-auto p-0", children: [_jsx(TabsContent, { value: "ALL", className: "mt-0", children: notifications.length > 0 ? (_jsx("div", { className: "divide-y", children: notifications.map((notification) => (_jsxs("div", { className: `flex items-start gap-3 p-4 transition-colors ${notification.read ? 'bg-card' : 'bg-accent/40'}`, children: [_jsx("div", { className: "mt-0.5", children: notification.icon }), _jsxs("div", { className: "flex-1 space-y-1", children: [_jsx("p", { className: "text-sm leading-none font-medium", children: notification.title }), _jsx("p", { className: "text-xs text-muted-foreground", children: notification.description }), _jsxs("div", { className: "flex items-center pt-1", children: [_jsx(Clock, { className: "mr-1 size-3 text-muted-foreground" }), _jsx("span", { className: "text-xs text-muted-foreground", children: notification.time })] })] })] }, notification.id))) })) : (_jsxs("div", { className: "flex flex-col items-center justify-center px-4 py-8 text-center", children: [_jsx("div", { className: "mb-3 bg-muted p-3", children: _jsx(Bell, { className: "size-6 text-muted-foreground" }) }), _jsx("h3", { className: "text-sm font-medium", children: t('notificationsBox.emptyStateMessage') }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: t('notificationsBox.emptyStateDescription') })] })) }), components.map((notification) => (_jsx(TabsContent, { value: notification.id, children: notification.component }, notification.id)))] }), hasUnread && (_jsx(CardFooter, { className: "flex items-center justify-end p-4", children: _jsxs(Button, { variant: "ghost", size: "sm", className: "h-8 text-xs", onClick: markAllAsRead, children: [_jsx(Check, { className: "mr-1 size-3" }), t('notificationsBox.markAllAsRead')] }) }))] }) }) })] }));
 };