fbbd361929
All checks were successful
Deploy SOLUTION_ERP / build-deploy (push) Successful in 3m14s
UAT feedback 2026-05-15 sau Run #212 deploy: bro request layout DẠNG TABLE tận dụng hết width thay vì stack vertical panel-per-NV (visual rộng theo chiều ngang). Refactor WorkflowCard structure → 4-col HTML table với rowSpan: Table cols: | Bước (Phòng) | Cấp | NV duyệt | Quyền duyệt | | rowSpan=N | rowSpan=M | per-NV | grid 2-col 7 checkbox | - Bước column: rowSpan = total NV trong Step. Header tone đậm Step palette. - Cấp column: rowSpan = N NV cùng Order (OR-of-N). Badge ring Cấp palette. Nếu N > 1: hint "N NV OR (chỉ cần 1 NV duyệt)". - NV duyệt column: 1 row per NV slot. Tên + email gray. - Quyền duyệt column: grid grid-cols-1 md:grid-cols-2 với 7 checkbox label: - 4 return mode (col-span-1): "Trả về 1 Cấp trước" / "Trả về 1 Bước trước" / "Trả về Người chỉ định" / "Trả về Drafter (mặc định)" - 3 long label (col-span-2): "Cho phép chỉnh sửa Section 2 (Hạng mục/NCC/Báo giá) lúc đang duyệt" / "Cho phép chỉnh sửa Section ngân sách lúc đang duyệt" / "Cho phép duyệt thẳng Cấp cuối khi đang duyệt" Color coding 2 layer preserved: - Step (Bước) bg + headerBg: blue/purple/emerald/amber/pink cycle (5 màu) - Cấp badge: violet/sky/teal/orange/rose cycle (5 màu) - NV + Quyền duyệt cell: bg-white/80 (lighten Step tone, vẫn show through) Helper extracted `buildStepRows(step)` build flat Row[] với rowSpan metadata (isFirstInStep + isFirstInCap + rowSpanStep + rowSpanCap). Drop StepBlock + NvPermissionPanel components (chuyển inline table cells). colgroup width hint: Bước=160px / Cấp=100px / NV=240px / Quyền duyệt=1fr (rest). Tại 1280-1366px viewport (laptop nhỏ Plan AA sidebar widen) Quyền duyệt cell ~400-500px → grid 2-col fit 7 label OK. Verify: - npm run build fe-user PASS clean 0 TS err, 522ms, 1907 modules - Bundle 1284.22 KB (+1.31 KB from baseline) Em main solo CSS/UX redesign (criteria #2 + #4 Implementer REFUSE — UX layout decision rowSpan grouping + cell distribution decision). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Oxc
- @vitejs/plugin-react-swc uses SWC
React Compiler
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Remove tseslint.configs.recommended and replace with this
tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
tseslint.configs.stylisticTypeChecked,
// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])