Trong hệ thống mã nguồn của dự án (cụ thể tại component KpiCardPremium.tsx), thẻ KPI được thiết kế theo phong cách Glassmorphism (Premium Design) hỗ trợ 5 biến thể (variants) ngữ nghĩa chuẩn mực nhằm truyền tải các trạng thái dữ liệu khác nhau.
Dưới đây là danh sách 5 biến thể của thẻ KPI:
-
primary(Xanh dương)- Mục đích: Hiển thị các chỉ số cốt lõi, thông tin tổng quan mang tính đại diện hoặc thông báo mặc định.
- Thường dùng cho: Tổng số lượng danh mục, Tổng tiền, Số tổng...
- (Xuất hiện ở ảnh đầu tiên: Thẻ "Tổng mã sợi")
-
success(Xanh lá / Xanh ngọc)- Mục đích: Hiển thị các chỉ số mang ý nghĩa tích cực, thành công hoặc đang vận hành tốt.
- Thường dùng cho: Đơn hàng đã giao, Số mã đang hoạt động (Active), Đã thanh toán.
- (Xuất hiện ở ảnh hiện tại: Thẻ "Đang dùng")
-
danger(Đỏ)- Mục đích: Hiển thị các trạng thái mang tính nguy hiểm, báo động hoặc mất mát.
- Thường dùng cho: Lỗi, Ngừng sử dụng, Đã hủy, Công nợ quá hạn.
- (Xuất hiện ở ảnh hiện tại: Thẻ "Ngừng dùng")
-
warning(Vàng / Cam)- Mục đích: Thể hiện các chỉ số mức độ trung bình cần chú ý, rủi ro tiềm ẩn hoặc đang chờ xử lý.
- Thường dùng cho: Hàng sắp hết, Nhắc nhở, Đơn hàng đang chờ duyệt.
-
secondary(Xám / Trắng trong suốt)- Mục đích: Các thông tin mang tính đặc tả bổ trợ, không mang sắc thái sai hay đúng.
- Thường dùng cho: Thông tin phụ, Trạng thái trung lập.
- (Xuất hiện ở các thống kê phụ mờ nhạt làm nền)
Cả 5 biến thể trên đều sẽ thừa hưởng hiệu ứng bo góc mượt, đổ bóng và overlay trong suốt (Glassmorphism) chuẩn hóa đồng nhất trên toàn hệ thống thông qua CSS kpi-card-premium.
#KPICard #ReactJS #UIComponent #PremiumDesign #WebDevelopment #Frontend