@@ -92,3 +92,40 @@ Tất cả các trang, component, thông báo và form trong dự án từ nay v
- Không hardcode chuỗi text trực tiếp vào JSX; luôn sử dụng từ điển ngôn ngữ và hook `useLanguage` / `useTranslation`.
- Lưu trữ lựa chọn ngôn ngữ và theme trong `localStorage` để ghi nhớ cho các phiên tiếp theo.
-**Vị trí Controls**: Thanh Navbar/Header luôn phải tích hợp `ThemeToggle` và `LanguageToggle` trực quan, dễ thao tác.
## 8. Quy Chuẩn Đặt Title & Metadata Cho Từng Trang (Page Titles & SEO) - BẮT BUỘC
Tất cả các trang khi phát triển mới hoặc bảo trì **BẮT BUỘC PHẢI CÓ TIÊU ĐỀ (PAGE TITLE) VÀ METADATA ĐẦY ĐỦ**:
-**Title Template cấu hình tại `src/app/layout.tsx`**:
```tsx
export const metadata: Metadata = {
title: {
default: "Bảng Điều Khiển | Data Crawler System",
template: "%s | Data Crawler",
},
description: "Hệ thống quản lý và giám sát tác vụ cào dữ liệu web realtime...",
};
```
-**Quy tắc khi tạo Trang Mới**:
- Nếu `page.tsx` là **Client Component** (`"use client"`): Vì Next.js App Router cấm export `metadata` từ Client Component, luôn tạo thêm file `layout.tsx` (Server Component) trong cùng thư mục route để export `metadata` và pass through `children`:
```tsx
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Tên Trang",
description: "Mô tả ngắn gọn về chức năng của trang",
};
export default function PageLayout({ children }: { children: React.ReactNode }) {
