← Tất cả kits /
Wave UI Kits Round 2 · Agent C
5 Components
Avg 106.7 / 128 · 29 state demos

Cross-cutting components

Mỗi component có 4-7 state files (default · loading · empty · error · success · ...) + spec.md mô tả props/states/AC. Embed trong screens của kits khác (kiteclass-pro v2 · kiteclass-parent · kiteclass-teacher · kitehub-pro v2 · ai-branding-wizard v2).

G2

Attendance Roster

Mark P / V / M / L per student · save bar · 5 states.

default · loading · empty · error · success · spec
G5

Payment Method Selector

VNPay · MoMo · ZaloPay · Bank · Cash · QR · 6 states.

default · loading-qr · qr · expired · success · retry · spec
G6

Invoice Detail

VN tax format · line items · VAT · print-friendly · 6 states.

default · loading · pending · overdue · paid · print · spec
G7

Parent Invite

Email + token + Zalo OA share · 6 states.

sender · redeem · expired · already · zalo · success · spec
G12

Bulk Actions Bar

Sticky multi-select bar · Export CSV · Archive · Assign · Delete · 6 states.

default · selecting · confirm · running · done · cross-page · spec
G1 · R3

Bulk Import Drop-zone

CSV upload · job tracker · 487/500 partial-success · 5 states · 108.2/128.

→ All states
G3 · R3

Gradebook Entry Grid

VN 10-point scale · cell editing · bulk paste from Excel · 6 states · 107.7/128.

→ All states
G4 · R3

Class Schedule Manager

Recurring rules · conflict warning · VN week-start Monday · 5 states · 107.2/128.

→ All states
G8 · R3

Attendance Calendar

Teacher month-view · day-detail popover · 30-day perfect streak · 4 states · 107.8/128.

→ All states
G9 · R3

Instance Lifecycle Status

6-state machine: NOT_STARTED → INITIALIZING → GENERATING → DEPLOYED ⇄ REGENERATING + FAILED · 108/128.

→ All states
G10 · R3

Payment Status Timeline

VN currency 1.500.000đ · pending/paid/partial/overdue/refunded · 5 states · 107/128.

→ All states
G11 · R3

Theme Live Preview

Brand color picker · light/dark morph · mobile preview · WCAG warning với auto-suggested fixes (reflexive coverage) · 5 states · 108/128.

→ All states

Spec docs (`spec.md`): TypeScript-ish props · state machine · accessibility · VN UX · used-by mapping. Đầy đủ chi tiết tại README ui_kits/ và dossier/04-component-gaps.md.