// หน้าสต็อกสินค้า — หมวดหมู่/หมวดย่อยแบบไดนามิก + รัน SKU อัตโนมัติ + ลบสินค้า const FILM_BRANDS = ["Dino", "Bearshield", "Focus", "Hi-Shield", "ABLEMEN", "Gorilla", "อื่นๆ"]; function StockPage({ 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 [lb, setLb] = React.useState(null); const [showAdd, setShowAdd] = React.useState(false); const [showCats, setShowCats] = React.useState(false); const [delTarget, setDelTarget] = 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 [tf, setTf] = React.useState({ from: "", to: "", qty: "" }); const SERIAL_CATS = ["เครื่อง", "เครื่องมือสอง", "Notebook/MacBook"]; const isSerial = (c) => SERIAL_CATS.includes(c); const [nf, setNf] = React.useState({ name: "", cat: "อุปกรณ์", sub: "", brand: "OEM", brandOther: "", barcode: "", price: "", wprice: "", cost: "", reorder: 5, img: null, imgs: [], initQty: "", initLoc: "", imei: "", model: "", color: "", storage: "", storageOther: "" }); // จัดการหมวดหมู่ const [ncat, setNcat] = React.useState({ name: "", prefix: "" }); const [nsub, setNsub] = React.useState({}); const [editCat, setEditCat] = React.useState(null); // {orig, name, prefix} const [delCat, setDelCat] = React.useState(null); const isOwner = user.role === "owner"; const role = st.roles[user.role] || {}; const noParts = role.stockAccess === "all-no-parts" || role.stockAccess === "own-no-parts"; const stockAllBranch = role.allBranch || (role.stockAccess || "").startsWith("all"); // มุมมองสาขาของหน้าสต็อก (ผู้จัดการ/สต็อก/ช่าง ดูได้ทุกสาขา) const [stockView, setStockView] = React.useState(stockAllBranch ? "ALL" : user.branch); const catObj = st.cats.find((c) => c.name === cat); const subOpts = catObj ? catObj.subs : []; React.useEffect(() => { setSub("ทั้งหมด"); }, [cat]); const catList = st.cats.filter((c) => !c.parts); const prodOrder = new Map(st.products.map((x, i) => [x.id, i])); const qOf = (pp) => stockView === "ALL" ? stockTotal(pp) : stockInBranch(st, pp, stockView); const products = st.products.filter((p) => 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())) ).sort((a, b) => { if (qtySort === "desc") return qOf(b) - qOf(a); if (qtySort === "asc") return qOf(a) - qOf(b); return (b.addedAt != null ? b.addedAt : prodOrder.get(b.id)) - (a.addedAt != null ? a.addedAt : prodOrder.get(a.id)); }); 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 nfCatObj = st.cats.find((c) => c.name === nf.cat); 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 doTransfer = () => { if (!tf.from || !tf.to) { toast("เลือก Location ต้นทาง–ปลายทางก่อน", "danger"); return; } if (tf.from === tf.to) { toast("Location ต้นทางกับปลายทางต้องต่างกัน", "danger"); return; } if ((p.stock[tf.from] || 0) < 1) { toast("สต็อกที่ Location ต้นทางไม่พอ", "danger"); return; } dispatch({ type: "TRANSFER", productId: p.id, from: tf.from, to: tf.to, qty: 1, by: user.id }); toast("ย้ายสต็อกและบันทึกประวัติแล้ว"); setTf({ from: "", to: "", 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, imei: isSerial(nf.cat) ? nf.imei : undefined, model: isSerial(nf.cat) ? nf.model : undefined, color: isSerial(nf.cat) ? nf.color : undefined, storage: isSerial(nf.cat) ? (nf.storage === "อื่นๆ" ? nf.storageOther : nf.storage) : undefined, price: Number(nf.price), wprice: nf.wprice === "" ? null : Number(nf.wprice), cost: Number(nf.cost) || 0, reorder: isSerial(nf.cat) ? 0 : (Number(nf.reorder) || 0), barcode: nf.barcode || `885000${Date.now() % 10000000}`, img: (nf.imgs && nf.imgs[0]) || null, imgs: nf.imgs || [], initQty: isSerial(nf.cat) ? (nf.initLoc ? 1 : 0) : (Number(nf.initQty) || 0), initLoc: nf.initLoc, }, }); toast(`เพิ่มสินค้าแล้ว · ${skuPreview}`); setShowAdd(false); setNf({ name: "", cat: "อุปกรณ์", sub: "", brand: "OEM", brandOther: "", barcode: "", price: "", wprice: "", cost: "", reorder: 5, img: null, imgs: [], initQty: "", initLoc: "", imei: "", model: "", color: "", storage: "", storageOther: "" }); }; 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); }; const addCat = () => { if (!ncat.name || !ncat.prefix) { toast("กรอกชื่อหมวดและตัวย่อ (เช่น GA)", "danger"); return; } dispatch({ type: "CAT_ADD", name: ncat.name, prefix: ncat.prefix.toUpperCase().slice(0, 4) }); toast(`เพิ่มหมวด ${ncat.name} แล้ว`); setNcat({ name: "", prefix: "" }); }; return (
{stockAllBranch && ( dispatch({ type: "PRODUCT_SET", id: p.id, patch: { brand: v } })} options={[...new Set([p.brand, ...BRANDS].filter(Boolean))]} /> dispatch({ type: "PRODUCT_SET", id: p.id, patch: { sub: v } })} placeholder="— เลือก —" options={(st.cats.find((c) => c.name === p.cat) || { subs: [] }).subs} />
SKU: {p.sku} · ยี่ห้อ: {p.brand || "—"}
คงเหลือรวมทุกสาขา: {stockTotal(p)} ชิ้น
คงเหลือรายตำแหน่ง (Location)
{Object.entries(p.stock).length === 0 &&
ไม่มีสต็อกคงเหลือ
} {Object.entries(p.stock).map(([locId, qq]) => (
{(st.locations.find((l) => l.id === locId) || {}).code || "?"} {locName(st, locId)} {qq}
))}
{isSerial(p.cat) ? ( ย้ายสต็อก (ระหว่าง Location)
setTf((x) => ({ ...x, to: v }))} placeholder="— ปลายทาง —" style={{ flex: 1.3 }} options={st.locations.filter((l) => l.id !== tf.from).map((l) => ({ value: l.id, label: locName(st, l.id) }))} /> ⇄ ย้าย
สินค้าประเภทเครื่อง/Notebook มีได้อย่างละ 1 เครื่อง · ย้ายทั้งเครื่อง · ทุกการย้ายถูกบันทึกในรายการเคลื่อนไหวอัตโนมัติ
 ) : ( รับเข้า / ปรับยอด
setNf((x) => ({ ...x, cat: v, sub: "" }))} options={catList.map((c) => c.name)} /> setNf((x) => ({ ...x, brand: v }))} options={nf.sub === "ฟิล์ม" ? FILM_BRANDS : BRANDS} /> {nf.brand === "อื่นๆ" ? setNf((x) => ({ ...x, brandOther: e.target.value }))} /> : setNf((x) => ({ ...x, imgs: v }))} size={52} onView={(i) => setLb({ imgs: nf.imgs, index: i })} hint="คลิก + เพิ่มรูป · คลิกรูปเพื่อดูใหญ่" />} {nf.brand === "อื่นๆ" && setNf((x) => ({ ...x, imgs: v }))} size={52} onView={(i) => setLb({ imgs: nf.imgs, index: i })} />} {isSerial(nf.cat) && setNf((x) => ({ ...x, model: e.target.value }))} placeholder="เช่น iPhone 13 Pro" /> setNf((x) => ({ ...x, imei: e.target.value }))} placeholder="35XXXXXXXXXXXXX" /> setNf((x) => ({ ...x, color: e.target.value }))} placeholder="เช่น ดำ, ขาว, ฟ้า" /> setNf((x) => ({ ...x, initLoc: v }))} placeholder="— เลือก —" options={st.locations.map((l) => ({ value: l.id, label: locName(st, l.id) }))} />
{/* ── จัดการหมวดหมู่ ── */} setShowCats(false)} title="จัดการหมวดหมู่ & หมวดย่อย" width={560}>
{catList.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="ชื่อหมวด เช่น แกดเจ็ต" style={{ flex: 1 }} /> setNcat((x) => ({ ...x, prefix: e.target.value.toUpperCase() }))} placeholder="ตัวย่อ เช่น GA" style={{ width: 110 }} /> เพิ่ม
ตัวย่อใช้รันเลขสินค้าอัตโนมัติ เช่น GA-SAMSUNG-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; } 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} /> {lb && setLb(null)} onIndex={(i) => setLb((x) => ({ ...x, index: i }))} />}
); } window.StockPage = StockPage;