Skip to content

[SuperAppAdminPortal] Add multi-language support (English, Sinhala, Tamil) #90

@MohamadNazik

Description

@MohamadNazik

Description:

The admin portal (superapp-admin-portal) currently has all UI strings hardcoded in English. There is no internationalization (i18n) framework or language switching mechanism available to administrators. Sri Lanka's three official/national languages — English, Sinhala (සිංහල), and Tamil (தமிழ்) — should all be supported, allowing admin users to switch the portal language.

Current Behaviour

  • All user-facing strings (page titles, table headers, form labels, button text, dialogs, error/success messages, etc.) are hardcoded in English directly inside React components.
  • No i18n library is installed.
  • No language selector exists in the portal UI.

Expected Behaviour

  • Admins should be able to select their preferred language from the portal header or a settings area.
  • The entire portal UI should re-render in the selected language.
  • The selected language preference should be persisted in localStorage across sessions.
  • The portal should default to the browser's locale if it matches a supported language; otherwise, default to English.

Implementation Guidance

1. Install i18n Dependencies

Install an i18n library compatible with React:

  • i18next + react-i18next
  • i18next-browser-languagedetector (for browser locale detection)

2. Create Translation Files

Add a superapp-admin-portal/src/locales/ directory with JSON translation files:

superapp-admin-portal/src/locales/
├── en.json    # English (default)
├── si.json    # Sinhala (සිංහල)
└── ta.json    # Tamil (தமிழ்)

3. Initialize i18n

Create superapp-admin-portal/src/lib/i18n.ts to configure i18next with:

  • Fallback language: en
  • Browser language detection via i18next-browser-languagedetector
  • Persistence to localStorage

4. Add a Language Selector to the Layout

Add a language switcher dropdown (MUI Select or Menu) to the portal's header/app bar (src/components/layout/) with options:

  • 🇬🇧 English
  • 🇱🇰 සිංහල (Sinhala)
  • 🇱🇰 தமிழ் (Tamil)

5. Extract All Hardcoded Strings

Replace all hardcoded English strings with translation keys (t('key')) across:

Pages:

  • src/pages/MicroApps.tsx — Micro Apps management
  • src/pages/Users.tsx — User management
  • src/pages/Login.tsx — Login page
  • src/pages/AccessDenied.tsx — Access denied page
  • src/pages/ComingSoon.tsx — Coming soon page
  • src/pages/NotFound.tsx — 404 page

Components:

  • src/components/layout/ — Navigation sidebar, app bar, header
  • src/components/common/ — Shared UI components
  • src/components/ui/ — UI primitives

Other:

  • src/App.tsx — Root app component (routing labels, etc.)
  • Any dialog/modal text, toast messages, validation messages

6. MUI Locale Integration

Configure MUI's ThemeProvider with the appropriate locale for built-in component text (e.g., table pagination "Rows per page", date picker labels).


Related Issues:

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions