ĐẶT LỊCH

- Hiển thị 2 nút: "Lịch" và "Danh sách".

- Mặc định chọn: Tab "Lịch".
- Trạng thái Active: Màu nền tím nhạt, chữ tím đậm.

- Placeholder: "Tìm theo tên lịch...".

- Icon kính lúp ở bên phải.

- Điều kiện tìm: So khớp chuỗi ký tự gần đúng (LIKE %keyword%) với trường "Tên lịch checklist".

- Phạm vi dữ liệu: Query tất cả các lịch trong quá khứ + Lịch hiện tại + Lịch tương lai (trong phạm vi 30 ngày kể từ ngày hiện tại đối với lịch có tần suất).

- Hiển thị danh sách các địa điểm đã được cấu hình (site)

- Cho phép tích chọn nhiều.

- Cho phép nhập tìm kiếm theo tên và mã địa điểm

- Quan hệ OR giữa các giá trị chọn.

- Mặc định: Get Current Year của hệ thống để hiển thị.

- Khi thay đổi, reload lại lịch theo năm chọn.

- Mặc định: Get Current Month của hệ thống.

- Khi thay đổi, reload lại lịch theo tháng chọn.

- Lưới 7 cột (Su - Sa).

- Các ngày có sự kiện: Hiển thị chấm tròn màu (theo trạng thái) hoặc tên vắn tắt.

- Ô ngày hiện tại: Highlight viền hoặc màu nền khác biệt.

- Click vào ô trống (Ngày chưa có lịch): Gọi sự kiện mở Modal "Tạo mới" (Màn hình 2). Truyền tham số start_date = Ngày vừa click.

- Click vào item lịch: Gọi API lấy chi tiết lịch -> Mở Drawer "Chi tiết" (Màn hình 3).

- Nút màu tím (Primary Color).

- Icon dấu cộng (+).

- Nút "Đóng": Góc phải trên.

- Nút "Lưu": Nút màu tím nổi bật.

- Đóng: Đóng modal, không lưu dữ liệu, clear form.

- Lưu: Trigger validate form -> Nếu Pass -> Gọi API CreateSchedule -> Thông báo thành công -> Reload lại lịch.

- Input text.

- Hiển thị bộ đếm ký tự góc phải (0/200).

- Validate: Không được để trống.

- Validate: Max length = 200 ký tự.

- Dropdown single select.

- Có dòng note hướng dẫn bên dưới.

- Load danh sách Template đang Active.

- Khi chọn, hệ thống mapping ID questionnaire vào lịch.

- Validate: Không được để trống.

1. Trạng thái đóng: Khi chưa chọn

- Hiển thị input box.

- Placeholder: "Chọn người thực hiện".

2. Trạng thái mở (Dropdown):

- Có 2 Tab: Cá nhân và Nhóm.

- Có thanh tìm kiếm (Search bar) trên cùng.

- Nút "Lưu" màu tím ở dưới cùng của dropdown.

3. Tab Cá nhân (Default):

- List user (Display name)

- Mỗi dòng cho phép có cơ chế chọn nhiều.

- Đã chọn: Hiển thị dấu tích (Checkmark) bên phải.

4. Tab Nhóm:

- List danh sách các nhóm (Nhóm 1, Nhóm 2...).

- Cơ chế chọn: Single select (Chọn 1).

- Validate: Không được để trống.

1. Logic Tìm kiếm:

- Filter danh sách user/nhóm theo từ khóa nhập vào (Local search hoặc API search).

-Chỉ có thể chọn cá nhân hoặc nhóm, khi đang chọn cá nhân mà đổi sang tab nhóm và chọn 1 giá trị sẽ clear toàn bộ giá trị cá nhân đã chọn tương tự với khi chọn nhóm mà đổi sang và chọn cá nhân.

2. Logic Tab Cá nhân (Multi-select):

- Cho phép tích chọn nhiều User ID vào mảng selected_users.

- Quy tắc Reset: Ngay khi user thực hiện chọn (click) vào 1 user bất kỳ tại tab này -> Hệ thống tự động Clear (Xóa rỗng) giá trị của selected_group_id (nếu trước đó đã chọn nhóm).

3. Logic Tab Nhóm (Single-select):

- Chỉ cho phép chọn duy nhất 1 Group ID 

- Quy tắc Reset: Ngay khi user thực hiện chọn (click) vào 1 nhóm bất kỳ -> Hệ thống tự động Clear (Xóa rỗng) toàn bộ mảng selected_users (nếu trước đó đã chọn cá nhân).

4. Nút Lưu (trong dropdown):

- Sự kiện: Đóng dropdown.

- Hiển thị text lên input box:

+ Nếu chọn Cá nhân: Hiển thị tên các user (cách nhau dấu phẩy) hoặc dạng Tags.

+ Nếu chọn Nhóm: Hiển thị tên nhóm.

• Các giá trị enum. Hiện tại  Mặc định: Auto-detect múi giờ theo setting của User hiện tại (Client time).
• Không xóa 

- 2 ô Input: Ngày bắt đầu (Date) + Giờ (Time) và Ngày kết thúc (Date) + Giờ (time)

- Note: "Mỗi lịch được thực hiện trong X giờ".

- Validate: End_Time phải lớn hơn Start_Time.

- Hệ thống tự tính toán Duration = End - Start để hiển thị gợi ý.

-Mặc định là ngày hiện tại . Giờ mặc định là giờ hiện tại  

- Dropdown select. 

Các giá trị gồm

- Mặc định: Set giá trị là "Một lần" (One-time).

- Nếu chọn loại khác (Hàng ngày/tuần...), hiển thị thêm UI cấu hình lặp lại (Recurrence Rules).

- Toggle Switch (On/Off).

- Note: "Cho phép ngườii dùng hoàn thành check list sau thời gian quy định lên tới 14 ngày"

- OFF (False): Đến End_Time trạng thái chuyển sang "Hết hạn", không cho submit

- ON (True): Cho phép submit sau End_Time nhưng đánh dấu là "Late".

Cho phép người dùng được làm checklist theo lịch ngay cả khi hết hạn hoàn thành theo thời gian làm khi bật tính năng này.

Sau 14 ngày mà k được thực hiện thì Checklist được tính về Bỏ lỡ.

- Nút "Tạm ngừng": Style Danger/Warning.

- Nút "Sửa": Style Primary.

- Mã lịch: Hiển thị ID dạng text (Read-only).

- Tạm ngừng: Update status = Inactive (hoặc Paused). Ngăn chặn sinh ra checklist mới từ lịch này.

- Sửa: Mở lại form Tạo mới (Màn hình 2) nhưng bind dữ liệu cũ vào các trường để user chỉnh sửa.

- Tiêu đề: Font to, in đậm.

- Trạng thái: Badge màu (Xanh: Active, Xám: Inactive).

- Hiển thị đúng tên lịch đã lưu.

- Mapping trạng thái từ DB ra màu sắc tương ứng.

- Hiển thị dạng Label: Value.

- Các trường: Biểu mẫu, Người thực hiện, Địa điểm, Múi giờ...

- Tất cả đều ở trạng thái Read-only (Chỉ xem).

- Dữ liệu Người thực hiện: Nếu > 5 người, hiển thị Avatar stack (+5) để tiết kiệm diện tích.

- Tần suất: Hiển thị text.

- Hoàn thành sau hạn: Text "Cho phép" / "Không".