169459e66f
All checks were successful
Deploy SOLUTION_ERP / build-deploy (push) Successful in 3m0s
User Session 20 turn 5: 2 yêu cầu UX rõ ràng chỗ nhập tiền.
FE-only mirror fe-admin + fe-user.
1. NCC grid cell "Số tiền" → button visual rõ ràng cho user biết là chỗ nhập:
- Trước: <td onClick> trông như text cell (chỉ hover bg → user không
biết click được)
- Sau: <button> trong td:
* Empty (chưa nhập): border-dashed border-slate-300 bg-slate-50
text-slate-400 + label "+ Nhập số tiền" + hover brand
* Filled: border-solid border-slate-300 bg-white font-semibold + số tiền
+ suffix " đ" + hover brand
* Winner: border-emerald-300 bg-emerald-50 text-emerald-700
- Read-only mode: hiển thị <div> số tiền (không button)
- Drop `cellHover` var không còn dùng
2. Hạng mục header gộp 3 stat (KL / ĐG ngân sách / Thành tiền NS) → 1 ô
"Số tiền ngân sách" lớn hơn (text-base font-semibold + suffix đ):
- Trước: 3 columns hiển thị KL + ĐG + TT (kỹ thuật, user không cần thấy)
- Sau: 1 column "Số tiền ngân sách: X đ" — duy nhất số quan trọng
- "NS link Δ" comparison column giữ (nếu có Budget link FYI)
3. DetailDialog rút gọn 11 input → 3 input chính:
- Trước: groupCode + groupName + itemCode + noiDung + donViTinh +
KL ngân sách + KL thi công + đơn giá + thành tiền auto + ghi chú (10
input grid 3 cols)
- Sau: Tên hạng mục (noiDung) + Số tiền ngân sách (VND format + suffix
đ + hint) + Ghi chú (3 input vertical)
- Helper setBudgetAmount: user nhập 1 số → set cả donGia + thanhTien
(KL=1 ngầm). BE giữ schema 3 field backward compat.
- Form state default đổi: groupCode="01" groupName="Hạng mục chính"
donViTinh="gói" KL=1 (consistent với Chunk A BE seed)
- Drop updateAndRecalc helper (không còn auto-calc KL × ĐG)
KHÔNG đụng schema BE.
Verify:
- npm run build × fe-admin pass
- npm run build × fe-user pass
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...
},
},
])