Đặc tả Tính năng: Trình xem Sơ đồ Tổ chức

1. Tổng quan & Tầm nhìn

Trình xem Sơ đồ Tổ chức cung cấp một hình ảnh trực quan, tương tác về cấu trúc báo cáo của công ty. Nó chuyển đổi dữ liệu nhân viên phẳng thành một phân cấp động, giúp nhân viên khám phá đồng nghiệp và hiểu các ranh giới bộ phận trong hệ sinh thái VENI-AI.

2. Các Vai trò & Bên liên quan

Vai trò	Mục tiêu
Nhân viên	Hiểu phân cấp của công ty và tìm các tuyến báo cáo.
Quản trị viên HR	Kiểm toán cấu trúc báo cáo và xác định các lỗ hổng trong quản lý.
Ban điều hành	Hình dung toàn bộ tổ chức để lập kế hoạch chiến lược.

3. Câu chuyện Người dùng (User Stories)

• Với tư cách là nhân viên, tôi muốn xem ai báo cáo cho CTO để tôi có thể xác định đúng quản lý kỹ thuật cần liên hệ.
• Với tư cách là Quản trị viên HR, tôi muốn xuất sơ đồ tổ chức sang PDF cho cuộc họp hội đồng quản trị của chúng tôi.
• Với tư cách là người dùng, tôi muốn tìm kiếm "Jane Doe" và để sơ đồ tự động di chuyển và thu phóng đến nút của cô ấy.

4. Yêu cầu Chức năng (FR)

• REQ-OC-001: Cây phân cấp tương tác từ trên xuống dưới hoặc từ trái sang phải.
• REQ-OC-002: Tìm kiếm trong sơ đồ với tự động lấy tiêu điểm/thu phóng.
• REQ-OC-003: Thẻ hồ sơ thu nhỏ khi nhấp vào nút (Tên, Chức danh, Avatar).
• REQ-OC-004: Mở rộng/Thu gọn các nhánh cho các tổ chức lớn.

5. Yêu cầu Phi chức năng (NFR)

• Hiệu suất render: Hiệu suất mượt mà cho tối đa 500 nút (D3.js).
• Tính tương tác: Thu phóng và Di chuyển (Pan) PHẢI mượt mà (60fps).

6. Logic & Quy tắc Nghiệp vụ

• Chuyển đổi Dữ liệu: Frontend xây dựng một JSON phân cấp từ một mảng phẳng bằng cách sử dụng các tham chiếu managerId.
• Khám phá nút gốc: Hệ thống tự động xác định nút gốc (nhân viên có managerId = null).
• Cô lập: Chỉ các nhân viên đang hoạt động mới được hiển thị trong sơ đồ theo mặc định.

7. Giao diện Người dùng (UI/UX)

• Canvas: Khu vực vẽ SVG toàn màn hình.
• Điều khiển: Thanh công cụ nổi cho Tìm kiếm, Thu phóng In/Out, và Căn giữa.
• Thiết kế nút: Các thẻ bo góc với viền mã hóa theo màu sắc của bộ phận.

8. Kiến trúc Thông tin

• Liên kết "Sơ đồ Tổ chức" trong điều hướng HRM chính.
• Xem trước sơ đồ nhỏ trên trang Cài đặt Tổ chức.

9. Mô hình Dữ liệu & Lưu trữ

• Sử dụng các bảng employees và departments cốt lõi.
• Không có bảng dành riêng cho sơ đồ (được tính toán theo thời gian thực).

10. Lớp API & Dịch vụ

• GET /employees/org-chart
• EmployeeService.getOrgChart() thực hiện truy vấn cơ sở dữ liệu đệ quy hoặc truy vấn hàng loạt + phân tầng ở frontend.

11. Các Mẫu Tích hợp

• Thư viện: Sử dụng D3.js cho bố cục cây và định vị theo lực (tùy chọn).
• Điều hướng: Nhấp vào "Xem hồ sơ đầy đủ" trên một nút sẽ chuyển hướng đến tính năng Hồ sơ Nhân viên.

12. Bảo mật & Quyền hạn

• RBAC: Yêu cầu quyền employees:read để xem sơ đồ.
• Quyền riêng tư: Các nhân viên bị ẩn (ví dụ: các vai trò nhạy cảm) bị loại khỏi phản hồi JSON.

13. Xử lý Lỗi & Khả năng Phục hồi

• Kiểm tra vòng lặp: Phát hiện và cảnh báo nếu tìm thấy báo cáo vòng lặp trong dữ liệu.
• Trạng thái trống: Thông báo thân thiện nếu chưa có nhân viên nào được đăng ký.

14. Hiệu năng & Khả năng Mở rộng

• Các sơ đồ lớn sử dụng "Mức độ chi tiết" (LOD) để ẩn avatar khi thu nhỏ ở mức xa.
• Tải gia tăng cho các tổ chức có hơn 1000 nhân viên (dự kiến).

15. Toàn cầu hóa & Bản địa hóa

• Tìm kiếm và các điều khiển UI được bản địa hóa.

16. Khả năng Tiếp cận (a11y)

• Hỗ trợ trình đọc màn hình để tìm kiếm và chọn các nút.
• Chế độ độ tương phản cao cho các kết nối SVG.

17. Khả năng Quan sát & Phân tích

• Theo dõi "Các nhánh được truy cập nhiều nhất" để hiểu các mẫu khám phá nội bộ.

18. Kiểm thử & Chất lượng

• Kiểm thử hồi quy hình ảnh cho bố cục các nút.
• Phân tích hiệu năng cho việc dựng cây lớn.

19. Các Ràng buộc & Giả định

• Giả định mọi nhân viên (ngoại trừ CEO) đều có một managerId hợp lệ.

20. Các Cải tiến Tương lai

• Xuất sang PNG/PDF.
• Quản lý ma trận (báo cáo theo đường chấm).
• Chế độ xem "Du hành thời gian" lịch sử (cấu trúc tổ chức tại ngày X).