feat(admin): bump react-router and adapt new routes package (#11887)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Added new admin routes: "auth", "setup", and "notFound" for improved navigation and access within the admin interface.
  - Introduced a utility for simplified and flexible lazy loading of React components with fallback support.

- **Improvements**
  - Updated routing structure in the admin frontend for clearer route management and enhanced Sentry integration.
  - Centralized route definitions for easier maintenance and consistency.
  - Upgraded dependencies to support the latest React Router and React versions.
  - Enhanced asynchronous handling in setup form navigation.

- **Chores**
  - Updated project references and workspace dependencies for better package management.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/routes/src/index.ts

@@ -0,0 +1,2 @@
+export * from './lazy';
+export * from './routes';

packages/frontend/routes/src/lazy.ts

@@ -0,0 +1,37 @@
+import React, {
+  type ComponentProps,
+  type ComponentType,
+  lazy as reactLazy,
+  Suspense,
+} from 'react';
+
+export function lazy<T extends ComponentType<any>>(
+  factory: () => Promise<Record<any, T>>,
+  fallback?: React.ReactNode
+) {
+  const LazyComponent = reactLazy(() =>
+    factory().then(mod => {
+      if ('default' in mod) {
+        return { default: mod.default };
+      } else {
+        const components = Object.values(mod);
+        if (components.length > 1) {
+          console.warn('Lazy loaded module has more then one exports');
+        }
+        return {
+          default: components[0],
+        };
+      }
+    })
+  );
+
+  return function LazyRoute(props: ComponentProps<T>) {
+    return React.createElement(
+      Suspense,
+      {
+        fallback,
+      },
+      React.createElement(LazyComponent, props)
+    );
+  };
+}

packages/frontend/routes/src/routes.ts

@@ -9,10 +9,13 @@ export const ROUTES = {
   index: '/',
   admin: {
     index: '/admin',
+    auth: '/admin/auth',
+    setup: '/admin/setup',
     accounts: '/admin/accounts',
     ai: '/admin/ai',
     settings: { index: '/admin/settings', module: '/admin/settings/:module' },
     about: '/admin/about',
+    notFound: '/admin/404',
   },
 };
 // #endregion
@@ -22,10 +25,13 @@ export const RELATIVE_ROUTES = {
   index: '/',
   admin: {
     index: 'admin',
+    auth: 'auth',
+    setup: 'setup',
     accounts: 'accounts',
     ai: 'ai',
     settings: { index: 'settings', module: ':module' },
     about: 'about',
+    notFound: '404',
   },
 };
 // #endregion
@@ -33,6 +39,8 @@ export const RELATIVE_ROUTES = {
 // #region Path Factories
 const home = () => '/';
 const admin = () => '/admin';
+admin.auth = () => '/admin/auth';
+admin.setup = () => '/admin/setup';
 admin.accounts = () => '/admin/accounts';
 admin.ai = () => '/admin/ai';
 const admin_settings = () => '/admin/settings';
@@ -40,5 +48,6 @@ admin_settings.module = (params: { module: string }) =>
   `/admin/settings/${params.module}`;
 admin.settings = admin_settings;
 admin.about = () => '/admin/about';
+admin.notFound = () => '/admin/404';
 export const FACTORIES = { admin, home };
 // #endregion