Skip to content

Frontend i18n

react-admin Polyglot provider for the admin dashboard and browser Intl APIs for the borrower portal.

Admin Dashboard

i18n Provider

The admin dashboard uses react-admin's Polyglot-based i18n provider:

// frontend/admin/src/providers/i18nProvider.ts
import polyglotI18nProvider from "ra-i18n-polyglot";
import englishMessages from "ra-language-english";
import spanishMessages from "ra-language-spanish";

const messages: Record<string, TranslationMessages> = {
  en: englishMessages,
  es: spanishMessages,
};

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

Integration

The provider is passed to the <Admin> component:

<Admin i18nProvider={i18nProvider} ...>

Locale Switching

Users switch languages via <LocalesMenuButton> in the AppBar. react-admin handles:

  • UI label translation (menu items, buttons, field labels)
  • Date/number formatting via browser Intl APIs
  • Preserving locale preference in local storage

What Is Translated

Category Translated? Mechanism
react-admin UI labels Yes Polyglot message keys
Menu items, buttons Yes Polyglot
Field labels on forms Yes Polyglot
API data (names, statuses) No Raw from API, humanized client-side
Error messages Partially Backend returns translated errors

What Is NOT Translated

  • Custom resource data (borrower names, loan numbers)
  • Status display values (humanized from snake_case via humanize() utility)
  • Notification messages (use raw API response messages)

Borrower Portal

The portal does not use a full i18n provider. Instead:

Language Preference

Each borrower has a language_preference field stored in their profile:

interface BorrowerProfile {
  language_preference: string;  // "en" or "es"
  // ...
}

The preference is editable on the Profile page:

const [language, setLanguage] = useState(profile.language_preference);

Formatting

The portal uses browser Intl APIs for locale-aware formatting:

  • Intl.NumberFormat for currency and number formatting
  • Intl.DateTimeFormat for date formatting
  • The formatMoney() utility in utils/format.ts wraps these APIs

Communication Impact

The borrower's language_preference affects:

  • Which communication template variant is used (email, SMS)
  • Which PDF template variant is generated (statements, disclosures)
  • The language of the Content-Language response header

Adding Frontend Translations

Admin Dashboard

  1. Install the react-admin language package (e.g., ra-language-french)
  2. Import and add to the messages map in i18nProvider.ts:
import frenchMessages from "ra-language-french";

const messages = {
  en: englishMessages,
  es: spanishMessages,
  fr: frenchMessages,
};
  1. Add the locale option:
const i18nProvider = polyglotI18nProvider(
  (locale) => messages[locale] ?? messages.en,
  "en",
  [
    { locale: "en", name: "English" },
    { locale: "es", name: "Español" },
    { locale: "fr", name: "Français" },
  ],
);

Borrower Portal

The portal does not currently use a translation framework. To add full translation support, consider integrating react-i18next or a similar library.

See Also