Hướng dẫn mockup app — bổ sung riêng cho app-longdo-erp¶
Kế thừa toàn bộ chuẩn M3 ở .claude/skills/thiet-ke-mockup-app (seed indigo #4F46E5
từ docs/longdo-erp/giao-dien/huong-dan-mockup.md). Mục này chỉ khai báo phần bổ
sung riêng cho module Chấm công (app nội bộ), để không còn là "hardcode ngoài
chuẩn" khi review.
Bộ màu ngữ nghĩa mở rộng — trạng thái chấm công¶
Bộ 4 màu nền primary/error/success/warning không đủ phân biệt các trạng thái chấm
công cần hiển thị đồng thời trên cùng một màn (lịch tháng, thống kê, danh sách giải
trình). App Chấm công dùng thêm các token sau, khai trong tailwind.config mỗi file:
| Token | Giá trị | Dùng cho |
|---|---|---|
| ontime / ontimeC | #1A7D44 / #CBEBD7 | Đủ công — chữ / nền nhạt |
| late / lateC | #C2410C / #FBDFCD | Đi muộn / về sớm — dùng ở các màn thống kê (nền nhạt + chữ đậm) |
| cam | #EA580C | Đi muộn / về sớm — sắc cam sáng hơn, dùng ở màn Giải trình công (icon/nhãn đơn sắc, không có biến thể nền nhạt riêng). Cùng ý nghĩa với late nhưng khác tông — không gộp chung giá trị, mỗi nhóm màn giữ đúng token của mình. (Cũng khai sẵn ở cham-cong.html/giai-trinh-cong-form.html để dự phòng nhưng hiện chưa dùng tới ở 2 màn đó.) |
| early / earlyC | #9A6B00 / #F7E9BE | Gộp chung nhóm đi muộn/về sớm ở một số màn thống kê |
| missing / missingC | #0F766E / #CCEBE6 | Thiếu 1 lần chấm (vào/ra) — teal |
| vang / vangC / vangD | #EAB308 / #FCEEC0 / #854D0E | Nhóm vàng dùng ở lịch/thống kê — nền nhạt vangC, chữ đậm vangD |
| absent / absentC | #B3261E / #F7DAD7 | Chưa chấm công — đỏ (alias của error) |
| overtime / overtimeC / tangca | #7C3AED / #EDE9FE | Tăng ca — tím |
Quy tắc dùng: luôn tham chiếu bằng tên token đã khai (text-vangD, text-early…),
không hardcode hex rời (text-[#...]) trùng giá trị token — tránh một màu có 2 mã hex
khác nhau trong cùng file. Badge cùng một nhãn trạng thái (vd "Chờ duyệt") phải dùng
cùng một cặp lớp bg-*/opacity text-* ở mọi nơi xuất hiện trong màn, kể cả giữa danh
sách và bottom-sheet chi tiết.