[CLAUDE] FE-PE: AddSupplierDialog auto-fill từ master khi chọn NCC

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

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

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>