# 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