// หน้าสต็อกอะไหล่ — ฟีเจอร์เต็มเหมือนสต็อกสินค้า แต่ล็อกหมวด "อะไหล่" (มีแต่หมวดย่อย ไม่มีหมวดหลักอื่น) function PartsPage({ ui, user }) { const { st, dispatch } = useStore(); const toast = useToast(); const [q, setQ] = React.useState(""); const [cat, setCat] = React.useState("ทั้งหมด"); const [sub, setSub] = React.useState("ทั้งหมด"); const [openId, setOpenId] = React.useState(null); const [showAdd, setShowAdd] = React.useState(false); const [showCats, setShowCats] = React.useState(false); const [delTarget, setDelTarget] = React.useState(null); const [delCat, setDelCat] = React.useState(null); const [editCat, setEditCat] = React.useState(null); const [bcTarget, setBcTarget] = React.useState(null); const [adj, setAdj] = React.useState({ locId: "", qty: "" }); const [qtySort, setQtySort] = React.useState(null); // null=ปกติ, "desc"=มาก→น้อย, "asc"=น้อย→มาก const [nf, setNf] = React.useState({ name: "", cat: "อะไหล่", sub: "", brand: "OEM", brandOther: "", barcode: "", price: "", wprice: "", cost: "", reorder: 5, img: null, initQty: "", initLoc: "" }); const [nsub, setNsub] = React.useState({}); const [ncat, setNcat] = React.useState({ name: "", prefix: "" }); const isOwner = user.role === "owner"; const role = st.roles[user.role] || {}; const canManage = isOwner || role.partsAccess === "all"; const partsAllBranch = role.allBranch || role.partsAccess === "all"; const [stockView, setStockView] = React.useState(partsAllBranch ? "ALL" : user.branch); const partCats = st.cats.filter((c) => c.parts); const partCatNames = partCats.map((c) => c.name); // หมวดย่อยที่แสดงในแถบกรอง (รวมทุกหมวดอะไหล่เมื่อเลือก "ทั้งหมด") const subOpts = cat === "ทั้งหมด" ? [...new Set(partCats.flatMap((c) => c.subs))] : (partCats.find((c) => c.name === cat) || { subs: [] }).subs; const qOf = (pp) => stockView === "ALL" ? stockTotal(pp) : stockInBranch(st, pp, stockView); const products = st.products.filter((p) => partCatNames.includes(p.cat) && (cat === "ทั้งหมด" || p.cat === cat) && (sub === "ทั้งหมด" || p.sub === sub) && (q === "" || (p.name + p.sku + p.barcode + (p.sub || "") + (p.brand || "")).toLowerCase().includes(q.toLowerCase())) ); if (qtySort === "desc") products.sort((a, b) => qOf(b) - qOf(a)); else if (qtySort === "asc") products.sort((a, b) => qOf(a) - qOf(b)); const p = st.products.find((x) => x.id === openId); const nfBrand = nf.brand === "อื่นๆ" ? (nf.brandOther || "อื่นๆ") : nf.brand; const skuPreview = peekSku(st, nf.cat, nfBrand); const addCat = () => { if (!ncat.name || !ncat.prefix) { toast("กรอกชื่อหมวดและตัวย่อ (เช่น SP)", "danger"); return; } dispatch({ type: "CAT_ADD", name: ncat.name, prefix: ncat.prefix.toUpperCase().slice(0, 4), parts: true }); toast(`เพิ่มหมวดอะไหล่ ${ncat.name} แล้ว`); setNcat({ name: "", prefix: "" }); }; const doAdjust = (sign) => { if (!adj.locId || !adj.qty) { toast("เลือก Location และจำนวนก่อน", "danger"); return; } dispatch({ type: "ADJUST", productId: p.id, locId: adj.locId, delta: sign * Number(adj.qty), by: user.id, reason: sign > 0 ? "รับอะไหล่เข้า" : "ปรับยอด/ตัดของเสีย" }); toast("บันทึกความเคลื่อนไหวแล้ว"); setAdj({ locId: "", qty: "" }); }; const addProduct = () => { if (!nf.name || !nf.price) { toast("กรอกชื่ออะไหล่และราคา", "danger"); return; } dispatch({ type: "PRODUCT_ADD", by: user.id, product: { name: nf.name, cat: nf.cat, sub: nf.sub || "อื่นๆ", brand: nfBrand, price: Number(nf.price), wprice: nf.wprice === "" ? null : Number(nf.wprice), cost: Number(nf.cost) || 0, reorder: Number(nf.reorder) || 0, barcode: nf.barcode || `885000${Date.now() % 10000000}`, img: nf.img, initQty: Number(nf.initQty) || 0, initLoc: nf.initLoc, }, }); toast(`เพิ่มอะไหล่แล้ว · ${skuPreview}`); setShowAdd(false); setNf({ name: "", cat: partCatNames[0] || "อะไหล่", sub: "", brand: "OEM", brandOther: "", barcode: "", price: "", wprice: "", cost: "", reorder: 5, img: null, initQty: "", initLoc: "" }); }; const doDelete = () => { const m = (delTarget.sku || "").match(/(\d+)$/); dispatch({ type: "PRODUCT_DEL", id: delTarget.id }); toast(`ลบ ${delTarget.name} แล้ว · เลขรัน ${m ? Number(m[1]) : "—"} จะถูกนำกลับมาใช้ใหม่`, "info"); setDelTarget(null); setOpenId(null); }; return (
{partsAllBranch && ( dispatch({ type: "PRODUCT_SET", id: p.id, patch: { cat: v, sub: "" } })} options={partCatNames} /> setAdj((x) => ({ ...x, locId: v }))} placeholder="— Location —" style={{ flex: 1.4 }} options={st.locations.map((l) => ({ value: l.id, label: locName(st, l.id) }))} /> setAdj((x) => ({ ...x, qty: e.target.value }))} style={{ width: 90 }} /> doAdjust(1)}>+ รับเข้า doAdjust(-1)}>− ตัดออก
ทุกการปรับยอดถูกบันทึกในรายการเคลื่อนไหวอัตโนมัติ
)} )} {/* ── ยืนยันลบอะไหล่ ── */} setDelTarget(null)} title="ยืนยันการลบอะไหล่" width={430} footer={ setDelTarget(null)}>ยกเลิก 🗑 ลบอะไหล่ }> {delTarget && (
{delTarget.name}
{delTarget.sku}
สต็อกคงเหลือ {stockTotal(delTarget)} ชิ้นจะถูกลบไปด้วย · เลขรันท้าย SKU จะถูกนำกลับมาใช้กับอะไหล่ใหม่ชิ้นถัดไปโดยอัตโนมัติ
)} {/* ── เพิ่มอะไหล่ ── */} setShowAdd(false)} title="เพิ่มอะไหล่ใหม่" width={640} footer={
SKU อัตโนมัติ: {skuPreview}
setShowAdd(false)}>ยกเลิก บันทึกอะไหล่ }>
setNf((x) => ({ ...x, name: e.target.value }))} /> setNf((x) => ({ ...x, sub: v }))} placeholder="— เลือก / เพิ่มในจัดการหมวด —" options={(partCats.find((c) => c.name === nf.cat) || { subs: [] }).subs} /> setNf((x) => ({ ...x, initLoc: v }))} placeholder="— เลือก —" options={st.locations.map((l) => ({ value: l.id, label: locName(st, l.id) }))} />
{/* ── จัดการหมวดหมู่ & หมวดย่อยอะไหล่ ── */} setShowCats(false)} title="จัดการหมวดหมู่ & หมวดย่อย (อะไหล่)" width={560}>
{partCats.map((c) => (
{editCat && editCat.orig === c.name ? ( setEditCat((x) => ({ ...x, name: e.target.value }))} style={{ padding: "5px 10px", fontSize: 13, width: 150 }} /> setEditCat((x) => ({ ...x, prefix: e.target.value.toUpperCase() }))} style={{ padding: "5px 10px", fontSize: 13, width: 70 }} /> { dispatch({ type: "CAT_SET", name: c.name, patch: { name: editCat.name.trim() || c.name, prefix: (editCat.prefix || c.prefix).slice(0, 4) } }); toast("แก้ไขหมวดแล้ว"); setEditCat(null); }}>บันทึก setEditCat(null)}>ยกเลิก ) : ( {c.name} SKU: {c.prefix}-ยี่ห้อ-XXXXXX {st.products.filter((x) => x.cat === c.name).length} รายการ {isOwner && (
)} )}
{c.subs.map((s) => ( {s} dispatch({ type: "SUB_DEL", cat: c.name, sub: s })} style={{ cursor: "pointer", color: T.sub, width: 17, height: 17, borderRadius: "50%", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 10, background: "#fff" }}>✕ ))}
setNsub((x) => ({ ...x, [c.name]: e.target.value }))} onKeyDown={(e) => { if (e.key === "Enter" && nsub[c.name]) { dispatch({ type: "SUB_ADD", cat: c.name, sub: nsub[c.name].trim() }); setNsub((x) => ({ ...x, [c.name]: "" })); } }} style={{ padding: "4px 10px", fontSize: 12, width: 130, borderRadius: 999 }} /> { dispatch({ type: "SUB_ADD", cat: c.name, sub: nsub[c.name].trim() }); setNsub((x) => ({ ...x, [c.name]: "" })); }}>เพิ่ม
))}
⊕ เพิ่มหมวดหมู่อะไหล่ใหม่
setNcat((x) => ({ ...x, name: e.target.value }))} placeholder="ชื่อหมวด เช่น อะไหล่ Notebook" style={{ flex: 1 }} /> setNcat((x) => ({ ...x, prefix: e.target.value.toUpperCase() }))} placeholder="ตัวย่อ เช่น SN" style={{ width: 110 }} /> เพิ่ม
ตัวย่อใช้รันเลขอะไหล่อัตโนมัติ เช่น SN-APPLE-000001
 {/* ── ลบหมวดอะไหล่ ── */} setDelCat(null)} title="ยืนยันการลบหมวดหมู่" width={420} footer={ setDelCat(null)}>ยกเลิก { const cnt = st.products.filter((x) => x.cat === delCat.name).length; if (cnt > 0) { toast(`ยังมีอะไหล่ ${cnt} รายการในหมวดนี้ — ย้าย/ลบก่อน`, "danger"); return; } if (partCats.length <= 1) { toast("ต้องมีหมวดอะไหล่อย่างน้อย 1 หมวด", "danger"); return; } dispatch({ type: "CAT_DEL", name: delCat.name }); toast(`ลบหมวด ${delCat.name} แล้ว`, "info"); if (cat === delCat.name) setCat("ทั้งหมด"); setDelCat(null); }}>✕ ลบหมวด }> {delCat &&
ลบหมวด {delCat.name}?
ลบได้เฉพาะหมวดที่ไม่มีอะไหล่อยู่
} {/* ── พิมพ์บาร์โค้ด ── */} setBcTarget(null)} product={bcTarget} /> ); } window.PartsPage = PartsPage;