Provider setup

A backoffice app usually has a thin React shell: theme provider outside, BackofficeProvider inside, and configuration objects kept in separate modules.

import { type JSX } from 'react';
import { BackofficeProvider } from '@plumile/backoffice-react';
import { AdminThemeProvider } from '@plumile/ui';

import { auth } from './config/auth.js';
import { dashboard } from './config/dashboard.js';
import { entityManifest } from './config/entities/manifest.js';
import { graphql } from './config/graphql.js';
import { i18n } from './config/i18n.js';
import { sidebar } from './config/sidebar.js';
import { toolsOperationPage } from './tools/toolsOperationPageResource.js';

import '@plumile/ui/style.css';
import '@plumile/backoffice-react/style.css';

export function BackofficeApp(): JSX.Element {
  return (
    <AdminThemeProvider>
      <BackofficeProvider
        basePath="/"
        entityManifest={entityManifest}
        auth={auth}
        graphql={graphql}
        i18n={i18n}
        sidebar={sidebar}
        dashboard={dashboard}
        toolsOperationPage={toolsOperationPage}
        filterColumnAliases={{ ownerId: 'owner.id' }}
      />
    </AdminThemeProvider>
  );
}

Keep each config object independently testable. The provider should compose configs; it should not be the place where every query, mutation, and manifest is declared inline.