ĐẶ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.

1. Trạng thái đóng:

- 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 kèm thông tin bổ sung (Role/Location).

- Mỗi dòng có Checkbox hoặ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).

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).

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 vào biến selected_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.

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

- 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: 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 nộp trễ tới X 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".

- 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".