@dashadmin/dash-admin 1.3.24 → 1.3.26

package/src/config/ConstantsService.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+
+import constants, {
+	IDASHAdminSystemConstants,
+} from 'dash-constants/src/DASHAdminSystemConstants';
+
+export interface IConstantContext<T> {
+	systemConstants: IDASHAdminSystemConstants;
+	appConstants: T;
+	setAppConstants: React.Dispatch<React.SetStateAction<T>>;
+}
+
+export const createConstantsContext = function constantsContextWrapper<T>():React.Context<IConstantContext<T>> {
+	return React.createContext<IConstantContext<T> | null>(null);
+};
+
+export const ConstantsContext = createConstantsContext();
+
+export interface IConstantsProvider<T> extends React.PropsWithChildren {
+	initialAppConstants?: T;
+}
+
+const ConstantsProvider = function ConstantsProviderWrapper<T>(
+	props: IConstantsProvider<T>,
+) {
+	const { initialAppConstants, children } = props;
+
+	const [appConstants, setAppConstants] = React.useState<T>(
+		initialAppConstants || null,
+	);
+
+	const defaultState: IConstantContext<T> = {
+		appConstants: appConstants,
+		systemConstants: constants,
+		setAppConstants: setAppConstants,
+	};
+	/* @ts-ignore : TODO Known issue with context interface */
+	return <ConstantsContext.Provider value={defaultState}>
+		{children}
+	</ConstantsContext.Provider>;
+	
+};
+
+export default ConstantsProvider;

package/src/config/DASHAdminSystemConstants.tsx

@@ -0,0 +1,182 @@
+/* eslint-disable turbo/no-undeclared-env-vars */
+/**
+ * @author Francisco Aranda - @farandal - http://www.linkedin.com/in/farandal
+ * Francisco.aranda@dash.cl.
+ * created Date 2022-07-14 15:00:00.
+ */
+
+const getEnvironmentVariable = (environmentVariable: string): string => {
+  /* @ts-ignore Expected access to process */
+  const unvalidatedEnvironmentVariable = process.env[environmentVariable];
+  /*if (!unvalidatedEnvironmentVariable) {
+    throw new Error(
+      `Couldn't find environment variable: ${environmentVariable}`,
+    );
+  } else {
+    return unvalidatedEnvironmentVariable;
+  }*/
+  return unvalidatedEnvironmentVariable || null;
+};
+
+
+export const getEnv = (key: string) => {
+  
+  // @ts-ignore Expected access to process 
+  const PREFIX = process.env.ENV_PREFIX || process.env.NEXT_PUBLIC_ENV_PREFIX || process.env.VITE_ENV_PREFIX || process.env.REACT_ENV_PREFIX || 'VITE_';
+  //console.log('GET ENV', PREFIX, key);
+
+  if (PREFIX === 'NEXT_PUBLIC_') {
+    return getEnvironmentVariable(PREFIX + key);
+  }
+  // @ts-ignore Expected access to process 
+  return process.env[PREFIX + key] || null;
+  
+};
+
+const system = {
+  FRONTEND_URL: getEnv('APP_FRONTEND_URL') || 'http://localhost:3006',
+  API_URL: getEnv('APP_BACKEND_URL') || 'http://localhost:8000',
+  SOCKET_URL: (getEnv('APP_SOCKETS_HOST') || (typeof window !== 'undefined' ? window.location.hostname : 'localhost')) + (getEnv('APP_SOCKETS_PORT') ? ':' + getEnv('APP_SOCKETS_PORT') : ''), 
+  SOCKETS_ENABLED: JSON.parse(getEnv('APP_SOCKETS_ENABLED')) || false,
+  SOCKETS_BROADCASTER: getEnv('APP_SOCKETS_BROADCASTER') || 'pusher',
+  SOCKETS_KEY: getEnv('APP_SOCKETS_KEY') || 'dash',
+  ADMIN_API_URL: getEnv('APP_ADMIN_API_URL'),
+  DEBUG: true, // String(getEnv("APP_DEBUG")) === 'true' ? true : false,
+  SHOW_GLOBAL_TOAST_ERROR: false,
+  SHOW_GLOBAL_DIALOG_ERROR: true,
+  DASH_SYSTEM_ROLE: getEnv('DASH_SYSTEM_ROLE') || 'System',
+  DASH_ADMIN_ROLE: getEnv('DASH_ADMIN_ROLE') || 'Administrator',
+  HAS_ADMINISTRATOR_ID_ROLE: 'HasAdministratorId',
+  ENABLE_TENANT_LOGIC: getEnv('ENABLE_TENANT_LOGIC') || true,
+  ENABLE_TENANT_IMPERSONATION: getEnv('ENABLE_TENANT_LOGIC') || true,
+  ENABLE_LOGS_AND_NOTIFICATIONS: getEnv('ENABLE_LOGS_AND_NOTIFICATIONS') || false,
+  DEFAULT_PER_PAGE: Number(getEnv('DEFAULT_PER_PAGE')) || null,
+  //URL_PREFIX: getEnv('DASH_ADMIN_URL_PREFIX') || '#/',
+  URL_PREFIX: getEnv('DASH_ADMIN_URL_PREFIX') || '/',
+  //PAGE_TRANSITIONS: JSON.parse(getEnv('PAGE_TRANSITIONS')) || false,
+  PAGE_TRANSITIONS: false,
+
+  GOOGLE_SIGNUP: JSON.parse(getEnv('APP_GOOGLE_SIGNUP')) || false,
+  RECAPTCHA_ENABLED: JSON.parse(getEnv('APP_RECAPTCHA_ENABLED')) || false,
+  RECAPTCHA_TOKEN: getEnv('APP_RECAPTCHA_TOKEN') || 'UNSET',
+
+  APP_VERSION: getEnv('APP_VERSION') || '1.0.0',
+  BUILD_TIME: getEnv('BUILD_TIME') || new Date().toISOString(),
+  IS_ELECTRON: JSON.parse(getEnv('IS_ELECTRON')) || false,
+  PLATFORM: getEnv('PLATFORM') || "unknown",
+  IS_WINDOWS: JSON.parse(getEnv('IS_WINDOWS')) || false,
+  IS_MAC: JSON.parse(getEnv('IS_MAC')) || false,
+  IS_LINUX: JSON.parse(getEnv('IS_LINUX')) || false,
+  PLATFORM_TYPE: getEnv('PLATFORM_TYPE') || "browser",
+};
+
+const panel = {
+  SIDEBAR_WIDTH: getEnv('SIDEBAR_WIDH') || 256,
+  SIDEBAR_COLLAPSED_WIDTH: getEnv('SIDEBAR_COLLAPSED_WIDH') || 63,
+  TAB_SIZE: 992,
+  MOBILE_SIZE: 575,
+  THEME_TYPE: 'THEME_TYPE',
+  THEME_TYPE_LIGHT: 'light',
+  THEME_TYPE_DARK: 'dark',
+  THEME_TYPE_DASH_DEFAULT: 'light',
+  THEME_TYPE_SEMI_DARK: 'THEME_TYPE_SEMI_DARK',
+  THEME_COLOR: 'THEME_COLOR',
+  UPDATE_RTL_STATUS: 'UPDATE_RTL_STATUS',
+  LAYOUT_TYPE: 'LAYOUT_TYPE',
+  LAYOUT_TYPE_FRAMED: 'framed-layout',
+  LAYOUT_TYPE_BOXED: 'boxed-layout',
+  LAYOUT_TYPE_FULL: 'full-layout',
+  NAV_STYLE: 'NAV_STYLE',
+  NAV_STYLE_FIXED: 'NAV_STYLE_FIXED',
+  NAV_STYLE_MINI_SIDEBAR: 'NAV_STYLE_MINI_SIDEBAR',
+  NAV_STYLE_DRAWER: 'NAV_STYLE_DRAWER',
+  NAV_STYLE_NO_HEADER_MINI_SIDEBAR: 'NAV_STYLE_NO_HEADER_MINI_SIDEBAR',
+  NAV_STYLE_NO_HEADER_EXPANDED_SIDEBAR: 'NAV_STYLE_NO_HEADER_EXPANDED_SIDEBAR',
+  NAV_STYLE_DEFAULT_HORIZONTAL: 'NAV_STYLE_DEFAULT_HORIZONTAL',
+  NAV_STYLE_DARK_HORIZONTAL: 'NAV_STYLE_DARK_HORIZONTAL',
+  NAV_STYLE_INSIDE_HEADER_HORIZONTAL: 'NAV_STYLE_INSIDE_HEADER_HORIZONTAL',
+  NAV_STYLE_BELOW_HEADER: 'NAV_STYLE_BELOW_HEADER',
+  NAV_STYLE_ABOVE_HEADER: 'NAV_STYLE_ABOVE_HEADER',
+  NAV_STYLE_COLLAPSABLE: 'NAV_STYLE_COLLAPSABLE',
+  LIGHT_PURPLE: 'light_purple',
+  LIGHT_PURPLE_SEC: '#00B378',
+  LIGHT_PURPLE_DARK_TEXT_COLOR: '#9799AC',
+  RED: 'red',
+  RED_SEC: '#00D9C9',
+  RED_DARK_TEXT_COLOR: '#878BAB',
+  BLUE: 'blue',
+  BLUE_SEC: '#FCB53B',
+  BLUE_DARK_TEXT_COLOR: '#AAA59A',
+  DARK_BLUE: 'dark_blue',
+  DARK_BLUE_SEC: '#17BDE5',
+  DARK_BLUE_DARK_TEXT_COLOR: '#9DDAE9',
+  ORANGE: 'orange',
+  ORANGE_SEC: '#F1D065',
+  ORANGE_DARK_TEXT_COLOR: '#ABA895',
+  LIGHT_BLUE: 'light_blue',
+  LIGHT_BLUE_SEC: '#59DCFF',
+  LIGHT_BLUE_DARK_TEXT_COLOR: '#92A2C8',
+  DEEP_ORANGE: 'deep_orange',
+  DEEP_ORANGE_SEC: '#70A288',
+  DEEP_ORANGE_DARK_TEXT_COLOR: '#97B8C7',
+  LIGHT_PURPLE_1: 'light_purple_1',
+  LIGHT_PURPLE_1_SEC: '#E14594',
+  LIGHT_PURPLE_1_DARK_TEXT_COLOR: '#8288B4',
+  LIGHT_PURPLE_2: 'light_purple_2',
+  LIGHT_PURPLE_2_SEC: '#64D7D6',
+  LIGHT_PURPLE_2_DARK_TEXT_COLOR: '#5782BB',
+  ACTIVE_COLOR_OPTION: '#ffffff'
+};
+
+const dict = {
+  SYSTEM_FORM_DEFAULT_SELECT_OPTION: 'Seleccione una opción',
+  NO_AVAILABLE_NOTIFICATIONS: 'No hay notificaciones nuevas',
+  ALL_NOTIFICATIONS: 'Todas las notificaciones',
+  NOTIFICATIONS_WIDGET_TITLE: 'Notificaciones',
+  type: 'Tipo',
+  date: 'Fecha',
+  name: 'Nombre',
+  filepath: 'Archivo',
+  json: 'Data',
+  clientName: 'Cliente',
+  withdrawsToday: 'Retiros Hoy',
+  withdrawsYesterday: 'Retiros Ayer',
+  withdrawsLastWeek: 'Retiros Última Semana',
+  volumeCp: 'Volúmen',
+  'validation.recaptcha': 'Recaptcha inválido',
+};
+
+const replacements = {
+  profile: 'perfil',
+};
+
+const helpers = {
+};
+
+/*class constants {
+  static system = system;
+  static panel = panel;
+  static dict = dict;
+  static helpers = helpers;
+  //static pushSystem(resources) { DASHStorageClass.resources = resources } 
+}*/
+
+const DASHAdminSystemConstants: IDASHAdminSystemConstants = {
+  system: system,
+  panel: panel,
+  dict: dict,
+  helpers: helpers,
+  replacements: replacements,
+  //static pushSystem(resources) { DASHStorageClass.resources = resources }
+};
+
+//import APP_SETTINGS from "@app/dash-settings";
+export interface IDASHAdminSystemConstants {
+  system: typeof system;
+  panel: typeof panel;
+  dict: typeof dict;
+  helpers: typeof helpers;
+  replacements: typeof replacements;
+}
+
+export default DASHAdminSystemConstants;

package/src/config/PARSERS.tsx

@@ -0,0 +1,9 @@
+import IUserNotification from '../interfaces/notifications/IUserNotification';
+
+const PARSERS = {
+	GET_NOTIFICATIONS: (json: any): IUserNotification[] => {
+		return json.notifications;
+	},
+};
+
+export default PARSERS;

package/src/contexts/DashQueryClientContext.tsx

@@ -0,0 +1,113 @@
+import React, { FC, useContext } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { PersistQueryClientProvider, Persister, PersistQueryClientOptions } from '@tanstack/react-query-persist-client';
+
+export type IQueryClientContext = {
+  queryClient?: QueryClient;
+  persister?: Persister;
+};
+
+export interface IDASHQueryClientProvider {
+  queryClient?: QueryClient; // Optional - if not provided, skip QueryClientProvider wrapper
+  children: React.ReactNode;
+  /** Optional persister for localStorage caching (uses @tanstack/react-query-persist-client) */
+  persister?: Persister;
+  /** Optional persist options for fine-grained control over cache persistence */
+  persistOptions?: Omit<PersistQueryClientOptions, 'queryClient' | 'persister'>;
+}
+
+export const DashQueryClientContext = React.createContext<IQueryClientContext | undefined>(undefined);
+
+/**
+ * DashQueryClientProvider
+ * 
+ * Provides a QueryClient context for React Query hooks.
+ * 
+ * IMPORTANT: This is designed to work with React Admin which has its own QueryClientProvider.
+ * - When queryClient is provided, wraps with QueryClientProvider for components OUTSIDE React Admin
+ * - When queryClient is NOT provided, just provides the context (React Admin's provider will be used)
+ * 
+ * In the typical flow:
+ * 1. DASHAppProviders wraps with this provider (with queryClient)
+ * 2. DASHAdmin/AdminContext wraps with React Admin's QueryClientProvider
+ * 3. Components inside React Admin use React Admin's QueryClient (innermost provider wins)
+ * 4. Components outside React Admin but inside DASHAppProviders use our QueryClient
+ */
+const DashQueryClientProvider: FC<IDASHQueryClientProvider> = ({ 
+  queryClient, 
+  children,
+  persister,
+  persistOptions 
+}) => {
+  const contextValue = { queryClient, persister };
+
+  // If queryClient is provided, wrap with appropriate provider
+  if (queryClient) {
+    // If persister is also provided, use PersistQueryClientProvider for localStorage caching
+    if (persister) {
+      const defaultPersistOptions: Omit<PersistQueryClientOptions, 'queryClient' | 'persister'> = {
+        maxAge: 1000 * 60 * 60 * 2, // 2 hours default
+        dehydrateOptions: {
+          // Only persist successful queries that have data
+          shouldDehydrateQuery: (query) => {
+            return query.state.status === 'success' && query.state.data !== undefined;
+          },
+        },
+        ...persistOptions,
+      };
+
+      return (
+        <PersistQueryClientProvider 
+          client={queryClient} 
+          persistOptions={{ 
+            persister,
+            ...defaultPersistOptions 
+          }}
+        >
+          <DashQueryClientContext.Provider value={contextValue}>
+            {children}
+          </DashQueryClientContext.Provider>
+        </PersistQueryClientProvider>
+      );
+    }
+
+    // No persister - use standard QueryClientProvider
+    return (
+      <QueryClientProvider client={queryClient}>
+        <DashQueryClientContext.Provider value={contextValue}>
+          {children}
+        </DashQueryClientContext.Provider>
+      </QueryClientProvider>
+    );
+  }
+
+  // If no queryClient, just provide the context (React Admin's provider should handle it)
+  return (
+    <DashQueryClientContext.Provider value={contextValue}>
+      {children}
+    </DashQueryClientContext.Provider>
+  );
+};
+
+// Custom hook to use the QueryClient context
+export const useDashQueryClient = () => {
+  const context = useContext(DashQueryClientContext);
+  if (!context) {
+    throw new Error('useDashQueryClient must be used within a DASHQueryClientProvider');
+  }
+  return context.queryClient;
+};
+
+// Custom hook to check if persistence is enabled
+export const useDashQueryPersister = () => {
+  const context = useContext(DashQueryClientContext);
+  return context?.persister;
+};
+
+// Custom hook to check if cache is persisted
+export const useIsCachePersisted = () => {
+  const context = useContext(DashQueryClientContext);
+  return !!context?.persister;
+};
+
+export default DashQueryClientProvider;

package/src/contexts/DashResourceContext.tsx

@@ -0,0 +1,34 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import { IDashAutoAdminResourceConfig } from 'dash-auto-admin';
+
+interface DashResourceContextType {
+    resourceConfig: IDashAutoAdminResourceConfig;
+}
+
+const DashResourceContext = createContext<DashResourceContextType | undefined>(undefined);
+
+export const DashResourceProvider = React.memo<{
+    resourceConfig: IDashAutoAdminResourceConfig;
+    children: React.ReactNode;
+}>(({ resourceConfig, children }) => {
+    // Memoize the context value to prevent unnecessary re-renders
+    const contextValue = useMemo(() => ({
+        resourceConfig
+    }), [resourceConfig]);
+
+    return (
+        <DashResourceContext.Provider value={contextValue}>
+            {children}
+        </DashResourceContext.Provider>
+    );
+});
+
+DashResourceProvider.displayName = 'DashResourceProvider';
+
+export const useDashResource = () => {
+    const context = useContext(DashResourceContext);
+    if (context === undefined) {
+        throw new Error('useDashResource must be used within a DashResourceProvider');
+    }
+    return context;
+};

package/src/contexts/I18nBridgeContext.tsx

@@ -0,0 +1,156 @@
+/**
+ * I18nBridgeContext
+ * 
+ * This context bridges the i18nProvider from inside React Admin's AdminContext
+ * to components that render outside of it (like the sidebar menu).
+ * 
+ * Problem: Components like AppMaterialMenu render in DomainAppLayout which is
+ * OUTSIDE the AdminContext hierarchy. This means they can't access the custom
+ * i18nProvider with getLocales() - they only get the default one.
+ * 
+ * Solution: DASHAdmin sets this context with the real i18nProvider, and
+ * components outside AdminContext can use this context to access it.
+ */
+import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';
+import type { I18nProvider } from 'react-admin';
+
+// Custom event name for locale changes from URL detection
+export const LOCALE_CHANGE_EVENT = 'dash:locale-change';
+
+interface I18nBridgeContextValue {
+    i18nProvider: I18nProvider | null;
+    locale: string;
+    setI18nProvider: (provider: I18nProvider) => void;
+    setLocale: (locale: string) => void;
+}
+
+const I18nBridgeContext = createContext<I18nBridgeContextValue>({
+    i18nProvider: null,
+    locale: 'es', // Default to es
+    setI18nProvider: () => {},
+    setLocale: () => {},
+});
+
+export const I18nBridgeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    // Initialize locale from localStorage if available
+    const [i18nProvider, setI18nProviderState] = useState<I18nProvider | null>(null);
+    const [locale, setLocale] = useState<string>(() => {
+        if (typeof window !== 'undefined') {
+            return localStorage.getItem('dash-user-locale') || 'es';
+        }
+        return 'es';
+    });
+
+    const setI18nProvider = useCallback(async (provider: I18nProvider) => {
+        console.log('🌐 I18nBridgeContext: Setting bridged i18nProvider', {
+            hasGetLocales: !!provider?.getLocales,
+            locales: provider?.getLocales?.(),
+            providerLocale: provider?.getLocale?.(),
+            desiredLocale: locale,
+        });
+        setI18nProviderState(provider);
+        
+        // Check if the desired locale (from localStorage/state) differs from provider's locale
+        const providerLocale = provider?.getLocale?.();
+        if (providerLocale && providerLocale !== locale && provider?.changeLocale) {
+            console.log(`🌐 I18nBridgeContext: Provider locale (${providerLocale}) differs from desired (${locale}), switching...`);
+            try {
+                await provider.changeLocale(locale);
+                console.log(`🌐 I18nBridgeContext: Successfully switched provider to ${locale}`);
+            } catch (e) {
+                console.warn('🌐 I18nBridgeContext: Failed to switch provider locale:', e);
+            }
+        } else if (provider?.getLocale) {
+            // Sync state from provider if they match or no desired locale
+            setLocale(provider.getLocale());
+        }
+    }, [locale]);
+
+    // Listen for locale change events from URL detection (useUrlLocaleDetection hook)
+    useEffect(() => {
+        const handleLocaleChange = async (event: CustomEvent<{ locale: string }>) => {
+            const newLocale = event.detail?.locale;
+            if (newLocale && newLocale !== locale) {
+                console.log('🌐 I18nBridgeContext: Received locale change event:', newLocale);
+                
+                // Update the provider's locale if available
+                if (i18nProvider?.changeLocale) {
+                    try {
+                        await i18nProvider.changeLocale(newLocale);
+                    } catch (e) {
+                        console.warn('Failed to change provider locale:', e);
+                    }
+                }
+                
+                // Update context locale state to trigger re-renders
+                setLocale(newLocale);
+            }
+        };
+
+        window.addEventListener(LOCALE_CHANGE_EVENT, handleLocaleChange as EventListener);
+        
+        return () => {
+            window.removeEventListener(LOCALE_CHANGE_EVENT, handleLocaleChange as EventListener);
+        };
+    }, [i18nProvider, locale]);
+
+    return (
+        <I18nBridgeContext.Provider value={{ i18nProvider, locale, setI18nProvider, setLocale }}>
+            {children}
+        </I18nBridgeContext.Provider>
+    );
+};
+
+/**
+ * Hook to access the bridged i18nProvider
+ * This should be used by components outside AdminContext that need i18n access
+ */
+export const useI18nBridge = () => {
+    const context = useContext(I18nBridgeContext);
+    return context;
+};
+
+/**
+ * Hook to get locales from the bridged provider
+ * Falls back to empty array if no bridge is available
+ */
+export const useBridgedLocales = () => {
+    const { i18nProvider } = useI18nBridge();
+    
+    const locales = React.useMemo(() => {
+        if (!i18nProvider?.getLocales) {
+            return [];
+        }
+        return i18nProvider.getLocales();
+    }, [i18nProvider]);
+
+    return locales;
+};
+
+/**
+ * Hook to change locale using the bridged provider
+ * Also updates the context's locale state to trigger re-renders
+ */
+export const useBridgedChangeLocale = () => {
+    const { i18nProvider, setLocale } = useI18nBridge();
+    
+    const changeLocale = useCallback(async (locale: string) => {
+        if (i18nProvider?.changeLocale) {
+            await i18nProvider.changeLocale(locale);
+        }
+        // Also update the context's locale state to trigger re-renders
+        setLocale(locale);
+    }, [i18nProvider, setLocale]);
+
+    return changeLocale;
+};
+
+/**
+ * Hook to get current locale from the bridged provider
+ */
+export const useBridgedLocale = () => {
+    const { locale } = useI18nBridge();
+    return locale;
+};
+
+export default I18nBridgeContext;

package/src/contexts/I18nBridgeSetter.tsx

@@ -0,0 +1,39 @@
+/**
+ * I18nBridgeSetter
+ * 
+ * This component runs INSIDE AdminContext and sets the i18nProvider
+ * to the I18nBridgeContext so components outside AdminContext can access it.
+ * 
+ * It should be rendered as the first child inside AdminContext.
+ */
+import React, { useEffect } from 'react';
+import { useI18nProvider, useLocaleState } from 'react-admin';
+import { useI18nBridge } from './I18nBridgeContext';
+
+const I18nBridgeSetter: React.FC = () => {
+    const i18nProvider = useI18nProvider();
+    const [locale] = useLocaleState();
+    const { setI18nProvider, setLocale } = useI18nBridge();
+
+    useEffect(() => {
+        if (i18nProvider) {
+            console.log('🌐 I18nBridgeSetter: Setting bridge from AdminContext', {
+                hasGetLocales: !!i18nProvider.getLocales,
+                locales: i18nProvider.getLocales?.(),
+                currentLocale: locale,
+            });
+            setI18nProvider(i18nProvider);
+        }
+    }, [i18nProvider, setI18nProvider, locale]);
+
+    useEffect(() => {
+        if (locale) {
+            setLocale(locale);
+        }
+    }, [locale, setLocale]);
+
+    // This component doesn't render anything
+    return null;
+};
+
+export default I18nBridgeSetter;

package/src/contexts/I18nReduxSync.tsx

@@ -0,0 +1,27 @@
+import React, { useEffect } from 'react';
+import { useSetLocale, useLocaleState } from 'react-admin';
+
+/**
+ * I18nReduxSync
+ * 
+ * Synchronizes the Redux locale with the react-admin locale.
+ * This component MUST be rendered INSIDE AdminContext.
+ */
+interface I18nReduxSyncProps {
+    locale?: string;
+}
+
+const I18nReduxSync: React.FC<I18nReduxSyncProps> = ({ locale }) => {
+    const setLocale = useSetLocale();
+    const [currentLocale] = useLocaleState();
+
+    useEffect(() => {
+        if (locale && locale !== currentLocale) {
+            setLocale(locale);
+        }
+    }, [locale, currentLocale, setLocale]);
+
+    return null;
+};
+
+export default I18nReduxSync;