@vendure/dashboard 3.5.0-minor-202509261210 → 3.5.0-minor-202510031341

package/src/lib/framework/dashboard-widget/widget-filters-context.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useLingui } from '@lingui/react/macro';
 import { createContext, useContext, PropsWithChildren } from 'react';
 
 export interface DefinedDateRange {
@@ -25,9 +26,10 @@ export function WidgetFiltersProvider({
 }
 
 export function useWidgetFilters() {
+    const { t } = useLingui();
     const context = useContext(WidgetFiltersContext);
     if (context === undefined) {
-        throw new Error('useWidgetFilters must be used within a WidgetFiltersProvider');
+        throw new Error(t`useWidgetFilters must be used within a WidgetFiltersProvider`);
     }
     return context;
 }

package/src/lib/framework/defaults.ts

@@ -19,7 +19,7 @@ export function registerDefaults() {
         sections: [
             {
                 id: 'insights',
-                title: 'Insights',
+                title: /* i18n*/ 'Insights',
                 placement: 'top',
                 icon: LayoutDashboardIcon,
                 url: '/',
@@ -27,42 +27,42 @@ export function registerDefaults() {
             },
             {
                 id: 'catalog',
-                title: 'Catalog',
+                title: /* i18n*/ 'Catalog',
                 icon: SquareTerminal,
                 placement: 'top',
                 order: 200,
                 items: [
                     {
                         id: 'products',
-                        title: 'Products',
+                        title: /* i18n*/ 'Products',
                         url: '/products',
                         order: 100,
                         requiresPermission: ['ReadProduct', 'ReadCatalog'],
                     },
                     {
                         id: 'product-variants',
-                        title: 'Product Variants',
+                        title: /* i18n*/ 'Product Variants',
                         url: '/product-variants',
                         order: 200,
                         requiresPermission: ['ReadProduct', 'ReadCatalog'],
                     },
                     {
                         id: 'facets',
-                        title: 'Facets',
+                        title: /* i18n*/ 'Facets',
                         url: '/facets',
                         order: 300,
                         requiresPermission: ['ReadProduct', 'ReadCatalog'],
                     },
                     {
                         id: 'collections',
-                        title: 'Collections',
+                        title: /* i18n*/ 'Collections',
                         url: '/collections',
                         order: 400,
                         requiresPermission: ['ReadCollection', 'ReadCatalog'],
                     },
                     {
                         id: 'assets',
-                        title: 'Assets',
+                        title: /* i18n*/ 'Assets',
                         url: '/assets',
                         order: 500,
                         requiresPermission: ['ReadAsset', 'ReadCatalog'],
@@ -71,14 +71,14 @@ export function registerDefaults() {
             },
             {
                 id: 'sales',
-                title: 'Sales',
+                title: /* i18n*/ 'Sales',
                 icon: ShoppingCart,
                 placement: 'top',
                 order: 300,
                 items: [
                     {
                         id: 'orders',
-                        title: 'Orders',
+                        title: /* i18n*/ 'Orders',
                         url: '/orders',
                         order: 100,
                         requiresPermission: ['ReadOrder'],
@@ -87,21 +87,21 @@ export function registerDefaults() {
             },
             {
                 id: 'customers',
-                title: 'Customers',
+                title: /* i18n*/ 'Customers',
                 icon: Users,
                 placement: 'top',
                 order: 400,
                 items: [
                     {
                         id: 'customers',
-                        title: 'Customers',
+                        title: /* i18n*/ 'Customers',
                         url: '/customers',
                         order: 100,
                         requiresPermission: ['ReadCustomer'],
                     },
                     {
                         id: 'customer-groups',
-                        title: 'Customer Groups',
+                        title: /* i18n*/ 'Customer Groups',
                         url: '/customer-groups',
                         order: 200,
                         requiresPermission: ['ReadCustomerGroup'],
@@ -110,14 +110,14 @@ export function registerDefaults() {
             },
             {
                 id: 'marketing',
-                title: 'Marketing',
+                title: /* i18n*/ 'Marketing',
                 icon: Mail,
                 placement: 'top',
                 order: 500,
                 items: [
                     {
                         id: 'promotions',
-                        title: 'Promotions',
+                        title: /* i18n*/ 'Promotions',
                         url: '/promotions',
                         order: 100,
                         requiresPermission: ['ReadPromotion'],
@@ -126,28 +126,28 @@ export function registerDefaults() {
             },
             {
                 id: 'system',
-                title: 'System',
+                title: /* i18n*/ 'System',
                 icon: Terminal,
                 placement: 'bottom',
                 order: 200,
                 items: [
                     {
                         id: 'job-queue',
-                        title: 'Job Queue',
+                        title: /* i18n*/ 'Job Queue',
                         url: '/job-queue',
                         order: 100,
                         requiresPermission: ['ReadSystem'],
                     },
                     {
                         id: 'healthchecks',
-                        title: 'Healthchecks',
+                        title: /* i18n*/ 'Healthchecks',
                         url: '/healthchecks',
                         order: 200,
                         requiresPermission: ['ReadSystem'],
                     },
                     {
                         id: 'scheduled-tasks',
-                        title: 'Scheduled Tasks',
+                        title: /* i18n*/ 'Scheduled Tasks',
                         url: '/scheduled-tasks',
                         order: 300,
                         requiresPermission: ['ReadSystem'],
@@ -156,91 +156,91 @@ export function registerDefaults() {
             },
             {
                 id: 'settings',
-                title: 'Settings',
+                title: /* i18n*/ 'Settings',
                 icon: Settings2,
                 placement: 'bottom',
                 order: 100,
                 items: [
                     {
                         id: 'sellers',
-                        title: 'Sellers',
+                        title: /* i18n*/ 'Sellers',
                         url: '/sellers',
                         order: 100,
                         requiresPermission: ['ReadSeller'],
                     },
                     {
                         id: 'channels',
-                        title: 'Channels',
+                        title: /* i18n*/ 'Channels',
                         url: '/channels',
                         order: 200,
                         requiresPermission: ['ReadChannel'],
                     },
                     {
                         id: 'stock-locations',
-                        title: 'Stock Locations',
+                        title: /* i18n*/ 'Stock Locations',
                         url: '/stock-locations',
                         order: 300,
                         requiresPermission: ['ReadStockLocation'],
                     },
                     {
                         id: 'administrators',
-                        title: 'Administrators',
+                        title: /* i18n*/ 'Administrators',
                         url: '/administrators',
                         order: 400,
                         requiresPermission: ['ReadAdministrator'],
                     },
                     {
                         id: 'roles',
-                        title: 'Roles',
+                        title: /* i18n*/ 'Roles',
                         url: '/roles',
                         order: 500,
                         requiresPermission: ['ReadAdministrator'],
                     },
                     {
                         id: 'shipping-methods',
-                        title: 'Shipping Methods',
+                        title: /* i18n*/ 'Shipping Methods',
                         url: '/shipping-methods',
                         order: 600,
                         requiresPermission: ['ReadShippingMethod'],
                     },
                     {
                         id: 'payment-methods',
-                        title: 'Payment Methods',
+                        title: /* i18n*/ 'Payment Methods',
                         url: '/payment-methods',
                         order: 700,
                         requiresPermission: ['ReadPaymentMethod'],
                     },
                     {
                         id: 'tax-categories',
-                        title: 'Tax Categories',
+                        title: /* i18n*/ 'Tax Categories',
                         url: '/tax-categories',
                         order: 800,
                         requiresPermission: ['ReadTaxCategory'],
                     },
                     {
                         id: 'tax-rates',
-                        title: 'Tax Rates',
+                        title: /* i18n*/ 'Tax Rates',
                         url: '/tax-rates',
                         order: 900,
                         requiresPermission: ['ReadTaxRate'],
                     },
                     {
                         id: 'countries',
-                        title: 'Countries',
+                        title: /* i18n*/ 'Countries',
                         url: '/countries',
                         order: 1000,
                         requiresPermission: ['ReadCountry'],
                     },
                     {
                         id: 'zones',
-                        title: 'Zones',
+                        title: /* i18n*/ 'Zones',
                         url: '/zones',
                         order: 1100,
                         requiresPermission: ['ReadZone'],
                     },
                     {
                         id: 'global-settings',
-                        title: 'Global Settings',
+                        title: /* i18n*/ 'Global Settings',
                         url: '/global-settings',
                         order: 1200,
                         requiresPermission: ['UpdateGlobalSettings'],
@@ -252,7 +252,7 @@ export function registerDefaults() {
 
     registerDashboardWidget({
         id: 'metrics-widget',
-        name: 'Metrics Widget',
+        name: /* i18n*/ 'Metrics Widget',
         component: MetricsWidget,
         defaultSize: { w: 12, h: 6, x: 0, y: 0 },
         minSize: { w: 6, h: 4 },
@@ -260,44 +260,15 @@ export function registerDefaults() {
 
     registerDashboardWidget({
         id: 'latest-orders-widget',
-        name: 'Latest Orders Widget',
+        name: /* i18n*/ 'Latest Orders Widget',
         component: LatestOrdersWidget,
         defaultSize: { w: 6, h: 7, x: 0, y: 0 },
     });
 
     registerDashboardWidget({
         id: 'orders-summary-widget',
-        name: 'Orders Summary Widget',
+        name: /* i18n*/ 'Orders Summary Widget',
         component: OrdersSummaryWidget,
         defaultSize: { w: 6, h: 3, x: 6, y: 0 },
     });
-
-    // registerAlert<boolean>({
-    //     id: 'test-alert',
-    //     title: data => `Test Alert ${String(data)}`,
-    //     description: 'This is a test alert',
-    //     severity: 'info',
-    //     check: () => Promise.resolve(true),
-    //     actions: [
-    //         {
-    //             label: 'Test Action',
-    //             onClick: () => console.log('Test Action'),
-    //         },
-    //     ],
-    // });
-
-    // registerAlert<boolean>({
-    //     id: 'test-alert-2',
-    //     title: 'Test Alert 2',
-    //     description: 'This is a test alert 2',
-    //     severity: 'info',
-    //     check: () => Promise.resolve(true),
-    //     shouldShow: data => data === true,
-    //     actions: [
-    //         {
-    //             label: 'Test Action',
-    //             onClick: () => console.log('Test Action'),
-    //         },
-    //     ],
-    // });
 }

package/src/lib/framework/layout-engine/page-layout.tsx

@@ -23,7 +23,7 @@ import {
 } from '@/vdb/components/ui/dropdown-menu.js';
 import { PageBlockContext } from '@/vdb/framework/layout-engine/page-block-provider.js';
 import { PageContext, PageContextValue } from '@/vdb/framework/layout-engine/page-provider.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { getDashboardActionBarItems, getDashboardPageBlocks } from './layout-extensions.js';
 import { LocationWrapper } from './location-wrapper.js';
 
@@ -119,12 +119,12 @@ export function Page({ children, pageId, entity, form, submitHandler, ...props }
 }
 
 function PageContent({
-    pageHeader,
-    pageContent,
-    form,
-    submitHandler,
-    ...props
-}: {
+                         pageHeader,
+                         pageContent,
+                         form,
+                         submitHandler,
+                         ...props
+                     }: {
     pageHeader: React.ReactNode;
     pageContent: React.ReactNode;
     form?: UseFormReturn<any>;
@@ -146,11 +146,11 @@ function PageContent({
 }
 
 export function PageContentWithOptionalForm({
-    form,
-    pageHeader,
-    pageContent,
-    submitHandler,
-}: {
+                                                form,
+                                                pageHeader,
+                                                pageContent,
+                                                submitHandler,
+                                            }: {
     form?: UseFormReturn<any>;
     pageHeader: React.ReactNode;
     pageContent: React.ReactNode;
@@ -425,9 +425,9 @@ function EntityInfoDropdown({ entity }: Readonly<{ entity: any }>) {
  * @since 3.3.0
  */
 export function PageActionBarRight({
-    children,
-    dropdownMenuItems,
-}: Readonly<{
+                                       children,
+                                       dropdownMenuItems,
+                                   }: Readonly<{
     children: React.ReactNode;
     dropdownMenuItems?: InlineDropdownItem[];
 }>) {
@@ -458,9 +458,9 @@ export function PageActionBarRight({
 }
 
 function PageActionBarItem({
-    item,
-    page,
-}: Readonly<{ item: DashboardActionBarItem; page: PageContextValue }>) {
+                               item,
+                               page,
+                           }: Readonly<{ item: DashboardActionBarItem; page: PageContextValue }>) {
     return (
         <PermissionGuard requires={item.requiresPermission ?? []}>
             <item.component context={page} />
@@ -469,9 +469,9 @@ function PageActionBarItem({
 }
 
 function PageActionBarDropdown({
-    items,
-    page,
-}: Readonly<{ items: DashboardActionBarItem[]; page: PageContextValue }>) {
+                                   items,
+                                   page,
+                               }: Readonly<{ items: DashboardActionBarItem[]; page: PageContextValue }>) {
     return (
         <DropdownMenu>
             <DropdownMenuTrigger asChild>
@@ -550,13 +550,13 @@ export type PageBlockProps = {
  * @since 3.3.0
  */
 export function PageBlock({
-    children,
-    title,
-    description,
-    className,
-    blockId,
-    column,
-}: Readonly<PageBlockProps>) {
+                              children,
+                              title,
+                              description,
+                              className,
+                              blockId,
+                              column,
+                          }: Readonly<PageBlockProps>) {
     const contextValue = useMemo(
         () => ({
             blockId,
@@ -595,10 +595,10 @@ export function PageBlock({
  * @since 3.3.0
  */
 export function FullWidthPageBlock({
-    children,
-    className,
-    blockId,
-}: Readonly<Pick<PageBlockProps, 'children' | 'className' | 'blockId'>>) {
+                                       children,
+                                       className,
+                                       blockId,
+                                   }: Readonly<Pick<PageBlockProps, 'children' | 'className' | 'blockId'>>) {
     const contextValue = useMemo(() => ({ blockId, column: 'main' as const }), [blockId]);
     return (
         <PageBlockContext.Provider value={contextValue}>
@@ -625,10 +625,10 @@ export function FullWidthPageBlock({
  * @since 3.3.0
  */
 export function CustomFieldsPageBlock({
-    column,
-    entityType,
-    control,
-}: Readonly<{
+                                          column,
+                                          entityType,
+                                          control,
+                                      }: Readonly<{
     column: 'main' | 'side';
     entityType: string;
     control: Control<any, any>;

package/src/lib/framework/page/detail-page.tsx

@@ -5,7 +5,7 @@ import { Checkbox } from '@/vdb/components/ui/checkbox.js';
 import { Input } from '@/vdb/components/ui/input.js';
 import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
 import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import { AnyRoute, useNavigate } from '@tanstack/react-router';
 import { ResultOf, VariablesOf } from 'gql.tada';
@@ -152,15 +152,15 @@ export function DetailPage<
     C extends TypedDocumentNode<any, any>,
     U extends TypedDocumentNode<any, any>,
 >({
-    pageId,
-    route,
-    entityName: passedEntityName,
-    queryDocument,
-    createDocument,
-    updateDocument,
-    setValuesForUpdate,
-    title,
-}: DetailPageProps<T, C, U>) {
+      pageId,
+      route,
+      entityName: passedEntityName,
+      queryDocument,
+      createDocument,
+      updateDocument,
+      setValuesForUpdate,
+      title,
+  }: DetailPageProps<T, C, U>) {
     const params = route.useParams();
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
     const navigate = useNavigate();

package/src/lib/framework/page/use-extended-router.tsx

@@ -1,4 +1,4 @@
-import { AnyRoute, createRoute, Router } from '@tanstack/react-router';
+import { AnyRoute, createRoute, createRouter, RouterOptions } from '@tanstack/react-router';
 import { useMemo } from 'react';
 import { ErrorPage } from '../../components/shared/error-page.js';
 import { AUTHENTICATED_ROUTE_PREFIX } from '../../constants.js';
@@ -6,26 +6,40 @@ import { useDashboardExtensions } from '../extension-api/use-dashboard-extension
 import { extensionRoutes } from './page-api.js';
 
 /**
- * Extends the TanStack Router with additional routes for each dashboard
- * extension.
+ * Creates a TanStack Router with the base route tree extended with additional
+ * routes from dashboard extensions.
  */
-export const useExtendedRouter = (router: Router<AnyRoute, any, any>) => {
+export const useExtendedRouter = (
+    baseRouteTree: AnyRoute,
+    routerOptions: Omit<RouterOptions<AnyRoute, any>, 'routeTree'>,
+) => {
     const { extensionsLoaded } = useDashboardExtensions();
 
     return useMemo(() => {
+        // Start with the base route tree
+        let routeTree = baseRouteTree;
+
+        // Only extend if extensions are loaded
         if (!extensionsLoaded) {
-            return router;
+            return createRouter({
+                ...routerOptions,
+                routeTree,
+            });
         }
 
-        const authenticatedRouteIndex = router.routeTree.children.findIndex(
+        const authenticatedRouteIndex = routeTree.children.findIndex(
             (r: AnyRoute) => r.id === AUTHENTICATED_ROUTE_PREFIX,
         );
 
         if (authenticatedRouteIndex === -1) {
-            return router;
+            // No authenticated route found, return router with base tree
+            return createRouter({
+                ...routerOptions,
+                routeTree,
+            });
         }
 
-        let authenticatedRoute: AnyRoute = router.routeTree.children[authenticatedRouteIndex];
+        let authenticatedRoute: AnyRoute = routeTree.children[authenticatedRouteIndex];
 
         const newAuthenticatedRoutes: AnyRoute[] = [];
         const newRootRoutes: AnyRoute[] = [];
@@ -61,7 +75,7 @@ export const useExtendedRouter = (router: Router<AnyRoute, any, any>) => {
                 // Check if the route already exists at the root level
                 // Check both by path and by id (which includes the leading slash)
                 const routeExists =
-                    router.routeTree.children.some(
+                    routeTree.children.some(
                         (r: AnyRoute) =>
                             r.path === `/${pathWithoutLeadingSlash}` ||
                             r.path === pathWithoutLeadingSlash ||
@@ -80,7 +94,7 @@ export const useExtendedRouter = (router: Router<AnyRoute, any, any>) => {
 
                 const newRoute: AnyRoute = createRoute({
                     path: `/${pathWithoutLeadingSlash}`,
-                    getParentRoute: () => router.routeTree,
+                    getParentRoute: () => routeTree,
                     loader: config.loader,
                     validateSearch: config.validateSearch,
                     component: () => config.component(newRoute),
@@ -90,21 +104,32 @@ export const useExtendedRouter = (router: Router<AnyRoute, any, any>) => {
             }
         }
 
-        const childrenWithoutAuthenticated = router.routeTree.children.filter(
+        // Only extend the tree if we have new routes to add
+        if (newAuthenticatedRoutes.length === 0 && newRootRoutes.length === 0) {
+            return createRouter({
+                ...routerOptions,
+                routeTree,
+            });
+        }
+
+        const childrenWithoutAuthenticated = routeTree.children.filter(
             (r: AnyRoute) => r.id !== AUTHENTICATED_ROUTE_PREFIX,
         );
 
-        // Create a new router with the modified route tree
-        const newRouter = new Router({
-            routeTree: router.routeTree.addChildren([
-                ...childrenWithoutAuthenticated,
-                authenticatedRoute.addChildren([...authenticatedRoute.children, ...newAuthenticatedRoutes]),
-                ...newRootRoutes,
-            ]),
-            basepath: router.basepath,
-            defaultPreload: router.options.defaultPreload,
-            defaultPreloadDelay: router.options.defaultPreloadDelay,
+        const updatedAuthenticatedRoute = authenticatedRoute.addChildren([
+            ...authenticatedRoute.children,
+            ...newAuthenticatedRoutes,
+        ]);
+
+        const extendedRouteTree: AnyRoute = routeTree.addChildren([
+            ...childrenWithoutAuthenticated,
+            updatedAuthenticatedRoute,
+            ...newRootRoutes,
+        ]);
+
+        return createRouter({
+            ...routerOptions,
+            routeTree: extendedRouteTree,
         });
-        return newRouter;
-    }, [router, extensionsLoaded]);
+    }, [baseRouteTree, routerOptions, extensionsLoaded]);
 };