[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>

fe-admin/src/components/contracts/ContractDetailContent.tsx

@@ -182,6 +182,47 @@ export function ContractDetailContent({
         <ContractDetailsTab contract={c} />
       </section>
 
+      {/* [Plan B S29 2026-05-22 Chunk E3] Section 5 — Ý kiến cấp duyệt V2 dynamic.
+          Mirror PE LevelOpinionsSectionV2 pattern. Chỉ render khi V2 pin
+          (approvalWorkflowId set). V1 legacy contract KHÔNG hiển thị. */}
+      {c.approvalWorkflowId && (
+        <section className="rounded-lg border border-emerald-200 bg-emerald-50/40 p-5">
+          <h2 className="mb-3 flex items-center gap-2 text-sm font-semibold text-emerald-800">
+            <ListChecks className="h-4 w-4" />
+            Ý kiến cấp duyệt (Quy trình V2)
+          </h2>
+          {(c.levelOpinions?.length ?? 0) === 0 ? (
+            <p className="text-sm text-slate-500">Chưa có ý kiến — workflow vừa bắt đầu hoặc chưa có ai duyệt.</p>
+          ) : (
+            <ul className="space-y-3">
+              {c.levelOpinions!.map(o => {
+                const adminProxy = o.signedByUserId !== o.approverUserId
+                return (
+                  <li key={o.id} className="rounded-md border border-emerald-200 bg-white p-3">
+                    <div className="mb-1 flex items-center justify-between gap-2 text-xs">
+                      <span className="font-medium text-emerald-900">
+                        Bước {o.stepOrder} {o.stepName ? `(${o.stepName})` : ''} — Cấp {o.levelOrder}
+                        {o.levelName ? ` (${o.levelName})` : ''}
+                      </span>
+                      <span className="text-slate-500">{new Date(o.signedAt).toLocaleString('vi-VN')}</span>
+                    </div>
+                    <p className="mb-1 text-sm text-slate-800">{o.comment}</p>
+                    <div className="flex flex-wrap items-center gap-2 text-xs text-slate-600">
+                      <span>NV duyệt: <strong>{o.approverFullName ?? o.approverUserId.slice(0, 8)}</strong></span>
+                      {adminProxy && (
+                        <span className="rounded bg-amber-100 px-2 py-0.5 text-amber-800">
+                          ⚡ Admin duyệt thay ({o.signedByFullName ?? o.signedByUserId.slice(0, 8)})
+                        </span>
+                      )}
+                    </div>
+                  </li>
+                )
+              })}
+            </ul>
+          )}
+        </section>
+      )}
+
       <Dialog
         open={actionOpen}
         onClose={() => setActionOpen(false)}

fe-admin/src/types/contracts.ts

@@ -171,4 +171,28 @@ export type ContractDetail = {
   comments: ContractComment[]
   attachments: ContractAttachment[]
   workflow: WorkflowSummary
+  // [Plan B S29 2026-05-22 Chunk E3] V2 workflow state — mirror PE pattern.
+  // Khi pin V2 (approvalWorkflowId set) → render Section 5 dynamic.
+  // V1 contract: 3 fields = null.
+  approvalWorkflowId: string | null
+  currentApprovalLevelOrder: number | null
+  levelOpinions: ContractLevelOpinion[] | null
+}
+
+// [Plan B S29 2026-05-22 Chunk E3] Mirror BE ContractLevelOpinionDto 12 fields.
+// Service ApproveV2Async UPSERT (Plan B Chunk B2). Comment empty → "(duyệt —
+// không ý kiến)". signedByUserId !== approverUserId → banner "Admin duyệt thay".
+export type ContractLevelOpinion = {
+  id: string
+  approvalWorkflowLevelId: string
+  stepOrder: number
+  stepName: string
+  levelOrder: number
+  levelName: string | null
+  approverUserId: string
+  approverFullName: string | null
+  comment: string
+  signedAt: string
+  signedByUserId: string
+  signedByFullName: string | null
 }

fe-user/src/components/contracts/ContractDetailContent.tsx

@@ -182,6 +182,47 @@ export function ContractDetailContent({
         <ContractDetailsTab contract={c} />
       </section>
 
+      {/* [Plan B S29 2026-05-22 Chunk E3] Section 5 — Ý kiến cấp duyệt V2 dynamic.
+          Mirror PE LevelOpinionsSectionV2 pattern. Chỉ render khi V2 pin
+          (approvalWorkflowId set). V1 legacy contract KHÔNG hiển thị. */}
+      {c.approvalWorkflowId && (
+        <section className="rounded-lg border border-emerald-200 bg-emerald-50/40 p-5">
+          <h2 className="mb-3 flex items-center gap-2 text-sm font-semibold text-emerald-800">
+            <ListChecks className="h-4 w-4" />
+            Ý kiến cấp duyệt (Quy trình V2)
+          </h2>
+          {(c.levelOpinions?.length ?? 0) === 0 ? (
+            <p className="text-sm text-slate-500">Chưa có ý kiến — workflow vừa bắt đầu hoặc chưa có ai duyệt.</p>
+          ) : (
+            <ul className="space-y-3">
+              {c.levelOpinions!.map(o => {
+                const adminProxy = o.signedByUserId !== o.approverUserId
+                return (
+                  <li key={o.id} className="rounded-md border border-emerald-200 bg-white p-3">
+                    <div className="mb-1 flex items-center justify-between gap-2 text-xs">
+                      <span className="font-medium text-emerald-900">
+                        Bước {o.stepOrder} {o.stepName ? `(${o.stepName})` : ''} — Cấp {o.levelOrder}
+                        {o.levelName ? ` (${o.levelName})` : ''}
+                      </span>
+                      <span className="text-slate-500">{new Date(o.signedAt).toLocaleString('vi-VN')}</span>
+                    </div>
+                    <p className="mb-1 text-sm text-slate-800">{o.comment}</p>
+                    <div className="flex flex-wrap items-center gap-2 text-xs text-slate-600">
+                      <span>NV duyệt: <strong>{o.approverFullName ?? o.approverUserId.slice(0, 8)}</strong></span>
+                      {adminProxy && (
+                        <span className="rounded bg-amber-100 px-2 py-0.5 text-amber-800">
+                          ⚡ Admin duyệt thay ({o.signedByFullName ?? o.signedByUserId.slice(0, 8)})
+                        </span>
+                      )}
+                    </div>
+                  </li>
+                )
+              })}
+            </ul>
+          )}
+        </section>
+      )}
+
       <Dialog
         open={actionOpen}
         onClose={() => setActionOpen(false)}

fe-user/src/types/contracts.ts

@@ -171,4 +171,28 @@ export type ContractDetail = {
   comments: ContractComment[]
   attachments: ContractAttachment[]
   workflow: WorkflowSummary
+  // [Plan B S29 2026-05-22 Chunk E3] V2 workflow state — mirror PE pattern.
+  // Khi pin V2 (approvalWorkflowId set) → render Section 5 dynamic.
+  // V1 contract: 3 fields = null.
+  approvalWorkflowId: string | null
+  currentApprovalLevelOrder: number | null
+  levelOpinions: ContractLevelOpinion[] | null
+}
+
+// [Plan B S29 2026-05-22 Chunk E3] Mirror BE ContractLevelOpinionDto 12 fields.
+// Service ApproveV2Async UPSERT (Plan B Chunk B2). Comment empty → "(duyệt —
+// không ý kiến)". signedByUserId !== approverUserId → banner "Admin duyệt thay".
+export type ContractLevelOpinion = {
+  id: string
+  approvalWorkflowLevelId: string
+  stepOrder: number
+  stepName: string
+  levelOrder: number
+  levelName: string | null
+  approverUserId: string
+  approverFullName: string | null
+  comment: string
+  signedAt: string
+  signedByUserId: string
+  signedByFullName: string | null
 }