@deenruv/admin-dashboard 1.0.0

package/dist/components/History/EditEntryDialog.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Label, Textarea, cn, Badge, useTranslation, } from '@deenruv/react-ui-devkit';
+import { Checkbox } from '@radix-ui/react-checkbox';
+import { useState } from 'react';
+import { Pencil, MessageCircle, ShieldCheck, Save } from 'lucide-react';
+export const EditEntryDialog = ({ isOpen, setIsOpen, selectedNote, onConfirm, setSelectedNote, }) => {
+    const { t } = useTranslation('common');
+    const [isUpdating, setIsUpdating] = useState(false);
+    const handleUpdate = async () => {
+        if (!selectedNote || selectedNote?.data.note === '')
+            return;
+        setIsUpdating(true);
+        try {
+            await onConfirm({
+                noteId: selectedNote.id,
+                isPublic: selectedNote.isPublic,
+                note: selectedNote.data.note,
+            });
+            setIsOpen(false);
+        }
+        finally {
+            setIsUpdating(false);
+        }
+    };
+    return (_jsx(AlertDialog, { open: isOpen, onOpenChange: setIsOpen, children: _jsxs(AlertDialogContent, { className: "min-w-min", children: [_jsx(AlertDialogHeader, { children: _jsxs(AlertDialogTitle, { className: "flex items-center gap-2", children: [_jsx(Pencil, { className: "size-5 text-blue-500" }), t('history.editNoteHeader', 'Edit Note')] }) }), _jsx("div", { className: "my-4", children: _jsx(Textarea, { onChange: (e) => setSelectedNote((p) => (p ? { ...p, data: { ...p?.data, note: e.currentTarget.value } } : undefined)), value: selectedNote?.data.note || '', className: "h-[200px] w-full min-w-[400px] resize-none overflow-auto rounded-md p-3", placeholder: t('history.notePlaceholder', 'Enter your note here...') }) }), _jsxs("div", { className: "mb-4 flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "isPublicEdit", name: "isPublicEdit", checked: !selectedNote?.isPublic, onClick: () => setSelectedNote((p) => (p ? { ...p, isPublic: !p.isPublic } : undefined)) }), _jsxs(Label, { htmlFor: "isPublicEdit", className: "flex cursor-pointer items-center gap-1 text-sm", children: [_jsx(ShieldCheck, { className: cn('h-4 w-4', !selectedNote?.isPublic ? 'text-emerald-500' : 'text-muted-foreground') }), t('history.isPrivate', 'Private note'), _jsx("span", { className: "text-muted-foreground ml-1 text-xs", children: t('history.isPrivateDescription', '(visible only to admins)') })] })] }), _jsx(Badge, { variant: !selectedNote?.isPublic ? 'outline' : 'secondary', className: cn('gap-1', selectedNote?.isPublic
+                                ? 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300'
+                                : 'border-emerald-200 text-emerald-800 dark:border-emerald-800 dark:text-emerald-300'), children: selectedNote?.isPublic ? (_jsxs(_Fragment, { children: [_jsx(MessageCircle, { className: "size-3" }), t('history.toAdminsAndCustomer', 'Visible to customer')] })) : (_jsxs(_Fragment, { children: [_jsx(ShieldCheck, { className: "size-3" }), t('history.toAdmins', 'Admin only')] })) })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: isUpdating, children: t('history.cancel', 'Cancel') }), _jsx(AlertDialogAction, { onClick: (e) => {
+                                e.preventDefault();
+                                handleUpdate();
+                            }, disabled: selectedNote?.data.note === '' || isUpdating, className: "gap-2", children: isUpdating ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "size-4 animate-spin rounded-full border-2 border-current border-r-transparent" }), t('history.updating', 'Updating...')] })) : (_jsxs(_Fragment, { children: [_jsx(Save, { className: "size-4" }), t('history.save', 'Save Changes')] })) })] })] }) }));
+};

package/dist/components/History/History.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { AddEntryForm, DeleteEntryDialog, EditEntryDialog, Timeline } from "./";
+import { ClipboardList } from 'lucide-react';
+export const History = ({ data, onNoteAdd, onNoteEdit, onNoteDelete }) => {
+    const [newNote, setNewNote] = useState('');
+    const [isPrivate, setIsPrivate] = useState(false);
+    const [isEditOpen, setIsEditOpen] = useState(false);
+    const [isDeleteOpen, setIsDeleteOpen] = useState(false);
+    const [selectedNote, setSelectedNote] = useState();
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx(AddEntryForm, { isPrivate: isPrivate, newNote: newNote, onConfirm: onNoteAdd, setIsPrivate: setIsPrivate, setNewNote: setNewNote }), data && data.length > 0 ? (_jsx(Timeline, { setIsDeleteOpen: setIsDeleteOpen, setIsEditOpen: setIsEditOpen, setSelectedNote: setSelectedNote, data: data })) : (_jsxs("div", { className: "flex flex-col items-center justify-center gap-3 py-8 text-center", children: [_jsx("div", { className: "rounded-full bg-amber-100 p-3 dark:bg-amber-900/30", children: _jsx(ClipboardList, { className: "size-6 text-amber-500 dark:text-amber-400" }) }), _jsxs("div", { children: [_jsx("p", { className: "font-medium", children: "No history entries yet" }), _jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: "Add a note above to start building the order history" })] })] })), _jsx(DeleteEntryDialog, { isOpen: isDeleteOpen, setIsOpen: setIsDeleteOpen, selectedNote: selectedNote, onConfirm: onNoteDelete }), _jsx(EditEntryDialog, { isOpen: isEditOpen, setIsOpen: setIsEditOpen, selectedNote: selectedNote, setSelectedNote: setSelectedNote, onConfirm: onNoteEdit })] }));
+};

package/dist/components/History/ModifyHistoryInfo.js

@@ -0,0 +1,6 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from '@deenruv/react-ui-devkit';
+export const ModifyHistoryInfo = ({ modificationId }) => {
+    const { t } = useTranslation('orders');
+    return (_jsxs("div", { className: "text-muted-foreground flex gap-2 text-sm", children: [t('modifyInfo'), ": ", modificationId] }));
+};

package/dist/components/History/Timeline.js

@@ -0,0 +1,53 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Timeline as TimelineWrapper, TimelineContent, TimelineDot, TimelineHeading, TimelineItem, TimelineLine, OrderStateBadge, cn, Badge, useTranslation, useOrder, } from '@deenruv/react-ui-devkit';
+import { format } from 'date-fns';
+import { HistoryEntryType } from '@deenruv/admin-types';
+import { EllipsisVerticalIcon, Pencil, Trash, MessageCircle, ShieldAlert, ShieldCheck, Clock, ArrowRightLeft, CreditCard, Package, User, } from 'lucide-react';
+import { ModifyHistoryInfo } from './ModifyHistoryInfo.js';
+// Helper function to get icon based on history entry type
+const getEntryTypeIcon = (type, isPublic) => {
+    switch (type) {
+        case HistoryEntryType.ORDER_STATE_TRANSITION:
+            return _jsx(ArrowRightLeft, { className: "size-4 text-blue-500" });
+        case HistoryEntryType.ORDER_PAYMENT_TRANSITION:
+            return _jsx(CreditCard, { className: "size-4 text-purple-500" });
+        case HistoryEntryType.ORDER_FULFILLMENT:
+            return _jsx(Package, { className: "size-4 text-green-500" });
+        case HistoryEntryType.ORDER_NOTE:
+            return isPublic ? (_jsx(MessageCircle, { className: "size-4 text-amber-500" })) : (_jsx(ShieldAlert, { className: "size-4 text-emerald-500" }));
+        case HistoryEntryType.CUSTOMER_NOTE:
+            return _jsx(User, { className: "size-4 text-indigo-500" });
+        default:
+            return _jsx(Clock, { className: "size-4 text-gray-500" });
+    }
+};
+export const Timeline = ({ data, setIsEditOpen, setIsDeleteOpen, setSelectedNote, }) => {
+    const { t } = useTranslation('common');
+    const { order } = useOrder();
+    return (_jsxs("div", { className: "bg-card rounded-md border p-4", children: [_jsx("h3", { className: "mb-4 font-medium", children: t('history.timeline') }), _jsx(TimelineWrapper, { positions: "left", className: "w-full", children: data?.map((history) => {
+                    const entryIcon = getEntryTypeIcon(history.type, history.isPublic);
+                    const isNote = history.type === HistoryEntryType.ORDER_NOTE || history.type === HistoryEntryType.CUSTOMER_NOTE;
+                    const modificationNote = history.type === HistoryEntryType.ORDER_MODIFIED
+                        ? order?.modifications.find((m) => m.id === history.data.modificationId)?.note
+                        : '';
+                    return (_jsxs(TimelineItem, { status: "done", className: "w-full pb-6", children: [_jsx(TimelineHeading, { side: "right", className: "w-full", children: _jsxs("div", { className: "flex w-full items-center justify-between", children: [_jsx("div", { className: "flex items-center gap-2", children: history.administrator ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "bg-muted flex size-8 items-center justify-center rounded-full", children: _jsxs("span", { className: "text-xs font-medium", children: [history.administrator.firstName?.[0], history.administrator.lastName?.[0]] }) }), _jsxs("div", { children: [_jsxs("div", { className: "font-medium", children: [history.administrator?.firstName, " ", history.administrator?.lastName] }), _jsxs("div", { className: "text-muted-foreground text-xs", children: [format(new Date(history.createdAt), 'MMM d, yyyy • h:mm a'), Math.floor(new Date(history.createdAt).getTime() / 1000) !==
+                                                                        Math.floor(new Date(history.updatedAt).getTime() / 1000) && (_jsx("span", { className: "ml-1 italic", children: t('history.edited') }))] })] })] })) : (_jsx("div", { className: "text-muted-foreground text-sm", children: format(new Date(history.createdAt), 'MMM d, yyyy • h:mm a') })) }), _jsxs("div", { className: "flex items-center gap-2", children: [isNote && (_jsx(Badge, { variant: history.isPublic ? 'secondary' : 'outline', className: cn('gap-1', history.isPublic
+                                                        ? 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300'
+                                                        : 'border-emerald-200 text-emerald-800 dark:border-emerald-800 dark:text-emerald-300'), children: history.isPublic ? (_jsxs(_Fragment, { children: [_jsx(MessageCircle, { className: "size-3" }), t('history.public', 'Public')] })) : (_jsxs(_Fragment, { children: [_jsx(ShieldCheck, { className: "size-3" }), t('history.private', 'Private')] })) })), isNote ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "size-8", children: _jsx(EllipsisVerticalIcon, { className: "size-4" }) }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsxs(DropdownMenuItem, { onClick: () => {
+                                                                        setIsEditOpen(true);
+                                                                        setSelectedNote(history);
+                                                                    }, className: "flex cursor-pointer items-center gap-2", children: [_jsx(Pencil, { className: "size-4" }), " ", t('history.edit', 'Edit')] }), _jsxs(DropdownMenuItem, { onClick: () => {
+                                                                        setIsDeleteOpen(true);
+                                                                        setSelectedNote(history);
+                                                                    }, className: "flex cursor-pointer items-center gap-2 text-red-600", children: [_jsx(Trash, { className: "size-4" }), " ", t('history.delete', 'Delete')] })] })] })) : 'modificationId' in history.data ? (_jsx(ModifyHistoryInfo, { modificationId: history.data.modificationId })) : ('from' in history.data &&
+                                                    'to' in history.data && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(OrderStateBadge, { state: history.data.from }), _jsx(ArrowRightLeft, { className: "text-muted-foreground size-4" }), _jsx(OrderStateBadge, { state: history.data.to })] })))] })] }) }), _jsx(TimelineDot, { status: "done", className: "bg-primary" }), _jsx(TimelineLine, { done: true, className: "bg-muted" }), _jsx(TimelineContent, { className: "relative mt-2", children: _jsxs("div", { className: "bg-muted/30 rounded-md border p-3", children: [_jsxs("div", { className: "mb-1 flex items-center gap-2", children: [entryIcon, _jsx("span", { className: "font-medium", children: t(`history.entryType.${history.type}`, history.type.replace(/_/g, ' ')) })] }), isNote && history.data?.note && (_jsx("div", { className: "bg-background mt-2 whitespace-pre-wrap rounded-md p-3 text-sm", children: history.data.note })), 'paymentId' in history.data && (_jsxs("div", { className: "mt-2 flex items-center gap-2 text-sm", children: [_jsx(CreditCard, { className: "size-4 text-purple-500" }), _jsx("span", { className: "font-medium", children: "Payment ID:" }), _jsx("code", { className: "bg-muted rounded px-1 py-0.5 font-mono text-xs", children: history.data.paymentId })] })), 'fulfillmentId' in history.data && (_jsxs("div", { className: "mt-2 flex items-center gap-2 text-sm", children: [_jsx(Package, { className: "size-4 text-green-500" }), _jsx("span", { className: "font-medium", children: "Fulfillment ID:" }), _jsx("code", { className: "bg-muted rounded px-1 py-0.5 font-mono text-xs", children: history.data.fulfillmentId })] })), 'modificationId' in history.data && (_jsx("div", { className: "bg-background mt-2 whitespace-pre-wrap rounded-md p-3 text-sm", children: modificationNote })), 'reason' in history.data && (_jsxs("div", { children: [_jsx("div", { className: "bg-background mt-2 whitespace-pre-wrap rounded-md p-3 text-sm", children: history.data.reason }), 'lines' in history.data && (_jsx("ul", { className: "mt-2 list-disc pl-5", children: history.data.lines
+                                                        .map((l) => {
+                                                        const line = order?.lines.find((line) => line.id === l.orderLineId);
+                                                        if (!line)
+                                                            return null;
+                                                        return { line, newQuantity: l.quantity };
+                                                    })
+                                                        .map(({ line, newQuantity }) => (_jsxs("li", { className: "list-item list-disc flex-col pl-3", children: [_jsx("p", { className: "text-sm", children: line.productVariant.name }, line.id), _jsxs("p", { className: "flex gap-4", children: [_jsxs("span", { children: [t('history.quantityOld'), ": ", line.quantity] }), _jsxs("span", { children: [t('history.quantityNew'), ": ", newQuantity] })] })] }))) }))] }))] }) })] }, history.id));
+                }) })] }));
+};

package/dist/components/History/index.js

@@ -0,0 +1,5 @@
+export * from './History';
+export * from './DeleteEntryDialog';
+export * from './EditEntryDialog';
+export * from './Timeline';
+export * from './AddEntryForm';

package/dist/components/Menu/ActiveAdmins.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation, Button, Label, Popover, PopoverContent, PopoverTrigger, useServer, } from '@deenruv/react-ui-devkit';
+import { motion } from 'framer-motion';
+import { NavLink } from 'react-router-dom';
+export const ActiveAdmins = () => {
+    const { t } = useTranslation('common');
+    const activeClients = useServer((p) => p.activeClients);
+    const formatTimeAgo = (_date) => {
+        if (!_date)
+            return t('awesomeMenu.unknown');
+        const date = new Date(_date);
+        const now = new Date();
+        const diffInMinutes = Math.round((now.getTime() - date.getTime()) / 60000);
+        if (diffInMinutes === 0)
+            return t('awesomeMenu.justNow');
+        else if (diffInMinutes === 1)
+            return t('awesomeMenu.oneMinAgo');
+        else if (diffInMinutes > 1 && diffInMinutes < 5)
+            return t('awesomeMenu.valueMinAgo', { diffInMinutes });
+        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-muted-foreground text-sm", children: formatTimeAgo(client.lastActive) }), !client.me && (_jsx(NavLink, { to: client.location, className: "text-muted-foreground text-sm", viewTransition: true, children: client.location.replace(window.location.origin, '') }))] }) }, client.id)))) : (_jsx("div", { children: _jsx("span", { className: "text-muted-foreground text-sm", children: t('awesomeMenu.noActiveAdministrators') }) }))] }) })] }));
+};

package/dist/components/Menu/ChannelSwitcher.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, useServer, useSettings, DEFAULT_CHANNEL_CODE, cn, useTranslation, } from '@deenruv/react-ui-devkit';
+import { useCallback } from 'react';
+export function ChannelSwitcher({ className }) {
+    const channels = useServer((p) => p.channels);
+    const setSelectedChannel = useSettings((p) => p.setSelectedChannel);
+    const selectedChannel = useSettings((p) => p.selectedChannel);
+    const { t } = useTranslation('common');
+    const onChannelChange = (id) => {
+        const channel = channels.find((channel) => channel.id === id);
+        if (!channel)
+            return;
+        setSelectedChannel(channel);
+    };
+    const getChannelLabel = useCallback((code) => (code === DEFAULT_CHANNEL_CODE ? t('defaultChannel') : code), [t]);
+    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 [&>span]:line-clamp-1 [&>span]:flex [&>span]:w-full [&>span]:items-center [&>span]:gap-1 [&>span]:truncate [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0'), "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: "[&_svg]:text-foreground flex items-center gap-3 [&_svg]:size-4 [&_svg]:shrink-0", children: getChannelLabel(channel.code) }) }, channel.code))) })] }) }));
+}

package/dist/components/Menu/LanguagesDropdown.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LanguageCode } from '@deenruv/admin-types';
+import { Badge, Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, getLanguageName, useSettings, useTranslation, } from '@deenruv/react-ui-devkit';
+import { Check } from 'lucide-react';
+import { US, PL, CZ, DE, EU } from 'country-flag-icons/react/3x2';
+const uiLanguages = [LanguageCode.en, LanguageCode.pl];
+const langFlagDict = {
+    [LanguageCode.en]: US,
+    [LanguageCode.pl]: PL,
+    [LanguageCode.cs]: CZ,
+    [LanguageCode.de]: DE,
+    [LanguageCode.af]: EU,
+};
+export const LanguagesDropdown = () => {
+    const { t } = useTranslation('common');
+    const { contentLng, setContentLng, setUiLng, uiLng, selectedChannel } = useSettings((p) => ({
+        uiLng: p.language,
+        setUiLng: p.setLanguage,
+        contentLng: p.translationsLanguage,
+        setContentLng: p.setTranslationsLanguage,
+        selectedChannel: p.selectedChannel,
+    }));
+    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))) }) })] })] })] }));
+};

package/dist/components/Menu/Navigation.js

@@ -0,0 +1,270 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NavLink, useLocation } from 'react-router-dom';
+import React, { useMemo } from 'react';
+import { cn, buttonVariants, Routes, usePluginStore, Tooltip, TooltipContent, TooltipTrigger, useServer, Accordion, AccordionItem, AccordionTrigger, AccordionContent, useNotifications, useTranslation, capitalizeFirstLetter, } 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';
+export function Navigation({ isCollapsed }) {
+    const { t } = useTranslation('common');
+    const { t: _pluginT } = useTranslation();
+    const location = useLocation();
+    const { navMenuData, viewMarkers } = usePluginStore();
+    const userPermissions = useServer((p) => p.userPermissions);
+    const loaded = useServer((p) => p.loaded);
+    const getNavigationNotification = useNotifications(({ getNavigationNotification }) => getNavigationNotification);
+    const pluginT = (trans) => {
+        const split = trans.split('.');
+        const key = split.slice(1).join('.') || '';
+        const ns = split[0] || '';
+        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 { groups, links } = navMenuData;
+        groups.forEach(({ id, labelId, placement }) => {
+            let foundGroupIdx = -1;
+            const newGroup = { id, label: pluginT(labelId), links: [] };
+            if (placement?.groupId) {
+                foundGroupIdx = navData.findIndex((group) => group.id === placement.groupId);
+            }
+            if (foundGroupIdx == -1) {
+                navData.push(newGroup);
+            }
+            else {
+                navData.splice(foundGroupIdx + 1, 0, newGroup);
+            }
+        });
+        links.forEach(({ groupId, href, labelId, id, icon, placement }) => {
+            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 };
+            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);
+        });
+        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'];
+    if (!loaded)
+        return null;
+    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) => (_jsx(AccordionItem, { value: group.id, children: _jsxs(React.Fragment, { 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-muted-foreground dark:text-muted-foreground text-xs font-semibold lowercase", children: group.id })) : null] }) })), _jsx(AccordionContent, { className: cn(isCollapsed ? 'py-2' : 'pb-4'), children: _jsx("nav", { id: group.id, className: "text-muted-foreground grid gap-1 px-2 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 hover:bg-muted hover:text-muted-foreground dark:bg-muted dark:hover:bg-muted opacity-100'), 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-muted-foreground dark:text-muted-foreground text-xs font-semibold lowercase", 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 hover:bg-muted hover:text-muted-foreground dark:bg-muted dark:hover:bg-muted font-semibold opacity-100'), children: [viewMarkers ? (_jsx("div", { className: "text-muted-foreground dark:text-muted-foreground absolute right-2 top-1/2 -translate-y-1/2 text-xs font-semibold lowercase", children: link.id })) : null, _jsx(link.icon, { className: "mr-2 size-4" }), capitalizeFirstLetter(link.title), notifications] }) })) }, link.id));
+                                    }) }) })] }, group.id) }))) }) }) }));
+}

package/dist/components/Menu/NavigationFooter.js

@@ -0,0 +1,12 @@
+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-dom';
+export const NavigationFooter = ({ isCollapsed }) => {
+    const { t } = useTranslation('common');
+    const userPermissions = useServer((p) => p.userPermissions);
+    const isPermittedToExtensions = userPermissions.includes(Permission.ReadSettings);
+    return (_jsxs("div", { className: "bg-secondary flex w-full select-none flex-col gap-2 py-2 text-xs shadow-2xl", 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 hover:bg-muted hover:text-muted-foreground dark:bg-muted dark:hover:bg-muted font-semibold opacity-100'), 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] })] })] }));
+};

package/dist/components/Menu/Notifications.js

@@ -0,0 +1,90 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Bell, Check, Clock, Trash2 } from 'lucide-react';
+import { useEffect, useState, useRef, useMemo } from 'react';
+import { Popover, PopoverTrigger, PopoverContent, Card, CardHeader, CardTitle, CardDescription, CardContent, useServer, Button, CardFooter, useNotifications, Tabs, TabsContent, TabsList, TabsTrigger, cn, formatDate, useTranslation, } from '@deenruv/react-ui-devkit';
+const NOTIFICATIONS_LOCAL_STORAGE_KEY = 'DEENRUV_NOTIFICATIONS';
+export const Notifications = () => {
+    const cyclingNotifications = useNotifications(({ notifications }) => notifications);
+    const getMainNotification = useNotifications(({ getMainNotification }) => getMainNotification);
+    const jobQueues = useServer(({ jobQueues }) => jobQueues);
+    const status = useServer(({ status }) => status);
+    const { t } = useTranslation('common');
+    const [notifications, setNotifications] = useState([]);
+    const prevJobQueuesRef = useRef(jobQueues);
+    const hasUnread = notifications.some((notification) => !notification.read);
+    useEffect(() => {
+        const savedNotifications = localStorage.getItem(NOTIFICATIONS_LOCAL_STORAGE_KEY);
+        if (savedNotifications) {
+            try {
+                const parsedNotifications = JSON.parse(savedNotifications).map((notification) => ({
+                    ...notification,
+                    icon: notification.running ? (_jsx(Clock, { className: "size-4 text-blue-500" })) : (_jsx(Check, { className: "size-4 text-green-500" })),
+                }));
+                setNotifications(parsedNotifications);
+            }
+            catch (error) {
+                console.error('Failed to parse notifications from localStorage', error);
+            }
+        }
+    }, []);
+    useEffect(() => {
+        if (notifications.length > 0) {
+            const serializableNotifications = notifications.map(({ icon: _, ...rest }) => rest);
+            localStorage.setItem(NOTIFICATIONS_LOCAL_STORAGE_KEY, JSON.stringify(serializableNotifications));
+        }
+    }, [notifications]);
+    const markAllAsRead = () => {
+        setNotifications((prev) => prev.map((notification) => ({ ...notification, read: true })));
+    };
+    const clearAllNotifications = () => {
+        setNotifications([]);
+        localStorage.removeItem(NOTIFICATIONS_LOCAL_STORAGE_KEY);
+    };
+    const components = useMemo(() => getMainNotification(notifications.map((notification) => notification.id)), [notifications]);
+    useEffect(() => {
+        if (jobQueues.length > 0) {
+            jobQueues.forEach((queue) => {
+                const prevQueue = prevJobQueuesRef.current.find((q) => q.name === queue.name);
+                if (queue.running && (!prevQueue || !prevQueue.running)) {
+                    const newNotification = {
+                        ...queue,
+                        id: `${queue.name}-start-${Date.now()}`,
+                        read: false,
+                        title: t('notificationsBox.titleStart', { name: queue.name }),
+                        description: t('notificationsBox.descriptionStart', { name: queue.name }),
+                        time: formatDate(new Date(), {
+                            hour: '2-digit',
+                            minute: '2-digit',
+                            second: '2-digit',
+                            hour12: false,
+                        }),
+                        icon: _jsx(Clock, { className: "size-4 text-blue-500" }),
+                        isJobQueue: true,
+                    };
+                    setNotifications((prev) => [newNotification, ...prev].slice(0, 10));
+                }
+                if (prevQueue && prevQueue.running && !queue.running) {
+                    const newNotification = {
+                        ...queue,
+                        id: `${queue.name}-complete-${Date.now()}`,
+                        read: false,
+                        title: t('notificationsBox.titleComplete', { name: queue.name }),
+                        description: t('notificationsBox.descriptionComplete', { name: queue.name }),
+                        time: formatDate(new Date(), {
+                            hour: '2-digit',
+                            minute: '2-digit',
+                            second: '2-digit',
+                            hour12: false,
+                        }),
+                        icon: _jsx(Check, { className: "size-4 text-green-500" }),
+                        isJobQueue: true,
+                    };
+                    setNotifications((prev) => [newNotification, ...prev].slice(0, 10));
+                }
+            });
+            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 right-1.5 top-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: "w-md z-[2138] 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('bg-muted/30 flex w-full flex-col items-start justify-start gap-2 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 font-medium leading-none", children: notification.title }), _jsx("p", { className: "text-muted-foreground text-xs", children: notification.description }), _jsxs("div", { className: "flex items-center pt-1", children: [_jsx(Clock, { className: "text-muted-foreground mr-1 size-3" }), _jsx("span", { className: "text-muted-foreground text-xs", 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: "bg-muted mb-3 rounded-full p-3", children: _jsx(Bell, { className: "text-muted-foreground size-6" }) }), _jsx("h3", { className: "text-sm font-medium", children: t('notificationsBox.emptyStateMessage') }), _jsx("p", { className: "text-muted-foreground mt-1 text-xs", 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')] }) }))] }) }) })] }));
+};