dwindown/tabungin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
89f881e7cfb25d1b18d2726758346d33dce3a5a4
tabungin/MULTI_LANGUAGE_IMPLEMENTATION.md
dwindown 371b5e0a66 feat: Implement multi-language system (ID/EN) for member dashboard 
- Create translation files (locales/id.ts, locales/en.ts)
- Add LanguageContext with useLanguage hook
- Add LanguageToggle component in sidebar
- Default language: Indonesian (ID)
- Translate WalletDialog and TransactionDialog
- Language preference persisted in localStorage
- Type-safe translations with autocomplete

Next: Translate remaining pages (Overview, Wallets, Transactions, Profile)
2025-10-12 08:51:48 +07:00

2.1 KiB
Raw Blame History

Multi-Language Implementation

Overview

Implemented a simple, lightweight multi-language system for the member dashboard with Indonesian (default) and English support.

Features

  • ✅ Default Language: Indonesian (ID)
  • ✅ Optional Language: English (EN)
  • ✅ Persistent: Language preference saved in localStorage
  • ✅ Easy Toggle: Language switcher in sidebar footer
  • ✅ Type-Safe: Full TypeScript support with autocomplete

Structure

Translation Files

  • /apps/web/src/locales/id.ts - Indonesian translations
  • /apps/web/src/locales/en.ts - English translations

Context & Hook

  • /apps/web/src/contexts/LanguageContext.tsx - Language context provider
  • Hook: useLanguage() - Access translations and language state

Components

  • /apps/web/src/components/LanguageToggle.tsx - Language switcher button

Usage

In Components

import { useLanguage } from '@/contexts/LanguageContext'

function MyComponent() {
  const { t, language, setLanguage } = useLanguage()
  
  return (
    <div>
      <h1>{t.overview.title}</h1>
      <p>{t.overview.totalBalance}</p>
    </div>
  )
}

Translation Structure

{
  common: { search, filter, add, edit, delete, ... },
  nav: { overview, transactions, wallets, profile, logout },
  overview: { ... },
  transactions: { ... },
  wallets: { ... },
  profile: { ... },
  // etc
}

Implementation Status

✅ Completed

  1. Translation files (ID & EN)
  2. Language context & provider
  3. Language toggle component
  4. Sidebar navigation translated
  5. Build & lint passing

🔄 Next Steps (To be implemented)

  1. Translate all member dashboard pages:
    • Overview page
    • Wallets page
    • Transactions page
    • Profile page
  2. Translate dialogs:
    • WalletDialog
    • TransactionDialog
  3. Update toast messages to use translations
  4. Test language switching

Admin Dashboard

  • Remains English-only (as requested)
  • No translation needed for admin pages

Benefits

  • ✅ No external dependencies
  • ✅ Type-safe with autocomplete
  • ✅ Easy to maintain
  • ✅ Fast performance
  • ✅ Can migrate to react-i18next later if needed