/* ============================================================
ops.jsx — Inventory · Branches · Recipe (desktop, light)
============================================================ */
/* ---------------- INVENTORY ---------------- */
function Inventory() {
const store = useContext(window.AppCtx);
const D = window.POS_DATA, H = window.POS_HELP;
const [bid, setBid] = useState(store.currentBranchId);
const [filter, setFilter] = useState("all");
const [receive, setReceive] = useState(null);
const [produce, setProduce] = useState(null);
const [ingEdit, setIngEdit] = useState(null); // ingredient row or {new:true}
const canManage = store.access ? store.access.manageStock : false;
const canRestock = store.access ? store.access.restockToPar : false;
const inv = store.inventory[bid] || [];
const branch = store.branches.find((b) => b.id === bid);
function statusOf(it) {
if (it.onHand <= it.reorder * 0.6) return "crit";
if (it.onHand <= it.reorder) return "low";
return "ok";
}
const decorated = inv.map((it) => ({ ...it, ing: store.ing(it.id), st: statusOf(it) })).filter((x) => x.ing);
const lows = decorated.filter((x) => x.st !== "ok");
const shown = decorated.filter((x) => filter === "all" || (filter === "low" && x.st !== "ok"));
return (
{canManage &&
}
{lows.length > 0 && (
{lows.length} รายการต่ำกว่าจุดสั่งซื้อ ที่สาขา{branch.name} — {lows.map((x) => x.ing.name).join(", ")}
{canRestock &&
}
)}
| วัตถุดิบ | ประเภท | คงเหลือ | ระดับสต็อก | จุดสั่งซื้อ | ต้นทุน/หน่วย | จัดการ |
|---|
{shown.map((x) => {
const pct = Math.min(100, Math.round(x.onHand / x.par * 100));
const tone = x.st === "crit" ? "var(--clay)" : x.st === "low" ? "var(--amber)" : "var(--sage)";
return (
| {x.ing.name}{x.ing.kind === "mini" && มินิ} |
{x.ing.kind === "mini" ? "มินิโปรดัก" : typeLabel(x.ing.type)} |
{x.onHand.toLocaleString()} {x.ing.unit} |
{x.st === "crit" ? "วิกฤต" : x.st === "low" ? "ใกล้หมด" : "ปกติ"} · {pct}%
|
{x.reorder.toLocaleString()} |
{H.thb2(store.ingCost(x.id))} |
{x.ing.kind === "mini"
?
: }
{canManage && }
{canManage && }
|
);
})}
{filter === "all" && (
มินิโปรดัก = ส่วนผสมกึ่งสำเร็จที่มีสต็อกของตัวเอง · กด ผลิต เพื่อทำแบตช์ (ตัดวัตถุดิบหลัก → เพิ่มสต็อกมินิ) · เมนูเครื่องดื่มหยิบมินิไปใช้ในสูตรได้จากหน้า เมนู & สูตร
)}
setReceive(null)}
onReceive={(qty) => { store.receiveStock(bid, receive.id, qty); window.toast({ title: "รับวัตถุดิบเข้าแล้ว", msg: receive.ing.name + " +" + qty.toLocaleString() + " " + receive.ing.unit }); setReceive(null); }} />
setProduce(null)}
onProduce={(batches) => { store.produceMini(bid, produce.id, batches); setProduce(null); }} />
g.kind !== "mini")} ingCost={store.ingCost} onClose={() => setIngEdit(null)}
onSave={(data) => {
if (ingEdit && !ingEdit.new) { store.updateIngredient(ingEdit.id, data); window.toast({ title: "บันทึกรายการแล้ว", msg: data.name }); }
else { store.addIngredient(data); }
setIngEdit(null);
}} />
);
}
function typeLabel(t) { return { bean: "เมล็ดกาแฟ", milk: "นม", syrup: "ไซรัป", powder: "ผง", cup: "บรรจุภัณฑ์", other: "อื่นๆ" }[t] || t; }
/* ---- export the current stock view to a print-ready PDF (browser print → Save as PDF) ---- */
function exportStockPdf(branch, rows, store, filter) {
const H = window.POS_HELP;
const today = new Date().toLocaleDateString("th-TH", { day: "numeric", month: "long", year: "numeric" });
const stText = { crit: "วิกฤต", low: "ใกล้หมด", ok: "ปกติ" };
const stColor = { crit: "#b0573f", low: "#bb8a32", ok: "#5d7a5e" };
const esc = (s) => String(s).replace(/[&<>]/g, (c) => ({ "&": "&", "<": "<", ">": ">" }[c]));
const body = rows.map((x) => {
const pct = x.par ? Math.min(100, Math.round(x.onHand / x.par * 100)) : 0;
return `
| ${esc(x.ing.name)}${x.ing.kind === "mini" ? ' มินิ' : ""} |
${x.ing.kind === "mini" ? "มินิโปรดัก" : esc(typeLabel(x.ing.type))} |
${x.onHand.toLocaleString()} ${esc(x.ing.unit)} |
${x.reorder.toLocaleString()} |
${x.par.toLocaleString()} |
${H.thb2(store.ingCost(x.id))} |
${stText[x.st]} · ${pct}% |
`;
}).join("");
const lowCount = rows.filter((x) => x.st !== "ok").length;
const scope = filter === "low" ? "เฉพาะรายการใกล้หมด" : "ทุกรายการ";
const html = `รายงานสต็อก ${esc(branch.name)}
◐POS Coffee
รายงานสต็อกวัตถุดิบ · สาขา${esc(branch.name)}
${esc(branch.code)} · ณ ${today} · ${scope} ${rows.length} รายการ · ใกล้หมด ${lowCount} รายการ
| วัตถุดิบ | ประเภท | คงเหลือ | จุดสั่งซื้อ | ระดับเต็ม | ต้นทุน/หน่วย | สถานะ |
|---|
${body}
`;
const iframe = document.createElement("iframe");
iframe.setAttribute("aria-hidden", "true");
iframe.style.cssText = "position:fixed;left:-9999px;top:0;width:800px;height:600px;border:0;";
document.body.appendChild(iframe);
const w = iframe.contentWindow;
const doc = w.document;
doc.open(); doc.write(html); doc.close();
const cleanup = () => { if (iframe.parentNode) iframe.parentNode.removeChild(iframe); };
const trigger = () => { try { w.focus(); w.print(); } catch (e) {} };
w.onafterprint = cleanup;
if (doc.fonts && doc.fonts.ready) doc.fonts.ready.then(() => setTimeout(trigger, 120));
else setTimeout(trigger, 500);
setTimeout(cleanup, 60000);
window.toast({ title: "เตรียมไฟล์ PDF แล้ว", msg: "สาขา" + branch.name + " · เลือก “บันทึกเป็น PDF” ในหน้าต่างพิมพ์" });
}
function ReceiveModal({ item, branch, onClose, onReceive }) {
const [qty, setQty] = useState(0);
const H = window.POS_HELP;
useEffect(() => { if (item) setQty(Math.max(0, item.par - item.onHand)); }, [item]);
if (!item) return null;
return (
{[100, 500, 1000, item.par - item.onHand].map((q, i) => q > 0 && )}
คงเหลือหลังรับเข้า{(item.onHand + qty).toLocaleString()} {item.ing.unit}
มูลค่าโดยประมาณ{H.thb(qty * item.ing.cost)}
);
}
function ProduceModal({ item, branch, store, onClose, onProduce }) {
const [batches, setBatches] = useState(1);
const H = window.POS_HELP;
useEffect(() => { if (item) setBatches(1); }, [item]);
if (!item) return null;
const m = item.ing;
const yieldQty = (m.batchYield || 0) * batches;
const inv = store.inventory[branch.id] || [];
const onHandOf = (id) => { const r = inv.find((x) => x.id === id); return r ? r.onHand : 0; };
const comps = (m.components || []).map((c) => { const g = store.ing(c.i); return { g, need: c.q * batches, have: onHandOf(c.i) }; }).filter((c) => c.g);
const shortage = comps.some((c) => c.need > c.have);
return (
ผลิตได้+{yieldQty.toLocaleString()} {m.unit}
ตัดวัตถุดิบหลัก
{comps.map((c) => (
{c.g.name}
c.have ? " short" : "")}>−{c.need.toLocaleString()} {c.g.unit}
คงเหลือ {c.have.toLocaleString()}
))}
{shortage && วัตถุดิบหลักไม่พอ — จะถูกตัดเท่าที่มี
}
);
}
function IngredientModal({ item, rawIngredients, ingCost, onClose, onSave }) {
const isNew = item && item.new;
const H = window.POS_HELP;
const TYPES = [["bean", "เมล็ดกาแฟ"], ["milk", "นม"], ["syrup", "ไซรัป"], ["powder", "ผง"], ["cup", "บรรจุภัณฑ์"], ["other", "อื่นๆ"]];
const UNITS = ["g", "ml", "pcs"];
const [kind, setKind] = useState("raw");
const [name, setName] = useState("");
const [type, setType] = useState("bean");
const [unit, setUnit] = useState("g");
const [cost, setCost] = useState(0);
const [reorder, setReorder] = useState(0);
const [par, setPar] = useState(0);
const [initial, setInitial] = useState(0);
const [munit, setMunit] = useState("ที่");
const [batchYield, setBatchYield] = useState(0);
const [comps, setComps] = useState([]); // [{i, q}]
useEffect(() => {
if (item) {
const ing = item.ing || {};
setKind(isNew ? "raw" : (ing.kind === "mini" ? "mini" : "raw"));
setName(isNew ? "" : ing.name);
setType(isNew ? "bean" : ing.type);
setUnit(isNew ? "g" : ing.unit);
setCost(isNew ? 0 : (ing.cost || 0));
setReorder(isNew ? 0 : (item.reorder || 0));
setPar(isNew ? 0 : (item.par || 0));
setInitial(0);
setMunit(isNew ? "ml" : (ing.unit || "ml"));
setBatchYield(isNew ? 0 : (ing.batchYield || 0));
setComps(isNew ? [] : (ing.components ? ing.components.map((c) => ({ ...c })) : []));
}
}, [item]);
if (!item) return null;
const usedIds = comps.map((c) => c.i);
const availRaw = (rawIngredients || []).filter((g) => !usedIds.includes(g.id));
const miniCost = comps.reduce((s, c) => { const g = (rawIngredients || []).find((x) => x.id === c.i); return s + (g ? g.cost * c.q : 0); }, 0);
const cstep = (u) => (u === "pcs" ? 1 : u === "g" ? 5 : 10);
const validRaw = name.trim() && par > 0;
const validMini = name.trim() && comps.length > 0 && batchYield > 0 && par > 0;
const valid = kind === "mini" ? validMini : validRaw;
function setComp(id, delta) {
setComps((cs) => {
const idx = cs.findIndex((c) => c.i === id);
if (idx >= 0) { const nq = Math.max(0, Math.round((cs[idx].q + delta) * 100) / 100); const next = [...cs]; if (nq === 0) next.splice(idx, 1); else next[idx] = { ...next[idx], q: nq }; return next; }
if (delta > 0) return [...cs, { i: id, q: delta }];
return cs;
});
}
function save() {
if (kind === "mini") onSave({ kind: "mini", type: "mini", name: name.trim(), unit: munit.trim() || "ml", batchYield, components: comps, reorder, par, initial });
else onSave({ kind: "raw", name: name.trim(), type, unit, cost, reorder, par, initial });
}
return (
{isNew && (
ชนิด
)}
{kind === "raw" ? (
{isNew && }
) : (
{isNew && }
วัตถุดิบหลักต่อ 1 แบตช์ (ผลิตได้ {batchYield || 0} {munit}) {H.thb2(miniCost)}/แบตช์ · {H.thb2(batchYield ? miniCost / batchYield : 0)}/{munit}
{comps.length === 0 &&
ยังไม่มีส่วนประกอบ — เลือกวัตถุดิบด้านล่าง
}
{comps.map((c) => {
const g = (rawIngredients || []).find((x) => x.id === c.i);
if (!g) return null;
return (
{g.name}
{c.q} {g.unit}
{H.thb2(g.cost * c.q)}
);
})}
{availRaw.length > 0 && (
เพิ่มวัตถุดิบ:
{availRaw.slice(0, 8).map((g) => )}
)}
)}
{kind === "mini" ? "มินิโปรดักมีสต็อกของตัวเอง — กด “ผลิต” เพื่อทำทีละแบตช์ (ตัดวัตถุดิบหลักตามสูตร) และเมนูเครื่องดื่มหยิบไปใช้ในสูตรได้" : (isNew ? "เพิ่มวัตถุดิบเข้าคลังทุกสาขา พร้อมค่า reorder/par เดียวกัน" : "reorder/par อัปเดตทุกสาขา · ยอดคงเหลือไม่เปลี่ยน")}
);
}
/* ---------------- BRANCHES ---------------- */
function Branches() {
const store = useContext(window.AppCtx);
const H = window.POS_HELP;
const [add, setAdd] = useState(false);
const session = store.sessionByBranch();
return (
โครงสร้างองค์กร · HQ
จัดการสาขา
{store.branches.map((b) => {
const s = session[b.id] || { sales: 0, orders: 0 };
return (
สาขา{b.name}
{b.manager}
ยอดขายวันนี้{H.thb(b.salesToday + s.sales)}
พนักงาน{b.staff} คน
เปิดเมื่อ{new Date(b.opened).toLocaleDateString("th-TH", { month: "short", year: "2-digit" })}
);
})}
);
}
function AddBranchModal({ open, onClose, onAdd, existing }) {
const [name, setName] = useState("");
const [code, setCode] = useState("");
const [codeTouched, setCodeTouched] = useState(false);
const [manager, setManager] = useState("");
const [staff, setStaff] = useState(5);
const [taxId, setTaxId] = useState("");
const suggested = "BKK-" + String(existing.length + 1).padStart(2, "0");
useEffect(() => { if (open) { setName(""); setCode(suggested); setCodeTouched(false); setManager(""); setStaff(5); setTaxId(""); } }, [open]);
const codeUp = code.trim().toUpperCase();
const dup = existing.some((b) => b.code.toUpperCase() === codeUp);
const valid = name.trim() && manager.trim() && codeUp && !dup;
return (
ระบบจะผูกคลังสต็อกเริ่มต้น สร้างบัญชีผู้จัดการสาขา และซิงก์เมนู/สูตรจาก HQ อัตโนมัติ
);
}
/* ---------------- RECIPE ---------------- */
function Recipe() {
const store = useContext(window.AppCtx);
const D = window.POS_DATA, H = window.POS_HELP;
const [pid, setPid] = useState("p_latte");
const product = store.product(pid) || store.products[0];
const pidEff = product ? product.id : null;
const recipe = store.recipes[product.id] || [];
const cost = recipe.reduce((s, r) => s + store.ingCost(r.i) * r.q, 0);
const margin = product.price ? Math.round((product.price - cost) / product.price * 100) : 0;
const usedIds = recipe.map((r) => r.i);
const avail = store.ingredients.filter((i) => !usedIds.includes(i.id))
.sort((a, b) => (b.kind === "mini" ? 1 : 0) - (a.kind === "mini" ? 1 : 0));
const canEdit = store.access ? store.access.editRecipe : true;
const canCatalog = store.access ? store.access.manageCatalog : false;
const [prodEdit, setProdEdit] = useState(null);
const [catOpen, setCatOpen] = useState(false);
return (
เมนู & สูตร · กำหนดที่ HQ
จัดการสูตร (Recipe)
{canCatalog &&
}
{canCatalog ?
: (canEdit ?
ซิงก์ทุกสาขาอัตโนมัติ :
ดูอย่างเดียว (View only))}
{store.categories.map((c) => (
{c.name}
{store.products.filter((p) => p.cat === c.id).map((p) => {
const rc = (store.recipes[p.id] || []).reduce((s, r) => s + store.ingCost(r.i) * r.q, 0);
return (
);
})}
))}
{product.en[0]}
{product.name}
{product.en}
ราคาขาย {H.thb(product.price)}
ต้นทุนวัตถุดิบ{H.thb2(cost)}
กำไร/แก้ว{H.thb2(product.price - cost)}
Margin 60 ? "var(--sage)" : "var(--amber)" }}>{margin}%
{canCatalog && (
)}
{recipe.length === 0 ? (
เมนูนี้ไม่มีสูตรวัตถุดิบ (เช่น เบเกอรี่รับมาขาย)
) : (
| วัตถุดิบ | ประเภท | ปริมาณ | ต้นทุน | |
|---|
{recipe.map((r) => {
const ig = store.ing(r.i);
if (!ig) return null;
return (
| {ig.name}{ig.kind === "mini" && มินิ} |
{ig.kind === "mini" ? "มินิโปรดัก" : typeLabel(ig.type)} |
{canEdit ? (
{r.q} {ig.unit}
) : {r.q} {ig.unit}}
|
{H.thb2(store.ingCost(r.i) * r.q)} |
{canEdit && } |
);
})}
)}
{avail.length > 0 && canEdit && (
เพิ่มส่วนผสม:
{avail.map((i) => (
))}
)}
setProdEdit(null)}
onSave={async (data) => {
if (prodEdit && !prodEdit.new) { store.updateProduct(prodEdit.id, data); window.toast({ title: "บันทึกเมนูแล้ว", msg: data.name }); }
else { const nid = await store.addProduct(data); if (nid) setPid(nid); }
setProdEdit(null);
}} />
setCatOpen(false)} store={store} />
);
}
function step(unit) { return unit === "pcs" ? 1 : unit === "g" ? 5 : 10; }
const PROD_TONES = ["#6b4a35", "#b07d4e", "#7a8a52", "#c08543", "#5e4631", "#a9824f", "#8a6543", "#b05a45"];
function ProductModal({ item, categories, onClose, onSave }) {
const isNew = item && item.new;
const H = window.POS_HELP;
const [name, setName] = useState("");
const [en, setEn] = useState("");
const [cat, setCat] = useState(categories[0] ? categories[0].id : "");
const [price, setPrice] = useState(0);
const [tone, setTone] = useState(PROD_TONES[0]);
useEffect(() => {
if (item) {
setName(isNew ? "" : item.name);
setEn(isNew ? "" : item.en);
setCat(isNew ? (categories[0] ? categories[0].id : "") : item.cat);
setPrice(isNew ? 0 : item.price);
setTone(isNew ? PROD_TONES[Math.floor(Math.random() * PROD_TONES.length)] : item.tone);
}
}, [item]);
if (!item) return null;
const valid = name.trim() && en.trim() && cat && price > 0;
return (
{isNew ? "หลังเพิ่มเมนู สามารถกำหนดสูตรวัตถุดิบได้ทันที" : "การแก้ไขมีผลกับการแสดงผลและราคาขายทุกสาขา"}
);
}
function CategoryModal({ open, categories, products, onClose, store }) {
const [adding, setAdding] = useState("");
const [editId, setEditId] = useState(null);
const [editName, setEditName] = useState("");
return (
{categories.map((c) => {
const count = products.filter((p) => p.cat === c.id).length;
return (
{editId === c.id ? (
setEditName(e.target.value)}
onKeyDown={(e) => { if (e.key === "Enter" && editName.trim()) { store.updateCategory(c.id, editName.trim()); setEditId(null); } }} />
) : (
{c.name} {count} เมนู
)}
{editId === c.id ? (
) : (
)}
);
})}
setAdding(e.target.value)} placeholder="ชื่อหมวดหมู่ใหม่"
onKeyDown={(e) => { if (e.key === "Enter" && adding.trim()) { store.addCategory(adding.trim()); setAdding(""); } }} />
);
}
/* ---------------- USERS (RBAC management) ---------------- */
function Users() {
const store = useContext(window.AppCtx);
const [roleF, setRoleF] = useState("all");
const [branchF, setBranchF] = useState("all");
const [edit, setEdit] = useState(null); // user object or {new:true}
const branchName = (id) => { const b = store.branches.find((x) => x.id === id); return b ? "สาขา" + b.name : "ทุกสาขา (HQ)"; };
const acc = store.access || {}; const me = store.currentUser;
const ownBranchOnly = acc.allBranches === false && me;
// what this role is allowed to see
const scoped = ownBranchOnly ? store.users.filter((u) => u.branchId === me.branchId) : store.users;
const users = scoped.filter((u) =>
(roleF === "all" || u.role === roleF) &&
(branchF === "all" || u.branchId === branchF || (branchF === "hq" && !u.branchId)));
const counts = {
hq_manager: scoped.filter((u) => u.role === "hq_manager").length,
manager: scoped.filter((u) => u.role === "manager").length,
staff: scoped.filter((u) => u.role === "staff").length,
disabled: scoped.filter((u) => u.status === "disabled").length,
};
const roleTone = { admin: "gold", hq_manager: "blue", manager: "amber", staff: "neutral" };
const roleLabel = { admin: "Admin", hq_manager: "HQ Manager", manager: "Manager", staff: "Staff" };
return (
สิทธิ์ผู้ใช้งาน · {ownBranchOnly ? "สาขา" + (store.branches.find((b) => b.id === me.branchId) || {}).name : "HQ"}
จัดการผู้ใช้งาน
{!ownBranchOnly && }
{!ownBranchOnly && }
รายชื่อผู้ใช้
{[["all", "ทั้งหมด"], ["hq_manager", "HQ Manager"], ["manager", "Manager"], ["staff", "Staff"]].filter(([id]) => !ownBranchOnly || (id !== "hq_manager" && id !== "manager")).map(([id, l]) => (
))}
{!ownBranchOnly && (
)}
| ชื่อ | บทบาท | สาขา | รหัสพนักงาน | PIN | เบอร์โทร | สถานะ | จัดการ |
|---|
{users.map((u) => (
| {u.name[0]}{u.name} |
{roleLabel[u.role]} |
{branchName(u.branchId)} |
{u.code} |
|
{u.phone} |
|
|
))}
{users.length === 0 && | ไม่พบผู้ใช้ตามเงื่อนไข |
}
Admin จัดการได้ทุกสาขา + ตั้งค่าระบบ · HQ Manager สิทธิ์เท่า Manager แต่ดูได้ทุกสาขา · Manager เห็นเฉพาะสาขาตน · Staff ใช้งานเฉพาะหน้าขาย POS ของสาขาตน
b.id === me.branchId) : store.branches}
existing={store.users} lockStaff={ownBranchOnly} onClose={() => setEdit(null)}
onSave={(data) => {
if (edit && !edit.new) { store.updateUser(edit.id, data); window.toast({ title: "บันทึกผู้ใช้แล้ว", msg: data.name }); }
else { store.addUser(data); }
setEdit(null);
}} />
);
}
function UserModal({ user, branches, existing, onClose, onSave, lockStaff }) {
const isNew = user && user.new;
const [name, setName] = useState("");
const [role, setRole] = useState("staff");
const [branchId, setBranchId] = useState(branches[0] ? branches[0].id : "");
const [code, setCode] = useState("");
const [phone, setPhone] = useState("");
useEffect(() => {
if (user) {
setName(isNew ? "" : user.name);
setRole(isNew ? (lockStaff ? "staff" : "staff") : user.role);
setBranchId(isNew ? (branches[0] ? branches[0].id : "") : (user.branchId || (branches[0] ? branches[0].id : "")));
setCode(isNew ? "EMP-" + String(existing.length + 1).padStart(3, "0") : user.code);
setPhone(isNew ? "" : user.phone);
}
}, [user]);
if (!user) return null;
const isHQ = role === "hq_manager";
const valid = name.trim() && code.trim() && (isHQ || branchId);
return (
{isHQ ? "สิทธิ์เทียบเท่า Manager — ดูรายงาน/สต็อก/พนักงานได้ทุกสาขา แต่ไม่แก้ไขระบบส่วนกลาง" : role === "manager" ? "ผู้จัดการดูรายงาน/สต็อก/พนักงานได้เฉพาะสาขานี้" : "พนักงานใช้งานได้เฉพาะหน้าขาย POS ของสาขานี้"}
);
}
Object.assign(window, { Inventory, Branches, Recipe, Users });