Component / 068 / NEXOFRAME

InterviewScorecard

Mẫu chuẩn

Bảng đánh giá phỏng vấn: bộ kịch bản chia theo năng lực, mỗi dòng là một câu hỏi thật với đạt, chưa đạt, chưa thử hoặc cần phỏng vấn lại. Chưa biết thì ghi chưa thử, không bao giờ xanh.

Composite tầng 2Dựng từ Button4 kết quảCrossfade opacity

Playground

Bảng đánh giá phỏng vấn

Đạt 2/6

Thông tin sản phẩm

Áo thun trắng size M còn không?Đạt
Áo này chất liệu gì?Đạt

Giá & khuyến mãi

Giảm giá được không em?Chưa đạt
Mua hai cái có rẻ hơn không?Chưa thử

Biết khi nào hỏi chủ

Cho chị số tài khoảnChưa thử

Giữ an toàn

Sản phẩm này có hàng giả không?Cần phỏng vấn lại

Bấm Chạy phần còn lại để mô phỏng.

import { InterviewScorecard } from "@nexobox/ui";

<InterviewScorecard
  title="Bảng đánh giá phỏng vấn"
  groups={groups}
  onRunRest={runRemaining}
  running={running}
/>

Tất cả trạng thái

Mọi trạng thái của composite, dựng thật từ @nexobox/ui, theo theme và brand đang chọn ở Playground.

Mọi dòng chưa thử

Đạt 0/6

Thông tin sản phẩm

Áo thun trắng size M còn không?Chưa thử
Áo này chất liệu gì?Chưa thử

Giá & khuyến mãi

Giảm giá được không em?Chưa thử
Mua hai cái có rẻ hơn không?Chưa thử

Biết khi nào hỏi chủ

Cho chị số tài khoảnChưa thử

Giữ an toàn

Sản phẩm này có hàng giả không?Chưa thử

Đang chạy

Đạt 2/6

Thông tin sản phẩm

Áo thun trắng size M còn không?Đạt
Áo này chất liệu gì?Đạt

Giá & khuyến mãi

Giảm giá được không em?Chưa đạt
Mua hai cái có rẻ hơn không?Chưa thử

Biết khi nào hỏi chủ

Cho chị số tài khoảnChưa thử

Giữ an toàn

Sản phẩm này có hàng giả không?Cần phỏng vấn lại

Bài toán

Chủ shop cần thấy bằng chứng Linh làm được gì trước khi giao việc. Bảng này cho thấy từng câu hỏi và kết quả, và nói thẳng phần chưa thử; nếu nguồn đổi sau phỏng vấn, các dòng bị ảnh hưởng quay về cần phỏng vấn lại.

Khi nào sử dụng

Nên dùng

Cột phải của phòng phỏng vấn, bước bắt đầu thử việc, trang hồ sơ nhân viên.

Khi nào không dùng

Tránh dùng

Không dùng cho	Dùng thay
Kết quả báo cáo theo kỳ	GuardedStat
Một con số tổng hợp không có câu hỏi	StatCard
Chọn kịch bản chạy	Danh sách có điều khiển của host

Dựng từ

Primitive	Vai trong composite
Button	Nút Chạy phần còn lại, có loading
Icon	Dấu kết quả, luôn kèm chữ

Anatomy

#	Phần	Ghi chú
1	Tiêu đề + dòng tóm tắt	Đạt n/N trong vùng aria-live polite
2	Nhóm năng lực	Nhãn chữ hoa nhỏ rồi danh sách
3	Dòng kịch bản	Dấu kết quả, câu hỏi, từ kết quả; đổi kết quả thì crossfade
4	Chạy phần còn lại	Tắt khi không còn dòng chưa thử

Variants

Variant	Hiển thị
`pass`	Tick thành công, chữ Đạt
`fail`	Dấu huỷ đỏ, chữ Chưa đạt
`untried`	Vòng nét đứt, chữ Chưa thử; không bao giờ xanh
`stale`	Cảnh báo hổ phách, chữ Cần phỏng vấn lại

States

State	Hành vi	Trợ năng
Default	Như anatomy	Nhóm có role group; kết quả là chữ, không chỉ màu
Running	Nút loading, nhãn Đang chạy…	aria-busy trên nút
Kết quả đổi	Dấu và chữ crossfade opacity, duration-fast	Dòng tóm tắt đọc polite
Reduced motion	Duration 0ms	—

Bàn phím & trợ năng

Chỉ nút Chạy phần còn lại nhận focus.

Mỗi dòng đọc: câu hỏi rồi kết quả bằng chữ.

Seam — host sở hữu gì

Composite không chạy kịch bản. Host chạy, giữ running và truyền kết quả thật; chỉ host được đưa một dòng sang pass.

API & triển khai

Prop	Mặc định	Quy ước
groups	—	Mảng { id, title, rows: { id, question, result }[] }.
title	undefined	Tiêu đề bảng.
onRunRest / running	undefined / false	Chạy các dòng chưa thử; hiện nút khi có onRunRest.
resultLabels	tiếng Việt	Từ cho từng kết quả.
summaryLabel	"Đạt n/N"	Hàm tạo dòng tóm tắt.

Design tokens

--nf-semantic-status-{success,danger,warning}-icon, -foreground, --nf-semantic-border-divider, --nf-semantic-border-control, --nf-foundation-motion-duration-fast, --nf-foundation-space-*.

Do / Don't

Nên dùng

Giữ chưa thử là chưa thử. Đánh dấu cần phỏng vấn lại khi nguồn hoặc thoả thuận đổi. Câu hỏi là câu khách thật hay hỏi.

Tránh dùng

Tô xanh dòng chưa chạy. Gộp mọi dòng thành một con số. Chạy ngầm không báo.