---
name: Điều chỉnh giao diện đa ngôn ngữ và hoàn thiện features cho web-admin
overview: Thiết lập hệ thống i18n hoàn chỉnh với next-intl cho web-admin, migrate tất cả hardcoded text sang translation files, tạo/copy UI components từ web-client để đảm bảo consistency, và hoàn thiện các features còn thiếu từ plan cũ (Analytics page, Messages page, API/Advanced settings tabs).
todos:
  - id: install-deps
    content: Cài đặt next-intl package - Update apps/web-admin/package.json và chạy pnpm install
    status: completed
  - id: create-i18n-config
    content: Tạo apps/web-admin/src/i18n/config.ts - Định nghĩa locales ['en', 'vi'], default 'en'
    status: completed
  - id: create-i18n-request
    content: Tạo apps/web-admin/src/i18n/request.ts - Request handler với locale detection logic
    status: completed
  - id: create-i18n-context
    content: Tạo apps/web-admin/src/contexts/i18n-context.tsx - Context với setLocale, getLocale, localStorage sync, browser detection
    status: completed
  - id: create-i18n-provider
    content: Tạo apps/web-admin/src/providers/i18n-provider.tsx - Provider component với static message imports (giống web-client fix)
    status: completed
  - id: create-translation-hook
    content: Tạo apps/web-admin/src/hooks/use-translation.ts - Hook useTranslation() với type safety
    status: completed
  - id: update-root-layout
    content: Update apps/web-admin/src/app/layout.tsx - Wrap với I18nProvider, dynamic lang attribute
    status: completed
  - id: copy-ui-button
    content: Copy apps/web-client/src/components/ui/button.tsx sang apps/web-admin/src/components/ui/button.tsx
    status: completed
  - id: copy-ui-input
    content: Copy apps/web-client/src/components/ui/input.tsx sang apps/web-admin/src/components/ui/input.tsx
    status: completed
  - id: copy-ui-card
    content: Copy apps/web-client/src/components/ui/card.tsx sang apps/web-admin/src/components/ui/card.tsx
    status: completed
  - id: copy-ui-dialog
    content: Copy apps/web-client/src/components/ui/dialog.tsx sang apps/web-admin/src/components/ui/dialog.tsx
    status: completed
  - id: copy-ui-avatar
    content: Copy apps/web-client/src/components/ui/avatar.tsx sang apps/web-admin/src/components/ui/avatar.tsx
    status: completed
  - id: copy-ui-switch
    content: Copy apps/web-client/src/components/ui/switch.tsx sang apps/web-admin/src/components/ui/switch.tsx
    status: completed
  - id: copy-ui-select
    content: Copy apps/web-client/src/components/ui/select.tsx sang apps/web-admin/src/components/ui/select.tsx (nếu cần)
    status: completed
  - id: copy-ui-dropdown
    content: Copy apps/web-client/src/components/ui/dropdown-menu.tsx sang apps/web-admin/src/components/ui/dropdown-menu.tsx (nếu cần)
    status: completed
  - id: extract-common-translations
    content: Tạo translation keys cho common namespace - buttons, labels, placeholders (en.json + vi.json)
    status: completed
  - id: extract-auth-translations
    content: Tạo translation keys cho auth namespace - login (en.json + vi.json)
    status: completed
  - id: extract-admin-dashboard-translations
    content: Tạo translation keys cho admin.dashboard namespace - metrics, charts, activity table (en.json + vi.json)
    status: completed
  - id: extract-admin-users-translations
    content: Tạo translation keys cho admin.users namespace - search, filters, table headers, actions, user details modal (en.json + vi.json)
    status: completed
  - id: extract-admin-analytics-translations
    content: Tạo translation keys cho admin.analytics namespace - tabs, charts, metrics, reports (en.json + vi.json)
    status: completed
  - id: extract-admin-messages-translations
    content: Tạo translation keys cho admin.messages namespace - message list, filters, moderation tools (en.json + vi.json)
    status: completed
  - id: extract-admin-settings-translations
    content: Tạo translation keys cho admin.settings namespace - tabs, form labels, descriptions, General/Email/Security/API/Advanced (en.json + vi.json)
    status: completed
  - id: extract-validation-translations
    content: Tạo translation keys cho validation namespace - form errors, Zod messages (en.json + vi.json)
    status: completed
  - id: extract-error-translations
    content: Tạo translation keys cho errors namespace - API errors, general errors (en.json + vi.json)
    status: completed
  - id: migrate-login-page-ui
    content: Migrate apps/web-admin/src/app/login/page.tsx - Replace hardcoded UI text với useTranslation()
    status: completed
  - id: migrate-login-validation
    content: Update Zod schema trong login page - Sử dụng translated validation messages
    status: completed
  - id: migrate-dashboard-layout
    content: Migrate apps/web-admin/src/app/(dashboard)/layout.tsx - Replace navigation labels với useTranslation()
    status: completed
  - id: migrate-dashboard-page-metrics
    content: Migrate apps/web-admin/src/app/(dashboard)/dashboard/page.tsx - Replace metrics labels và values với useTranslation()
    status: completed
  - id: migrate-dashboard-page-charts
    content: Migrate apps/web-admin/src/app/(dashboard)/dashboard/page.tsx - Replace chart labels và descriptions với useTranslation()
    status: completed
  - id: migrate-dashboard-page-activity
    content: Migrate apps/web-admin/src/app/(dashboard)/dashboard/page.tsx - Replace activity table descriptions với useTranslation()
    status: completed
  - id: migrate-users-page-header
    content: Migrate apps/web-admin/src/app/(dashboard)/users/page.tsx - Replace page header và description với useTranslation()
    status: completed
  - id: migrate-users-page-search-filters
    content: Migrate apps/web-admin/src/app/(dashboard)/users/page.tsx - Replace search bar và filter labels với useTranslation()
    status: completed
  - id: migrate-users-page-table
    content: Migrate apps/web-admin/src/app/(dashboard)/users/page.tsx - Replace table headers và actions với useTranslation()
    status: completed
  - id: migrate-settings-page
    content: Migrate apps/web-admin/src/app/(dashboard)/settings/page.tsx - Replace tabs, headers, descriptions với useTranslation()
    status: completed
  - id: migrate-analytics-card
    content: Migrate apps/web-admin/src/components/admin/analytics-card.tsx - Replace card labels, trend indicators với useTranslation()
    status: completed
  - id: migrate-data-table-headers
    content: Migrate apps/web-admin/src/components/admin/data-table.tsx - Replace table headers và column labels với useTranslation()
    status: completed
  - id: migrate-data-table-pagination
    content: Migrate apps/web-admin/src/components/admin/data-table.tsx - Replace pagination labels (Previous, Next, Page, etc.) với useTranslation()
    status: completed
  - id: migrate-data-table-actions
    content: Migrate apps/web-admin/src/components/admin/data-table.tsx - Replace action buttons (Export, Select All, etc.) với useTranslation()
    status: completed
  - id: migrate-activity-table
    content: Migrate apps/web-admin/src/components/admin/recent-activity-table.tsx - Replace activity descriptions, status labels với useTranslation()
    status: completed
  - id: migrate-user-details-modal-header
    content: Migrate apps/web-admin/src/components/admin/user-details-modal.tsx - Replace modal title, description với useTranslation()
    status: completed
  - id: migrate-user-details-modal-tabs
    content: Migrate apps/web-admin/src/components/admin/user-details-modal.tsx - Replace tab labels (Profile, Activity, Messages) với useTranslation()
    status: completed
  - id: migrate-user-details-modal-content
    content: Migrate apps/web-admin/src/components/admin/user-details-modal.tsx - Replace profile fields, activity descriptions, message history labels với useTranslation()
    status: completed
  - id: migrate-user-details-modal-actions
    content: Migrate apps/web-admin/src/components/admin/user-details-modal.tsx - Replace action buttons (Edit, Delete, Ban, etc.) với useTranslation()
    status: completed
  - id: migrate-user-growth-chart
    content: Migrate apps/web-admin/src/components/admin/charts/user-growth-chart.tsx - Replace chart labels, tooltips với useTranslation()
    status: completed
  - id: migrate-revenue-chart
    content: Migrate apps/web-admin/src/components/admin/charts/revenue-chart.tsx - Replace chart labels, tooltips với useTranslation()
    status: completed
  - id: migrate-general-settings-ui
    content: Migrate apps/web-admin/src/components/admin/settings/general-settings.tsx - Replace form labels, descriptions, buttons với useTranslation()
    status: completed
  - id: migrate-general-settings-validation
    content: Update Zod schema trong general-settings.tsx - Sử dụng translated validation messages
    status: completed
  - id: migrate-email-settings-ui
    content: Migrate apps/web-admin/src/components/admin/settings/email-settings.tsx - Replace form labels, descriptions, buttons với useTranslation()
    status: completed
  - id: migrate-email-settings-validation
    content: Update Zod schema trong email-settings.tsx - Sử dụng translated validation messages
    status: completed
  - id: migrate-security-settings-ui
    content: Migrate apps/web-admin/src/components/admin/settings/security-settings.tsx - Replace form labels, descriptions, policy texts với useTranslation()
    status: completed
  - id: migrate-security-settings-validation
    content: Update Zod schema trong security-settings.tsx - Sử dụng translated validation messages
    status: completed
  - id: create-analytics-page-layout
    content: Tạo apps/web-admin/src/app/(dashboard)/analytics/page.tsx - Page layout với tabs structure (Overview, Users, Messages, Performance)
    status: completed
  - id: create-analytics-overview-metrics
    content: Tạo Overview tab - Key metrics summary cards với useTranslation()
    status: completed
  - id: create-analytics-overview-charts
    content: Tạo Overview tab - Trends visualization và comparison charts với useTranslation()
    status: completed
  - id: create-analytics-users-funnel
    content: Tạo Users tab - User acquisition funnel chart với useTranslation()
    status: completed
  - id: create-analytics-users-retention
    content: Tạo Users tab - Retention chart và cohort analysis với useTranslation()
    status: completed
  - id: create-analytics-messages-stats
    content: Tạo Messages tab - Total messages, average per user metrics với useTranslation()
    status: completed
  - id: create-analytics-messages-activity
    content: Tạo Messages tab - Peak activity times chart với useTranslation()
    status: completed
  - id: create-analytics-performance-metrics
    content: Tạo Performance tab - API response times, error rates metrics với useTranslation()
    status: completed
  - id: create-analytics-performance-uptime
    content: Tạo Performance tab - Uptime statistics và charts với useTranslation()
    status: completed
  - id: create-messages-page-layout
    content: Tạo apps/web-admin/src/app/(dashboard)/messages/page.tsx - Page layout với header, search, filters
    status: completed
  - id: create-messages-page-list
    content: Tạo Messages page - Message list component với pagination và useTranslation()
    status: completed
  - id: create-messages-page-details
    content: Tạo Messages page - Message details view component với useTranslation()
    status: completed
  - id: create-messages-page-moderation
    content: Tạo Messages page - Content moderation tools với useTranslation()
    status: completed
  - id: create-messages-page-stats
    content: Tạo Messages page - Message statistics cards với useTranslation()
    status: completed
  - id: create-api-settings-ui
    content: Tạo apps/web-admin/src/components/admin/settings/api-settings.tsx - Form UI với API keys management, webhooks config, rate limits với useTranslation()
    status: completed
  - id: create-api-settings-validation
    content: Tạo Zod schema cho api-settings.tsx - Sử dụng translated validation messages
    status: completed
  - id: create-advanced-settings-ui
    content: Tạo apps/web-admin/src/components/admin/settings/advanced-settings.tsx - Form UI với feature flags, logs, cache, database settings với useTranslation()
    status: completed
  - id: create-advanced-settings-validation
    content: Tạo Zod schema cho advanced-settings.tsx - Sử dụng translated validation messages
    status: completed
  - id: update-settings-tabs
    content: Update apps/web-admin/src/app/(dashboard)/settings/page.tsx - Thêm API và Advanced tabs
    status: completed
  - id: integrate-language-preferences
    content: Tích hợp language selector trong settings (nếu chưa có) - Kết nối với i18n context, trigger re-render
    status: completed
  - id: add-date-formatters-tables
    content: Implement date formatting trong tables - Sử dụng locale cho date formatting trong data-table, activity-table
    status: completed
  - id: add-date-formatters-charts
    content: Implement date formatting trong charts - Sử dụng locale cho date formatting trong user-growth-chart, revenue-chart
    status: completed
  - id: add-date-formatters-modals
    content: Implement date formatting trong modals - Sử dụng locale cho date formatting trong user-details-modal
    status: completed
  - id: add-number-formatters
    content: Implement number formatting - Sử dụng locale cho number formatting (nếu cần)
    status: completed
  - id: test-language-switching
    content: Test language switching - Verify UI updates khi đổi ngôn ngữ
    status: completed
  - id: test-browser-detection
    content: Test browser language detection - Verify auto-detect từ navigator.language
    status: completed
  - id: test-persistence
    content: Test persistence - Verify language preference lưu trong localStorage và persist qua reload
    status: completed
  - id: test-all-pages-en
    content: Test tất cả pages với English - Verify không có missing translations, UI hiển thị đúng
    status: completed
  - id: test-all-pages-vi
    content: Test tất cả pages với Vietnamese - Verify không có missing translations, UI hiển thị đúng
    status: completed
  - id: verify-html-lang-attribute
    content: Verify HTML lang attribute - Check <html lang> updates đúng khi đổi ngôn ngữ
    status: completed
  - id: test-validation-messages
    content: Test validation messages - Verify form validation hiển thị đúng ngôn ngữ
    status: completed
---

# Plan: Điều chỉnh giao diện đa ngôn ngữ và hoàn thiện features cho web-admin

## Tổng quan

Plan này sẽ:

- Setup next-intl cho Next.js App Router trong web-admin
- Tạo translation files cho en và vi với đầy đủ admin-specific translations
- Migrate tất cả hardcoded text "English / Tiếng Việt" sang translation system
- Tạo/copy UI components từ web-client để đảm bảo design system consistency
- Hoàn thiện các features còn thiếu: Analytics page, Messages page, API/Advanced settings tabs
- Tích hợp với language preferences từ localStorage
- Detect browser language cho user mới
- Update HTML lang attribute động

## Kiến trúc

```
apps/web-admin/
├── src/
│   ├── i18n/
│   │   ├── config.ts              # Cấu hình next-intl
│   │   ├── request.ts             # Request handler cho SSR
│   │   └── messages/
│   │       ├── en.json            # English translations
│   │       └── vi.json            # Vietnamese translations
│   ├── contexts/
│   │   └── i18n-context.tsx       # Client-side i18n context
│   ├── hooks/
│   │   └── use-translation.ts     # Custom hook cho translations
│   ├── providers/
│   │   └── i18n-provider.tsx     # I18n provider component
│   └── components/
│       └── ui/                    # UI components (copy từ web-client nếu cần)
│           ├── button.tsx
│           ├── input.tsx
│           ├── card.tsx
│           ├── dialog.tsx
│           ├── avatar.tsx
│           ├── switch.tsx
│           ├── select.tsx
│           └── dropdown-menu.tsx
```

## Các bước thực hiện

### Phase 1: Setup i18n Infrastructure

#### 1.1 Cài đặt dependencies

- Thêm `next-intl` vào `apps/web-admin/package.json`
- Chạy `pnpm install`

#### 1.2 Tạo cấu trúc i18n

- **File: `src/i18n/config.ts`** - Định nghĩa locales ['en', 'vi'], default 'en'
- **File: `src/i18n/request.ts`** - Request handler với locale detection logic
- **File: `src/i18n/messages/en.json`** - English translations với namespaces:
  - `common`: buttons, labels, placeholders
  - `auth`: login
  - `admin`: dashboard, users, analytics, messages, settings
  - `validation`: form validation messages
  - `errors`: error messages
- **File: `src/i18n/messages/vi.json`** - Vietnamese translations với cùng structure

#### 1.3 Tạo I18n Context và Provider

- **File: `src/contexts/i18n-context.tsx`** - Context với setLocale, getLocale, localStorage sync, browser detection
- **File: `src/providers/i18n-provider.tsx`** - Provider component với dynamic message loading
- **File: `src/hooks/use-translation.ts`** - Custom hook useTranslation() với type safety

#### 1.4 Update Root Layout

- **File: `src/app/layout.tsx`** - Wrap với I18nProvider, dynamic lang attribute

### Phase 2: Tạo/Copy UI Components

#### 2.1 Copy UI Components từ web-client

Các components cần copy từ `apps/web-client/src/components/ui/` sang `apps/web-admin/src/components/ui/`:

- `button.tsx` - Button component với variants và sizes
- `input.tsx` - Input component với validation states
- `card.tsx` - Card component với subcomponents
- `dialog.tsx` - Dialog/Modal component
- `avatar.tsx` - Avatar component với sizes
- `switch.tsx` - Switch component
- `select.tsx` - Select component (nếu cần)
- `dropdown-menu.tsx` - Dropdown menu component (nếu cần)

**Lưu ý**: Các components này đang được import trong web-admin nhưng chưa tồn tại, cần tạo/copy để tránh lỗi.

### Phase 3: Extract và Tạo Translation Files

#### 3.1 Extract translations từ các pages/components hiện có

- **Common namespace**: buttons, labels, placeholders, loading states
- **Auth namespace**: login page texts
- **Admin namespace**: 
  - Dashboard: metrics, charts, activity table
  - Users: search, filters, table headers, actions, user details modal
  - Analytics: tabs, charts, metrics (nếu có)
  - Messages: message management (nếu có)
  - Settings: tabs, form labels, descriptions, General/Email/Security/API/Advanced settings
- **Validation namespace**: form errors, Zod messages
- **Errors namespace**: API errors, general errors

### Phase 4: Migrate Pages và Components

#### 4.1 Auth Pages

- **File: `src/app/login/page.tsx`** - Migrate hardcoded text, update validation schema

#### 4.2 Dashboard Pages

- **File: `src/app/(dashboard)/layout.tsx`** - Migrate sidebar navigation labels
- **File: `src/app/(dashboard)/dashboard/page.tsx`** - Migrate metrics, charts labels, activity descriptions
- **File: `src/app/(dashboard)/users/page.tsx`** - Migrate search, filters, table headers, actions
- **File: `src/app/(dashboard)/settings/page.tsx`** - Migrate tabs, headers, descriptions

#### 4.3 Admin Components

- **File: `src/components/admin/analytics-card.tsx`** - Migrate card labels, trend indicators
- **File: `src/components/admin/data-table.tsx`** - Migrate table headers, pagination, actions
- **File: `src/components/admin/recent-activity-table.tsx`** - Migrate activity descriptions, status labels
- **File: `src/components/admin/user-details-modal.tsx`** - Migrate modal content, tabs, actions
- **File: `src/components/admin/charts/user-growth-chart.tsx`** - Migrate chart labels, tooltips
- **File: `src/components/admin/charts/revenue-chart.tsx`** - Migrate chart labels, tooltips
- **File: `src/components/admin/settings/general-settings.tsx`** - Migrate form labels, validation, success/error messages
- **File: `src/components/admin/settings/email-settings.tsx`** - Migrate form labels, validation, test email messages
- **File: `src/components/admin/settings/security-settings.tsx`** - Migrate form labels, validation, security policy descriptions

### Phase 5: Hoàn thiện Features Còn Thiếu

#### 5.1 Analytics Page

- **File: `src/app/(dashboard)/analytics/page.tsx`** - Tạo mới với tabs:
  - Overview tab: Key metrics summary, trends visualization, comparison charts
  - Users tab: User acquisition funnel, retention chart, cohort analysis
  - Messages tab: Total messages, average per user, peak activity times
  - Performance tab: API response times, error rates, uptime statistics
- **Components**: Tạo các chart components cần thiết (pie chart, donut chart, heatmap)

#### 5.2 Messages Page

- **File: `src/app/(dashboard)/messages/page.tsx`** - Tạo mới với:
  - Message list với search và filters
  - Message details view
  - Content moderation tools
  - Message statistics

#### 5.3 API Settings Tab

- **File: `src/components/admin/settings/api-settings.tsx`** - Tạo mới với:
  - API keys management
  - Webhooks configuration
  - Rate limits settings
  - Documentation link
- **Update**: `src/app/(dashboard)/settings/page.tsx` - Thêm API tab

#### 5.4 Advanced Settings Tab

- **File: `src/components/admin/settings/advanced-settings.tsx`** - Tạo mới với:
  - Feature flags
  - System logs
  - Cache management
  - Database settings
  - Backup/restore options
- **Update**: `src/app/(dashboard)/settings/page.tsx` - Thêm Advanced tab

### Phase 6: Integration và Testing

#### 6.1 Tích hợp Language Preferences

- Update settings page để có language selector (nếu chưa có)
- Kết nối với i18n context
- Trigger re-render khi đổi ngôn ngữ

#### 6.2 Date và Number Formatting

- Sử dụng locale cho date formatting trong tables, charts
- Format numbers theo locale (nếu cần)

#### 6.3 Testing

- Test language switching
- Test browser language detection
- Test persistence qua page reloads
- Test tất cả pages với cả 2 ngôn ngữ
- Verify HTML lang attribute updates
- Test validation messages

## Translation Structure Example

```json
{
  "common": {
    "save": "Save",
    "cancel": "Cancel",
    "loading": "Loading...",
    "search": "Search",
    "filter": "Filter",
    "export": "Export"
  },
  "admin": {
    "dashboard": {
      "title": "Dashboard",
      "totalUsers": "Total Users",
      "totalMessages": "Total Messages",
      "activeUsers": "Active Users",
      "revenue": "Revenue"
    },
    "users": {
      "title": "User Management",
      "searchPlaceholder": "Search users...",
      "role": "Role",
      "status": "Status",
      "actions": "Actions"
    },
    "settings": {
      "title": "System Settings",
      "general": "General",
      "email": "Email",
      "security": "Security",
      "api": "API",
      "advanced": "Advanced"
    }
  }
}
```

## Dependencies và Execution Order

### Dependencies Matrix

```
install-deps
  └─> create-i18n-config
       ├─> create-i18n-request
       ├─> create-i18n-context
       │    ├─> create-i18n-provider
       │    │    └─> update-root-layout
       │    └─> create-translation-hook
       │         └─> [tất cả migration tasks]
       └─> [tất cả translation extraction tasks]
            └─> [tất cả migration tasks]

copy-ui-components
  └─> [tất cả migration tasks sử dụng UI components]

create-missing-features
  └─> [migrate các features mới]
```

### Execution Phases

**Phase 1 (Tuần tự):**

- Setup i18n infrastructure (config, context, provider, hook)
- Update root layout

**Phase 2 (Song song):**

- Copy UI components từ web-client
- Extract và tạo translation files cho tất cả namespaces

**Phase 3 (Song song, sau Phase 1+2):**

- Migrate auth pages
- Migrate dashboard pages
- Migrate admin components
- Migrate settings components

**Phase 4 (Sau migrations):**

- Tạo Analytics page
- Tạo Messages page
- Tạo API settings tab
- Tạo Advanced settings tab

**Phase 5 (Cuối cùng):**

- Integration tasks (language preferences, date formatting)
- Testing toàn bộ system

## Parallelization Opportunities

- **Translation extraction**: 5 namespaces có thể làm song song (common, auth, admin, validation, errors)
- **UI components copy**: 8 components có thể copy song song
- **Page migrations**: 5 pages có thể migrate song song
- **Component migrations**: 8+ components có thể migrate song song
- **New features**: Analytics, Messages, API/Advanced settings có thể làm song song

## Lưu ý kỹ thuật

1. **UI Components**: Copy từ web-client để đảm bảo design system consistency
2. **Static Imports**: Sử dụng static imports cho messages trong provider (giống web-client fix)
3. **Type Safety**: Sử dụng TypeScript để type-check translation keys
4. **Fallback**: Luôn có fallback về 'en' nếu translation key không tồn tại
5. **Browser Detection**: Sử dụng `navigator.language` để detect
6. **Admin-specific Translations**: Tạo namespace `admin` riêng cho admin-specific texts

## Phân chia Tasks cho Multiple Agents

### Agent Roles

1. **setup** - Setup infrastructure (phải làm trước, tuần tự)

   - Cài đặt dependencies
   - Tạo config, context, provider, hook
   - Update root layout

2. **ui-components** - Copy UI components (có thể làm song song)

   - Copy 8 UI components từ web-client sang web-admin
   - Có thể chia theo component: button, input, card, dialog, avatar, switch, select, dropdown-menu

3. **translations** - Tạo translation files (có thể làm song song)

   - Extract và tạo translation keys cho các namespaces
   - Có thể chia theo namespace: common, auth, admin.dashboard, admin.users, admin.analytics, admin.messages, admin.settings, validation, errors

4. **migration-auth** - Migrate auth pages (có thể làm song song sau khi có infrastructure)

   - Login page UI và validation schema

5. **migration-dashboard** - Migrate dashboard pages (có thể làm song song)

   - Dashboard layout, dashboard page (metrics, charts, activity), users page (header, search/filters, table), settings page
   - Có thể chia theo page hoặc theo phần trong page

6. **migration-components** - Migrate admin components (có thể làm song song)

   - Analytics card, data table (headers, pagination, actions), activity table, user details modal (header, tabs, content, actions), charts, settings forms

7. **new-features** - Tạo features mới (có thể làm song song sau migrations)

   - Analytics page (layout, overview, users, messages, performance tabs)
   - Messages page (layout, list, details, moderation, stats)
   - API settings (UI, validation)
   - Advanced settings (UI, validation)

8. **integration** - Integration tasks (phải làm sau khi có migrations)

   - Language preferences integration
   - Date/number formatters (tables, charts, modals)

9. **testing** - Testing tasks (phải làm cuối)

   - Test tất cả functionality

### Execution Order

**Phase 1 (Tuần tự):**

- `setup` agent làm tất cả infrastructure tasks theo thứ tự dependencies

**Phase 2 (Song song):**

- `ui-components` agent copy 8 components song song
- `translations` agent có thể làm tất cả translation extraction tasks cùng lúc (5 admin sub-namespaces + common + auth + validation + errors)

**Phase 3-6 (Song song, sau Phase 1+2):**

- `migration-auth`, `migration-dashboard`, `migration-components` có thể làm song song
- Mỗi agent làm các file độc lập của mình

**Phase 7 (Sau migrations):**

- `new-features` agent làm các features mới (có thể chia nhỏ theo feature)

**Phase 8 (Sau new features):**

- `integration` agent làm integration tasks

**Phase 9 (Cuối cùng):**

- `testing` agent test toàn bộ system

### Dependencies Matrix

```
install-deps
  └─> create-i18n-config
       ├─> create-i18n-request
       ├─> create-i18n-context
       │    ├─> create-i18n-provider
       │    │    └─> update-root-layout
       │    └─> create-translation-hook
       │         └─> [tất cả migration tasks]
       └─> [tất cả translation extraction tasks]
            └─> [tất cả migration tasks]

copy-ui-components (song song)
  └─> [tất cả migration tasks sử dụng UI components]

create-missing-features
  └─> [migrate các features mới]
```

### Parallelization Opportunities

- **UI components copy**: 8 components có thể copy song song
- **Translation extraction**: 9 namespaces có thể làm song song (common, auth, admin.dashboard, admin.users, admin.analytics, admin.messages, admin.settings, validation, errors)
- **Page migrations**: 4 pages có thể migrate song song (login, dashboard, users, settings)
- **Component migrations**: 9+ components có thể migrate song song
- **New features**: Analytics (9 subtasks), Messages (5 subtasks), API/Advanced settings (4 subtasks) có thể làm song song
- **Testing**: Một số test cases có thể chạy song song (nhưng nên test tuần tự để dễ debug)