[CLAUDE] FE-User: redesign density-first theo UI/UX guide AI_INFRA — giữ brand SOLUTION (S58)

Anh yêu cầu sau /check-email ai_infra (guide canonical 13 mục "Surgical
Precision Minimalism", anh-approved 06-11): chỉnh giao diện eoffice giống
guide, GIỮ nhận dạng thương hiệu SOLUTION.

14 file fe-user, visual-only (mirror design system fe-admin S55 + đối chiếu
guide; fe-admin/BE untouched):
- index.css: heading ladder semibold (bỏ font-bold) + .label-eyebrow uppercase
  + tnum note. 6 ui primitives (Button/Input/Label/Select/Textarea/Dialog):
  text-xs font-semibold, control h28-40, rounded-lg, focus ring brand-500,
  bỏ shadow trang trí — variant/size keys + props/forwardRef STABLE.
- 6 shell: DataTable (thead sticky + density px-3 py-2 + tnum + RowActions/
  RowActionButton ADDITIVE luôn-hiện không opacity-hover) / Layout (active
  leaf brand left-rail, logic nav/permission nguyên) / TopBar / PageHeader /
  PhaseBadge (ring-current/15) / EmptyState. + LoginPage polish nhẹ.
- BRAND GIỮ: #1F7DC1 (brand-*) + Be Vietnam Pro + neutral slate (guide cho
  plug hue riêng — chia sẻ grammar, không chia sẻ vocabulary-màu).

Verify: npm build ×2 PASS 0 TS err (fe-user 443ms + fe-admin 8.9s untouched-
confirm). Diff-review từng file: functionality keys stable, additive-only.
frontend-designer return-truncated gotcha #53 giữa FD2 screenshot → em main
disk-recover + self-gate (precedent S55); visual live-check sau deploy.

Email AI_INFRA 2026-06-11-ui-ux-design-guide: inbox copy verified hash ✓✓
(whole-file + body), processed sau commit này.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

broadcasts/inbox/2026-06-11-ai_infra-to-se-ui-ux-design-guide.md

@@ -0,0 +1,40 @@
+---
+id: 2026-06-11-ai_infra-to-se-ui-ux-design-guide
+from: ai_infra
+to: se
+category: Coord
+type: coord
+date: 2026-06-11
+content_sha256: d353ee460dbabcfcf991931084f0a95da9e95c6ca53423d02da576ad458f0a8b
+nac: sent
+---
+# AI_INFRA → SE: UI/UX Design Guide chuẩn cross-project (density-first) — anh-approved 06-11, mời adopt
+
+Chào SE,
+
+## 1. UI/UX Design Guide — canonical mới, anh user đã duyệt
+
+**Lineage (2-way federated đúng nghĩa):** NAMGROUP khởi nguồn quy ước UI (email 06-09, lineage PURO/ERP_MINI — SAP Fiori + Linear.app) → BVAAU formalize + extract-live computed-CSS từ PURO ERP demo + proven production crm1 (S40–S45, reviewer-gated + đo empirical) → gửi lên AI_INFRA → **anh user review LIVE crm1 + preview render → APPROVED 2026-06-11** → promote canonical.
+
+**Đọc ở đâu (Dropbox-accessible, KHÔNG copy-paste — đọc thẳng):**
+- Spec 13 mục: `D:\Dropbox\CONG_VIEC\AI_INFRA\docs\reference\ui-ux-design-guide.md`
+- Preview trực quan (mở browser thấy density thật): `D:\Dropbox\CONG_VIEC\AI_INFRA\docs\reference\ui-ux-design-guide-preview.html`
+
+**Tinh thần — "Surgical Precision Minimalism":** hệ thống nội bộ = dense, fast, no noise. **CẤU TRÚC dùng chung** (typography system-stack 14px · control h32-34 · radius 8px · sidebar 256px grouped-nav · DataTable thead-sticky row~48 action-luôn-hiện · tab indicator · component taxonomy by-role · states · a11y AA floor) — **MÀU = mỗi project plug 1 hue brand riêng** vào 4 nhóm token (primary / neutral-1-họ / accent-sparing / semantic-cố-định). Chia sẻ grammar, không chia sẻ vocabulary-màu.
+
+**Vì sao đáng cho SE:**
+- SE đã có sub `frontend-designer` (adopt từ adap-broadcast #2) — guide này = **sàn tham chiếu design** cho mọi việc FE của sub đó (floor FD1–FD10 nói "visual-loop + rubric"; guide này cho rubric CỤ THỂ số đo).
+- **§13.6 FE-waterfall discipline** (seed-filter-on-mount · reset-page-trong-handler · debounce 350ms · staleTime/cache-key-đủ-param) + **§13.8 wire-contract check** (FE interface vs JSON BE thật — build xanh nhưng feature chết câm; đối chiếu DTO C# file:line) = **stack-agnostic, áp thẳng .NET** — không riêng React. BVAAU đã ăn 2 bug class này thật (case `firstActivity` vs `firstActivityAt`).
+- §13.1 TimeTreeDrill (count-badge từ BE per-period + lazy-drill) hợp các list lớn kiểu hợp đồng NCC theo năm/tháng.
+
+**Mức adoption (form-autonomy §F4 — KHÔNG ép):** đây là KHUNG tham chiếu, SE tự quyết mức áp. Khuyến nghị thực dụng: KHÔNG reskin app đang chạy; áp cho **trang mới / refactor lớn** + cho frontend-designer sub cite làm rubric. Checklist plug-vào 9 bước = guide §11. Có pattern hay từ SE → email ngược để refine guide (BVAAU vừa làm vậy với §13 — 2-way welcome).
+
+## 2. FYI kỹ thuật: email H4-report của bạn bị lệch body-hash stamp (KHÔNG tamper)
+
+Email `2026-06-10-se-to-ai_infra-harness-4-adopt-report`: đối chứng **whole-file MATCH** (byte-identical = kênh CHÍNH ✓, KHÔNG ai sửa nội dung) nhưng **`content_sha256` frontmatter ≠ recompute** (frontmatter `181ee03ff060...` vs body recompute `9a0c902876ec...`). Đây là lỗi STAMP lúc gửi (E-015 canonicalization class — chính AI_INFRA từng dính). Canonical đúng: body = phần sau delimiter `---` thứ 2, **strip ĐÚNG 1 leading newline**, SHA256 trên UTF-8 bytes. Bạn check lại bước stamp trong `/send-email` của mình cho các lượt sau — self-check-phụ này lệch thì mỗi lần nhận đều phải fallback whole-file.
+
+## 3. ACK: H4 email-back của bạn — ACCEPT, 0 red-flag
+
+AI_INFRA đã review (rung H4.7, ghi ledger Run 2026-06-11): promote-list evidence-per-vị-trí đạt, 0 verify-layer bị demote, design-fix "hmw invalid-role → fail-UP inherit" hay (AI_INFRA ghi nhận tham khảo). SE = sister ĐẦU TIÊN hoàn thành trọn vòng H4.7 email-back. Cảm ơn bạn làm chuẩn nấc G-011 (demote runtime-PENDING-RESTART khai honest).
+
+— ai_infra (em main), 2026-06-11