/* Pharmacy — DANH MỤC (2.1): màn ProductMaster. Tách khỏi `MasterData.jsx` 2026-09-07; nạp SAU nó (dùng PRODUCTS · MD_FILTER_FIELDS · ProductDrawer khai ở tệp đó). */ function ProductMaster({ setToast }) { const { PageHeader, SearchBox, Toolbar, GhostBtn, NUM, VND } = window; const { Button } = window.DVMedKingDesignSystem_bf17f8; const { IconBox, IconEdit, IconFilter, IconPlus, IconBarcode, IconAlertTriangle, IconTag, IconCheck, IconX } = window; const [tab, setTab] = React.useState('list'); // DVP-382 #1: tab 'abcxyz' đã gỡ — engine không tính XYZ const [q, setQ] = React.useState(() => { const v = window.__productQuery || ''; window.__productQuery = null; return v; }); const [bar, setBar] = React.useState({ abc: [], ven: [], xyz: [], shape: [], cat: [], rx: [], control: [], lifecycle: [] }); const [added, setAdded] = React.useState([]); // khoá vừa thêm, chưa điền — chỉ sống trong phiên const [sort, setSort] = React.useState({ key: null, dir: 'asc' }); const [sel, setSel] = React.useState(null); const [page, setPage] = React.useState(1); const [size, setSize] = React.useState(10); // T02 — gán VEN cả lô: chọn nhiều SKU rồi gán một lần (mirror thanh chọn ở Tồn kho) const [mdSel, setMdSel] = React.useState(() => new Set()); const [venPick, setVenPick] = React.useState(false); // T02 — giá trị VEN đang CHỜ XÁC NHẬN (null = chưa chọn gì; '' là một giá trị hợp lệ: "Bỏ gán"). const [venAsk, setVenAsk] = React.useState(null); // "Chọn tất cả" của đầu bảng chỉ phủ TRANG. mdAllHits = đã bung ra toàn bộ kết quả đang lọc. const [mdAllHits, setMdAllHits] = React.useState(false); const mdCb = { width: 17, height: 17, accentColor: 'var(--dv-green)', cursor: 'pointer', flex: 'none' }; const mdToggle = (sku) => { setMdAllHits(false); setMdSel((s) => { const n = new Set(s); n.has(sku) ? n.delete(sku) : n.add(sku); return n; }); }; const mdClearSel = () => { setMdSel(new Set()); setMdAllHits(false); setVenPick(false); setVenAsk(null); }; /* [T02] VEN vừa gán trong phiên. Trước đây nút "Xác nhận" chỉ bắn một thông báo rồi bỏ chọn: cột VEN đứng im, chip độ phủ đứng im — người dùng gán xong không có cách nào biết nó đã ăn. `''` là một giá trị HỢP LỆ ("Bỏ gán"), nên phải phân biệt với `undefined` (chưa đụng tới). */ const [venLocal, setVenLocal] = React.useState({}); const venOf = (p) => (venLocal[p.sku] !== undefined ? (venLocal[p.sku] || null) : mdVenOf(p)); // Deep-link: mở sẵn hồ sơ SKU khi điều hướng từ nơi khác (vd “gán NCC” ở Đề xuất mua) React.useEffect(() => { const fsku = window.__focusSku; window.__focusSku = null; if (fsku) { const p = PRODUCTS.find((x) => x.sku === fsku); if (p) setSel(p); } }, []); const has = (k, v) => bar[k].length === 0 || bar[k].includes(v == null ? 'none' : v); const rows = PRODUCTS.filter((p) => has('abc', p.abc) && has('ven', venOf(p)) && has('xyz', p.xyz) && has('shape', p.shape) && (bar.cat.length === 0 || bar.cat.includes(p.group)) && has('rx', p.type) && (bar.control.length === 0 || bar.control.includes(window.ctrlOf(p))) && (bar.lifecycle.length === 0 || bar.lifecycle.includes(p.lifecycle || 'dang_ban')) && (p.name + p.sku + p.barcode + p.ncc).toLowerCase().includes(q.toLowerCase())); /* Vòng ba nấc: tăng → giảm → VỀ MẶC ĐỊNH (theo mã). Nấc thứ ba không phải trang trí — không có nó thì bảng không bao giờ quay lại được thứ tự gốc. Thiếu giá trị xuống CUỐI ở cả hai chiều, khớp NULLS LAST của bản SQL: để mặc định thì bấm "giảm dần" trên XYZ được một trang toàn ô trống, tức cột trả lời "không có gì" đúng lúc người ta đi tìm cái có. */ const SORTABLE = { name: (p) => p.name, group: (p) => p.group, abc: (p) => p.abc, ven: (p) => venOf(p), xyz: (p) => p.xyz, rx: (p) => (p.type === 'rx' ? 1 : 0) }; const clickSort = (k) => setSort((s) => (s.key !== k ? { key: k, dir: 'asc' } : s.dir === 'asc' ? { key: k, dir: 'desc' } : { key: null, dir: 'asc' })); const sorted = React.useMemo(() => { if (!sort.key) return [...rows].sort((a, b) => a.sku.localeCompare(b.sku)); const of = SORTABLE[sort.key]; const sign = sort.dir === 'desc' ? -1 : 1; return [...rows].sort((a, b) => { const va = of(a), vb = of(b); if (va == null && vb == null) return a.sku.localeCompare(b.sku); if (va == null) return 1; if (vb == null) return -1; const c = typeof va === 'number' && typeof vb === 'number' ? va - vb : String(va).localeCompare(String(vb), 'vi'); return c !== 0 ? sign * c : a.sku.localeCompare(b.sku); // hoà ⇒ rơi về mã, để phân trang tất định }); }, [rows, sort]); // Đổi bộ lọc ⇒ câu "toàn bộ kết quả đang lọc" đang nói về một tập KHÁC; hạ cờ (giữ nguyên SKU đã chọn). React.useEffect(() => { setPage(1); setMdAllHits(false); setVenAsk(null); }, [q, bar, sort]); const pageRows = sorted.slice((page - 1) * size, page * size); const mdAllOn = pageRows.length > 0 && pageRows.every((p) => mdSel.has(p.sku)); /* T02 — số lượng cho thao tác cả lô. NO_TICKET_YET: ở bản thật, "chọn hết kết quả đang lọc" KHÔNG được gửi 5.030 id lên — endpoint gán VEN cả lô phải nhận chính BỘ LỌC (cùng vị ngữ bảng đang dùng) rồi tự đếm ở server; danh sách id chỉ dành cho ca chọn tay. Fixture ở đây nhỏ nên vẫn liệt kê được từng mã — đó là giới hạn của prototype, không phải hình dạng của API. */ const mdCount = mdAllHits ? rows.length : mdSel.size; const mdCanExpand = mdAllOn && !mdAllHits && rows.length > pageRows.length; const mdSelectAllHits = () => { setMdSel(new Set(sorted.map((p) => p.sku))); setMdAllHits(true); setVenAsk(null); }; const mdSelectPageOnly = () => { setMdSel(new Set(pageRows.map((p) => p.sku))); setMdAllHits(false); setVenAsk(null); }; const shown = MD_FILTER_FIELDS.filter((f) => mdColOn(f.key) && (bar[f.key].length > 0 || added.includes(f.key))); const hidden = MD_FILTER_FIELDS.filter((f) => !shown.includes(f)).map((f) => f.key); const activeCount = MD_FILTER_FIELDS.filter((f) => bar[f.key].length > 0).length; // Cột nào sắp được thì tiêu đề mang mũi tên; cột hằng số thì KHÔNG — xem chú thích đầu khối. // T03/T04 — VEN · XYZ · Hình dạng ẩn theo cờ tenant (mdColOn); căn phải theo TÊN cột, không theo chỉ số. const HEAD = [ ['Sản phẩm', 'name'], ['Nhóm', 'group'], ['Loại', 'rx'], ['Bảo quản', null], ['Quy cách', null], ['NCC mặc định', null], ['ABC', 'abc'], ...(mdColOn('ven') ? [['VEN', 'ven']] : []), ...(mdColOn('xyz') ? [['XYZ', 'xyz']] : []), ...(mdColOn('shape') ? [['Hình dạng', null, 'Trục chọn công thức là ĐỘ THƯA (máy đo); XYZ chỉ là chỉ báo đệm.']] : []), ['min/max (KV)', null], ['Leadtime', null], ['MOQ', null], ['Giá bán', null], ['', null], ]; return (
{/* DVP-516 — KHÔNG có cột ABC ở đây. Hồ sơ sản phẩm vừa đóng đường khai tay hạng ABC (engine xếp ở kho tổng, tính lại mỗi lượt đồng bộ); để cột đó trong file mẫu là mở lại đúng đường vừa đóng, bằng lối rộng hơn — một file Excel ghi đè cả danh mục. */} PRODUCTS.map((p) => [p.sku, p.name, p.unit, p.pack, p.group, p.type, p.storage, p.ncc, p.price])} sampleRows={[ { cells: ['SP0512', 'Cetirizin 10mg', 'Hộp', 'Hộp 10 vỉ', 'Thuốc · Kháng dị ứng', 'otc', 'thuong', 'Traphaco', '900'] }, { cells: ['SP0513', 'Vitamin D3 1000IU', 'Lọ', 'Lọ 60 viên', 'TPCN · Vitamin & khoáng', 'otc', 'thuong', 'Dược Hậu Giang', '2400'] }, { cells: ['SP0514', 'Atorvastatin 20mg', 'Hộp', 'Hộp 30 viên', 'Thuốc · Tim mạch', 'rx', 'thuong', 'NCC chưa có', '3200'], _warn: 'NCC không khớp danh bạ', _warnCol: 7 }, ]} setToast={setToast} /> {/* T05 — SKU mới KHÔNG mặc định hạng B: để trống tới khi engine xếp hạng (DVP-516) */} } /> {tab === 'list' && ( <> {shown.map((f) => ( { setBar((b) => ({ ...b, [f.key]: v })); setAdded((a) => a.filter((x) => x !== f.key)); }} onRemove={() => { setBar((b) => ({ ...b, [f.key]: [] })); setAdded((a) => a.filter((x) => x !== f.key)); }} /> ))} {/* Dòng tổng kết: con số cho biết HÌNH DẠNG vấn đề trước khi bấm vào đâu cả. */}
{NUM ? NUM(rows.length) : rows.length} SKU{activeCount > 0 ? ` khớp ${activeCount} điều kiện` : ''} {sort.key && · sắp theo {(HEAD.find(([, k]) => k === sort.key) || [''])[0]} {sort.dir === 'asc' ? 'tăng dần' : 'giảm dần'}} {/* [T02] ĐÃ GỠ chip độ phủ VEN (Jet chốt 2026-08-30). Nó nói lại bằng phân số đúng thứ mà CỘT VEN ngay bên dưới đã nói theo từng dòng, kèm nguồn suy. Bản cũ tệ hơn nữa: chuỗi gõ cứng "612/5.030" đứng cạnh một con số đếm thật. [Quan sát — Dược Vương, nguồn/ngày chưa xác định] con số cũ là 612/5.030. Số đo prod gần nhất ngược hẳn: đã gán 0/13.128 (duoc-vuong) · 0/9.549 (relife), đo 2026-08-20 qua `lib/views/ven.ts`. Giữ ở đây làm xuất xứ, không hiện lên màn. */}
{/* T10 — chế độ dự trù per-SKU (DVP-577). Panel theo BỘ LỌC: hai nút áp cho cả tập lọc, ô số cố định chỉ mở khi bộ lọc còn đúng một mã. Xem src/pharmacy/PlanMode.jsx. */}
{HEAD.map(([h, k, tip], i) => { const on = k && sort.key === k; const align = ['min/max (KV)', 'Leadtime', 'MOQ', 'Giá bán'].includes(h) ? 'right' : 'left'; const base = { textAlign: align, fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.04em', whiteSpace: 'nowrap', borderBottom: '1px solid var(--border-default)' }; if (!k) return ; return ( ); })} {pageRows.map((p) => { const _sl = PRODUCT_SUPPLIERS[p.sku] || []; const _ds = _sl.find((x) => x.default) || _sl[0]; const _ven = venOf(p); return ( setSel(p)}> {mdColOn('ven') && } {mdColOn('xyz') && } {mdColOn('shape') && } ); })}
{ setMdAllHits(false); setVenAsk(null); setMdSel(() => (mdAllOn ? new Set() : new Set(pageRows.map((p) => p.sku)))); }} title="Chọn tất cả SKU trong TRANG này. Muốn cả bộ lọc thì bung tiếp ở thanh chọn bên dưới." aria-label="Chọn tất cả SKU trong trang" style={mdCb} />{h}
e.stopPropagation()}> mdToggle(p.sku)} aria-label={`Chọn ${p.sku}`} style={mdCb} />
{p.name}
{p.sku} · {p.barcode}
 {p.group.split(' · ').slice(1).join(' · ')} {p.lifecycle === 'ngung_dat' && Ngừng đặt} {p.pack} {p.ncc || Chưa gắn NCC} {_ven ? {_ven} : —}{p.xyz ? {p.xyz} : —}{p.shape ? {MD_SHAPE_LABEL[p.shape]} : Chưa đủ dữ liệu}{p.kvMin}/{p.kvMax} {_ds ? _ds.leadtime + 'n' : '—'} {_ds ? _ds.moq : '—'} {VND(p.price)}
{/* T02 — thanh chọn dính đáy (mirror Tồn kho): gán VEN một lần cho cả lô SKU đang chọn. Hai thứ khác bản trước: (1) BUNG ĐƯỢC ra toàn bộ kết quả đang lọc. "Chọn tất cả" ở đầu bảng chỉ phủ 10 hàng của TRANG, nên gán VEN cho 5.030 mã theo lối đó là ~503 lượt lặp tay. (2) Gán VEN có XÁC NHẬN HAI BƯỚC. Đây là thao tác nặng tay nhất màn này — đổi phân hạng hàng loạt, không có Hoàn tác — trong khi hai việc nhẹ hơn ở tab Điểm bán (đổi loại điểm, tạm dừng điểm) đều đã hỏi lại. Nặng hơn mà hỏi ít hơn là ngược. */} {mdSel.size > 0 && (
{NUM ? NUM(mdCount) : mdCount} SKU đã chọn {mdCanExpand && ( )} {mdAllHits && ( Toàn bộ kết quả đang lọc )}
{mdColOn('ven') && (venAsk === null ? ( {venPick && (
{MD_VEN_OPTS.map(([v, t]) => ( ))}
)} ) : ( {venAsk ? `Gán ${mdVenLabel(venAsk)}` : 'Bỏ gán VEN'} cho {NUM ? NUM(mdCount) : mdCount} SKU? {/* [T02] Áp thẳng vào dữ liệu rồi mới báo — cùng khuôn `flipStatus` của tab Điểm bán. */} ))}
)} )} {sel && setSel(null)} setToast={setToast} />}
); } window.ProductMaster = ProductMaster;