Calendar (Lịch làm việc)

I. Tổng quan

1. Vấn đề

  • Người dùng gặp khó khăn trong việc theo dõi đồng thời Công việc (Task), Lịch hẹn (Meeting) và Ca làm việc trên cùng một giao diện. Việc phải chuyển đổi qua lại giữa các màn hình khác nhau làm giảm hiệu suất và khó nắm bắt tổng quan lịch trình.

2. Giải pháp

  • Xây dựng tính năng Calendar tập trung, hiển thị Lịch hẹn, Công việc và Ca làm việc dưới dạng lịch (tuần/tháng). Hỗ trợ các công cụ lọc nhanh, tìm kiếm và thao tác kéo thả trực quan để quản lý thời gian hiệu quả.

3. Đối tượng

  • Tất cả người dùng có quyền truy cập module Công việc, Lịch hẹn, Ca làm việc.
  • Quản lý/Admin cần theo dõi lịch trình của nhân viên.

4. Tầm nhìn/insight

  • Tích hợp thêm các loại sự kiện khác trong tương lai.
  • Hỗ trợ xem lịch của phòng ban/chi nhánh.

II. Yêu cầu chức năng

1. Danh sách tính năng

  • Giao diện Calendar (Tuần/Tháng).
  • Checkbox ẩn/hiện loại đối tượng (Lịch hẹn, Công việc, Ca làm việc).
  • Bộ lọc Của tôi / Tất cả.
  • Tìm kiếm nhanh.
  • Cấu hình hiển thị và điều hướng thời gian (Tuần/Tháng).
  • Lọc nhanh theo nhân viên.
  • Hiển thị card sự kiện và tương tác (Xem chi tiết, Kéo thả đổi ngày).
  • Thêm mới sự kiện trực tiếp từ lịch.

2. Đặc tả chi tiết

User Story 1: Là một người dùng, tôi muốn xem lịch trình công việc, lịch hẹn và ca làm việc trên một giao diện lịch duy nhất để dễ dàng quản lý thời gian.

  • Use case 1.1 (Cấu hình và Điều hướng hiển thị):
    • Toggle chuyển đổi 2 chế độ: Tuần và Tháng.
    • Chế độ Tuần: Hiển thị dropdown chọn Năm và dropdown chọn Tuần.
    • Chế độ Tháng: Hiển thị dropdown chọn Năm và dropdown chọn Tháng.
  • Use case 1.2 (Hiển thị Card các objects):
    • Giao diện Task: Tên task, trạng thái, nhân viên phụ trách. Thời gian hiển thị được tính toán: Start date = End date (Deadline) - 30 phút.
    • Giao diện Meeting: Tên meeting, thời gian diễn ra, danh sách người tham gia. Người host hiển thị đầu tiên, tiếp theo là người tham gia (tối đa 3 người, những người còn lại hiển thị +n).
    • Giao diện Ca làm việc: Tên ca làm việc, thời gian ca, các nhân viên đi làm vào ca đó.
    • Quy tắc hiển thị ô lịch: Card hiển thị cách lề trái 2px, lề phải 10px để nhường khoảng trống cho thao tác thêm mới.
    • Quy tắc xếp chồng (Overlap): Khi có nhiều sự kiện trùng thời gian, xếp chồng lên nhau và thêm stroke (viền) vào card ở phía sau.
    • Thứ tự ưu tiên (Z-index/Sorting) khi cùng thời gian: Ca làm việc < Công việc (Task) < Lịch hẹn.
  • Use case 1.3 (Tương tác với Card):
    • Xem nhanh (Single Click): Click chuột trái vào card để mở màn hình Xem nhanh (Quick view) tương ứng của Task/Meeting/Ca.
    • Đổi thời gian (Drag & Drop): Click chuột trái và giữ card để di chuyển sang vị trí/ngày khác. Khi thả chuột:
      • Hiển thị Popconfirm xác nhận đổi “ngày hết hạn” (đối với Task) và “thời gian” (đối với Meeting).
  • Use case 1.4 (Thêm mới từ Lịch):
    • Click chuột trái vào khoảng trống trong ô lịch (bao gồm vùng 10px lề phải).
    • Mở popup yêu cầu chọn loại sự kiện muốn tạo: Tạo Công việc mới HOẶC Tạo Lịch hẹn mới.

User Story 2: Là một quản lý, tôi muốn lọc nhanh các sự kiện trên lịch để tìm kiếm thông tin cần thiết.

  • Use case 2.1 (Bộ lọc và Tìm kiếm):
    • Checkbox Loại sự kiện: 3 checkbox tương ứng với Lịch hẹn, Công việc, Ca làm việc. Check để hiện, uncheck để ẩn.
    • Tab Của tôi / Tất cả:
      • Của tôi: Chỉ hiển thị Ca làm việc của tôi; Task do tôi phụ trách; Lịch hẹn tôi là người host hoặc tham gia.
      • Tất cả: Hiển thị tất cả sự kiện trong công ty mà user có quyền xem (theo phân quyền data).
    • Thanh tìm kiếm: Tìm kiếm text (search by name) theo Tên công việc, Tên lịch hẹn, Tên ca làm việc.
    • Lọc Nhân viên: Dropdown chọn nhân viên để lọc nhanh lịch trình của một cá nhân cụ thể.

3. Giao diện (UI Design)

Giao diện Calendar

III. Yêu cầu phi chức năng

  • API tối ưu để tải lượng lớn card trên lịch mà không gây giật lag (đặc biệt ở chế độ xem “Tất cả” của Tháng).
  • Drag & Drop mượt mà, UX popconfirm hiển thị đúng ngữ cảnh.

IV. Dependency (Liên quan & phụ thuộc)

  • Phụ thuộc vào dữ liệu của các module: Task (Công việc), Meeting (Lịch hẹn) và Timekeeping (Ca làm việc).
  • Các pop-up xem nhanh và form thêm mới tái sử dụng từ các module gốc.

V. API Contract (Dev viết)

  • Dev cần thiết kế API get events tổng hợp trả về cả 3 loại (Task, Meeting, Shift) dựa trên startDate, endDate, và các params filter.

VI. Test case (BA hoặc Tester viết)

  • TC1 (Hiển thị Task): Tạo 1 task có deadline 15:00. Kiểm tra trên lịch block task có hiển thị từ 14:30 đến 15:00 hay không.
  • TC2 (Hiển thị Avatar Meeting): Tạo 1 meeting có 1 host và 4 người tham gia. Kiểm tra avatar hiển thị host ở đầu, 3 người tiếp theo và icon +1.
  • TC3 (Click khoảng trống): Click vào vùng trống 10px bên phải trong ô ngày 15. Kiểm tra popup chọn “Tạo Lịch hẹn / Tạo Công việc” có xuất hiện và mapping đúng ngày 15 không.
  • TC4 (Kéo thả): Kéo Task từ ngày 14 sang ngày 15. Xác nhận Popconfirm. Kiểm tra deadline của Task đã được cập nhật sang ngày 15.
  • TC5 (Xếp chồng): Tạo 1 Ca làm việc, 1 Task, 1 Lịch hẹn cùng thời gian. Kiểm tra thứ tự ưu tiên đè lên nhau: Ca dưới cùng, đến Task, và Lịch hẹn nằm trên cùng. Hỗ trợ stroke viền cho các card bên trên.