Internationalization¶

The admin dashboard supports English and Spanish via react-admin's i18n system, backed by Airbnb's Polyglot library.

Setup¶

The i18n provider is configured with two locales:

import polyglotI18nProvider from "ra-i18n-polyglot";
import englishMessages from "ra-language-english";
import spanishMessages from "ra-language-spanish";

const messages = {
  en: englishMessages,
  es: spanishMessages,
};

const i18nProvider = polyglotI18nProvider(
  (locale: string) => messages[locale] ?? messages.en,
  "en", // default locale
  [
    { locale: "en", name: "English" },
    { locale: "es", name: "Espanol" },
  ],
);

Locale Switching¶

The AppBar includes a <LocalesMenuButton> that allows users to switch between English and Spanish at runtime. The selected locale persists in the react-admin store.

What Is Translated¶

Layer	Mechanism
react-admin UI chrome	Built-in `ra-language-*` packages (buttons, labels, messages)
Field labels	react-admin's label inference from `source` prop
Currency formatting	`MoneyField` maps locale to `Intl.NumberFormat` locale (`en` -> `en-US`)
Percentage formatting	`PercentField` uses locale-aware `Intl.NumberFormat`
Status labels	`humanize()` converts enum values (not translated)

Note

Enum values (loan statuses, payment methods, etc.) are humanized from snake_case to Title Case but are not translated. They display in English regardless of locale.

Adding a New Locale¶

Install the react-admin language package:
```
npm install ra-language-french
```

Add to the messages map in i18nProvider.ts:

import frenchMessages from "ra-language-french";

const messages = {
  en: englishMessages,
  es: spanishMessages,
  fr: frenchMessages,
};

Add to the locale list:

[
  { locale: "en", name: "English" },
  { locale: "es", name: "Espanol" },
  { locale: "fr", name: "Francais" },
]

Add the locale mapping in MoneyField.tsx if currency formatting needs the new locale.