From 66551db4d8c6c9a44cbec2e56bf14cb5389d49b7 Mon Sep 17 00:00:00 2001
From: pqhuy1987 <pqhuy1987@gmail.com>
Date: Mon, 11 May 2026 12:03:33 +0700
Subject: [PATCH] =?UTF-8?q?[CLAUDE]=20FE-PE:=20AddSupplierDialog=20auto-fi?=
 =?UTF-8?q?ll=20t=E1=BB=AB=20master=20khi=20ch=E1=BB=8Dn=20NCC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

User Session 20 turn 10: chọn NCC từ dropdown master → auto-load các field
đã có sẵn (contactPerson/phone/email/note) vào form, đỡ phải nhập tay lại.

FE-only mirror fe-admin + fe-user.

AddSupplierDialog dropdown "NCC (master)" onChange:
  - Lookup suppliers.data find(s => s.id === selectedId) → master row
  - setForm prev → ghi đè 4 field:
    * contactName ← picked.contactPerson ?? ''
    * contactPhone ← picked.phone ?? ''
    * contactEmail ← picked.email ?? ''
    * note ← picked.note ?? ''
  - KHÔNG đụng displayName / paymentTermText / thanhTien (manual cho user)
  - Hint "✓ Đã tự điền từ Master — bạn có thể sửa lại nếu cần." text-[10px]
    text-emerald-600 dưới dropdown khi đã chọn supplier

Mapping master Supplier → PE.Supplier fields (skip address vì không có
field tương ứng — có thể nhét vào note nếu user cần, manual).

User vẫn override các field auto-fill được sau đó (input bình thường).
Đổi supplier giữa lúc đã chỉnh tay → re-fill từ master mới (mặc định ghi đè).

Verify:
- npm run build × fe-admin pass
- npm run build × fe-user pass

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 fe-admin/src/components/pe/PeDetailTabs.tsx | 18 +++++++++++++++++-
 fe-user/src/components/pe/PeDetailTabs.tsx  | 18 +++++++++++++++++-
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/fe-admin/src/components/pe/PeDetailTabs.tsx b/fe-admin/src/components/pe/PeDetailTabs.tsx
index 864d940..3da4ff6 100644
--- a/fe-admin/src/components/pe/PeDetailTabs.tsx
+++ b/fe-admin/src/components/pe/PeDetailTabs.tsx
@@ -1140,12 +1140,28 @@ function AddSupplierDialog({ evaluationId, detailId, onClose }: {
       <div className="space-y-3">
         <div>
           <Label>NCC (master)</Label>
-          <Select value={form.supplierId} onChange={e => setForm({ ...form, supplierId: e.target.value })}>
+          <Select
+            value={form.supplierId}
+            onChange={e => {
+              // Session 20 turn 10: auto-fill các field NCC từ master data sẵn có
+              // (contactPerson/phone/email/note). User vẫn override được sau đó.
+              const picked = suppliers.data?.find(s => s.id === e.target.value)
+              setForm(prev => ({
+                ...prev,
+                supplierId: e.target.value,
+                contactName: picked?.contactPerson ?? '',
+                contactPhone: picked?.phone ?? '',
+                contactEmail: picked?.email ?? '',
+                note: picked?.note ?? '',
+              }))
+            }}
+          >
             <option value="">-- Chọn --</option>
             {suppliers.data?.map(s => (
               <option key={s.id} value={s.id}>{s.code} — {s.name}</option>
             ))}
           </Select>
+          {form.supplierId && <p className="mt-1 text-[10px] text-emerald-600">✓ Đã tự điền từ Master — bạn có thể sửa lại nếu cần.</p>}
         </div>
         <div className="grid grid-cols-2 gap-3">
           <div><Label>Hiển thị</Label><Input value={form.displayName} onChange={e => setForm({ ...form, displayName: e.target.value })} placeholder="vd TGN-30 ngày" /></div>
diff --git a/fe-user/src/components/pe/PeDetailTabs.tsx b/fe-user/src/components/pe/PeDetailTabs.tsx
index a3e4466..c900529 100644
--- a/fe-user/src/components/pe/PeDetailTabs.tsx
+++ b/fe-user/src/components/pe/PeDetailTabs.tsx
@@ -1138,12 +1138,28 @@ function AddSupplierDialog({ evaluationId, detailId, onClose }: {
       <div className="space-y-3">
         <div>
           <Label>NCC (master)</Label>
-          <Select value={form.supplierId} onChange={e => setForm({ ...form, supplierId: e.target.value })}>
+          <Select
+            value={form.supplierId}
+            onChange={e => {
+              // Session 20 turn 10: auto-fill các field NCC từ master data sẵn có
+              // (contactPerson/phone/email/note). User vẫn override được sau đó.
+              const picked = suppliers.data?.find(s => s.id === e.target.value)
+              setForm(prev => ({
+                ...prev,
+                supplierId: e.target.value,
+                contactName: picked?.contactPerson ?? '',
+                contactPhone: picked?.phone ?? '',
+                contactEmail: picked?.email ?? '',
+                note: picked?.note ?? '',
+              }))
+            }}
+          >
             <option value="">-- Chọn --</option>
             {suppliers.data?.map(s => (
               <option key={s.id} value={s.id}>{s.code} — {s.name}</option>
             ))}
           </Select>
+          {form.supplierId && <p className="mt-1 text-[10px] text-emerald-600">✓ Đã tự điền từ Master — bạn có thể sửa lại nếu cần.</p>}
         </div>
         <div className="grid grid-cols-2 gap-3">
           <div><Label>Hiển thị</Label><Input value={form.displayName} onChange={e => setForm({ ...form, displayName: e.target.value })} placeholder="vd TGN-30 ngày" /></div>