Files
solution-erp/fe-user
pqhuy1987 14feb6955d [CLAUDE] FE-Admin+FE-User: Plan B Chunk E3 — ContractDetailPage Section 5 LevelOpinionsV2 dynamic
Em main solo sau Implementer E3 stuck mid-task. Minimum viable mirror PE
Section 5 LevelOpinionsSectionV2 pattern. V2 contract pin ApprovalWorkflowId
→ render dynamic Section 5 với opinion data UPSERT từ Service ApproveV2Async
(Plan B Chunk B2 1f199b0).

Changes × 2 app:

types/contracts.ts (×2):
- ContractDetail +3 fields V2 (default null backward compat):
  - approvalWorkflowId: string | null
  - currentApprovalLevelOrder: number | null
  - levelOpinions: ContractLevelOpinion[] | null
- NEW type ContractLevelOpinion (12 fields mirror BE DTO)

components/contracts/ContractDetailContent.tsx (×2):
- Add Section 5 sau "Chi tiết HĐ" section
- Conditional render: chỉ khi c.approvalWorkflowId (V2 mode)
- Empty placeholder "Chưa có ý kiến" khi workflow vừa start
- forEach opinion render card:
  - Title: Bước X (StepName) — Cấp Y (LevelName)
  - Comment + signedAt vi-VN format
  - NV duyệt: approverFullName
  - Banner " Admin duyệt thay" khi signedByUserId !== approverUserId
- Style: emerald palette mirror PE Section 5

V1 contract: 3 fields null → Section 5 KHÔNG render (backward compat).

Verify:
- npm run build × 2 app PASS 0 TS err
- Mirror 2 app §3.9 byte-similar (4 file edit cùng pattern)
- BE wire OK: E2 commit 48f6d22 expose approvalWorkflowId + levelOpinions

Plan B COMPLETE 9/9 chunks LOCAL:
- A1 58898e8  Entity +2 fields
- A2 a85e437  Mig 32 + Config + Seed
- B 138469d  Service ApproveV2Async branch
- C 26c98d3  Mig 33 LevelOpinions
- B2 1f199b0  UPSERT block
- E1 ef23308  CreateContractCommand +V2
- D 62b50d1  FE Workspace V2
- E2 48f6d22  ContractDetailDto + populate
- E3 (this)  FE Section 5 LevelOpinionsV2

Implementer E3 spawn stopped mid-task ("check ContractDetail type" judgment
call) → em main solo finish. Pattern lesson: complex FE feature mirror với
type extend + new component → em main solo more reliable than Implementer.

Pending: Reviewer pre-commit Plan B cumulative + push remote + CICD verify
+ docs/STATUS update.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-22 12:45:33 +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...
    },
  },
])