[CLAUDE] FE-Admin: redesign Phase 1 — density-first design system (NAMGROUP-ref, giữ brand)

Tham khảo NAMGROUP density conventions, GIỮ brand #1F7DC1 + Be Vietnam Pro.
- index.css: density heading ladder (semibold, drop font-bold) + .label-eyebrow util
- 6 UI primitives (Button/Input/Label/Select/Textarea/Dialog): text-xs font-semibold, py-1.5 ≤36px, rounded-lg, brand focus-ring
- 6 shell (DataTable sticky-thead+RowActions/Layout brand-rail/TopBar/PageHeader/PhaseBadge/EmptyState)
- DashboardPage flagship: KPI cards + brand-tinted icon chips + uppercase labels

Visual-only — functionality unchanged (Button variant/size keys stable 51 call-sites, props/forwardRef intact). build 0 TS err. reviewer PASS 0 blocker (2 minor slate-400 hint a11y defer). fe-admin only (fe-user mirror = Phase 3). Dashboard live-visual blocked by dev auth-rig → xem live sau deploy.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

.claude/agent-memory/frontend-designer/MEMORY.md

@@ -24,6 +24,7 @@
   - Run pattern: `python <skill>/scripts/with_server.py --server "npm run dev" --port 8080 --timeout 90 -- python my_shot.py` (helper starts/stops dev). Write my_shot.py in fe-user dir, **delete after** (throwaway, not app code).
   - Screenshot: `browser.new_page(viewport={w,h}, device_scale_factor=2)` → `page.screenshot(full_page=True)` → **Read PNG** to NHÌN.
 - 🪲 **2 Vite-dev gotchas (cost me 2 failed runs):** (1) `wait_until="networkidle"` NEVER fires — Vite HMR websocket stays open → use `domcontentloaded` + `wait_for_selector("form")`. (2) FIRST goto after cold server triggers Vite dep-optimize compile (>15s) → add a **warm-up goto with 60s timeout** before the viewport loop, else first viewport times out.
+  - 🪲 (3) **Authed-page (Dashboard…) S55 BLOCKER:** `dotnet run` API binds **HTTPS :5443** + HTTP :5444 (Program.cs overrides `ASPNETCORE_URLS`), nhưng `vite.config.ts` proxy target = `http://localhost:5443` → protocol mismatch → /api login fail → kẹt /login. ĐỂ chụp authed: temp-set proxy `https://localhost:5443` (`secure:false` sẵn) + restart Vite + **REVERT sau**; HOẶC run API HTTP-only. + Dashboard = ProtectedRoute (cần JWT) → Playwright login THẬT (fill `admin@solutions.com.vn`/`Admin@123456` + submit + wait url≠/login). S55 rig này chặn cả designer + em main → **đáng tin nhất = deploy prod rồi login thật xem authed pages** (đừng vật lộn dev-rig cho authed screenshot).
 - Fallback khi stack chưa chạy: static component preview / screenshot `/login` — **KHÔNG bỏ soi** (FD2 cấm ship-unseen).
 
 ## Component inventory (built/verified — chống reinvent)
@@ -35,4 +36,5 @@
   - Minor noted (NOT fixed, out of bounded scope): 2 `blur-3xl` blobs barely visible at 1440 = render cost ~0 payoff; eyebrow `tracking-[0.2em]` heavy. Candidates if login redesign requested.
 
 ## Activity log
+- **S55 (2026-06-09) Phase-1 fe-admin redesign — density-first NAMGROUP-ref, KEEP brand [em main proxy — designer truncated gotcha #53 trước build/MEMORY]:** Applied 14 file: index.css (density heading ladder semibold + `.label-eyebrow` 11px uppercase slate-500 + drop font-bold) + 6 ui primitives (Button `text-xs font-semibold rounded-lg` h-7/8/10 + brand focus-ring/70 — variant/size keys STABLE 51 call-sites) + 6 shell (DataTable/Layout/TopBar/PageHeader/PhaseBadge/EmptyState) + DashboardPage (KPI card `rounded-lg border-slate-200` + `bg-brand-50` icon chip h-7w7 + uppercase tracking-wider label + brand accent bar). Brand #1F7DC1 + Be Vietnam Pro KEPT (NAMGROUP density = mượn cấu trúc, brand=ours). `npm run build` 0 TS err. **Visual loop BLOCKED** by authed-rig gotcha (3) above → CHỈ chụp /login (polished, on-brand). em main recover: build ✓ + login-visual ✓ + diff-review (index.css/Button/DashboardPage high-quality, brand-consistent). User chọn commit+deploy → login prod xem authed. Tag [s55, phase1-redesign, density-namgroup, keep-brand, authed-rig-blocked].
 - **S47 (2026-06-02) FD2 RIG VERIFIED ✅** — first real spawn. Ran full FD2 loop end-to-end on fe-user `/login`: read DS (Tailwind v4 CSS-first, corrected stale config-path assumption) → started Vite via `with_server.py` → Playwright screenshot 375+1440 → Read PNGs → FD4 critique → 1-line contrast fix → re-screenshot confirmed → `npm run build` 0 TS error. Closes adap-report `2026-06-02-Agent-frontend-designer-floor` FD2 runtime proof. 2 Vite gotchas captured above. Loop is REAL, not theoretical.

.claude/agent-memory/reviewer/MEMORY.md

@@ -57,6 +57,8 @@ Adversarial pre-commit reviewer SOLUTION_ERP. Read-only verify + live curl prod
 
 ## 📅 Recent activity (FIFO — older → archive/git)
 
+- **2026-06-09 (S55 Phase-1 FE visual redesign pre-commit — PASS, 0 blocker, verdict-first survived):** 14 fe-admin files VISUAL/CSS-only (NAMGROUP density + SOLUTION brand). **Independent re-verify GREEN:** `npm run build` fe-admin = ✓ 607ms, 1945 modules, 0 TS err (only PRE-EXISTING warns: CSS @import-order + >500KB chunk + INEFFECTIVE_DYNAMIC_IMPORT realtime.ts — git-confirmed none introduced, @import lines untouched in diff). **Regression Cat1 ALL preserved:** Button cva variant keys (primary/secondary/outline/ghost/danger) + size (sm/md/lg) STABLE — only Tailwind class VALUES swapped, defaultVariants intact (51 call-sites safe); Input/Select/Textarea/Label = `forwardRef`+`...props`+`className` passthrough unchanged, only `cn()` literal; Dialog `{open,onClose,title,children,footer,size}` destructure + sm/md/lg→max-w map intact (+aria-label="Đóng" = a11y GAIN); DataTable `Column<T>` type UNCHANGED (diff starts after type def) — render/sortable/align/width + sort + Pagination props intact, RowActions/RowActionButton purely ADDITIVE; Layout MenuLeaf className-only (brand left-rail via before:), nav/resolver/permission-filter/routing untouched; PhaseBadge phase→ContractPhaseColor/Label map intact; PageHeader/EmptyState/TopBar pure class. DashboardPage data-flow (useQuery/navigate/fmtMoney/BarChart/PhaseBadge) preserved, STAT_TONE+SectionLabel additive, +`cn` import only. **Brand Cat3:** Be Vietnam Pro KEPT (grep: @import:3 + --font-sans:22 + font-family:34 all unchanged — initial blocker RETRACTED after grep); only brand-/slate/semantic colors, 0 off-brand hex/indigo. **a11y:** focus-visible rings present everywhere (brand-500); Label self-documents slate-500 (~4.6:1 AA-pass) chosen over NAMGROUP zinc-400. **Tailwind v4 (^4.2.3)** — `ring-current/15`, `shadow-xs`, slash-opacity all valid v4. **noScopeCreep:** exactly 14 fe-admin, 0 fe-user, 0 BE/src (only noise = frontend-designer/MEMORY.md agent file). **2 MINOR (non-block, a11y-floor):** `text-slate-400` on white for small hint/empty text (DashboardPage hints ~line 50/64, DataTable empty-cell, EmptyState was-400-stays-400) ≈3.5-4:1 — borderline-fail WCAG-AA for <18px, but these are de-emphasized hints not primary content + PRE-EXISTING tone (redesign mostly UPGRADED slate-400→500 on EmptyState desc + Pagination); accept for hint role, revisit if audit. **Learned:** font-drop scare = grep the 3 load-bearing lines (@import/--font-sans token/font-family) BEFORE flagging — diff hunk lower in file ≠ font removed; emit PASS/FAIL line-1 FIRST (gotcha #53 truncation survival, mirror S51/S55). **surprise:** Tailwind v4 `shadow-xs` is real (v3's shadow-sm renamed) — don't flag as typo; v4 slash-opacity on currentColor (`ring-current/15`) is valid. Verdict PASS — safe commit+deploy. Tag [s55-fe, visual-redesign, namgroup-density, verdict-first, regression-clean, slate400-minor].
+
 - **2026-06-09 (S55 master-data import pre-commit — PASS [em main proxy — reviewer return truncated gotcha #53 before verdict, mirror S51]):** Reviewed Mig 48 `AddProjectMasterFields` (Project +4 nullable col Year/Investor/Location/Package) + `SeedRealMasterDataAsync` (62 Project+71 WorkItem+3 Supplier per-code idempotent ungated) + FE ProjectsPage form +4 ×2 app. Reviewer ran 293s/31-tools nhưng truncated mid-thought (nghi cached-binary 2.76s build → muốn forced clean rebuild + Project tests). **Em main COMPLETED đúng việc nó định làm:** `dotnet test SolutionErp.slnx` = clean rebuild + **216 PASS** (58+158, 0 fail/skip) → giải tỏa cached-binary concern (test = fresh build). 10 dims GREEN: Mig Up=4 AddColumn/Down=4 DropColumn reversible + 3-file; seed 62/71/3 0-dup; per-code idempotent ungated line 118 (reaches prod); FLOCK01 collision skip-demo-wins; FE↔BE 4 nullable both sides (tránh S51 mismatch); test-file compile-fix +4 null legit; gotcha #57 index untouched; **runtime Dev proof** (data landed, Investor col populates). 0 rogue write (read-only respected, git clean of code). **Learned:** long adversarial review return truncates (gotcha #53) → reviewer nên emit PASS/FAIL verdict SỚM (trước deep re-verify) để sống sót truncation; em main complete được đúng pending-check (clean dotnet test) deterministic. Verdict PASS — safe commit. Tag [s55, master-import, em-main-proxy-truncate, runtime-dev-proof].
 
 - **2026-06-08 (S54 ItTicket reassign authz Admin-OR-dept-IT cross-stack pre-commit — PASS, 0 blocker, gotcha #44 disarmed correctly):** Controller `/assign` hạ `[Authorize(Roles="Admin")]`→`[Authorize]` any-auth; authz moved INTO `AssignItTicketHandler` (Admin-OR-IT Forbidden + assignee-must-IT Conflict) + new `GetAssignableItStaffQuery` capability endpoint. **Independent re-verify GREEN:** `dotnet test SolutionErp.slnx` = **216 PASS** (58 Dom + 158 Infra, Failed:0 Skipped:0, +13 matches 203→216 claim exactly) · fe-admin + fe-user `tsc -p tsconfig.app.json --noEmit` BOTH exit 0 clean. **#2 CHÍ MẠNG role-string "Admin" CONFIRMED REAL (full chain traced):** `AppRoles.Admin="Admin"` literal (AppRoles.cs:5) → SeedRolesAsync `Name=roleName` (DbInit:1485) so DB Role.Name=="Admin" → Identity GetRolesAsync returns NAMES → JwtTokenService:32 `new Claim(ClaimTypes.Role, r)` → CurrentUserService:30-31 `FindAll(ClaimTypes.Role)` → `cu.Roles.Contains("Admin")` CORRECT. "QTV" (DbInit:1458 RoleLabels) = ShortName DISPLAY label only = decoy. Program.cs JWT sets NO `RoleClaimType` override (ClaimTypes.Role symmetric write/read). Same proven pattern as every existing Roles="Admin" endpoint. **Bypass airtight:** controller any-auth → handler sole gate; guard `if(!isAdmin && !(itDeptId is Guid mine && myDeptId==mine)) Forbidden` fail-CLOSED when itDeptId null (non-admin blocked; admin still passes role-branch). `Department.Code=="IT"` IS seeded (DbInit:2082 "Phòng CNTT") so live non-null. **Capability 0-leak:** non-auth → `{canReassign:false, staff:[]}` (no name leak), `[Authorize]` any-auth → 0 silent-403. **Defense-in-depth intact:** FE nút `{canReassign&&}` but PUT still hits handler guard → 403/409 → `onError: toast.error(getErrorMessage(err))` surfaces (NOT swallowed). **FE SHA256 page 4bcaf2f IDENTICAL both apps** (types.ts correctly NOT identical — admin AttendanceReportDto vs user HrDashboardDto diverge below; added AssignableStaff block byte-identical); old fe-user page was read-only kanban (NO app-specific logic lost — diff purely additive); fe-user has all imports (apiError.getErrorMessage, Dialog size/footer/onClose props match, Select passthrough, sonner). **Test 13-fact NOT happy-path:** Case5 Forbidden side-effect assert `AssignedToUserId.Should().BeNull()` (red-able by contrast vs Case6/7 same-handler success), Case3/3b empty-staff 0-leak, Case8 Conflict msg-exact. prove-by-contrast ĐỦ CHẶT (partition non-IT-throws vs IT/admin-succeed identical handler). **1 MINOR defer:** assignee-must-IT NEW vs old handler (git HEAD: old allowed admin→ANY active user); itDeptId-null → even admin Conflict — fail-closed acceptable+spec-requested, cosmetic (prod IT-dept seeded). **Learned:** authz role-string review = trace FULL chain const→seed Name→GetRolesAsync(names not codes)→Claim(ClaimTypes.Role)→reader AND grep JWT cfg for `RoleClaimType` override (none=symmetric) — display-code (QTV) in RoleLabels/ShortName dict = classic decoy. **surprise:** moving authz controller→handler is the CORRECT gotcha #44 fix (not a smell) when paired with BE-computed capability flag for FE gating + handler as sole gate. Verdict PASS — safe commit. Tag [s54, it-ticket-reassign-authz, gotcha44-disarmed, role-string-chain-verified, cross-stack-clean].