Quy tắc viết prompt cho Claude Code

"Trang này chỉ admin mới truy cập được."
"Form phải validate: tiêu đề bắt buộc, deadline không được ở quá khứ."
"Sau khi tạo thành công → đóng modal, hiển thị toast thông báo."
"Danh sách cập nhật realtime, không cần reload."

"Tạo trang [TÊN TRANG] tại [URL].

Giao diện gồm:
- [Mô tả phần header / tiêu đề]
- [Mô tả phần nội dung chính]
- [Mô tả các nút / hành động]

Dữ liệu:
- Lấy từ Firestore collection '[TÊN COLLECTION]'
- Hiển thị các trường: [LIỆT KÊ FIELDS]
- [Realtime hay không]

Hành vi:
- [Mô tả tương tác]"

"Tạo modal [TÊN MODAL] trên trang [URL].

Khi nào mở: [Mô tả trigger — bấm nút nào, ở đâu]

Form gồm các trường:
- [Tên trường]: [Loại input] — [Ghi chú nếu có]
- ...

Khi bấm Lưu:
- Ghi vào Firestore collection '[TÊN]' với các field: [LIỆT KÊ]
- [Xử lý thành công: đóng modal, toast, refresh]
- [Xử lý thất bại: hiển thị lỗi]

Validation:
- [Trường nào bắt buộc]
- [Ràng buộc đặc biệt]"

"Trên trang [URL], thêm chức năng [MÔ TẢ].

Vị trí: [Ở đâu trên giao diện — trong bảng, trên header, cạnh mỗi item]

Hành vi:
- Khi [TRIGGER] → [HÀNH ĐỘNG]
- [Xác nhận trước khi thực hiện? (dialog confirm)]
- Sau khi xong → [CẬP NHẬT GÌ]"

"Trên trang [URL], sửa [MÔ TẢ PHẦN CẦN SỬA].

Hiện tại: [Mô tả hoạt động hiện tại]
Mong muốn: [Mô tả hoạt động mới]

[Chi tiết thay đổi]"

"Tạo trang danh sách tasks tại /dashboard/tasks.

Giao diện gồm:
- Header: tiêu đề 'Danh sách công việc', nút 'Thêm task' ở góc phải
- Bảng dữ liệu hiển thị danh sách tasks với các cột:
  + Tiêu đề (title)
  + Trạng thái (status) — hiển thị dạng badge màu:
    todo = xám, in_progress = xanh dương, completed = xanh lá
  + Người phụ trách (assignee) — hiển thị avatar + tên
  + Deadline — hiển thị ngày, tô đỏ nếu quá hạn
  + Hành động — nút Sửa, nút Xóa
- Khi bảng trống: hiển thị empty state 'Chưa có task nào'

Dữ liệu:
- Lấy từ Firestore collection 'tasks'
- Sắp xếp theo createdAt mới nhất lên trước
- Cập nhật realtime

Trang này nằm trong dashboard layout (có sidebar)."

"Trên trang /dashboard/tasks, tạo modal thêm mới task.

Khi nào mở: bấm nút 'Thêm task' trên header.

Form gồm các trường:
- Tiêu đề (title): input text, bắt buộc
- Mô tả (description): textarea, không bắt buộc
- Trạng thái (status): dropdown với 3 giá trị: Todo, In Progress, Completed.
  Mặc định: Todo
- Độ ưu tiên (priority): dropdown với 3 giá trị: Low, Medium, High.
  Mặc định: Medium
- Người phụ trách (assigneeId): dropdown lấy danh sách users từ
  Firestore collection 'users', hiển thị tên user
- Deadline: date picker, không được chọn ngày trong quá khứ
- Dự án (projectId): dropdown lấy từ collection 'projects',
  hiển thị tên project

Khi bấm Lưu:
- Validate: tiêu đề bắt buộc
- Ghi vào Firestore collection 'tasks' với các field trên,
  thêm createdBy = UID người đang đăng nhập,
  thêm createdAt = thời điểm hiện tại
- Thành công: đóng modal, hiển thị toast 'Tạo task thành công'
- Thất bại: hiển thị thông báo lỗi, giữ modal mở

Khi bấm Hủy hoặc click ngoài modal: đóng modal, reset form."

"Trên trang /dashboard/tasks, tạo modal chỉnh sửa task.

Khi nào mở: bấm nút 'Sửa' trên mỗi dòng trong bảng tasks.

Form giống modal thêm mới nhưng:
- Tự động điền dữ liệu hiện tại của task vào form
- Tiêu đề modal: 'Chỉnh sửa task'
- Nút submit: 'Cập nhật' thay vì 'Lưu'

Khi bấm Cập nhật:
- Ghi đè dữ liệu trong Firestore document tương ứng
- Thêm updatedAt = thời điểm hiện tại
- Thành công: đóng modal, toast 'Cập nhật thành công'
- Thất bại: hiển thị lỗi, giữ modal mở"

"Trên trang /dashboard/tasks, thêm chức năng xóa task.

Khi bấm nút 'Xóa' trên mỗi dòng:
- Hiển thị dialog xác nhận: 'Bạn có chắc muốn xóa task [tên task]?
  Hành động này không thể hoàn tác.'
- Có 2 nút: 'Hủy' và 'Xóa'
- Nút Xóa màu đỏ

Khi xác nhận xóa:
- Xóa document khỏi Firestore collection 'tasks'
- Thành công: đóng dialog, toast 'Đã xóa task'
- Bảng tự cập nhật nhờ realtime listener"

"Trên trang /dashboard/tasks, thêm bộ lọc phía trên bảng.

Gồm:
- Ô tìm kiếm: lọc theo tiêu đề task (client-side filter)
- Dropdown trạng thái: Tất cả / Todo / In Progress / Completed
- Dropdown người phụ trách: Tất cả / [danh sách users từ Firestore]

Hành vi:
- Lọc ngay khi thay đổi giá trị (không cần bấm nút)
- Các bộ lọc kết hợp được (ví dụ: status = Todo VÀ assignee = User A)
- Hiển thị số lượng kết quả: 'Hiển thị X / Y tasks'"

"Tạo trang chi tiết task tại /dashboard/tasks/[id].

Khi truy cập URL này (ví dụ /dashboard/tasks/abc123):
- Lấy task từ Firestore document 'tasks/abc123'
- Nếu không tìm thấy: hiển thị trang 404

Giao diện:
- Header: tiêu đề task, badge trạng thái, nút 'Sửa', nút 'Quay lại'
- Phần thông tin: mô tả, người phụ trách (avatar + tên),
  deadline, độ ưu tiên, dự án, ngày tạo
- Phần bình luận (comments): danh sách bình luận + form thêm bình luận mới
  Bình luận lưu trong subcollection 'comments' của task document"

"Tạo trang dashboard tổng quan tại /dashboard.

Hiển thị thống kê:
- Card 'Tổng tasks': đếm tất cả tasks trong Firestore
- Card 'Đang thực hiện': đếm tasks có status = 'in_progress'
- Card 'Hoàn thành': đếm tasks có status = 'completed'
- Card 'Quá hạn': đếm tasks có deadline < hôm nay VÀ status != 'completed'

Biểu đồ:
- Biểu đồ tròn: tỷ lệ tasks theo trạng thái

Danh sách:
- 5 tasks gần đây nhất (sắp xếp theo createdAt)
- 5 tasks sắp đến hạn (deadline gần nhất)"

"Trên modal tạo/sửa task, thêm phần đính kèm file.

Giao diện:
- Khu vực kéo-thả file hoặc bấm chọn file
- Giới hạn: tối đa 5 file, mỗi file tối đa 10MB
- Hiển thị danh sách file đã chọn với nút xóa từng file

Khi submit form:
- Upload file lên Firebase Storage tại đường dẫn: tasks/[taskId]/[filename]
- Lưu danh sách URL vào field 'attachments' (array) trong task document

Hiển thị trên trang chi tiết task:
- Danh sách file đính kèm với icon theo loại file (PDF, ảnh, Excel)
- Bấm vào file → mở trong tab mới"

"Thêm phân quyền cho trang /dashboard/tasks:

- Admin (role = 'admin'): xem tất cả tasks, sửa/xóa bất kỳ task nào
- Member (role = 'member'): chỉ xem tasks mình được giao (assigneeId = UID)
  hoặc tasks mình tạo (createdBy = UID). Chỉ sửa/xóa tasks của mình.

Kiểm tra role từ Firestore document 'users/[UID]' field 'role'.
Ẩn nút Xóa nếu user không có quyền xóa task đó."

"Thêm hệ thống thông báo.

Biểu tượng chuông trên Header:
- Hiển thị số thông báo chưa đọc (badge đỏ)
- Bấm vào → dropdown danh sách thông báo
- Mỗi thông báo: icon + nội dung + thời gian
- Bấm vào thông báo → đánh dấu đã đọc + chuyển đến trang liên quan

Dữ liệu:
- Lấy từ Firestore collection 'notifications'
- Lọc: userId = UID người đang đăng nhập
- Sắp xếp theo createdAt mới nhất
- Realtime listener để cập nhật ngay khi có thông báo mới"

"Trên trang /dashboard/tasks, sửa bảng danh sách:

Hiện tại: Cột trạng thái hiển thị text thuần 'in_progress'.
Mong muốn: Hiển thị badge màu với text tiếng Việt:
- todo → badge xám, text 'Chờ xử lý'
- in_progress → badge xanh dương, text 'Đang làm'
- completed → badge xanh lá, text 'Hoàn thành'"

"Trang /dashboard/tasks bị lỗi khi mở.

Lỗi hiển thị trên màn hình: [dán nội dung lỗi]
Hoặc: lỗi trong console trình duyệt: [dán nội dung lỗi]

Hành vi mong muốn: [mô tả trang nên hoạt động thế nào]"

"Trên trang /dashboard/tasks, cải thiện trải nghiệm:

1. Thêm loading skeleton khi đang tải dữ liệu
   (thay vì màn hình trắng)
2. Thêm toast notification khi thao tác thành công/thất bại
3. Khi xóa task, disable nút Xóa và hiển thị spinner
   trong lúc đang xử lý"

"Tạo trang /dashboard/projects tương tự trang /dashboard/tasks.

Thay đổi:
- Collection: 'projects' thay vì 'tasks'
- Cột bảng: Tên dự án, Trạng thái, Số thành viên, Ngày tạo
- Modal thêm mới: Tên, Mô tả, Chọn thành viên (multi-select từ users)"

"Thêm luồng mời thành viên vào project:

Bước 1: Trên trang chi tiết project, có nút 'Mời thành viên'
Bước 2: Mở modal với dropdown chọn user (từ collection 'users',
        loại bỏ users đã là member)
Bước 3: Bấm 'Mời' → thêm userId vào array 'members' trong
        project document
Bước 4: Tạo notification cho user được mời:
        'Bạn đã được thêm vào dự án [tên project]'
Bước 5: Đóng modal, cập nhật danh sách thành viên trên trang"

"Khi tạo tính năng này, đảm bảo:
- Service functions đặt trong services/tasks.ts
- Components đặt trong components/tasks/
- Tái sử dụng TaskForm cho cả thêm mới và chỉnh sửa (truyền prop mode)"