Đổi ngôn ngữ & Chế độ sáng/tối#

Mục tiêu: Tùy chỉnh giao diện Dashboard — ngôn ngữ (VI/EN) và theme (Light/Dark).

Mục tiêu#

• Chuyển Dashboard giữa Tiếng Việt ↔ English.
• Chuyển theme Light ↔ Dark.

Điều kiện tiên quyết#

• Đã đăng nhập Dashboard.

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

Chuyển ngôn ngữ#

1. Cuộn xuống cuối sidebar trái.
2. Bấm nút có icon Languages (biểu tượng chữ/globe):
   • Nếu đang ở Tiếng Việt, nút hiển thị English — bấm để đổi sang EN.
   • Nếu đang ở English, nút hiển thị Tiếng Việt — bấm để đổi về VI.
3. Trang tự reload — URL đổi prefix locale (/vi/... ↔ /en/...).

Chuyển theme#

1. Ở cuối sidebar, bấm nút có icon Moon (sáng sang tối) hoặc Sun (tối sang sáng).
2. Theme đổi ngay lập tức, không cần reload.
3. Cài đặt được lưu trong localStorage — lần đăng nhập sau vẫn giữ theme.

Chi tiết từng bước#

Cách hoạt động của ngôn ngữ#

• Dashboard dùng next-intl (i18n framework).
• Tất cả text được dịch sẵn trong file:
  • src/messages/vi/*.json — Tiếng Việt
  • src/messages/en/*.json — English
• Chuyển ngôn ngữ → Dashboard load lại với file tương ứng.

Thuật ngữ tiếng Việt#

Dashboard tuân theo quy ước:

Tiếng Việt	Tiếng Anh	Ghi chú
Thử thách	Campaign	KHÔNG dùng "chiến dịch"
Influencer	Influencer	Giữ nguyên EN, không dùng "Creator" trong UI
Bài đăng	Content
Lượt xem	Views
Phí quảng cáo	Ad Cost

Cách hoạt động của theme#

• Dùng next-themes (React library).
• 3 giá trị: light (sáng) / dark (tối) / system (theo OS — không có toggle UI riêng).
• Lưu trong localStorage dưới key theme.

Theme tự động theo OS?#

Hiện tại không có toggle "System" trong UI. Bạn phải chọn cụ thể Light hoặc Dark.

Lỗi thường gặp#

1. Chuyển ngôn ngữ xong nhưng vẫn thấy text cũ#

• Hard refresh (Ctrl+Shift+R / Cmd+Shift+R).
• Clear cache trình duyệt nếu dai dẳng.

2. Một số chỗ vẫn hiển thị Tiếng Việt dù đã chuyển sang EN#

→ Có thể là text chưa được dịch (bug). Báo Admin với screenshot.

3. Theme tối nhìn mỏi mắt vì contrast thấp#

→ Feedback với team dev. Dashboard đang fine-tune color scheme.

4. Đổi theme xong reload lại về cũ#

• localStorage có thể bị disable (Incognito mode).
• Mở trình duyệt bình thường thay vì Incognito.

5. Ngôn ngữ reset về VI sau khi login lại#

→ Locale được lưu trong URL. Nếu bạn truy cập trực tiếp /analytics (không có prefix /en/), Dashboard dùng locale mặc định (VI). Đảm bảo URL có /en/ sau khi đổi ngôn ngữ.

Câu hỏi thường gặp (FAQ)#

Dashboard có thêm ngôn ngữ khác không (Trung, Nhật, etc.)?

Hiện chỉ có VI và EN. Chưa có kế hoạch thêm ngôn ngữ.

Theme có ảnh hưởng xuất file không?

Không. File XLSX/CSV xuất ra theo format chuẩn, không theo theme.

Dark theme có giảm bớt tải pin trên laptop?

Với màn OLED, dark theme tiết kiệm pin. Với LCD thường (đa số laptop), khác biệt không đáng kể.

Ngôn ngữ English có đầy đủ không?

Đa số UI đã có EN. Một số khu vực mới có thể còn fallback về VI. Nếu thấy, báo Admin.

Chia sẻ link với đồng nghiệp, họ có tự đổi ngôn ngữ theo tôi không?

Nếu URL chứa prefix (ví dụ /en/analytics?...), người nhận sẽ thấy cùng ngôn ngữ.

Liên kết liên quan#

• Bắt đầu
• Truy cập Dashboard

---

Tham khảo SRS: brand-portal/11-i18n