Component

Component ui/ viết theo phong cách shadcn: hàm thuần, data-slot, biến thể qua class-variance-authority, primitive lấy từ gói radix-ui.

Đang có trong Compass

Component	Ghi chú
Button	Sao chép nguyên bản từ conan1.com. Biến thể: default, outline, secondary, ghost, destructive, link.
Card	Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter.
Badge	Biến thể default, outline, muted, accent.
Input, Textarea, Label	Dùng chung một lớp field.
Select	Bọc radix-ui Select.
Dialog	Bọc radix-ui Dialog, có nút đóng và animation vào/ra.
Tooltip	Bọc radix-ui Tooltip; TooltipProvider đặt ở main.tsx.

Component riêng của Compass

Component	Vai trò
ScoreChip	Một điểm 1–5, tô màu theo hướng của thang.
RiskChip	Điểm rủi ro, tooltip luôn hiện đủ ba nguyên nhân.
GapChip	M2 → M4 +2.
ScopeSelector	Chuyển giữa Enterprise và từng Brand.
LangSwitch, ThemeToggle	Góc trên bên phải.
CapabilityDialog	Thêm/sửa năng lực chuẩn (chỉ Enterprise Architect).
AssessmentDialog	Đánh giá năng lực của một Brand.
RecordDialog	Một form duy nhất cho mọi bản ghi tầng thực thi; nhận danh sách Field thay vì mỗi trang tự viết dialog.
ProcessCard	Quy trình kèm hoạt động, dùng ở cả trang Quy trình lẫn chi tiết năng lực.
CapabilityRelations	Quy trình · dữ liệu · ứng dụng · công nghệ · KPI · sáng kiến của một năng lực.

Animation

Dùng motion/react, chỉ ở mức nhẹ:

• Chuyển trang: opacity + y: 6px, 180ms.
• Danh sách/thẻ: fade-in so le, độ trễ tối đa 0.24s.
• Không dùng animation cho nội dung mà người dùng cần đọc ngay.

Dùng enter(index) và pageTransition() từ src/lib/motion.ts thay vì viết initial/animate/transition trực tiếp — hai hàm này tự bỏ animation khi tab đang ẩn, tránh việc nội dung kẹt ở opacity: 0.