Setup provider

Une app backoffice a souvent un shell React tres fin: provider de theme a l’exterieur, BackofficeProvider a l’interieur, et objets de config dans des modules separes.

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>
  );
}

Gardez chaque objet de config testable independamment. Le provider doit composer les configs, pas declarer inline toutes les queries, mutations et manifests.