@vendure/dashboard 3.2.0

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

@@ -0,0 +1,48 @@
+import { NEW_ENTITY_PATH } from '@/constants.js';
+
+import { PageBreadcrumb } from '@/components/layout/generated-breadcrumbs.js';
+import { TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { FileBaseRouteOptions } from '@tanstack/react-router';
+import { getQueryName, getQueryTypeFieldInfo } from '../document-introspection/get-document-structure.js';
+import { DetailEntity } from './page-types.js';
+import { getDetailQueryOptions } from './use-detail-page.js';
+import { addCustomFields } from '../document-introspection/add-custom-fields.js';
+export interface DetailPageRouteLoaderConfig<T extends TypedDocumentNode<any, any>> {
+    queryDocument: T;
+    breadcrumb: (isNew: boolean, entity: DetailEntity<T>) => Array<PageBreadcrumb | undefined>;
+}
+
+export function detailPageRouteLoader<T extends TypedDocumentNode<any, any>>({
+    queryDocument,
+    breadcrumb,
+}: DetailPageRouteLoaderConfig<T>) {
+    const loader: FileBaseRouteOptions<any, any>['loader'] = async ({
+        context,
+        params,
+    }: {
+        context: any;
+        params: any;
+    }) => {
+        if (!params.id) {
+            throw new Error('ID param is required');
+        }
+        const isNew = params.id === NEW_ENTITY_PATH;
+        const result = isNew
+            ? null
+            : await context.queryClient.ensureQueryData(
+                  getDetailQueryOptions(addCustomFields(queryDocument), { id: params.id }),
+                  { id: params.id },
+              );
+
+        const entityField = getQueryName(queryDocument);
+        const entityName = getQueryTypeFieldInfo(queryDocument)?.type;
+
+        if (!isNew && !result[entityField]) {
+            throw new Error(`${entityName} with the ID ${params.id} was not found`);
+        }
+        return {
+            breadcrumb: breadcrumb(isNew, result?.[entityField]),
+        };
+    };
+    return loader;
+}

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

@@ -0,0 +1,131 @@
+import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
+import { Input } from '@/components/ui/input.js';
+import { useDetailPage } from '@/framework/page/use-detail-page.js';
+import { Trans } from '@/lib/trans.js';
+import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { AnyRoute } from '@tanstack/react-router';
+import { ResultOf, VariablesOf } from 'gql.tada';
+
+import { DateTimeInput } from '@/components/data-input/datetime-input.js';
+import { Button } from '@/components/ui/button.js';
+import { Checkbox } from '@/components/ui/checkbox.js';
+import { toast } from 'sonner';
+import { getOperationVariablesFields } from '../document-introspection/get-document-structure.js';
+import {
+    DetailFormGrid,
+    Page,
+    PageActionBar,
+    PageActionBarLeft,
+    PageActionBarRight,
+    PageBlock,
+    PageLayout,
+    PageTitle,
+} from '../layout-engine/page-layout.js';
+import { DetailEntityPath } from './page-types.js';
+
+export interface DetailPageProps<
+    T extends TypedDocumentNode<any, any>,
+    C extends TypedDocumentNode<any, any>,
+    U extends TypedDocumentNode<any, any>,
+    EntityField extends keyof ResultOf<T> = DetailEntityPath<T>,
+> {
+    pageId: string;
+    route: AnyRoute;
+    title: (entity: ResultOf<T>[EntityField]) => string;
+    queryDocument: T;
+    createDocument?: C;
+    updateDocument: U;
+    setValuesForUpdate: (entity: ResultOf<T>[EntityField]) => VariablesOf<U>['input'];
+}
+
+export function DetailPage<
+    T extends TypedDocumentNode<any, any>,
+    C extends TypedDocumentNode<any, any>,
+    U extends TypedDocumentNode<any, any>,
+>({
+    pageId,
+    route,
+    queryDocument,
+    createDocument,
+    updateDocument,
+    setValuesForUpdate,
+    title,
+}: DetailPageProps<T, C, U>) {
+    const params = route.useParams();
+
+    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage<any, any, any>({
+        queryDocument,
+        updateDocument,
+        createDocument,
+        params: { id: params.id },
+        setValuesForUpdate,
+        onSuccess: () => {
+            toast.success('Updated successfully');
+            resetForm();
+        },
+        onError: error => {
+            toast.error('Failed to update', {
+                description: error instanceof Error ? error.message : 'Unknown error',
+            });
+        },
+    });
+
+    const updateFields = getOperationVariablesFields(updateDocument);
+
+    return (
+        <Page pageId={pageId} form={form} submitHandler={submitHandler}>
+            <PageActionBar>
+                <PageActionBarLeft>
+                    <PageTitle>{title(entity)}</PageTitle>
+                </PageActionBarLeft>
+                <PageActionBarRight>
+                    <Button
+                        type="submit"
+                        disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
+                    >
+                        <Trans>Update</Trans>
+                    </Button>
+                </PageActionBarRight>
+            </PageActionBar>
+            <PageLayout>
+                <PageBlock column="main" blockId="main-form">
+                    <DetailFormGrid>
+                        {updateFields.map(fieldInfo => {
+                            if (fieldInfo.name === 'id' && fieldInfo.type === 'ID') {
+                                return null;
+                            }
+                            return (
+                                <FormFieldWrapper
+                                    key={fieldInfo.name}
+                                    control={form.control}
+                                    name={fieldInfo.name as never}
+                                    label={fieldInfo.name}
+                                    render={({ field }) => {
+                                        switch (fieldInfo.type) {
+                                            case 'Int':
+                                            case 'Float':
+                                                return (
+                                                    <Input
+                                                        type="number"
+                                                        value={field.value}
+                                                        onChange={e => field.onChange(e.target.valueAsNumber)}
+                                                    />
+                                                );
+                                            case 'DateTime':
+                                                return <DateTimeInput {...field} />;
+                                            case 'Boolean':
+                                                return <Checkbox {...field} />;
+                                            case 'String':
+                                            default:
+                                                return <Input {...field} />;
+                                        }
+                                    }}
+                                />
+                            );
+                        })}
+                    </DetailFormGrid>
+                </PageBlock>
+            </PageLayout>
+        </Page>
+    );
+}

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

@@ -0,0 +1,166 @@
+import {
+    AdditionalColumns,
+    CustomizeColumnConfig,
+    FacetedFilterConfig,
+    ListQueryOptionsShape,
+    ListQueryShape,
+    PaginatedListDataTable,
+    RowAction,
+} from '@/components/shared/paginated-list-data-table.js';
+import { TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { AnyRoute, AnyRouter, useNavigate } from '@tanstack/react-router';
+import { ColumnFiltersState, SortingState, Table } from '@tanstack/react-table';
+import { TableOptions } from '@tanstack/table-core';
+import { ResultOf } from 'gql.tada';
+import { addCustomFields } from '../document-introspection/add-custom-fields.js';
+import {
+    FullWidthPageBlock,
+    Page,
+    PageActionBar,
+    PageLayout,
+    PageTitle,
+} from '../layout-engine/page-layout.js';
+
+type ListQueryFields<T extends TypedDocumentNode<any, any>> = {
+    [Key in keyof ResultOf<T>]: ResultOf<T>[Key] extends { items: infer U }
+        ? U extends any[]
+            ? U[number]
+            : never
+        : never;
+}[keyof ResultOf<T>];
+
+export interface ListPageProps<
+    T extends TypedDocumentNode<U, V>,
+    U extends ListQueryShape,
+    V extends ListQueryOptionsShape,
+    AC extends AdditionalColumns<T>,
+> {
+    pageId?: string;
+    route: AnyRoute | (() => AnyRoute);
+    title: string | React.ReactElement;
+    listQuery: T;
+    deleteMutation?: TypedDocumentNode<any, { id: string }>;
+    transformVariables?: (variables: V) => V;
+    onSearchTermChange?: (searchTerm: string) => NonNullable<V['options']>['filter'];
+    customizeColumns?: CustomizeColumnConfig<T>;
+    additionalColumns?: AC;
+    defaultColumnOrder?: (keyof ListQueryFields<T> | keyof AC)[];
+    defaultSort?: SortingState;
+    defaultVisibility?: Partial<Record<keyof ListQueryFields<T> | keyof AC, boolean>>;
+    children?: React.ReactNode;
+    facetedFilters?: FacetedFilterConfig<T>;
+    rowActions?: RowAction<ListQueryFields<T>>[];
+    transformData?: (data: any[]) => any[];
+    setTableOptions?: (table: TableOptions<any>) => TableOptions<any>;
+}
+
+export function ListPage<
+    T extends TypedDocumentNode<U, V>,
+    U extends Record<string, any> = any,
+    V extends ListQueryOptionsShape = ListQueryOptionsShape,
+    AC extends AdditionalColumns<T> = AdditionalColumns<T>,
+>({
+    pageId,
+    title,
+    listQuery,
+    deleteMutation,
+    transformVariables,
+    customizeColumns,
+    additionalColumns,
+    defaultColumnOrder,
+    defaultSort,
+    route: routeOrFn,
+    defaultVisibility,
+    onSearchTermChange,
+    facetedFilters,
+    children,
+    rowActions,
+    transformData,
+    setTableOptions,
+}: ListPageProps<T, U, V, AC>) {
+    const route = typeof routeOrFn === 'function' ? routeOrFn() : routeOrFn;
+    const routeSearch = route.useSearch();
+    const navigate = useNavigate<AnyRouter>({ from: route.fullPath });
+
+    const pagination = {
+        page: routeSearch.page ? parseInt(routeSearch.page) : 1,
+        itemsPerPage: routeSearch.perPage ? parseInt(routeSearch.perPage) : 10,
+    };
+
+    const sorting: SortingState = (routeSearch.sort ?? '')
+        .split(',')
+        .filter((s: string) => s.length)
+        .map((s: string) => {
+            return {
+                id: s.replace(/^-/, ''),
+                desc: s.startsWith('-'),
+            };
+        });
+
+    if (defaultSort && !sorting.length) {
+        sorting.push(...defaultSort);
+    }
+
+    function sortToString(sortingStates?: SortingState) {
+        return sortingStates?.map(s => `${s.desc ? '-' : ''}${s.id}`).join(',');
+    }
+
+    function persistListStateToUrl(
+        table: Table<any>,
+        listState: {
+            page?: number;
+            perPage?: number;
+            sort?: SortingState;
+            filters?: ColumnFiltersState;
+        },
+    ) {
+        const tableState = table.getState();
+        const page = listState.page || tableState.pagination.pageIndex + 1;
+        const perPage = listState.perPage || tableState.pagination.pageSize;
+        const sort = sortToString(listState.sort ?? tableState.sorting);
+        const filters = listState.filters ?? tableState.columnFilters;
+        navigate({
+            search: () => ({ sort, page, perPage, filters: filters.length ? filters : undefined }) as never,
+        });
+    }
+
+    const listQueryWithCustomFields = addCustomFields(listQuery);
+
+    return (
+        <Page pageId={pageId}>
+            <PageTitle>{title}</PageTitle>
+            <PageActionBar>{children}</PageActionBar>
+            <PageLayout>
+                <FullWidthPageBlock blockId="list-table">
+                    <PaginatedListDataTable
+                        listQuery={listQueryWithCustomFields}
+                        deleteMutation={deleteMutation}
+                        transformVariables={transformVariables}
+                        customizeColumns={customizeColumns as any}
+                        additionalColumns={additionalColumns as any}
+                        defaultColumnOrder={defaultColumnOrder}
+                        defaultVisibility={defaultVisibility}
+                        onSearchTermChange={onSearchTermChange}
+                        page={pagination.page}
+                        itemsPerPage={pagination.itemsPerPage}
+                        sorting={sorting}
+                        columnFilters={routeSearch.filters}
+                        onPageChange={(table, page, perPage) => {
+                            persistListStateToUrl(table, { page, perPage });
+                        }}
+                        onSortChange={(table, sorting) => {
+                            persistListStateToUrl(table, { sort: sorting });
+                        }}
+                        onFilterChange={(table, filters) => {
+                            persistListStateToUrl(table, { filters });
+                        }}
+                        facetedFilters={facetedFilters}
+                        rowActions={rowActions}
+                        setTableOptions={setTableOptions}
+                        transformData={transformData}
+                    />
+                </FullWidthPageBlock>
+            </PageLayout>
+        </Page>
+    );
+}

package/src/lib/framework/page/page-api.ts

@@ -0,0 +1,9 @@
+import { DashboardRouteDefinition } from '@/framework/extension-api/extension-api-types.js';
+
+export const extensionRoutes = new Map<string, DashboardRouteDefinition>();
+
+export function registerRoute(config: DashboardRouteDefinition) {
+    if (config.path) {
+        extensionRoutes.set(config.path, config);
+    }
+}

package/src/lib/framework/page/page-types.ts

@@ -0,0 +1,51 @@
+import { ResultOf, TypedDocumentNode } from '@graphql-typed-document-node/core';
+
+// Type that identifies a paginated list structure (has items array and totalItems)
+type IsEntity<T> = T extends { id: string } ? true : false;
+
+// Helper type to extract string keys from an object
+type StringKeys<T> = T extends object ? Extract<keyof T, string> : never;
+
+/**
+ * @description
+ * This type is used to extract the path to the entity from the query result.
+ *
+ * For example, if you have a query like this:
+ *
+ * ```graphql
+ * query GetEntity($id: ID!) {
+ *   entity(id: $id) {
+ *     id
+ *     name
+ *   }
+ * }
+ * ```
+ *
+ * The `DetailEntityPath` type will be `'entity'`.
+ */
+export type DetailEntityPath<T extends TypedDocumentNode<any, any>> = {
+    [K in StringKeys<ResultOf<T>>]: NonNullable<ResultOf<T>[K]> extends object
+        ? IsEntity<NonNullable<ResultOf<T>[K]>> extends true
+            ? K
+            : never
+        : never;
+}[StringKeys<ResultOf<T>>];
+
+/**
+ * @description
+ * This type is used to extract the entity from the query result.
+ *
+ * For example, if you have a query like this:
+ *
+ * ```graphql
+ * query GetEntity($id: ID!) {
+ *   entity(id: $id) {
+ *     id
+ *     name
+ *   }
+ * }
+
+ * ```
+ * The `DetailEntity` type will be `{ id: string, name: string }`.
+ */
+export type DetailEntity<T extends TypedDocumentNode<any, any>> = ResultOf<T>[DetailEntityPath<T>];

package/src/lib/framework/page/use-detail-page.ts

@@ -0,0 +1,217 @@
+import { NEW_ENTITY_PATH } from '@/constants.js';
+import { api, Variables } from '@/graphql/api.js';
+import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
+import {
+    DefinedInitialDataOptions,
+    queryOptions,
+    useMutation,
+    useQueryClient,
+    useSuspenseQuery,
+} from '@tanstack/react-query';
+import { ResultOf, VariablesOf } from 'gql.tada';
+import { DocumentNode } from 'graphql';
+import { FormEvent } from 'react';
+import { UseFormReturn } from 'react-hook-form';
+
+import { addCustomFields } from '../document-introspection/add-custom-fields.js';
+import { getMutationName, getQueryName } from '../document-introspection/get-document-structure.js';
+import { useGeneratedForm } from '../form-engine/use-generated-form.js';
+
+import { DetailEntityPath } from './page-types.js';
+
+// Utility type to remove null from a type union
+type RemoveNull<T> = T extends null ? never : T;
+
+type RemoveNullFields<T> = {
+    [K in keyof T]: RemoveNull<T[K]>;
+};
+
+export interface DetailPageOptions<
+    T extends TypedDocumentNode<any, any>,
+    C extends TypedDocumentNode<any, any>,
+    U extends TypedDocumentNode<any, any>,
+    EntityField extends keyof ResultOf<T> = DetailEntityPath<T>,
+    VarNameCreate extends keyof VariablesOf<C> = 'input',
+    VarNameUpdate extends keyof VariablesOf<U> = 'input',
+> {
+    /**
+     * @description
+     * The query document to fetch the entity.
+     */
+    queryDocument: T;
+    /**
+     * @description
+     * The field of the query document that contains the entity.
+     */
+    entityField?: EntityField;
+    /**
+     * @description
+     * The parameters used to identify the entity.
+     */
+    params: {
+        id: string;
+    };
+    /**
+     * @description
+     * The document to create the entity.
+     */
+    createDocument?: C;
+    /**
+     * @description
+     * The document to update the entity.
+     */
+    updateDocument?: U;
+    /**
+     * @description
+     * The function to set the values for the update document.
+     */
+    setValuesForUpdate: (entity: NonNullable<ResultOf<T>[EntityField]>) => VariablesOf<U>[VarNameUpdate];
+    transformCreateInput?: (input: VariablesOf<C>[VarNameCreate]) => VariablesOf<C>[VarNameCreate];
+    transformUpdateInput?: (input: VariablesOf<U>[VarNameUpdate]) => VariablesOf<U>[VarNameUpdate];
+    /**
+     * @description
+     * The function to call when the update is successful.
+     */
+    onSuccess?: (entity: ResultOf<C>[keyof ResultOf<C>] | ResultOf<U>[keyof ResultOf<U>]) => void;
+    /**
+     * @description
+     * The function to call when the update is successful.
+     */
+    onError?: (error: unknown) => void;
+}
+
+export function getDetailQueryOptions<T, V extends Variables = Variables>(
+    document: TypedDocumentNode<T, V> | DocumentNode,
+    variables: V,
+): DefinedInitialDataOptions {
+    const queryName = getQueryName(document);
+    return queryOptions({
+        queryKey: ['DetailPage', queryName, variables],
+        queryFn: () => api.query(document, variables),
+    }) as DefinedInitialDataOptions;
+}
+
+/**
+ * @description
+ * Adds a "customFields" property to the translations if the entity has translations.
+ */
+export type DetailPageTranslations<
+    T extends TypedDocumentNode<any, any>,
+    EntityField extends keyof ResultOf<T>,
+> = 'translations' extends keyof NonNullable<ResultOf<T>[EntityField]>
+    ? Array<NonNullable<ResultOf<T>[EntityField]>['translations'][number] & { customFields?: any }>
+    : undefined;
+
+/**
+ * @description
+ * Adds a "customFields" property to the entity and a "translations" property to the entity.
+ */
+export type DetailPageEntity<
+    T extends TypedDocumentNode<any, any>,
+    EntityField extends keyof ResultOf<T>,
+> = ResultOf<T>[EntityField] & {
+    customFields?: any;
+    translations: DetailPageTranslations<T, EntityField>;
+};
+
+export interface UseDetailPageResult<
+    T extends TypedDocumentNode<any, any>,
+    C extends TypedDocumentNode<any, any>,
+    U extends TypedDocumentNode<any, any>,
+    EntityField extends keyof ResultOf<T>,
+> {
+    form: UseFormReturn<RemoveNullFields<VariablesOf<U>['input']>>;
+    submitHandler: (event: FormEvent<HTMLFormElement>) => void;
+    entity?: DetailPageEntity<T, EntityField>;
+    isPending: boolean;
+    refreshEntity: () => void;
+    resetForm: () => void;
+}
+
+/**
+ * @description
+ * This hook is used to create an entity detail page which can read
+ * and update an entity.
+ */
+export function useDetailPage<
+    T extends TypedDocumentNode<any, any>,
+    C extends TypedDocumentNode<any, any>,
+    U extends TypedDocumentNode<any, any>,
+    EntityField extends keyof ResultOf<T> = keyof ResultOf<T>,
+    VarNameUpdate extends keyof VariablesOf<U> = 'input',
+    VarNameCreate extends keyof VariablesOf<C> = 'input',
+>(
+    options: DetailPageOptions<T, C, U, EntityField, VarNameCreate, VarNameUpdate>,
+): UseDetailPageResult<T, C, U, EntityField> {
+    const {
+        queryDocument,
+        createDocument,
+        updateDocument,
+        setValuesForUpdate,
+        transformCreateInput,
+        transformUpdateInput,
+        params,
+        entityField,
+        onSuccess,
+        onError,
+    } = options;
+    const isNew = params.id === NEW_ENTITY_PATH;
+    const queryClient = useQueryClient();
+    const detailQueryOptions = getDetailQueryOptions(addCustomFields(queryDocument), {
+        id: isNew ? '__NEW__' : params.id,
+    });
+    const detailQuery = useSuspenseQuery(detailQueryOptions);
+    const entityQueryField = entityField ?? getQueryName(queryDocument);
+    const entity = (detailQuery?.data as any)[entityQueryField] as
+        | DetailPageEntity<T, EntityField>
+        | undefined;
+
+    const resetForm = () => {
+        form.reset(form.getValues());
+    };
+
+    const createMutation = useMutation({
+        mutationFn: createDocument ? api.mutate(createDocument) : undefined,
+        onSuccess: data => {
+            if (createDocument) {
+                const createMutationName = getMutationName(createDocument);
+                onSuccess?.((data as any)[createMutationName]);
+            }
+        },
+    });
+
+    const updateMutation = useMutation({
+        mutationFn: updateDocument ? api.mutate(updateDocument) : undefined,
+        onSuccess: data => {
+            if (updateDocument) {
+                const updateMutationName = getMutationName(updateDocument);
+                onSuccess?.((data as any)[updateMutationName]);
+                void queryClient.invalidateQueries({ queryKey: detailQueryOptions.queryKey });
+            }
+        },
+        onError,
+    });
+
+    const document = isNew ? (createDocument ?? updateDocument) : updateDocument;
+    const { form, submitHandler } = useGeneratedForm({
+        document,
+        entity,
+        setValues: setValuesForUpdate,
+        onSubmit(values: any) {
+            if (isNew) {
+                createMutation.mutate({ input: transformCreateInput?.(values) ?? values });
+            } else {
+                updateMutation.mutate({ input: transformUpdateInput?.(values) ?? values });
+            }
+        },
+    });
+
+    return {
+        form: form as any,
+        submitHandler,
+        entity,
+        isPending: updateMutation.isPending || detailQuery?.isPending,
+        refreshEntity: detailQuery.refetch,
+        resetForm,
+    };
+}

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

@@ -0,0 +1,69 @@
+import { ErrorPage } from '@/components/shared/error-page.js';
+import { useDashboardExtensions } from '@/framework/extension-api/use-dashboard-extensions.js';
+import { ListPage } from '@/framework/page/list-page.js';
+import { extensionRoutes } from '@/framework/page/page-api.js';
+import { AUTHENTICATED_ROUTE_PREFIX } from '@/constants.js';
+import { AnyRoute, createRoute, Router } from '@tanstack/react-router';
+import { useMemo } from 'react';
+
+/**
+ * Extends the TanStack Router with additional routes for each dashboard
+ * extension.
+ */
+export const useExtendedRouter = (router: Router<AnyRoute, any, any>) => {
+    const { extensionsLoaded } = useDashboardExtensions();
+
+    return useMemo(() => {
+        if (!extensionsLoaded) {
+            return router;
+        }
+
+        const authenticatedRouteIndex = router.routeTree.children.findIndex(
+            (r: AnyRoute) => r.id === AUTHENTICATED_ROUTE_PREFIX,
+        );
+
+        if (authenticatedRouteIndex === -1) {
+            return router;
+        }
+
+        let authenticatedRoute: AnyRoute = router.routeTree.children[authenticatedRouteIndex];
+
+        const newRoutes: AnyRoute[] = [];
+        // Create new routes for each extension
+        for (const [path, config] of extensionRoutes.entries()) {
+            const pathWithoutLeadingSlash = path.startsWith('/') ? path.slice(1) : path;
+            if (
+                authenticatedRoute.children.findIndex((r: AnyRoute) => r.path === pathWithoutLeadingSlash) >
+                -1
+            ) {
+                // Skip if the route already exists
+                continue;
+            }
+
+            const newRoute: AnyRoute = createRoute({
+                path: `/${pathWithoutLeadingSlash}`,
+                getParentRoute: () => authenticatedRoute,
+                loader: config.loader,
+                component: () => config.component(newRoute),
+                errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+            });
+            newRoutes.push(newRoute);
+        }
+
+        const childrenWithoutAuthenticated = router.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, ...newRoutes]),
+            ]),
+            basepath: router.basepath,
+            defaultPreload: router.options.defaultPreload,
+            defaultPreloadDelay: router.options.defaultPreloadDelay,
+        });
+        return newRouter;
+    }, [router, extensionsLoaded]);
+};