From 14f8d9d808ef1f154a8261991ecea09a4f2dc8c7 Mon Sep 17 00:00:00 2001
From: pqhuy1987 <pqhuy1987@gmail.com>
Date: Thu, 7 May 2026 12:40:29 +0700
Subject: [PATCH] =?UTF-8?q?[CLAUDE]=20FE-User:=20PE=20+=20H=C4=90=20toggle?=
 =?UTF-8?q?=20"Nh=E1=BA=ADp=20tay"=20+=202=20fields=20manual=20budget=20mi?=
 =?UTF-8?q?rror=20fe-admin?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Chunk 4/5 — mirror y hệt Chunk 3 sang fe-user (rule §3.9 duplicate có chủ đích).

Files:
  ~ fe-user/src/types/purchaseEvaluation.ts — PeDetailBundle +2 field
  ~ fe-user/src/types/contracts.ts — ContractDetail +2 field
  ~ fe-user/src/components/pe/PeHeaderForm.tsx (copy từ fe-admin)
  ~ fe-user/src/components/pe/PeDetailTabs.tsx — Section "b. Ngân sách"
    fallback display khi !ev.budget + có manual data
  ~ fe-user/src/pages/pe/PurchaseEvaluationCreatePage.tsx (copy refactor wrap)
  ~ fe-user/src/pages/contracts/ContractCreatePage.tsx — toggle pattern cho
    NewContractForm + EditContractForm (giống fe-admin)

Verify: npm run build fe-user pass · 1904 modules · 0 TS error.

Next: Chunk 5 docs + push.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 fe-user/src/components/pe/PeDetailTabs.tsx    |  11 +
 fe-user/src/components/pe/PeHeaderForm.tsx    | 110 +++++++--
 .../pages/contracts/ContractCreatePage.tsx    | 189 ++++++++++++----
 .../pages/pe/PurchaseEvaluationCreatePage.tsx | 212 +-----------------
 fe-user/src/types/contracts.ts                |   3 +
 fe-user/src/types/purchaseEvaluation.ts       |   3 +
 6 files changed, 268 insertions(+), 260 deletions(-)

diff --git a/fe-user/src/components/pe/PeDetailTabs.tsx b/fe-user/src/components/pe/PeDetailTabs.tsx
index 1e81ed9..e23ad51 100644
--- a/fe-user/src/components/pe/PeDetailTabs.tsx
+++ b/fe-user/src/components/pe/PeDetailTabs.tsx
@@ -343,6 +343,17 @@ function ChonNccSection({ ev, readOnly = false }: { ev: PeDetailBundle; readOnly
             {' · '}{ev.budget.tenNganSach}
             {' · '}<span className="text-slate-500">{ev.budget.tongNganSach.toLocaleString('vi-VN')} đ</span>
           </a>
+        ) : ev.budgetManualAmount != null || ev.budgetManualName ? (
+          // Mig 17 — manual budget fallback: hiển thị tên + số tiền nhập tay,
+          // không phải link vào /budgets/{id} (không có Budget entity).
+          <span className="text-slate-700">
+            {ev.budgetManualName && <span>{ev.budgetManualName}</span>}
+            {ev.budgetManualName && ev.budgetManualAmount != null && ' · '}
+            {ev.budgetManualAmount != null && (
+              <span className="font-semibold text-slate-900">{ev.budgetManualAmount.toLocaleString('vi-VN')} đ</span>
+            )}
+            <span className="ml-2 rounded bg-slate-100 px-1.5 py-0.5 text-[10px] text-slate-500">nhập tay</span>
+          </span>
         ) : <span className="text-slate-400">— (chưa link)</span>}
       />
       <FormRow
diff --git a/fe-user/src/components/pe/PeHeaderForm.tsx b/fe-user/src/components/pe/PeHeaderForm.tsx
index 62312cd..75f84f1 100644
--- a/fe-user/src/components/pe/PeHeaderForm.tsx
+++ b/fe-user/src/components/pe/PeHeaderForm.tsx
@@ -53,6 +53,10 @@ export function PeHeaderForm({
     moTa: '',
     paymentTerms: '',
     budgetId: '' as string,
+    // Mig 17 — manual budget fallback (toggle "Nhập tay" thay vì link)
+    budgetManual: false,
+    budgetManualName: '',
+    budgetManualAmount: 0,
   })
 
   const eligibleBudgets = useQuery({
@@ -68,6 +72,8 @@ export function PeHeaderForm({
 
   useEffect(() => {
     if (existing.data) {
+      const hasManual = existing.data.budgetManualName !== null
+        || existing.data.budgetManualAmount !== null
       setForm({
         type: existing.data.type,
         tenGoiThau: existing.data.tenGoiThau,
@@ -76,10 +82,27 @@ export function PeHeaderForm({
         moTa: existing.data.moTa ?? '',
         paymentTerms: existing.data.paymentTerms ?? '',
         budgetId: existing.data.budgetId ?? '',
+        // Auto-toggle manual mode khi load existing có manual data hoặc không có link
+        budgetManual: hasManual && !existing.data.budgetId,
+        budgetManualName: existing.data.budgetManualName ?? '',
+        budgetManualAmount: existing.data.budgetManualAmount ?? 0,
       })
     }
   }, [existing.data])
 
+  // Manual mode: clear budgetId, gửi manualName/Amount. Link mode: clear manual.
+  const payloadBudgetFields = form.budgetManual
+    ? {
+        budgetId: null,
+        budgetManualName: form.budgetManualName || null,
+        budgetManualAmount: form.budgetManualAmount > 0 ? form.budgetManualAmount : null,
+      }
+    : {
+        budgetId: form.budgetId || null,
+        budgetManualName: null,
+        budgetManualAmount: null,
+      }
+
   const mut = useMutation({
     mutationFn: async () => {
       if (editId) {
@@ -89,7 +112,7 @@ export function PeHeaderForm({
           diaDiem: form.diaDiem || null,
           moTa: form.moTa || null,
           paymentTerms: form.paymentTerms || null,
-          budgetId: form.budgetId || null,
+          ...payloadBudgetFields,
         })
       }
       return api.post<{ id: string }>('/purchase-evaluations', {
@@ -99,7 +122,7 @@ export function PeHeaderForm({
         diaDiem: form.diaDiem || null,
         moTa: form.moTa || null,
         paymentTerms: form.paymentTerms || null,
-        budgetId: form.budgetId || null,
+        ...payloadBudgetFields,
       })
     },
     onSuccess: res => {
@@ -161,26 +184,69 @@ export function PeHeaderForm({
       </div>
 
       <div>
-        <Label>Ngân sách (đối chiếu chi phí)</Label>
-        <Select
-          value={form.budgetId}
-          disabled={!form.projectId}
-          onChange={e => setForm({ ...form, budgetId: e.target.value })}
-        >
-          <option value="">— (không link)</option>
-          {eligibleBudgets.data?.map(b => (
-            <option key={b.id} value={b.id}>
-              {b.maNganSach ?? '—'} · {b.tenNganSach} · {b.tongNganSach.toLocaleString('vi-VN')} đ
-            </option>
-          ))}
-        </Select>
-        <p className="mt-1 text-[11px] text-slate-500">
-          {!form.projectId
-            ? 'Chọn dự án trước để xem ngân sách khả dụng.'
-            : eligibleBudgets.data && eligibleBudgets.data.length === 0
-            ? 'Dự án này chưa có ngân sách đã duyệt.'
-            : 'Chỉ list ngân sách đã duyệt cùng dự án.'}
-        </p>
+        <div className="mb-1.5 flex items-center justify-between">
+          <Label className="mb-0">Ngân sách (đối chiếu chi phí)</Label>
+          {/* Toggle "Nhập tay" — Mig 17 fallback khi không link Budget entity */}
+          <label className="inline-flex cursor-pointer items-center gap-1.5 text-[11px] text-slate-600">
+            <input
+              type="checkbox"
+              checked={form.budgetManual}
+              onChange={e => setForm({ ...form, budgetManual: e.target.checked })}
+              className="h-3.5 w-3.5 rounded border-slate-300"
+            />
+            Nhập tay (không link)
+          </label>
+        </div>
+        {!form.budgetManual ? (
+          <>
+            <Select
+              value={form.budgetId}
+              disabled={!form.projectId}
+              onChange={e => setForm({ ...form, budgetId: e.target.value })}
+            >
+              <option value="">— (không link)</option>
+              {eligibleBudgets.data?.map(b => (
+                <option key={b.id} value={b.id}>
+                  {b.maNganSach ?? '—'} · {b.tenNganSach} · {b.tongNganSach.toLocaleString('vi-VN')} đ
+                </option>
+              ))}
+            </Select>
+            <p className="mt-1 text-[11px] text-slate-500">
+              {!form.projectId
+                ? 'Chọn dự án trước để xem ngân sách khả dụng.'
+                : eligibleBudgets.data && eligibleBudgets.data.length === 0
+                ? 'Dự án này chưa có ngân sách đã duyệt — bật "Nhập tay" để nhập số tiền trực tiếp.'
+                : 'Chỉ list ngân sách đã duyệt cùng dự án.'}
+            </p>
+          </>
+        ) : (
+          <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
+            <div>
+              <Label className="text-[11px]">Tên ngân sách (tham chiếu)</Label>
+              <Input
+                value={form.budgetManualName}
+                onChange={e => setForm({ ...form, budgetManualName: e.target.value })}
+                placeholder="vd Tạm tính dự toán T11/2025"
+                maxLength={200}
+              />
+            </div>
+            <div>
+              <Label className="text-[11px]">Số tiền (đ)</Label>
+              <Input
+                type="number"
+                min={0}
+                value={form.budgetManualAmount || ''}
+                onChange={e => setForm({ ...form, budgetManualAmount: Number(e.target.value) })}
+                placeholder="1000000000"
+              />
+              {form.budgetManualAmount > 0 && (
+                <p className="mt-1 text-[11px] text-slate-500">
+                  ≈ {form.budgetManualAmount.toLocaleString('vi-VN')} đ
+                </p>
+              )}
+            </div>
+          </div>
+        )}
       </div>
 
       <div>
diff --git a/fe-user/src/pages/contracts/ContractCreatePage.tsx b/fe-user/src/pages/contracts/ContractCreatePage.tsx
index 6d3d889..a1d4a3e 100644
--- a/fe-user/src/pages/contracts/ContractCreatePage.tsx
+++ b/fe-user/src/pages/contracts/ContractCreatePage.tsx
@@ -305,6 +305,10 @@ function ContractHeaderForm({
   const [noiDung, setNoiDung] = useState('')
   const [bypass, setBypass] = useState(false)
   const [budgetId, setBudgetId] = useState('')
+  // Mig 17 — manual budget fallback (toggle "Nhập tay")
+  const [budgetManual, setBudgetManual] = useState(false)
+  const [budgetManualName, setBudgetManualName] = useState('')
+  const [budgetManualAmount, setBudgetManualAmount] = useState(0)
 
   // Reset type về default khi typeFilter (parent prop) thay đổi
   useEffect(() => { setType(defaultType) }, [defaultType])
@@ -334,6 +338,11 @@ function ContractHeaderForm({
   })
 
   const qc = useQueryClient()
+  // Manual mode: clear budgetId, gửi manualName/Amount. Link mode: clear manual.
+  const budgetPayload = budgetManual
+    ? { budgetId: null, budgetManualName: budgetManualName || null, budgetManualAmount: budgetManualAmount > 0 ? budgetManualAmount : null }
+    : { budgetId: budgetId || null, budgetManualName: null, budgetManualAmount: null }
+
   const create = useMutation({
     mutationFn: async () => {
       const res = await api.post<{ id: string }>('/contracts', {
@@ -347,7 +356,7 @@ function ContractHeaderForm({
         noiDung: noiDung || null,
         bypassProcurementAndCCM: bypass,
         draftData: null,
-        budgetId: budgetId || null,
+        ...budgetPayload,
       })
       return res.data.id
     },
@@ -387,26 +396,69 @@ function ContractHeaderForm({
           typeReadonly={false}
         />
         <div className="mt-4 space-y-1.5">
-          <Label>Ngân sách (đối chiếu chi phí)</Label>
-          <Select
-            value={budgetId}
-            disabled={!projectId}
-            onChange={e => setBudgetId(e.target.value)}
-          >
-            <option value="">— (không link)</option>
-            {eligibleBudgets.data?.map(b => (
-              <option key={b.id} value={b.id}>
-                {b.maNganSach ?? '—'} · {b.tenNganSach} · {b.tongNganSach.toLocaleString('vi-VN')} đ
-              </option>
-            ))}
-          </Select>
-          <p className="text-[11px] text-slate-500">
-            {!projectId
-              ? 'Chọn dự án trước để xem ngân sách khả dụng.'
-              : eligibleBudgets.data && eligibleBudgets.data.length === 0
-              ? 'Dự án này chưa có ngân sách đã duyệt.'
-              : 'Chỉ list ngân sách đã duyệt cùng dự án.'}
-          </p>
+          <div className="flex items-center justify-between">
+            <Label className="mb-0">Ngân sách (đối chiếu chi phí)</Label>
+            {/* Toggle "Nhập tay" — Mig 17 fallback khi không link Budget entity */}
+            <label className="inline-flex cursor-pointer items-center gap-1.5 text-[11px] text-slate-600">
+              <input
+                type="checkbox"
+                checked={budgetManual}
+                onChange={e => setBudgetManual(e.target.checked)}
+                className="h-3.5 w-3.5 rounded border-slate-300"
+              />
+              Nhập tay (không link)
+            </label>
+          </div>
+          {!budgetManual ? (
+            <>
+              <Select
+                value={budgetId}
+                disabled={!projectId}
+                onChange={e => setBudgetId(e.target.value)}
+              >
+                <option value="">— (không link)</option>
+                {eligibleBudgets.data?.map(b => (
+                  <option key={b.id} value={b.id}>
+                    {b.maNganSach ?? '—'} · {b.tenNganSach} · {b.tongNganSach.toLocaleString('vi-VN')} đ
+                  </option>
+                ))}
+              </Select>
+              <p className="text-[11px] text-slate-500">
+                {!projectId
+                  ? 'Chọn dự án trước để xem ngân sách khả dụng.'
+                  : eligibleBudgets.data && eligibleBudgets.data.length === 0
+                  ? 'Dự án này chưa có ngân sách đã duyệt — bật "Nhập tay" để nhập số tiền trực tiếp.'
+                  : 'Chỉ list ngân sách đã duyệt cùng dự án.'}
+              </p>
+            </>
+          ) : (
+            <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
+              <div>
+                <Label className="text-[11px]">Tên ngân sách (tham chiếu)</Label>
+                <Input
+                  value={budgetManualName}
+                  onChange={e => setBudgetManualName(e.target.value)}
+                  placeholder="vd Tạm tính dự toán T11/2025"
+                  maxLength={200}
+                />
+              </div>
+              <div>
+                <Label className="text-[11px]">Số tiền (đ)</Label>
+                <Input
+                  type="number"
+                  min={0}
+                  value={budgetManualAmount || ''}
+                  onChange={e => setBudgetManualAmount(Number(e.target.value))}
+                  placeholder="1000000000"
+                />
+                {budgetManualAmount > 0 && (
+                  <p className="mt-1 text-[11px] text-slate-500">
+                    ≈ {budgetManualAmount.toLocaleString('vi-VN')} đ
+                  </p>
+                )}
+              </div>
+            </div>
+          )}
         </div>
         <div className="mt-4 flex justify-end gap-2">
           <Button type="submit" disabled={create.isPending}>
@@ -497,6 +549,11 @@ function ContractEditForm({
   const [tenHopDong, setTenHopDong] = useState(contract.tenHopDong ?? '')
   const [noiDung, setNoiDung] = useState(contract.noiDung ?? '')
   const [budgetId, setBudgetId] = useState(contract.budgetId ?? '')
+  // Mig 17 — manual budget fallback. Auto-toggle khi load có manual data
+  const hasInitialManual = contract.budgetManualName !== null || contract.budgetManualAmount !== null
+  const [budgetManual, setBudgetManual] = useState(hasInitialManual && !contract.budgetId)
+  const [budgetManualName, setBudgetManualName] = useState(contract.budgetManualName ?? '')
+  const [budgetManualAmount, setBudgetManualAmount] = useState(contract.budgetManualAmount ?? 0)
 
   const templates = useQuery({
     queryKey: ['templates-by-type', contract.type],
@@ -513,6 +570,10 @@ function ContractEditForm({
   })
 
   const qc = useQueryClient()
+  const budgetPayload = budgetManual
+    ? { budgetId: null, budgetManualName: budgetManualName || null, budgetManualAmount: budgetManualAmount > 0 ? budgetManualAmount : null }
+    : { budgetId: budgetId || null, budgetManualName: null, budgetManualAmount: null }
+
   const update = useMutation({
     mutationFn: async () => {
       await api.put(`/contracts/${contract.id}`, {
@@ -522,7 +583,7 @@ function ContractEditForm({
         noiDung: noiDung || null,
         templateId: templateId || null,
         draftData: null,
-        budgetId: budgetId || null,
+        ...budgetPayload,
       })
     },
     onSuccess: () => {
@@ -611,23 +672,65 @@ function ContractEditForm({
             <Textarea rows={4} value={noiDung} onChange={e => setNoiDung(e.target.value)} disabled={!isDraft} />
           </div>
           <div className="col-span-2 space-y-1.5">
-            <Label>Ngân sách (đối chiếu chi phí)</Label>
+            <div className="flex items-center justify-between">
+              <Label className="mb-0">Ngân sách (đối chiếu chi phí)</Label>
+              {isDraft && (
+                <label className="inline-flex cursor-pointer items-center gap-1.5 text-[11px] text-slate-600">
+                  <input
+                    type="checkbox"
+                    checked={budgetManual}
+                    onChange={e => setBudgetManual(e.target.checked)}
+                    className="h-3.5 w-3.5 rounded border-slate-300"
+                  />
+                  Nhập tay (không link)
+                </label>
+              )}
+            </div>
             {isDraft ? (
-              <>
-                <Select value={budgetId} onChange={e => setBudgetId(e.target.value)}>
-                  <option value="">— (không link)</option>
-                  {eligibleBudgets.data?.map(b => (
-                    <option key={b.id} value={b.id}>
-                      {b.maNganSach ?? '—'} · {b.tenNganSach} · {b.tongNganSach.toLocaleString('vi-VN')} đ
-                    </option>
-                  ))}
-                </Select>
-                <p className="text-[11px] text-slate-500">
-                  {eligibleBudgets.data && eligibleBudgets.data.length === 0
-                    ? 'Dự án này chưa có ngân sách đã duyệt.'
-                    : 'Chỉ list ngân sách đã duyệt cùng dự án.'}
-                </p>
-              </>
+              !budgetManual ? (
+                <>
+                  <Select value={budgetId} onChange={e => setBudgetId(e.target.value)}>
+                    <option value="">— (không link)</option>
+                    {eligibleBudgets.data?.map(b => (
+                      <option key={b.id} value={b.id}>
+                        {b.maNganSach ?? '—'} · {b.tenNganSach} · {b.tongNganSach.toLocaleString('vi-VN')} đ
+                      </option>
+                    ))}
+                  </Select>
+                  <p className="text-[11px] text-slate-500">
+                    {eligibleBudgets.data && eligibleBudgets.data.length === 0
+                      ? 'Dự án này chưa có ngân sách đã duyệt — bật "Nhập tay" để nhập số tiền trực tiếp.'
+                      : 'Chỉ list ngân sách đã duyệt cùng dự án.'}
+                  </p>
+                </>
+              ) : (
+                <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
+                  <div>
+                    <Label className="text-[11px]">Tên ngân sách (tham chiếu)</Label>
+                    <Input
+                      value={budgetManualName}
+                      onChange={e => setBudgetManualName(e.target.value)}
+                      placeholder="vd Tạm tính dự toán T11/2025"
+                      maxLength={200}
+                    />
+                  </div>
+                  <div>
+                    <Label className="text-[11px]">Số tiền (đ)</Label>
+                    <Input
+                      type="number"
+                      min={0}
+                      value={budgetManualAmount || ''}
+                      onChange={e => setBudgetManualAmount(Number(e.target.value))}
+                      placeholder="1000000000"
+                    />
+                    {budgetManualAmount > 0 && (
+                      <p className="mt-1 text-[11px] text-slate-500">
+                        ≈ {budgetManualAmount.toLocaleString('vi-VN')} đ
+                      </p>
+                    )}
+                  </div>
+                </div>
+              )
             ) : contract.budget ? (
               <a
                 href={`/budgets?id=${contract.budget.id}`}
@@ -637,6 +740,16 @@ function ContractEditForm({
                 {' · '}{contract.budget.tenNganSach}
                 {' · '}<span className="text-slate-500">{contract.budget.tongNganSach.toLocaleString('vi-VN')} đ</span>
               </a>
+            ) : contract.budgetManualAmount != null || contract.budgetManualName ? (
+              // Mig 17 — read-only display khi !isDraft + có manual data
+              <div className="block rounded border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-700">
+                {contract.budgetManualName && <span>{contract.budgetManualName}</span>}
+                {contract.budgetManualName && contract.budgetManualAmount != null && ' · '}
+                {contract.budgetManualAmount != null && (
+                  <span className="font-semibold text-slate-900">{contract.budgetManualAmount.toLocaleString('vi-VN')} đ</span>
+                )}
+                <span className="ml-2 rounded bg-slate-100 px-1.5 py-0.5 text-[10px] text-slate-500">nhập tay</span>
+              </div>
             ) : (
               <Input value="(không link)" disabled className="bg-slate-50" />
             )}
diff --git a/fe-user/src/pages/pe/PurchaseEvaluationCreatePage.tsx b/fe-user/src/pages/pe/PurchaseEvaluationCreatePage.tsx
index 4312e18..5da3417 100644
--- a/fe-user/src/pages/pe/PurchaseEvaluationCreatePage.tsx
+++ b/fe-user/src/pages/pe/PurchaseEvaluationCreatePage.tsx
@@ -1,114 +1,18 @@
-// Create / edit draft phiếu Duyệt NCC (Header only — Suppliers + Details + Quotes
-// chỉnh sửa ở Detail tabs sau khi save).
-import { useEffect, useState } from 'react'
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+// Page Create / edit header phiếu Duyệt NCC riêng (deep-link "Sửa header"
+// button trong PeDetailTabs). Refactor 2026-05-07: wrap PeHeaderForm cho DRY
+// + auto support manual budget (Mig 17). NCC + Báo giá + Items vẫn chỉnh ở
+// Detail tabs sau khi save.
 import { useNavigate, useSearchParams } from 'react-router-dom'
-import { toast } from 'sonner'
 import { ClipboardCheck } from 'lucide-react'
-import { Button } from '@/components/ui/Button'
-import { Input } from '@/components/ui/Input'
-import { Label } from '@/components/ui/Label'
-import { Select } from '@/components/ui/Select'
-import { Textarea } from '@/components/ui/Textarea'
-import { api } from '@/lib/api'
-import { getErrorMessage } from '@/lib/apiError'
-import {
-  PurchaseEvaluationType,
-  PurchaseEvaluationTypeLabel,
-  type PeDetailBundle,
-} from '@/types/purchaseEvaluation'
-import { BudgetPhase, type BudgetListItem } from '@/types/budget'
-import type { Paged, Project } from '@/types/master'
+import { PeHeaderForm } from '@/components/pe/PeHeaderForm'
+import { PurchaseEvaluationType } from '@/types/purchaseEvaluation'
 
 export function PurchaseEvaluationCreatePage() {
   const navigate = useNavigate()
-  const qc = useQueryClient()
   const [sp] = useSearchParams()
   const editId = sp.get('id')
   const urlType = sp.get('type') ? Number(sp.get('type')) : PurchaseEvaluationType.DuyetNcc
 
-  const projects = useQuery({
-    queryKey: ['all-projects'],
-    queryFn: async () => (await api.get<{ items: Project[] }>('/projects', { params: { pageSize: 1000 } })).data.items,
-  })
-  const existing = useQuery({
-    queryKey: ['pe-detail', editId],
-    queryFn: async () => (await api.get<PeDetailBundle>(`/purchase-evaluations/${editId}`)).data,
-    enabled: !!editId,
-  })
-
-  const [form, setForm] = useState({
-    type: urlType as number,
-    tenGoiThau: '',
-    projectId: '',
-    diaDiem: '',
-    moTa: '',
-    paymentTerms: '',
-    budgetId: '' as string,
-  })
-
-  // Eligible Budgets: cùng Project + Phase=DaDuyet. BE filter trên Project +
-  // Phase server-side để FE không phải lọc thêm.
-  const eligibleBudgets = useQuery({
-    queryKey: ['eligible-budgets', form.projectId],
-    queryFn: async () => {
-      const res = await api.get<Paged<BudgetListItem>>('/budgets', {
-        params: {
-          pageSize: 100,
-          projectId: form.projectId,
-          phase: BudgetPhase.DaDuyet,
-        },
-      })
-      return res.data.items
-    },
-    enabled: !!form.projectId,
-  })
-
-  useEffect(() => {
-    if (existing.data) {
-      setForm({
-        type: existing.data.type,
-        tenGoiThau: existing.data.tenGoiThau,
-        projectId: existing.data.projectId,
-        diaDiem: existing.data.diaDiem ?? '',
-        moTa: existing.data.moTa ?? '',
-        paymentTerms: existing.data.paymentTerms ?? '',
-        budgetId: existing.data.budgetId ?? '',
-      })
-    }
-  }, [existing.data])
-
-  const mut = useMutation({
-    mutationFn: async () => {
-      if (editId) {
-        return api.put(`/purchase-evaluations/${editId}`, {
-          id: editId,
-          tenGoiThau: form.tenGoiThau,
-          diaDiem: form.diaDiem || null,
-          moTa: form.moTa || null,
-          paymentTerms: form.paymentTerms || null,
-          budgetId: form.budgetId || null,
-        })
-      }
-      return api.post<{ id: string }>('/purchase-evaluations', {
-        type: form.type,
-        tenGoiThau: form.tenGoiThau,
-        projectId: form.projectId,
-        diaDiem: form.diaDiem || null,
-        moTa: form.moTa || null,
-        paymentTerms: form.paymentTerms || null,
-        budgetId: form.budgetId || null,
-      })
-    },
-    onSuccess: res => {
-      toast.success(editId ? 'Đã lưu.' : 'Đã tạo phiếu.')
-      qc.invalidateQueries({ queryKey: ['pe-list'] })
-      const id = editId ?? (res as { data: { id: string } }).data.id
-      navigate(`/purchase-evaluations?id=${id}&type=${form.type}`)
-    },
-    onError: e => toast.error(getErrorMessage(e)),
-  })
-
   return (
     <div className="space-y-4 p-6">
       <header className="flex items-center gap-2">
@@ -118,104 +22,12 @@ export function PurchaseEvaluationCreatePage() {
         </h1>
       </header>
 
-      <div className="max-w-2xl space-y-4 rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
-        <div>
-          <Label>Loại quy trình</Label>
-          <Select
-            value={form.type}
-            disabled={!!editId}
-            onChange={e => setForm({ ...form, type: Number(e.target.value) })}
-          >
-            {Object.values(PurchaseEvaluationType).map(t => (
-              <option key={t} value={t}>{PurchaseEvaluationTypeLabel[t]}</option>
-            ))}
-          </Select>
-        </div>
-
-        <div>
-          <Label>Tên gói thầu *</Label>
-          <Input
-            value={form.tenGoiThau}
-            onChange={e => setForm({ ...form, tenGoiThau: e.target.value })}
-            placeholder="vd Cung cấp bê tông"
-          />
-        </div>
-
-        <div>
-          <Label>Dự án *</Label>
-          <Select
-            value={form.projectId}
-            disabled={!!editId}
-            onChange={e => setForm({ ...form, projectId: e.target.value })}
-          >
-            <option value="">-- Chọn --</option>
-            {projects.data?.map(p => (
-              <option key={p.id} value={p.id}>{p.code} — {p.name}</option>
-            ))}
-          </Select>
-        </div>
-
-        <div>
-          <Label>Ngân sách (đối chiếu chi phí)</Label>
-          <Select
-            value={form.budgetId}
-            disabled={!form.projectId}
-            onChange={e => setForm({ ...form, budgetId: e.target.value })}
-          >
-            <option value="">— (không link)</option>
-            {eligibleBudgets.data?.map(b => (
-              <option key={b.id} value={b.id}>
-                {b.maNganSach ?? '—'} · {b.tenNganSach} · {b.tongNganSach.toLocaleString('vi-VN')} đ
-              </option>
-            ))}
-          </Select>
-          <p className="mt-1 text-[11px] text-slate-500">
-            {!form.projectId
-              ? 'Chọn dự án trước để xem ngân sách khả dụng.'
-              : eligibleBudgets.data && eligibleBudgets.data.length === 0
-              ? 'Dự án này chưa có ngân sách đã duyệt.'
-              : 'Chỉ list ngân sách đã duyệt cùng dự án.'}
-          </p>
-        </div>
-
-        <div>
-          <Label>Địa điểm</Label>
-          <Input
-            value={form.diaDiem}
-            onChange={e => setForm({ ...form, diaDiem: e.target.value })}
-            placeholder="Lô K, KCN Lộc An - Bình Sơn..."
-          />
-        </div>
-
-        <div>
-          <Label>Mô tả</Label>
-          <Textarea
-            rows={3}
-            value={form.moTa}
-            onChange={e => setForm({ ...form, moTa: e.target.value })}
-          />
-        </div>
-
-        <div>
-          <Label>Điều khoản thanh toán (JSON hoặc text)</Label>
-          <Textarea
-            rows={3}
-            value={form.paymentTerms}
-            onChange={e => setForm({ ...form, paymentTerms: e.target.value })}
-            placeholder='{"tamUng":"10%","thanhToanTam":"100% W.done","quyetToan":"Final Account","baoHanh":"5%"}'
-          />
-        </div>
-
-        <div className="flex justify-end gap-2">
-          <Button variant="ghost" onClick={() => navigate(-1)}>Hủy</Button>
-          <Button
-            onClick={() => mut.mutate()}
-            disabled={!form.tenGoiThau || !form.projectId || mut.isPending}
-          >
-            {editId ? 'Lưu' : 'Tạo phiếu'}
-          </Button>
-        </div>
-      </div>
+      <PeHeaderForm
+        editId={editId}
+        defaultType={urlType}
+        onSaved={(id, type) => navigate(`/purchase-evaluations?id=${id}&type=${type}`)}
+        onCancel={() => navigate(-1)}
+      />
     </div>
   )
 }
diff --git a/fe-user/src/types/contracts.ts b/fe-user/src/types/contracts.ts
index cbe68f4..9eb53e3 100644
--- a/fe-user/src/types/contracts.ts
+++ b/fe-user/src/types/contracts.ts
@@ -158,6 +158,9 @@ export type ContractDetail = {
   updatedAt: string | null
   budgetId: string | null
   budget: ContractBudgetSummary | null
+  // Mig 17 — manual budget fallback khi không link Budget entity.
+  budgetManualName: string | null
+  budgetManualAmount: number | null
   approvals: ContractApproval[]
   comments: ContractComment[]
   attachments: ContractAttachment[]
diff --git a/fe-user/src/types/purchaseEvaluation.ts b/fe-user/src/types/purchaseEvaluation.ts
index a81353e..7cec22c 100644
--- a/fe-user/src/types/purchaseEvaluation.ts
+++ b/fe-user/src/types/purchaseEvaluation.ts
@@ -252,6 +252,9 @@ export type PeDetailBundle = {
   updatedAt: string | null
   budgetId: string | null
   budget: BudgetSummary | null
+  // Mig 17 — manual budget fallback khi không link Budget entity. Cả 2 cùng null OK.
+  budgetManualName: string | null
+  budgetManualAmount: number | null
   suppliers: PeSupplier[]
   details: PeDetailRow[]
   approvals: PeApproval[]