[CLAUDE] FE-PE: Chunk D — eOffice Trả lại modes + Skip CEO + Approver edit Section 2 (F1+F2+F3) mirror 2 app

Types (fe-{admin,user}/src/types/purchaseEvaluation.ts):
- ApprovalWorkflowOptions type (6 boolean Allow* flag)
- WorkflowReturnMode const-object {OneLevel,OneStep,Assignee,Drafter}
- PeDetailBundle +workflowOptions field (null nếu V1 legacy)

PeWorkflowPanel.tsx F1 (mirror 2 app):
- State returnMode + returnTargetUserId thêm vào transition mutation payload
- Dialog Trả lại render radio list 1-4 mode enabled theo workflowOptions:
  • Trả về 1 Cấp trước (lùi pointer trong cùng Bước, peer review)
  • Trả về 1 Bước trước (Cấp cuối Bước trước nhận lại)
  • Trả về Người chỉ định (pick từ dropdown NV đã ký levelOpinions)
  • Trả về Người soạn thảo (default Drafter S17 fallback)
- Banner amber rounded box dưới radio list mô tả hành vi mode chọn
- onSuccess reset returnMode về Drafter + returnTargetUserId null

PeDetailTabs.tsx F2 (mirror 2 app):
- State skipToFinal + allowSkipToFinal (từ workflowOptions)
- submitForApproval mutationFn accept opts.skipToFinal → POST body
- Workspace action bar: thêm checkbox violet "Gửi thẳng Cấp cuối (skip trung gian)"
  hiển thị conditional theo allowSkipToFinal + canSubmitForApproval
- Confirm dialog message dynamic: "Gửi thẳng" warning vs default tuần tự
- Button label dynamic: "Lưu & Gửi thẳng CẤP CUỐI →" vs "Lưu & Gửi Duyệt →"

PeDetailTabs.tsx F3 (mirror 2 app):
- useAuth import + compute approverEditMode (phase=ChoDuyet +
  workflow.AllowApproverEditDetails + actor match currentApproval.approvers)
- itemsReadOnly = readOnly && !approverEditMode → ItemsTab nhận
- Banner violet "ⓘ Bạn được phép chỉnh sửa Hạng mục/NCC/Báo giá" khi
  approverEditMode + readOnly (Duyệt menu) — UX nhắc về quyền extended

InfoTab + NccSelectorRow + BudgetFieldRow GIỮ strict isEditablePhase (KHÔNG
trong F3 scope — Header section + Section 3 winner KHÔNG cho Approver edit).

Verify:
- npm run build × 2 app pass (fe-user 7.52s, fe-admin 499ms cached)
- 0 TS6 err, warning chunk size pre-existing
- BE Chunk B đã accept skipToFinal + returnMode + returnTargetUserId trong
  TransitionPurchaseEvaluationCommand → wire E2E complete

Pending Chunk E: Docs schema-diagram §14 update + STATUS + HANDOFF + session log.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

fe-admin/src/components/pe/PeWorkflowPanel.tsx

@@ -18,6 +18,7 @@ import {
   PurchaseEvaluationPhase,
   PurchaseEvaluationPhaseColor,
   PurchaseEvaluationPhaseLabel,
+  WorkflowReturnMode,
   type PeDepartmentApproval,
   type PeDetailBundle,
 } from '@/types/purchaseEvaluation'
@@ -33,10 +34,20 @@ export function PeWorkflowPanel({
 }) {
   const [target, setTarget] = useState<number | null>(null)
   const [comment, setComment] = useState('')
+  // Mig 28 (S21 t4) — F1 mode Trả lại. Default Drafter (backward compat S17).
+  const [returnMode, setReturnMode] = useState<WorkflowReturnMode>(WorkflowReturnMode.Drafter)
+  const [returnTargetUserId, setReturnTargetUserId] = useState<string | null>(null)
   const qc = useQueryClient()
   const { user: currentUser } = useAuth()
   const isAdmin = currentUser?.roles?.includes('Admin') ?? false
 
+  // Mig 28 — F1 workflow options. Null nếu V1 legacy → fallback chỉ "Trả về Drafter".
+  const wfOptions = evaluation.workflowOptions
+  // List approvers đã ký (cho mode Assignee dropdown pick)
+  const signedApprovers = (evaluation.levelOpinions ?? [])
+    .map(o => ({ userId: o.approverUserId, fullName: o.approverFullName ?? 'NV' }))
+    .filter((v, i, arr) => arr.findIndex(x => x.userId === v.userId) === i)
+
   // Mig 24 — V2 schema chỉ cho phép approver trong CurrentApproval.approvers
   // duyệt cấp hiện tại. Nếu actor không khớp → disable nút "Duyệt forward"
   // (Trả lại / Từ chối vẫn enabled vì Service không kiểm Bước/Cấp với 2
@@ -75,10 +86,16 @@ export function PeWorkflowPanel({
             && evaluation.phase !== PurchaseEvaluationPhase.DangSoanThao)
         || (target === PurchaseEvaluationPhase.TraLai
             && evaluation.phase !== PurchaseEvaluationPhase.TraLai)
+      // Mig 28 (S21 t4) — F1: chỉ gửi returnMode khi target=TraLai + mode != null
+      const isTraLaiAction = target === PurchaseEvaluationPhase.TraLai
+        && evaluation.phase !== PurchaseEvaluationPhase.TraLai
       return api.post(`/purchase-evaluations/${evaluation.id}/transitions`, {
         targetPhase: target,
         decision: isReject ? 2 : 1,
         comment: comment || null,
+        returnMode: isTraLaiAction ? returnMode : null,
+        returnTargetUserId: isTraLaiAction && returnMode === WorkflowReturnMode.Assignee
+          ? returnTargetUserId : null,
       })
     },
     onSuccess: () => {
@@ -88,6 +105,8 @@ export function PeWorkflowPanel({
       qc.invalidateQueries({ queryKey: ['pe-dept-approvals', evaluation.id] })
       setTarget(null)
       setComment('')
+      setReturnMode(WorkflowReturnMode.Drafter)
+      setReturnTargetUserId(null)
     },
     onError: e => toast.error(getErrorMessage(e)),
   })
@@ -285,9 +304,96 @@ export function PeWorkflowPanel({
               </div>
             )}
             {isSendBack && (
-              <div className="mb-3 rounded border border-amber-200 bg-amber-50 px-3 py-2 text-[11px] text-amber-800">
-                Phiếu sẽ về &ldquo;Đang soạn thảo&rdquo;. Drafter có thể sửa rồi trình lại — workflow tự jump tới phase này.
-              </div>
+              <>
+                {/* Mig 28 (S21 t4) — F1 mode picker khi Trả lại. Show modes
+                    enabled per workflow.options. Default Drafter (S17 fallback). */}
+                {(wfOptions?.allowReturnOneLevel
+                  || wfOptions?.allowReturnOneStep
+                  || wfOptions?.allowReturnToAssignee
+                  || wfOptions?.allowReturnToDrafter
+                  || !wfOptions) && (
+                  <div className="mb-3 space-y-1.5">
+                    <Label className="text-[12px]">Chọn cách Trả lại</Label>
+                    <div className="space-y-1">
+                      {(wfOptions?.allowReturnOneLevel) && (
+                        <label className="flex items-start gap-2 rounded border border-amber-200 bg-white px-2 py-1.5 text-[12px] hover:bg-amber-50/40">
+                          <input
+                            type="radio"
+                            className="mt-0.5"
+                            checked={returnMode === WorkflowReturnMode.OneLevel}
+                            onChange={() => setReturnMode(WorkflowReturnMode.OneLevel)}
+                          />
+                          <span>
+                            <span className="font-medium">Trả về 1 Cấp trước</span>
+                            <span className="block text-[10px] text-slate-500">Lùi 1 Cấp trong cùng Bước. NV cấp trước nhận lại.</span>
+                          </span>
+                        </label>
+                      )}
+                      {(wfOptions?.allowReturnOneStep) && (
+                        <label className="flex items-start gap-2 rounded border border-amber-200 bg-white px-2 py-1.5 text-[12px] hover:bg-amber-50/40">
+                          <input
+                            type="radio"
+                            className="mt-0.5"
+                            checked={returnMode === WorkflowReturnMode.OneStep}
+                            onChange={() => setReturnMode(WorkflowReturnMode.OneStep)}
+                          />
+                          <span>
+                            <span className="font-medium">Trả về 1 Bước trước</span>
+                            <span className="block text-[10px] text-slate-500">Lùi sang Bước trước, NV Cấp cuối Bước đó nhận lại.</span>
+                          </span>
+                        </label>
+                      )}
+                      {(wfOptions?.allowReturnToAssignee) && (
+                        <label className="flex items-start gap-2 rounded border border-amber-200 bg-white px-2 py-1.5 text-[12px] hover:bg-amber-50/40">
+                          <input
+                            type="radio"
+                            className="mt-0.5"
+                            checked={returnMode === WorkflowReturnMode.Assignee}
+                            onChange={() => setReturnMode(WorkflowReturnMode.Assignee)}
+                          />
+                          <span className="flex-1">
+                            <span className="font-medium">Trả về Người chỉ định</span>
+                            <span className="block text-[10px] text-slate-500">Pick từ list NV đã duyệt trước đó. Workflow set Cấp/Bước của NV.</span>
+                            {returnMode === WorkflowReturnMode.Assignee && (
+                              <select
+                                className="mt-1.5 w-full rounded border border-slate-300 px-2 py-1 text-[12px]"
+                                value={returnTargetUserId ?? ''}
+                                onChange={e => setReturnTargetUserId(e.target.value || null)}
+                              >
+                                <option value="">— Chọn NV —</option>
+                                {signedApprovers.map(a => (
+                                  <option key={a.userId} value={a.userId}>{a.fullName}</option>
+                                ))}
+                              </select>
+                            )}
+                          </span>
+                        </label>
+                      )}
+                      {(wfOptions?.allowReturnToDrafter !== false) && (
+                        <label className="flex items-start gap-2 rounded border border-amber-200 bg-white px-2 py-1.5 text-[12px] hover:bg-amber-50/40">
+                          <input
+                            type="radio"
+                            className="mt-0.5"
+                            checked={returnMode === WorkflowReturnMode.Drafter}
+                            onChange={() => setReturnMode(WorkflowReturnMode.Drafter)}
+                          />
+                          <span>
+                            <span className="font-medium">Trả về Người soạn thảo (mặc định)</span>
+                            <span className="block text-[10px] text-slate-500">Phase → "Trả lại". Drafter sửa rồi gửi lại chạy từ Cấp 1 Bước 1.</span>
+                          </span>
+                        </label>
+                      )}
+                    </div>
+                  </div>
+                )}
+                <div className="mb-3 rounded border border-amber-200 bg-amber-50 px-3 py-2 text-[11px] text-amber-800">
+                  {returnMode === WorkflowReturnMode.Drafter
+                    ? 'Phiếu sẽ về "Trả lại". Drafter có thể sửa rồi trình lại từ Cấp 1 Bước 1.'
+                    : returnMode === WorkflowReturnMode.Assignee
+                      ? 'Phiếu sẽ về Cấp/Bước của NV đã chọn (vẫn "Đã gửi duyệt"). NV nhận lại để duyệt tiếp.'
+                      : 'Phiếu sẽ lùi pointer (vẫn "Đã gửi duyệt"). NV trước nhận lại để duyệt tiếp.'}
+                </div>
+              </>
             )}
             <Label>Ghi chú (tùy chọn)</Label>
             <Textarea value={comment} onChange={e => setComment(e.target.value)} rows={3} />