Internationalization (i18n)
Relevant source files
The following files were used as context for generating this wiki page:
- packages/i18n/src/en.ts
- packages/i18n/src/hi.ts
- packages/i18n/src/index.ts
- packages/i18n/package.json
- apps/web/app/invite/invite-flow.tsx
- apps/web/app/clinic/availability/schedule-card.tsx
- apps/web/app/clinic/staff-card.tsx
- apps/web/app/clinic/consultations/notes-form.tsx
- apps/web/app/clinic/patients/[id]/page.tsx
Internationalization (i18n) provides the framework for localizing UI strings across the Digital Healthcare Platform. The system manages translations for multiple languages, specifically targeting English and Hindi at launch. It centralizes all user-facing strings in a shared package to ensure consistency between the web portal, staff dashboard, and mobile applications.
Sources: packages/i18n/package.json:4, README.md:38
Architecture and Core Package
The i18n logic resides in the @dhc/i18n workspace package. This package exports the core translation utilities and types used by frontend consumers.
Key Components
Locale: A type defining supported language codes, currently'en'or'hi'.MessageKey: A type representing valid translation keys derived from the source string files.tfunction: The primary translation utility that accepts a locale and a key, returning the localized string.
Sources: packages/i18n/package.json:6-9, apps/web/app/invite/invite-flow.tsx:7
Implementation Diagram
The following diagram illustrates how frontend components interact with the i18n package to retrieve localized content.
The diagram shows the flow where a UI component uses the current locale and a message key to request a translation from the shared utility.
Locale Management and UI Switching
Frontend applications manage the active language through React state or session providers. Components provide users with controls to toggle between supported languages.
Language Toggling
Components like InviteFlow implement local state to track the user's preferred language. A toggle button allows switching between English and Hindi, updating the component's rendering immediately.
Sources: apps/web/app/invite/invite-flow.tsx:40, apps/web/app/invite/invite-flow.tsx:109-117
Session-Based Localization
Within the clinic dashboard, the useSession hook provides a centralized t function and the current locale. This ensures that all sub-cards (e.g., staff management, availability) remain synchronized with the user's settings.
Sources: apps/web/app/clinic/staff-card.tsx:21, apps/web/app/clinic/availability/schedule-card.tsx:31
Translation Features
The i18n system supports advanced features beyond simple string mapping, including parameter injection and date localization.
Parameter Injection
The t function accepts an optional params object. This allows dynamic values, such as clinic names or dates, to be inserted into translated strings.
| Feature | Usage Example | Source Reference |
|---|---|---|
| Simple Translation | t('common.continue') | apps/web/app/invite/invite-flow.tsx:162 |
| Dynamic Parameters | t('invite.summary', { clinic: name, role: translatedRole }) | apps/web/app/invite/invite-flow.tsx:212-215 |
| Nested Translation | t('role.' + details.role) | apps/web/app/invite/invite-flow.tsx:216 |
Date and Time Localization
The platform uses the formatIstDateTime utility, which accepts a locale parameter to format timestamps correctly for the target language.
Sources: apps/web/app/clinic/staff-card.tsx:117-119, apps/web/app/invite/invite-flow.tsx:220
Usage in Domain-Specific Modules
Different modules utilize specific key namespaces to organize their UI strings.
Clinical and Scheduling Strings
| Module | Key Namespace | Description |
|---|---|---|
| Scheduling | availability.*, weekday.* | Handles doctor schedules, day names, and slot summaries. |
| Consultation | consult.* | Manages labels for symptoms, diagnoses, and medical notes. |
| Staff/Auth | role.*, invite.*, login.* | Handles access roles, invitation flows, and authentication prompts. |
Sources: apps/web/app/clinic/availability/schedule-card.tsx:128-140, apps/web/app/clinic/consultations/notes-form.tsx:35-40, apps/web/app/clinic/staff-card.tsx:164-166
Sequence: Translation Lookup
The following sequence diagram shows the interaction between a component and the i18n package during a render cycle.
This diagram illustrates the retrieval of the Hindi translation for the "invite.title" key.
Technical Summary
The i18n implementation provides a type-safe, centralized solution for multi-language support. By separating strings from implementation logic in @dhc/i18n, the project maintains a clear boundary between UI presentation and business logic. Frontend components leverage the t function to handle both static and dynamic content, while localized formatting utilities ensure consistent presentation of technical data like dates and currency across different locales.
Sources: packages/i18n/package.json:6-12, README.md:59