@vendure/dashboard 3.4.3-master-202509260228 → 3.5.0-minor-202510012036

package/src/lib/components/date-range-picker.tsx

@@ -0,0 +1,186 @@
+'use client';
+
+import { useDayPickerLocale } from '@/vdb/components/data-input/index.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Calendar } from '@/vdb/components/ui/calendar.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { DefinedDateRange } from '@/vdb/framework/dashboard-widget/widget-filters-context.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { cn } from '@/vdb/lib/utils.js';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { endOfDay, endOfMonth, endOfWeek, startOfDay, startOfMonth, startOfWeek, subDays } from 'date-fns';
+import { CalendarIcon } from 'lucide-react';
+import * as React from 'react';
+import { DateRange } from 'react-day-picker';
+
+interface DateRangePickerProps {
+    className?: string;
+    dateRange: DefinedDateRange;
+    onDateRangeChange: (range: DefinedDateRange) => void;
+}
+
+const presets = [
+    {
+        id: 'today',
+        label: <Trans context="date-range">Today</Trans>,
+        getValue: () => ({
+            from: startOfDay(new Date()),
+            to: endOfDay(new Date()),
+        }),
+    },
+    {
+        id: 'yesterday',
+        label: <Trans context="date-range">Yesterday</Trans>,
+        getValue: () => ({
+            from: startOfDay(subDays(new Date(), 1)),
+            to: endOfDay(subDays(new Date(), 1)),
+        }),
+    },
+    {
+        id: 'last-7-days',
+        label: <Trans context="date-range">Last 7 days</Trans>,
+        getValue: () => ({
+            from: startOfDay(subDays(new Date(), 6)),
+            to: endOfDay(new Date()),
+        }),
+    },
+    {
+        id: 'this-week',
+        label: <Trans context="date-range">This week</Trans>,
+        getValue: () => ({
+            from: startOfWeek(new Date(), { weekStartsOn: 1 }),
+            to: endOfWeek(new Date(), { weekStartsOn: 1 }),
+        }),
+    },
+    {
+        id: 'last-30-days',
+        label: <Trans context="date-range">Last 30 days</Trans>,
+        getValue: () => ({
+            from: startOfDay(subDays(new Date(), 29)),
+            to: endOfDay(new Date()),
+        }),
+    },
+    {
+        id: 'month-to-date',
+        label: <Trans context="date-range">Month to date</Trans>,
+        getValue: () => ({
+            from: startOfMonth(new Date()),
+            to: endOfDay(new Date()),
+        }),
+    },
+    {
+        id: 'this-month',
+        label: <Trans context="date-range">This month</Trans>,
+        getValue: () => ({
+            from: startOfMonth(new Date()),
+            to: endOfMonth(new Date()),
+        }),
+    },
+    {
+        id: 'last-month',
+        label: <Trans context="date-range">Last month</Trans>,
+        getValue: () => ({
+            from: startOfMonth(subDays(new Date(), 30)),
+            to: endOfMonth(subDays(new Date(), 30)),
+        }),
+    },
+];
+
+export function DateRangePicker({ className, dateRange, onDateRangeChange }: DateRangePickerProps) {
+    const [open, setOpen] = React.useState(false);
+    const { t } = useLingui();
+    const { formatDate } = useLocalFormat();
+    const locale = useDayPickerLocale();
+    // Internal state uses react-day-picker's DateRange type for Calendar compatibility
+    const [selectedRange, setSelectedRange] = React.useState<DateRange>({
+        from: dateRange.from,
+        to: dateRange.to,
+    });
+
+    React.useEffect(() => {
+        setSelectedRange({
+            from: dateRange.from,
+            to: dateRange.to,
+        });
+    }, [dateRange]);
+
+    const handleSelect = (range: DateRange | undefined) => {
+        if (range?.from) {
+            // If no end date is selected, use the from date as the end date
+            const to = range.to || range.from;
+            const finalRange: DefinedDateRange = {
+                from: range.from,
+                to: to,
+            };
+            setSelectedRange({ from: range.from, to });
+            onDateRangeChange(finalRange);
+        }
+    };
+
+    const handlePresetClick = (preset: (typeof presets)[number]) => {
+        const range = preset.getValue();
+        handleSelect(range);
+        setOpen(false);
+    };
+
+    const formatDateRange = () => {
+        if (!selectedRange.from) {
+            return t`Select date range`;
+        }
+        if (!selectedRange.to || selectedRange.from === selectedRange.to) {
+            return formatDate(selectedRange.from, { dateStyle: 'medium' });
+        }
+        return `${formatDate(selectedRange.from, { dateStyle: 'medium' })} - ${formatDate(selectedRange.to, { dateStyle: 'medium' })}`;
+    };
+
+    const isPresetActive = (preset: (typeof presets)[number]) => {
+        if (!selectedRange.from || !selectedRange.to) return false;
+        const presetRange = preset.getValue();
+        return (
+            selectedRange.from.getTime() === presetRange.from.getTime() &&
+            selectedRange.to.getTime() === presetRange.to.getTime()
+        );
+    };
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button
+                    variant="outline"
+                    className={cn('w-[280px] justify-start text-left font-normal', className)}
+                >
+                    <CalendarIcon className="mr-2 h-4 w-4" />
+                    {formatDateRange()}
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto p-0" align="start">
+                <div className="flex">
+                    <div className="border-r p-2 space-y-0.5 min-w-0 w-32">
+                        {presets.map(preset => (
+                            <Button
+                                key={preset.id}
+                                variant={isPresetActive(preset) ? 'default' : 'ghost'}
+                                size="sm"
+                                className="w-full justify-start font-normal text-xs h-7 px-2"
+                                onClick={() => handlePresetClick(preset)}
+                            >
+                                {preset.label}
+                            </Button>
+                        ))}
+                    </div>
+                    <div className="p-3">
+                        <Calendar
+                            mode="range"
+                            defaultMonth={selectedRange?.from}
+                            selected={selectedRange}
+                            onSelect={handleSelect}
+                            numberOfMonths={2}
+                            showOutsideDays={false}
+                            locale={locale}
+                        />
+                    </div>
+                </div>
+            </PopoverContent>
+        </Popover>
+    );
+}

package/src/lib/components/layout/app-sidebar.tsx

@@ -9,16 +9,18 @@ import {
 } from '@/vdb/components/ui/sidebar.js';
 import { useDashboardExtensions } from '@/vdb/framework/extension-api/use-dashboard-extensions.js';
 import { getNavMenuConfig } from '@/vdb/framework/nav-menu/nav-menu-extensions.js';
+import { useDisplayLocale } from '@/vdb/hooks/use-display-locale.js';
 import * as React from 'react';
 import { ChannelSwitcher } from './channel-switcher.js';
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
     const { extensionsLoaded } = useDashboardExtensions();
+    const { isRTL } = useDisplayLocale();
     const { sections } = getNavMenuConfig();
 
     return (
         extensionsLoaded && (
-            <Sidebar collapsible="icon" {...props}>
+            <Sidebar collapsible="icon" {...props} side={isRTL ? 'right' : 'left'}>
                 <SidebarHeader>
                     <ChannelSwitcher />
                 </SidebarHeader>

package/src/lib/components/layout/channel-switcher.tsx

@@ -18,8 +18,8 @@ import { useChannel } from '@/vdb/hooks/use-channel.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { useServerConfig } from '@/vdb/hooks/use-server-config.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
-import { Trans } from '@/vdb/lib/trans.js';
 import { cn } from '@/vdb/lib/utils.js';
+import { Trans } from '@lingui/react/macro';
 import { Link } from '@tanstack/react-router';
 import { useEffect, useState } from 'react';
 import { ManageLanguagesDialog } from './manage-languages-dialog.js';
@@ -99,13 +99,9 @@ export function ChannelSwitcher() {
                                         <ChannelCodeLabel code={displayChannel?.code} />
                                     </span>
                                     <span className="truncate text-xs">
-                                        {hasMultipleLanguages ? (
-                                            <span className="cursor-pointer hover:text-foreground">
-                                                Language: {formatLanguageName(contentLanguage)}
-                                            </span>
-                                        ) : (
-                                            <span>Language: {formatLanguageName(contentLanguage)}</span>
-                                        )}
+                                        <span>
+                                            <Trans>Language: {formatLanguageName(contentLanguage)}</Trans>
+                                        </span>
                                     </span>
                                 </div>
                                 <ChevronsUpDown className="ml-auto" />
@@ -139,7 +135,7 @@ export function ChannelSwitcher() {
                                         <ChannelCodeLabel code={channel.code} />
                                         {channel.id === displayChannel?.id && (
                                             <span className="ml-auto text-xs text-muted-foreground">
-                                                Current
+                                                <Trans context="current channel">Current</Trans>
                                             </span>
                                         )}
                                     </DropdownMenuItem>
@@ -168,7 +164,9 @@ export function ChannelSwitcher() {
                                                         <span>{formatLanguageName(languageCode)}</span>
                                                         {contentLanguage === languageCode && (
                                                             <span className="ml-auto text-xs text-muted-foreground">
-                                                                Active
+                                                                <Trans context="active language">
+                                                                    Active
+                                                                </Trans>
                                                             </span>
                                                         )}
                                                     </DropdownMenuItem>

package/src/lib/components/layout/dev-mode-indicator.tsx

@@ -1,7 +1,7 @@
 import { Badge } from '@/vdb/components/ui/badge.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { CodeXmlIcon, XIcon } from 'lucide-react';
 
 export function DevModeIndicator() {

package/src/lib/components/layout/generated-breadcrumbs.tsx

@@ -5,11 +5,13 @@ import {
     BreadcrumbList,
     BreadcrumbSeparator,
 } from '@/vdb/components/ui/breadcrumb.js';
+import type { NavMenuItem, NavMenuSection } from '@/vdb/framework/nav-menu/nav-menu-extensions.js';
+import { getNavMenuConfig } from '@/vdb/framework/nav-menu/nav-menu-extensions.js';
+import { useDisplayLocale } from '@/vdb/hooks/use-display-locale.js';
+import { useLingui } from '@lingui/react';
 import { Link, useRouter, useRouterState } from '@tanstack/react-router';
 import * as React from 'react';
 import { Fragment } from 'react';
-import { getNavMenuConfig } from '@/vdb/framework/nav-menu/nav-menu-extensions.js';
-import type { NavMenuItem, NavMenuSection } from '@/vdb/framework/nav-menu/nav-menu-extensions.js';
 
 export interface BreadcrumbPair {
     label: string | React.ReactElement;
@@ -24,7 +26,9 @@ export function GeneratedBreadcrumbs() {
     const matches = useRouterState({ select: s => s.matches });
     const currentPath = useRouterState({ select: s => s.location.pathname });
     const router = useRouter();
+    const { i18n } = useLingui();
     const navMenuConfig = getNavMenuConfig();
+    const { bcp47Tag } = useDisplayLocale();
     const basePath = router.basepath || '';
 
     const normalizeBreadcrumb = (breadcrumb: any, pathname: string): BreadcrumbPair[] => {
@@ -51,9 +55,7 @@ export function GeneratedBreadcrumbs() {
     const rawCrumbs: BreadcrumbPair[] = React.useMemo(() => {
         return matches
             .filter(match => match.loaderData?.breadcrumb)
-            .flatMap(({ pathname, loaderData }) => 
-                normalizeBreadcrumb(loaderData.breadcrumb, pathname)
-            );
+            .flatMap(({ pathname, loaderData }) => normalizeBreadcrumb(loaderData.breadcrumb, pathname));
     }, [matches]);
 
     const isBaseRoute = (p: string) => p === basePath || p === `${basePath}/`;
@@ -119,8 +121,8 @@ export function GeneratedBreadcrumbs() {
     );
     const breadcrumbs: BreadcrumbPair[] = React.useMemo(() => {
         const arr = sectionCrumb ? [sectionCrumb, ...pageCrumbs] : pageCrumbs;
-        return arr.filter((c, i, self) =>
-            self.findIndex(x => x.path === c.path && x.label === c.label) === i,
+        return arr.filter(
+            (c, i, self) => self.findIndex(x => x.path === c.path && x.label === c.label) === i,
         );
     }, [sectionCrumb, pageCrumbs]);
     return (
@@ -130,7 +132,7 @@ export function GeneratedBreadcrumbs() {
                     <Fragment key={`${path}-${index}`}>
                         <BreadcrumbItem className="hidden md:block">
                             <BreadcrumbLink asChild>
-                                <Link to={path}>{label}</Link>
+                                <Link to={path}>{typeof label === 'string' ? i18n.t(label) : label}</Link>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                         {index < arr.length - 1 && <BreadcrumbSeparator className="hidden md:block" />}

package/src/lib/components/layout/language-dialog.tsx

@@ -1,7 +1,9 @@
 import { CurrencyCode } from '@/vdb/constants.js';
+import { useDisplayLocale } from '@/vdb/hooks/use-display-locale.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { useUiLanguageLoader } from '@/vdb/hooks/use-ui-language-loader.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { useState } from 'react';
 import { uiConfig } from 'virtual:vendure-ui-config';
 import { Button } from '../ui/button.js';
@@ -11,12 +13,22 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '.
 
 export function LanguageDialog() {
     const { i18n } = uiConfig;
+    const { loadAndActivateLocale } = useUiLanguageLoader();
     const { availableLocales, availableLanguages } = i18n;
     const { settings, setDisplayLanguage, setDisplayLocale } = useUserSettings();
+    const { humanReadableLanguageAndLocale } = useDisplayLocale();
     const availableCurrencyCodes = Object.values(CurrencyCode);
-    const { formatCurrency, formatLanguageName, formatCurrencyName, formatDate } = useLocalFormat();
+    const { formatCurrency, formatLanguageName, formatRegionName, formatCurrencyName, formatDate } =
+        useLocalFormat();
     const [selectedCurrency, setSelectedCurrency] = useState<string>('USD');
 
+    const orderedAvailableLanguages = availableLanguages.slice().sort((a, b) => a.localeCompare(b));
+    const orderedAvailableLocales = availableLocales.slice().sort((a, b) => a.localeCompare(b));
+    const handleLanguageChange = async (value: string) => {
+        setDisplayLanguage(value);
+        void loadAndActivateLocale(value);
+    };
+
     return (
         <DialogContent>
             <DialogHeader>
@@ -29,14 +41,15 @@ export function LanguageDialog() {
                     <Label>
                         <Trans>Display language</Trans>
                     </Label>
-                    <Select defaultValue={settings.displayLanguage} onValueChange={setDisplayLanguage}>
+                    <Select defaultValue={settings.displayLanguage} onValueChange={handleLanguageChange}>
                         <SelectTrigger className="w-full">
                             <SelectValue placeholder="Select a language" />
                         </SelectTrigger>
                         <SelectContent>
-                            {availableLanguages.map(language => (
-                                <SelectItem key={language} value={language}>
-                                    {formatLanguageName(language)}
+                            {orderedAvailableLanguages.map(language => (
+                                <SelectItem key={language} value={language} className="flex gap-1">
+                                    <span className="uppercase text-muted-foreground">{language}</span>
+                                    <span>{formatLanguageName(language)}</span>
                                 </SelectItem>
                             ))}
                         </SelectContent>
@@ -51,9 +64,10 @@ export function LanguageDialog() {
                             <SelectValue placeholder="Select a locale" />
                         </SelectTrigger>
                         <SelectContent>
-                            {availableLocales.map(locale => (
-                                <SelectItem key={locale} value={locale}>
-                                    {formatLanguageName(locale)}
+                            {orderedAvailableLocales.map(locale => (
+                                <SelectItem key={locale} value={locale} className="flex gap-1">
+                                    <span className="uppercase text-muted-foreground">{locale}</span>
+                                    <span>{formatRegionName(locale)}</span>
                                 </SelectItem>
                             ))}
                         </SelectContent>
@@ -62,7 +76,8 @@ export function LanguageDialog() {
             </div>
             <div className="bg-sidebar border border-border rounded-md px-6 py-4 space-y-4">
                 <span className="font-medium block text-accent-foreground">
-                    <Trans>Sample Formatting</Trans>: {settings.displayLocale} {settings.displayLanguage}
+                    <Trans>Sample Formatting</Trans>:{' '}
+                    <span className="text-muted-foreground">{humanReadableLanguageAndLocale}</span>
                 </span>
                 <Select defaultValue={selectedCurrency} onValueChange={setSelectedCurrency}>
                     <SelectTrigger>
@@ -77,15 +92,21 @@ export function LanguageDialog() {
                     </SelectContent>
                 </Select>
                 <div className="flex flex-col">
-                    <span className="text-muted-foreground text-sm font-medium">Medium date</span>
+                    <span className="text-muted-foreground text-sm font-medium">
+                        <Trans>Medium date</Trans>
+                    </span>
                     <span>{formatDate(new Date('2025-03-14'), { dateStyle: 'medium' })}</span>
                 </div>
                 <div className="flex flex-col">
-                    <span className="text-muted-foreground text-sm font-medium">Short date</span>
+                    <span className="text-muted-foreground text-sm font-medium">
+                        <Trans>Short date</Trans>
+                    </span>
                     <span>{formatDate(new Date('2025-03-14'), { dateStyle: 'short' })}</span>
                 </div>
                 <div className="flex flex-col">
-                    <span className="text-muted-foreground text-sm font-medium">Price</span>
+                    <span className="text-muted-foreground text-sm font-medium">
+                        <Trans>Price</Trans>
+                    </span>
                     <span>{formatCurrency(100.0, selectedCurrency)}</span>
                 </div>
             </div>

package/src/lib/components/layout/manage-languages-dialog.tsx

@@ -17,7 +17,7 @@ import { graphql } from '@/vdb/graphql/graphql.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { usePermissions } from '@/vdb/hooks/use-permissions.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { AlertCircle, Lock } from 'lucide-react';
 import { useEffect, useState } from 'react';

package/src/lib/components/layout/nav-main.tsx

@@ -15,6 +15,7 @@ import {
     NavMenuSectionPlacement,
 } from '@/vdb/framework/nav-menu/nav-menu-extensions.js';
 import { usePermissions } from '@/vdb/hooks/use-permissions.js';
+import { useLingui } from '@lingui/react';
 import { Link, useRouter, useRouterState } from '@tanstack/react-router';
 import { ChevronRight } from 'lucide-react';
 import * as React from 'react';
@@ -41,6 +42,7 @@ export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavM
     const router = useRouter();
     const routerState = useRouterState();
     const { hasPermissions } = usePermissions();
+    const { i18n } = useLingui();
     const currentPath = routerState.location.pathname;
     const basePath = router.basepath || '';
 
@@ -183,12 +185,16 @@ export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavM
     const renderTopSection = (item: NavMenuSection | NavMenuItem) => {
         if ('url' in item) {
             return (
-                <NavItemWrapper key={item.title} locationId={item.id} order={item.order} offset={true}>
+                <NavItemWrapper key={item.id} locationId={item.id} order={item.order} offset={true}>
                     <SidebarMenuItem>
-                        <SidebarMenuButton tooltip={item.title} asChild isActive={isPathActive(item.url)}>
+                        <SidebarMenuButton
+                            tooltip={i18n.t(item.title)}
+                            asChild
+                            isActive={isPathActive(item.url)}
+                        >
                             <Link to={item.url}>
                                 {item.icon && <item.icon />}
-                                <span>{item.title}</span>
+                                <span>{i18n.t(item.title)}</span>
                             </Link>
                         </SidebarMenuButton>
                     </SidebarMenuItem>
@@ -197,7 +203,7 @@ export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavM
         }
 
         return (
-            <NavItemWrapper key={item.title} locationId={item.id} order={item.order} offset={true}>
+            <NavItemWrapper key={item.id} locationId={item.id} order={item.order} offset={true}>
                 <Collapsible
                     asChild
                     open={openTopSectionIds.has(item.id)}
@@ -208,7 +214,7 @@ export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavM
                         <CollapsibleTrigger asChild>
                             <SidebarMenuButton tooltip={item.title}>
                                 {item.icon && <item.icon />}
-                                <span>{item.title}</span>
+                                <span>{i18n.t(item.title)}</span>
                                 <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                             </SidebarMenuButton>
                         </CollapsibleTrigger>
@@ -216,7 +222,7 @@ export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavM
                             <SidebarMenuSub>
                                 {item.items?.map(subItem => (
                                     <NavItemWrapper
-                                        key={subItem.title}
+                                        key={subItem.id}
                                         locationId={subItem.id}
                                         order={subItem.order}
                                         parentLocationId={item.id}
@@ -227,7 +233,7 @@ export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavM
                                                 isActive={isPathActive(subItem.url)}
                                             >
                                                 <Link to={subItem.url}>
-                                                    <span>{subItem.title}</span>
+                                                    <span>{i18n.t(subItem.title)}</span>
                                                 </Link>
                                             </SidebarMenuSubButton>
                                         </SidebarMenuSubItem>
@@ -247,10 +253,14 @@ export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavM
             return (
                 <NavItemWrapper key={item.title} locationId={item.id} order={item.order} offset={true}>
                     <SidebarMenuItem>
-                        <SidebarMenuButton tooltip={item.title} asChild isActive={isPathActive(item.url)}>
+                        <SidebarMenuButton
+                            tooltip={i18n.t(item.title)}
+                            asChild
+                            isActive={isPathActive(item.url)}
+                        >
                             <Link to={item.url}>
                                 {item.icon && <item.icon />}
-                                <span>{item.title}</span>
+                                <span>{i18n.t(item.title)}</span>
                             </Link>
                         </SidebarMenuButton>
                     </SidebarMenuItem>
@@ -267,9 +277,9 @@ export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavM
                 >
                     <SidebarMenuItem>
                         <CollapsibleTrigger asChild>
-                            <SidebarMenuButton tooltip={item.title}>
+                            <SidebarMenuButton tooltip={i18n.t(item.title)}>
                                 {item.icon && <item.icon />}
-                                <span>{item.title}</span>
+                                <span>{i18n.t(item.title)}</span>
                                 <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                             </SidebarMenuButton>
                         </CollapsibleTrigger>
@@ -277,7 +287,7 @@ export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavM
                             <SidebarMenuSub>
                                 {item.items?.map(subItem => (
                                     <NavItemWrapper
-                                        key={subItem.title}
+                                        key={i18n.t(subItem.title)}
                                         locationId={subItem.id}
                                         order={subItem.order}
                                         parentLocationId={item.id}
@@ -288,7 +298,7 @@ export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavM
                                                 isActive={isPathActive(subItem.url)}
                                             >
                                                 <Link to={subItem.url}>
-                                                    <span>{subItem.title}</span>
+                                                    <span>{i18n.t(subItem.title)}</span>
                                                 </Link>
                                             </SidebarMenuSubButton>
                                         </SidebarMenuSubItem>