Hướng dẫn sử dụng: Biểu đồ Gantt Timeline (Job Gantt View)

1. Định nghĩa và Mục đích

Tên tính năng: Biểu đồ Gantt Timeline (Job Gantt View).
Nơi sử dụng: Hire Workspace trên web, tại màn hình Quản lý công việc (/jobs) và tab Công việc trong từng Thư mục (/folders/:folderId).
Mục đích: Giúp người quản lý dự án (PM/Supervisor) có cái nhìn toàn cảnh về tiến độ, mật độ ca làm và sự phân bổ nhân sự theo thời gian thực; cho phép điều phối lịch trình bằng thao tác kéo thả (Drag & Drop) trực quan thay vì phải sửa thủ công từng ngày giờ.
Điểm nổi bật:
- 100% Native React & Tailwind CSS, mượt mà và phản hồi tức thì.
- Hỗ trợ 4 độ phân giải thời gian: Giờ (24h trong ngày), Ngày, Tuần, Tháng.
- 3 chế độ gom nhóm linh hoạt: theo Thư mục (Folder), Trạng thái (Status), hoặc Nhân sự thực hiện (Worker / Assignee).
- Tự động mở rộng và hiển thị các công việc định kỳ lặp lại (Recurrence engine).

Giờ (24 Giờ trong ngày): Phù hợp theo dõi chi tiết các ca làm việc trong ngày (ca sáng, ca chiều, ca tối, thời điểm check-in/check-out).
Ngày (Mặc định): Hiển thị từng ngày trong tháng, có đánh dấu rõ các ngày cuối tuần (Thứ 7, Chủ Nhật) và cột ngày hiện tại (Hôm nay màu nổi bật).
Tuần: Gom nhóm theo tuần, giúp quản lý kế hoạch công việc trung hạn của chiến dịch.
Tháng: Dành cho cái nhìn vĩ mô toàn quý/năm của dự án.

Theo Thư mục (Folder): Phân bổ công việc theo cây dự án và chiến dịch. Cho phép thu gọn/mở rộng từng thư mục.
Theo Trạng thái (Status): Phân chia rõ ràng giữa các Job Đang soạn thảo (Draft), Mở tuyển (Open), Đang chạy (In-progress) và Hoàn thành (Completed).
Theo Nhân sự (Worker / Assignee): Bố cục phân cấp 3 tầng hiển thị rõ từng người lao động đang phụ trách những công việc nào, kèm ô tìm kiếm nhân sự nhanh để phát hiện tình trạng quá tải hoặc trùng lịch.

Rê chuột vào thân thanh công việc trên biểu đồ, con trỏ chuột chuyển thành dạng bàn tay nắm (cursor-grab).
Bấm giữ chuột trái và kéo sang trái (lùi ngày) hoặc sang phải (tiến ngày).
Thả chuột tại vị trí mong muốn: Hệ thống tự động tính toán lại ngày bắt đầu/kết thúc và cập nhật ngay vào cơ sở dữ liệu.

Rê chuột vào mép trái (đổi thời điểm bắt đầu) hoặc mép phải (đổi thời điểm kết thúc) của thanh công việc. Con trỏ chuyển thành mũi tên 2 chiều (↔).
Bấm giữ và kéo để tăng hoặc giảm thời lượng của Job.

Khi đang gom nhóm theo Thư mục, bạn có thể bấm giữ tên công việc ở cột bên trái và kéo thả sang tên Thư mục khác.
Hệ thống sẽ hiển thị vùng nhận diện chuyển đổi (Drop Target), thả chuột để hoàn tất việc di dời công việc vào Thư mục mới.

Rê chuột (Hover) lên bất kỳ thanh công việc nào để mở popup tóm tắt:
- Tên công việc & Mã Job.
- Thời gian bắt đầu - kết thúc cụ thể.
- Số lượng vị trí tuyển / Đã duyệt / Đã nhận việc.
- Địa điểm thực địa & Hạn mức chi trả.
Nhấp đúp (Double-click) vào thanh công việc để mở hộp thoại chỉnh sửa chi tiết.

Rê chuột vào hàng trống của Thư mục trên timeline, nhấp vào nút + xuất hiện để tạo ngay một công việc mới được gán sẵn ngày và Thư mục tương ứng.

Đối với các Job có thiết lập lặp lại (ví dụ: làm việc Thứ 2, 4, 6 hàng tuần hoặc hàng ngày):

Biểu đồ Gantt tự động mở rộng chu kỳ lặp thành các thanh độc lập trên dòng thời gian.
Các thanh lặp hiển thị ký hiệu lặp lại (↻) giúp phân biệt với Job đơn lẻ.
Khi dời lịch một ca cụ thể, hệ thống sẽ hỏi bạn muốn áp dụng cho chỉ ca này hay toàn bộ chuỗi ca lặp.

Tùy chỉnh độ rộng cột bên trái: Đặt chuột lên đường phân cách giữa cột danh sách công việc và vùng biểu đồ timeline, kéo sang trái/phải để mở rộng (160px – 600px). Độ rộng này được tự động lưu trên trình duyệt của bạn cho các lần truy cập sau.
Trở về ngày hiện tại: Bấm nút Hôm nay trên thanh điều khiển để cuộn nhanh trục thời gian về đúng thời điểm thực tế.
Phím tắt điều hướng: Dùng phím cuộn ngang (Shift + Lăn chuột) trên bàn rê/chuột để cuộn nhanh dòng thời gian.