Changing theme works for compatibility with mui localization

gui/rpk-gui/src/App.tsx

@@ -5,7 +5,6 @@ import { RefineSnackbarProvider, useNotificationProvider } from "@refinedev/mui"
 
 import CssBaseline from "@mui/material/CssBaseline";
 import GlobalStyles from "@mui/material/GlobalStyles";
-import { ThemeProvider } from "@mui/material/styles";
 import HistoryEduIcon from '@mui/icons-material/HistoryEdu';
 import routerBindings, {
   CatchAllNavigate,
@@ -22,9 +21,9 @@ import { ForgotPassword } from "./components/auth/ForgotPassword";
 import { UpdatePassword } from "./components/auth/UpdatePassword";
 
 import { Header } from "./components";
+import { I18nTheme } from "./components/I18nTheme";
 import { HubRoutes } from "./pages/hub";
 import { FirmRoutes } from "./pages/firm";
-import rpcTheme from "./theme";
 
 function App() {
   const { t, i18n } = useTranslation();
@@ -37,7 +36,6 @@ function App() {
 
   return (
     <BrowserRouter>
-      <ThemeProvider theme={rpcTheme}>
       <ColorModeContextProvider>
         <CssBaseline />
         <GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
@@ -74,6 +72,7 @@ function App() {
               }
             }}
           >
+            <I18nTheme>
               <Routes>
                 <Route
                   element={(
@@ -95,10 +94,10 @@ function App() {
               </Routes>
               <UnsavedChangesNotifier />
               <DocumentTitleHandler />
+            </I18nTheme>
           </Refine>
         </RefineSnackbarProvider>
       </ColorModeContextProvider>
-      </ThemeProvider>
     </BrowserRouter>
   );
 }

gui/rpk-gui/src/components/I18nTheme.tsx

@@ -0,0 +1,20 @@
+import React, { PropsWithChildren } from "react";
+import { useTranslation } from "@refinedev/core";
+import { useTheme } from "@mui/material";
+import * as locales from '@mui/material/locale';
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+
+type SupportedLocales = keyof typeof locales;
+
+export const I18nTheme: React.FC<PropsWithChildren> = ({ children }: PropsWithChildren) => {
+  const { getLocale } = useTranslation();
+  const theme = useTheme()
+
+  const themeWithLocale = createTheme(theme, locales[getLocale() as SupportedLocales])
+
+  return (
+    <ThemeProvider theme={themeWithLocale}>
+      { children }
+    </ThemeProvider>
+  );
+}

gui/rpk-gui/src/i18n.tsx

@@ -8,14 +8,14 @@ i18n
   .use(detector)
   .use(initReactI18next)
   .init({
-    supportedLngs: ["EN", "FR"],
+    supportedLngs: ["enUS", "frFR"],
     backend: {
       loadPath: "/locales/{{lng}}/{{ns}}.json", // "http/locales/{{lng}}/{{ns}}.json"
     },
     //saveMissing: true,
     ns: ["common"],
     defaultNS: "common",
-    fallbackLng: ["EN", "FR"],
+    fallbackLng: ["enUS", "frFR"],
   });
 
 export default i18n;

gui/rpk-gui/src/pages/firm/base-page/List.tsx

@@ -1,11 +1,11 @@
 import { UiSchema } from "@rjsf/utils";
+import { useTranslation } from "@refinedev/core";
 import { List as RefineList, useDataGrid } from "@refinedev/mui";
 import { DataGrid, GridColDef, GridValidRowModel } from "@mui/x-data-grid";
 import { Link, useNavigate } from "react-router"
 import React, { useContext } from "react";
 import { Button } from "@mui/material";
 import { FirmContext } from "../../../contexts/FirmContext";
-import { useTranslation } from "@refinedev/core";
 
 type ListProps<T extends GridValidRowModel> = {
   resource: string,
@@ -20,7 +20,9 @@ const List = <T extends GridValidRowModel>(props: ListProps<T>) => {
   const { currentFirm } = useContext(FirmContext);
   const resourceBasePath = `firm/${currentFirm.instance}/${currentFirm.firm}`
 
-  const { dataGridProps } = useDataGrid<T>({resource: `${resourceBasePath}/${resource}`});
+  const { dataGridProps } = useDataGrid<T>({
+    resource: `${resourceBasePath}/${resource}`,
+  });
   const navigate = useNavigate();
 
   const cols = React.useMemo<GridColDef<T>[]>(
@@ -40,7 +42,9 @@ const List = <T extends GridValidRowModel>(props: ListProps<T>) => {
       <DataGrid
         {...dataGridProps}
         columns={cols}
-        onRowClick={handleRowClick} />
+        onRowClick={handleRowClick}
+        pageSizeOptions={[10, 15, 20, 50, 100]}
+      />
     </RefineList>
   )
 }