Files
solution-erp/fe-user
pqhuy1987 e959f72916
All checks were successful
Deploy SOLUTION_ERP / build-deploy (push) Successful in 4m30s
[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>
2026-06-11 13:51:10 +07:00
..

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:

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...
    },
  },
])