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:
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
Expected Behaviour
localStorageacross sessions.Implementation Guidance
1. Install i18n Dependencies
Install an i18n library compatible with React:
i18next+react-i18nexti18next-browser-languagedetector(for browser locale detection)2. Create Translation Files
Add a
superapp-admin-portal/src/locales/directory with JSON translation files:3. Initialize i18n
Create
superapp-admin-portal/src/lib/i18n.tsto configurei18nextwith:eni18next-browser-languagedetectorlocalStorage4. Add a Language Selector to the Layout
Add a language switcher dropdown (MUI
SelectorMenu) to the portal's header/app bar (src/components/layout/) with options:5. Extract All Hardcoded Strings
Replace all hardcoded English strings with translation keys (
t('key')) across:Pages:
src/pages/MicroApps.tsx— Micro Apps managementsrc/pages/Users.tsx— User managementsrc/pages/Login.tsx— Login pagesrc/pages/AccessDenied.tsx— Access denied pagesrc/pages/ComingSoon.tsx— Coming soon pagesrc/pages/NotFound.tsx— 404 pageComponents:
src/components/layout/— Navigation sidebar, app bar, headersrc/components/common/— Shared UI componentssrc/components/ui/— UI primitivesOther:
src/App.tsx— Root app component (routing labels, etc.)6. MUI Locale Integration
Configure MUI's
ThemeProviderwith the appropriate locale for built-in component text (e.g., table pagination "Rows per page", date picker labels).Related Issues: