371b5e0a66
- 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)
88 lines
2.1 KiB
Markdown
88 lines
2.1 KiB
Markdown
# 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
|
|
```typescript
|
|
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
|
|
```typescript
|
|
{
|
|
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
|