${i + 1}

${avatarsOf(s)}

${multi ? (s.names.join(", ")) : s.name} ${pri.emoji} ${s.priority || "ปกติ"} ${(s.helperNames && s.helperNames.length) ? `🤝 ผู้ช่วย: ${s.helperNames.join(", ")}` : ""}

${s.role || ""}

${s.duty ? s.duty.replace(/
              
                ${s.planDate ? `📅 ทำ ${pxThaiDate(s.planDate)}` : ""}
                ${s.doneDate ? `🏁 กำหนดเสร็จ ${pxThaiDate(s.doneDate)}` : ""}
                ✓ เสร็จจริง ......./......./.......
              

${cb} ทำเสร็จแล้ว

${cb} เกิดปัญหา

หมายเหตุ ........................

..................................

ลงชื่อ ........... ${i < steps.length - 1 ? "" : "วันที่ ......"}

${i < steps.length - 1 ? `

⬇ ส่งต่อให้ → ${steps[i + 1].name}

` : `

🏁 จบงาน — ส่งหัวหน้างานตรวจ + ออกใบประเมินงาน

`; }; // รูปภาพ: วัดสัดส่วนจริงก่อน — รูปแนวตั้ง (สูง>กว้าง 1.25 เท่า) ได้เต็มหน้า 1 รูป · แนวนอน/จัตุรัสจับคู่ 2 รูป/หน้า // เลิกบีบในกรอบเตี้ย 90มม. → รูปขยายใหญ่ตามสัดส่วนเท่าที่หน้ากระดาษให้ได้ // ภาพลายเส้นจากโปรแกรมเขียนแบบพิมพ์แล้วล่องหน 2 แบบ: เส้นสว่างบนพื้นโปร่งใส / เส้นจางบนพื้นขาวทั้งแผ่น // → ประมวลผลรูปก่อนพิมพ์: แปลงเป็น "เส้นดำสนิทบนพื้นขาว" (รูปถ่ายหน้างานปกติไม่เข้าเงื่อนไข ไม่ถูกแตะ) const _prepLineart = (im) => { try { const W0 = im.naturalWidth || 1, H0 = im.naturalHeight || 1; const sc = Math.min(1, 2200 / Math.max(W0, H0)); const w = Math.max(1, Math.round(W0 * sc)), h = Math.max(1, Math.round(H0 * sc)); const cv = document.createElement("canvas"); cv.width = w; cv.height = h; const cx = cv.getContext("2d"); cx.drawImage(im, 0, 0, w, h); const id = cx.getImageData(0, 0, w, h), d = id.data, total = w * h; let trans = 0, bright = 0, dark = 0, opaque = 0; for (let i = 0; i < d.length; i += 4) { if (d[i + 3] < 40) { trans++; continue; } opaque++; const lum = 0.299 * d[i] + 0.587 * d[i + 1] + 0.114 * d[i + 2]; if (lum > 235) bright++; else dark++; } const caseA = trans / total > 0.3 && opaque > 0 && bright / opaque > 0.7; // เส้นสว่าง พื้นโปร่งใส const caseB = trans / total < 0.05 && bright / total > 0.82 && dark / total > 0.0003 && dark / total < 0.2; // เส้นจาง พื้นขาวเกือบทั้งแผ่น if (!caseA && !caseB) return null; for (let i = 0; i < d.length; i += 4) { let black; if (caseA) black = d[i + 3] > 40; // พิกเซลของเส้น (ทึบ) → ดำ else black = (0.299 * d[i] + 0.587 * d[i + 1] + 0.114 * d[i + 2]) < 247; // เข้มกว่ากระดาษนิดเดียวก็นับเป็นเส้น d[i] = d[i + 1] = d[i + 2] = black ? 0 : 255; d[i + 3] = 255; } cx.putImageData(id, 0, 0); return cv.toDataURL("image/png"); } catch { return null; } }; const _dims = await Promise.all(photos.map(ph => Promise.race([ new Promise(res => { const im = new Image(); im.onload = () => { const p = _prepLineart(im); res({ asp: (im.naturalHeight || 1) / (im.naturalWidth || 1), url: p || ph.url, fx: !!p }); }; im.onerror = () => res({ asp: 0.75, url: ph.url, fx: false }); im.src = ph.url; }), new Promise(res => setTimeout(() => res({ asp: 0.75, url: ph.url, fx: false }), 3000)), // รูปโหลดไม่ขึ้น → พิมพ์ตามเดิม ไม่ค้าง ]))); const FULL_H = 225, HALF_H = 106; // มม. — พื้นที่รูปหลังหักหัวกระดาษ/คำบรรยาย/ท้ายกระดาษ const photoPages = []; // แต่ละหน้า = [{ph, idx, maxH}] for (let i = 0; i < photos.length; ) { const tall = _dims[i].asp > 1.25; const nextWide = i + 1 < photos.length && _dims[i + 1].asp <= 1.25; if (!tall && nextWide) { // จับคู่แนวนอน 2 รูป photoPages.push([{ ph: photos[i], idx: i, maxH: HALF_H, url: _dims[i].url, fx: _dims[i].fx }, { ph: photos[i + 1], idx: i + 1, maxH: HALF_H, url: _dims[i + 1].url, fx: _dims[i + 1].fx }]); i += 2; } else { // แนวตั้ง หรือเหลือรูปเดียว → เต็มหน้า photoPages.push([{ ph: photos[i], idx: i, maxH: FULL_H, url: _dims[i].url, fx: _dims[i].fx }]); i += 1; } } const hasPhotos = photoPages.length > 0; const pageFoot = `

${C.name} ${wo.no} · ออกโดยระบบ SSS

`; // หน้าแบบคงที่ (รายละเอียด/รูป) — สูงเต็มหน้า + footer ล่าง const pageWrap = (inner, brk) => `

${inner} ${pageFoot}

`; // Signatures หน้า 1 — เฉพาะ 3 ช่องหลัก (ผู้สั่งงาน/หัวหน้างาน/ผู้รับมอบงาน) เพื่อไม่ให้ล้นหน้า // (การเซ็นรับงานรายลำดับอยู่ในหน้า Timeline อยู่แล้ว) const sigBlock = (avatarName, role, sub) => `

${avatarByName(avatarName, 38)}

${role}

${sub}

`; const firstReceiver = (steps[0] && ((steps[0].names && steps[0].names.join(" / ")) || steps[0].name)) || ""; const sigBlocks = [ sigBlock(wo.issuedBy, "ผู้สั่งงาน", `( ${wo.issuedBy || "....................."} ) · ${wo.issueDate}`), sigBlock(project.lead, "หัวหน้างาน", `( ${project.lead || "....................."} ) · วันที่ ..........`), sigBlock(firstReceiver, "ผู้รับมอบงาน", `( ${firstReceiver || "....................."} ) · วันที่ ..........`), ]; const sigCols = sigBlocks.length; const page1 = ` ${pxDocHeader(C, "ใบสั่งงาน", "WORK ORDER", accent)}

เลขที่ ${wo.no} · ออกเมื่อ ${wo.issueDate}

ความสำคัญ: ${prio}

${avatarByName(wo.issuedBy, 44)}

ผู้สั่งงาน

${wo.issuedBy || "—"}

ออกเมื่อ ${wo.issueDate}

${avatarByName(project.lead, 44)}

หัวหน้างาน

${project.lead || "—"}

${project.code}

โปรเจกต์

${project.name}

${project.code} · ลูกค้า: ${project.customer}

ผู้รับผิดชอบ (${assignees.length} คน)

${assignees.map((a, i) => `

${i + 1}. ${a}${(wo.assigneeRoles && wo.assigneeRoles[i]) ? ` — ${wo.assigneeRoles[i]}` : ""}

`).join("")}

กำหนดเวลา

เริ่ม ${pxThaiDate(wo.startDate)} → ส่งงาน ${pxThaiDate(wo.due)}

รายละเอียดของงาน

${(wo.detail || "").replace(/
    

${(wo.items && wo.items.length) ? `

รายการส่งมอบ

${wo.items.map((it, i) => ``).join("")}

#	รายการ	จำนวน	หน่วย
${i + 1}	${(it.name \|\| "").replace(/	${it.qty != null ? it.qty : ""}	${(it.unit \|\| "").replace(/

` : ""}

👥 ผู้รับผิดชอบและลำดับการส่งต่องาน (Timeline) — ดูหน้าถัดไป${photos.length > 0 ? ` · 📎 รูปภาพประกอบ ${photos.length} รูป — หน้าท้ายเอกสาร` : ""}

เงื่อนไข: ผู้รับผิดชอบต้องอัพเดทความคืบหน้าพร้อมรูปถ่ายหน้างานในระบบทุกครั้ง · แจ้งหัวหน้างานทันทีหากพบปัญหาที่กระทบกำหนดส่ง

${sigBlocks.join("")}

`; const photoPagesHTML = photoPages.map((pair, pi) => { const inner = `

SSS

ใบสั่งงาน ${wo.no} — รูปภาพประกอบ

${project.code} · ${project.name}

ออกเมื่อ ${wo.issueDate}

${pair.map(({ ph, idx, maxH, url, fx }) => `

รูปที่ ${idx + 1}${ph.name && !/^camera/.test(ph.name) ? ` · ${ph.name}` : ""}${fx ? ' · ปรับเส้นเข้มอัตโนมัติเพื่อการพิมพ์' : ""}

`).join("")}`; return pageWrap(inner, pi < photoPages.length - 1); }).join(""); // ---------- หน้า Timeline ผู้รับผิดชอบ ---------- // ปล่อยให้เบราว์เซอร์ตัดหน้าเอง (native flow) — การ์ดมี break-inside:avoid จึงไม่ถูกตัดครึ่ง/ไม่ล้น // ไม่ fix ความสูง + ใช้ margin จาก @page (8mm) ทุกหน้า → ต่อหน้าใหม่อัตโนมัติได้ไม่จำกัด const respHeader = ` ${pxDocHeader(C, "ผู้รับผิดชอบงาน", `RESPONSIBILITY TIMELINE · ${wo.no}`, accent)}

โปรเจกต์ ${project.name} (${project.code})

กำหนดส่งงาน ${pxThaiDate(wo.due)}

ทำตามลำดับ — เสร็จจากคนแรกแล้วส่งต่อให้คนถัดไป · ติ้กช่อง "ทำเสร็จแล้ว" หรือ "เกิดปัญหา" พร้อมลงชื่อทุกครั้ง

`; const respSection = `

${respHeader} ${steps.map((s, i) => renderStepCard(i)).join("")}

`; // หน้า 1 มี id เพื่อวัดความสูงจริงแล้ว "ย่อให้พอดี 1 หน้า" เสมอ — เนื้อหาเยอะแค่ไหนก็ไม่ดันลายเซ็นตกหน้า 2 อีก const page1HTML = `

${page1} ${pageFoot}

`; const html = page1HTML + respSection + photoPagesHTML; pxPrint(`ใบสั่งงาน ${wo.no}`, html); // Shrink-to-fit: วัดความสูงหน้า 1 ที่ความกว้างเท่าตอนพิมพ์จริง (A4 210mm − ขอบ @page 8mm×2 = 194mm) // ถ้าสูงเกินพื้นที่พิมพ์ (281mm) ให้ย่อทั้งหน้าด้วย zoom — การันตีลายเซ็น+ท้ายกระดาษอยู่หน้า 1 เสมอ setTimeout(() => { const el = document.getElementById("__wo_page1"); if (!el) return; const prevW = el.style.width; el.style.width = "194mm"; const pxPerMM = el.offsetWidth / 194; const budget = 279 * pxPerMM; // 297 − 8×2 เผื่อปัดเศษ 2mm const h = el.scrollHeight; el.style.width = prevW; if (h > budget) el.style.zoom = String(Math.max(0.55, Math.floor((budget / h) * 1000) / 1000)); }, 80); } function WorkOrderModal({ project, onClose, onSaved, initial }) { const D = window.SSSData; const { Btn, Drawer, ProductAutocomplete } = window.UI; const emps = D.Employees || []; const isEditWO = !!initial; const [f, setF] = useStatePX({ no: initial ? initial.no : pxNextWoNo(), detail: initial ? (initial.detail || "") : "", startDate: initial ? (initial.startDate || pxTodayISO()) : pxTodayISO(), due: initial ? (initial.due || project.end || pxTodayISO()) : (project.end || pxTodayISO()), priority: initial ? (initial.priority || "ปกติ") : "ปกติ" }); const [steps, setSteps] = useStatePX(() => { if (initial && initial.steps && initial.steps.length) { return initial.steps.map(s => ({ empIds: s.empIds && s.empIds.length ? s.empIds : (s.empId ? [s.empId] : []), helperIds: s.helperIds || [], duty: s.duty || "", planDate: s.planDate || "", doneDate: s.doneDate || "", priority: s.priority || "ปกติ" })); } return emps[0] ? [{ empIds: [emps[0].id], helperIds: [], duty: "", planDate: "", doneDate: "", priority: "ปกติ" }] : [{ empIds: [], helperIds: [], duty: "", planDate: "", doneDate: "", priority: "ปกติ" }]; }); const [photos, setPhotos] = useStatePX(initial && initial.photos ? [...initial.photos] : []); const [showCam, setShowCam] = useStatePX(false); // รายการส่งมอบ (ของที่ต้องส่งให้ลูกค้า) — ใช้ดึงไปออกใบส่งของประจำวันอัตโนมัติ const [items, setItems] = useStatePX(() => (initial && initial.items && initial.items.length) ? initial.items.map(it => ({ name: it.name || "", qty: it.qty != null ? it.qty : 1, unit: it.unit || "ชิ้น" })) : [{ name: "", qty: 1, unit: "ชิ้น" }]); const updItem = (i, k, v) => setItems(list => list.map((it, j) => j === i ? { ...it, [k]: v } : it)); const upd = (k, v) => setF(p => ({ ...p, [k]: v })); const empOf = (id) => emps.find(e => e.id === id); const updStep = (i, k, v) => setSteps(list => list.map((s, j) => j === i ? { ...s, [k]: v } : s)); const addEmpToStep = (i, id) => { if (!id) return; setSteps(list => list.map((s, j) => j === i && !s.empIds.includes(id) ? { ...s, empIds: [...s.empIds, id], helperIds: (s.helperIds || []).filter(x => x !== id) } : s)); }; const removeEmpFromStep = (i, id) => setSteps(list => list.map((s, j) => j === i ? { ...s, empIds: s.empIds.filter(x => x !== id) } : s)); const addHelperToStep = (i, id) => { if (!id) return; setSteps(list => list.map((s, j) => j === i && !(s.helperIds || []).includes(id) && !s.empIds.includes(id) ? { ...s, helperIds: [...(s.helperIds || []), id] } : s)); }; const removeHelperFromStep = (i, id) => setSteps(list => list.map((s, j) => j === i ? { ...s, helperIds: (s.helperIds || []).filter(x => x !== id) } : s)); // ── ชุดการทำงาน (เทมเพลต) — บันทึกลำดับพนักงาน/หน้าที่/รายการส่งมอบไว้เรียกใช้ซ้ำ ── const WO_TPL_KEY = "sss-wo-templates"; const tplLoad = () => { const v = window.lsSyncGet ? window.lsSyncGet(WO_TPL_KEY) : null; if (Array.isArray(v)) return v; try { return JSON.parse(localStorage.getItem(WO_TPL_KEY) || "[]") || []; } catch { return []; } }; const tplSave = (list) => { if (window.lsSyncSet) window.lsSyncSet(WO_TPL_KEY, list); else { try { localStorage.setItem(WO_TPL_KEY, JSON.stringify(list)); } catch {} } }; const [tpls, setTpls] = useStatePX(tplLoad); const [tplName, setTplName] = useStatePX(""); const [showTplSave, setShowTplSave] = useStatePX(false); const [showTpls, setShowTpls] = useStatePX(false); const saveTpl = () => { const name = tplName.trim(); if (!name) { window.toast && window.toast("ตั้งชื่อชุดก่อน เช่น งานพับถาดมาตรฐาน"); return; } const tpl = { id: "WT-" + Date.now().toString(36), name, steps: steps.map(st => ({ empIds: [...(st.empIds || [])], helperIds: [...(st.helperIds || [])], duty: st.duty || "", priority: st.priority || "ปกติ" })), detail: f.detail || "", priority: f.priority || "ปกติ", items: items.filter(it => (it.name || "").trim()).map(it => ({ name: it.name, qty: it.qty, unit: it.unit })), by: (window.Session && window.Session.get() && window.Session.get().name) || "", }; const next = [...tplLoad(), tpl]; setTpls(next); tplSave(next); setTplName(""); setShowTplSave(false); window.toast && window.toast("บันทึกชุดการทำงาน \"" + name + "\" แล้ว (ซิงค์ทุกเครื่อง)"); }; const applyTpl = async (tpl) => { const hasWork = steps.some(st => (st.empIds || []).length || (st.duty || "").trim()); if (hasWork) { const ok = await window.confirmDialog({ title: "ใช้ชุด \"" + tpl.name + "\"?", message: "ลำดับงาน/หน้าที่/รายการส่งมอบที่กรอกอยู่จะถูกแทนที่ด้วยชุดนี้", confirmText: "ใช้ชุดนี้" }); if (!ok) return; } setSteps((tpl.steps || []).map(st => ({ empIds: [...(st.empIds || [])], helperIds: [...(st.helperIds || [])], duty: st.duty || "", planDate: "", doneDate: "", priority: st.priority || "ปกติ" }))); if (tpl.items && tpl.items.length) setItems(tpl.items.map(it => ({ name: it.name || "", qty: it.qty != null ? it.qty : 1, unit: it.unit || "ชิ้น" }))); setF(p => ({ ...p, detail: tpl.detail || p.detail, priority: tpl.priority || p.priority })); window.toast && window.toast("ใช้ชุด \"" + tpl.name + "\" แล้ว — ปรับแก้เพิ่มได้เลย"); }; const delTpl = async (tpl) => { const ok = await (window.confirmDelete ? window.confirmDelete("ชุดการทำงาน " + tpl.name, (tpl.steps || []).length + " ลำดับ") : Promise.resolve(confirm("ลบ?"))); if (!ok) return; const next = tplLoad().filter(x => x.id !== tpl.id); setTpls(next); tplSave(next); }; const [dragI, setDragI] = useStatePX(null); const dropAt = (i) => { setSteps(list => { if (dragI === null || dragI === i) return list; const n = [...list]; const [m] = n.splice(dragI, 1); n.splice(i, 0, m); return n; }); setDragI(null); }; const moveStep = (i, dir) => setSteps(list => { const j = i + dir; if (j < 0 || j >= list.length) return list; const next = [...list]; const tmp = next[i]; next[i] = next[j]; next[j] = tmp; return next; }); const resize = (file, max) => window.DeliveryStore && window.DeliveryStore.resizeImage ? window.DeliveryStore.resizeImage(file, max) : new Promise(res => { const r = new FileReader(); r.onload = () => res(r.result); r.readAsDataURL(file); }); const pickPhotos = async (e) => { const files = [...e.target.files].slice(0, 12); e.target.value = ""; const loaded = []; for (const file of files) { const url = await resize(file, 600); if (url) loaded.push({ url, name: file.name }); } setPhotos(p => [...p, ...loaded].slice(0, 12)); }; const save = (andPrint) => { if (steps.length === 0) { window.toast && window.toast("กรุณาเพิ่มผู้รับผิดชอบอย่างน้อย 1 คน"); return; } for (let i = 0; i < steps.length; i++) { if (!steps[i].empIds || steps[i].empIds.length === 0) { window.toast && window.toast(`กรุณาเลือกพนักงานในลำดับที่ ${i + 1} อย่างน้อย 1 คน`); return; } if (!steps[i].duty.trim()) { window.toast && window.toast(`กรุณากรอกหน้าที่ในลำดับที่ ${i + 1}`); return; } } if (!f.detail.trim()) { window.toast && window.toast("กรุณาใส่รายละเอียดของงาน"); return; } if (!f.due) { window.toast && window.toast("กรุณากำหนดวันส่งงาน"); return; } const woSteps = steps.map(s => { const es = s.empIds.map(empOf).filter(Boolean); const hs = (s.helperIds || []).map(empOf).filter(Boolean); return { empIds: es.map(e => e.id), names: es.map(e => e.name), name: es.map(e => e.name).join(", "), role: es.map(e => `${e.role} · ${e.dept}`).join(" / "), helperIds: hs.map(e => e.id), helperNames: hs.map(e => e.name), duty: s.duty.trim(), planDate: s.planDate || "", doneDate: s.doneDate || "", priority: s.priority || "ปกติ" }; }); const allIds = [...new Set(woSteps.flatMap(s => [...s.empIds, ...(s.helperIds || [])]))]; const allNames = [...new Set(woSteps.flatMap(s => [...s.names, ...(s.helperNames || [])]))]; const wo = { no: f.no, steps: woSteps, assigneeIds: allIds, assignees: allNames, assigneeRoles: woSteps.map(s => s.role), assignee: allNames.join(", "), detail: f.detail.trim(), startDate: f.startDate, due: f.due, priority: f.priority, items: items.filter(it => (it.name || "").trim()).map(it => ({ name: it.name.trim(), qty: Number(it.qty) || 1, unit: it.unit || "ชิ้น" })), photos: [...photos], issuedBy: initial ? initial.issuedBy : ((window.Session && window.Session.get() && window.Session.get().name) || (window.SSSData.Company.currentUser && window.SSSData.Company.currentUser.name) || ""), issueDate: initial ? initial.issueDate : pxToday(), status: initial ? (initial.status || "เปิดงาน") : "เปิดงาน" }; const existing = pxGet(project.code).workOrders || []; const list = isEditWO ? existing.map(x => x.no === wo.no ? wo : x) : [wo, ...existing]; pxSet(project.code, { workOrders: list }); window.logActivity && window.logActivity(isEditWO ? "แก้ไขใบสั่งงาน" : "ออกใบสั่งงาน", `${wo.no} → ${wo.assignee} (${project.code})`, isEditWO ? "update" : "create"); window.toast && window.toast(`${isEditWO ? "บันทึกการแก้ไข" : "ออก"}ใบสั่งงาน ${wo.no} แล้ว`); onSaved && onSaved(list); onClose(); if (andPrint) setTimeout(() => printWorkOrderDoc(project, wo), 150); }; // ── ไลท์บ็อกซ์เลือกพนักงานจากรูปหน้า — กดปุ่มเปิด เลือก/เอาออกหลายคน แล้วกดเสร็จ ── const nickOf = (name) => { const m = /$([^)]+)$/.exec(name || ""); return m ? m[1] : String(name || "").trim().split(/\s+/)[0]; }; const woPhotos = (window.lsSyncGet ? (window.lsSyncGet("sss-employee-photos") || {}) : {}); const [facePick, setFacePick] = useStatePX(null); // { i, kind: "emp" | "helper" } const [faceQ, setFaceQ] = useStatePX(""); const openFacePick = (i, kind) => { setFaceQ(""); setFacePick({ i, kind }); }; const FaceAvatar = ({ e, size = 52, ring }) => { const prof = window.ChatProfiles ? window.ChatProfiles.get(e.name) : null; const photo = woPhotos[e.id] || (prof && prof.avatar) || ""; const color = ring || (prof && prof.color) || "var(--accent)"; return photo ?

: {String(e.name || "?").slice(0, 2)}; }; return ( ยกเลิก save(true)}>บันทึก + พิมพ์ save(false)}>บันทึกใบสั่งงาน }>

{project.name}

ลูกค้า {project.customer} · กำหนดส่งโปรเจกต์ {project.due}

เลขที่ใบสั่งงาน

ความสำคัญ

{["ปกติ", "ด่วน", "ด่วนมาก"].map(p => ( ))}

{/* ชุดการทำงาน — กดปุ่มค่อยกางรายการ · แต่ละชุดโชว์รูปหน้าพนักงาน + หน้าที่ */}

{!showTpls && tpls.length > 0 && กดเพื่อเลือกชุดที่บันทึกไว้} {!showTplSave ? setShowTplSave(true)}>💾 บันทึกเป็นชุด : setTplName(e.target.value)} onKeyDown={e => { if (e.key === "Enter") saveTpl(); }} autoFocus/> บันทึก setShowTplSave(false)}>ยกเลิก }

{showTpls && (

{tpls.length === 0 &&

ยังไม่มีชุดที่บันทึกไว้ — ตั้งค่าลำดับงานด้านล่างแล้วกด "บันทึกเป็นชุด"

} {tpls.map(tpl => (

{tpl.name} {(tpl.steps || []).length} ลำดับ{tpl.by ? ` · โดย ${tpl.by}` : ""} { applyTpl(tpl); setShowTpls(false); }}>ใช้ชุดนี้

{(tpl.steps || []).map((st, i) => { const stEmps2 = (st.empIds || []).map(empOf).filter(Boolean); const stHelp2 = (st.helperIds || []).map(empOf).filter(Boolean); const pri2 = STEP_PRI[st.priority] || STEP_PRI["ปกติ"]; return (

{i + 1} {stEmps2.slice(0, 6).map(e2 => )} {stEmps2.length > 6 && +{stEmps2.length - 6}} {stHelp2.slice(0, 4).map(e2 => )} {stEmps2.map(e2 => nickOf(e2.name)).join(", ")} {stHelp2.length > 0 && +ผู้ช่วย {stHelp2.map(e2 => nickOf(e2.name)).join(", ")}} {st.duty || "—"} {st.priority && st.priority !== "ปกติ" && {pri2.emoji} {st.priority}}

); })}

))}

)}

{/* ผู้รับผิดชอบแบบ Timeline — เลือกพนักงาน + หน้าที่ เรียงลำดับส่งต่อ */}

ผู้รับผิดชอบตามลำดับ (Timeline — เสร็จจากคนแรกแล้วส่งต่อคนถัดไป) *

{steps.map((st, i) => { const stEmps = st.empIds.map(empOf).filter(Boolean); const stHelpers = (st.helperIds || []).map(empOf).filter(Boolean); const available = emps.filter(e => !st.empIds.includes(e.id) && !(st.helperIds || []).includes(e.id)); const availableHelpers = emps.filter(e => !st.empIds.includes(e.id) && !(st.helperIds || []).includes(e.id)); return (

{ e.preventDefault(); }} onDrop={() => dropAt(i)} style={{border: dragI === i ? "1.5px dashed var(--accent)" : "1px solid var(--line)", borderRadius: 10, padding: 10, display: "flex", gap: 10, alignItems: "flex-start", background: "var(--surface)", opacity: dragI === i ? 0.6 : 1}}>

setDragI(i)} onDragEnd={() => setDragI(null)} title="ลากเพื่อจัดลำดับ" style={{width: 24, height: 24, borderRadius: "50%", background: "var(--accent)", color: "var(--accent-ink)", display: "grid", placeItems: "center", fontSize: 11, fontWeight: 700, flexShrink: 0, marginTop: 4, cursor: "grab"}}>{i + 1}

{/* พนักงานหลัก — ชิป + เพิ่ม */}

👷 พนักงานที่ทำงาน

{stEmps.map(e => ( {e.name} ))} {stEmps.length === 0 && ยังไม่ได้เลือกพนักงาน}

openFacePick(i, "emp")}>เลือกพนักงาน (จากรูปหน้า) {/* ผู้ช่วย — ชิป + เพิ่ม (ในกรอบการ์ดเดียวกัน) */}

🤝 ผู้ช่วย

{stHelpers.map(e => ( {e.name} ))} {stHelpers.length === 0 && ไม่มีผู้ช่วย (ไม่บังคับ)}

openFacePick(i, "helper")}>เลือกผู้ช่วย (จากรูปหน้า)

ความเร่งด่วน

{STEP_PRI_ORDER.map(p => { const cfg = STEP_PRI[p]; return ( ); })}

📅 กำหนดทำวันที่ updStep(i, "planDate", e.target.value)}/>

🏁 กำหนดเสร็จ (ถ้ามี) updStep(i, "doneDate", e.target.value)}/>

{i < steps.length - 1 && (

↓ เสร็จแล้วส่งต่อให้

)} ); })} setSteps(s => [...s, { empIds: [], helperIds: [], duty: "", planDate: "", doneDate: "", priority: "ปกติ" }])}>เพิ่มลำดับงานถัดไป

พิมพ์เป็นหน้าที่ 2 ของใบสั่งงาน — กรอบ Timeline พร้อมรูปพนักงาน ช่องติ้ก "ทำเสร็จแล้ว / เกิดปัญหา" และช่องลงชื่อ

รายละเอียดของงาน *

{/* รายการส่งมอบ — ดึงไปออกใบส่งของประจำวันได้อัตโนมัติ */}

รายการส่งมอบ (ของที่ต้องส่งให้ลูกค้า — ใช้ตอนออกใบส่งของประจำวัน)

{items.map((it, i) => (

{ProductAutocomplete ? updItem(i, "name", v)} onPick={p => setItems(list => list.map((x, j) => j === i ? { ...x, name: p.name, unit: p.unit || x.unit } : x))}/> : updItem(i, "name", e.target.value)} placeholder="ชื่อสินค้า/งาน"/>} updItem(i, "qty", e.target.value)}/> updItem(i, "unit", e.target.value)} placeholder="หน่วย"/>

))}

setItems(list => [...list, { name: "", qty: 1, unit: "ชิ้น" }])} style={{marginTop: 6}}>เพิ่มรายการส่งมอบ

ไม่บังคับ — ถ้ากรอกไว้ เวลากดปุ่ม "ออกใบส่งของประจำวัน" ระบบจะดึงรายการนี้ไปให้อัตโนมัติทั้งใบ

{/* Photos */}

รูปภาพประกอบ (แบบ/หน้างาน — พิมพ์ต่อท้ายใบสั่งงาน)

setShowCam(true)}>ถ่ายรูป อัพโหลดรูป {photos.length > 0 ? `${photos.length} รูป · พิมพ์เพิ่ม ${Math.ceil(photos.length / 2)} หน้า A4 (มีเลขหน้ากำกับ)` : "ไม่บังคับ · 2 รูปต่อ 1 หน้า A4"}

{photos.length > 0 && (

{photos.map((p, i) => (

{i + 1}

))}

)}

วันที่เริ่มงาน upd("startDate", e.target.value)}>

กำหนดส่งงาน * upd("due", e.target.value)}>

{showCam && window.CameraCaptureModal && ( setShowCam(false)} onCapture={(url) => setPhotos(p => [...p, { url, name: "camera-" + Date.now() }].slice(0, 12))}/> )} {/* ไลท์บ็อกซ์เลือกพนักงานจากรูปหน้า */} {facePick && (() => { const st = steps[facePick.i]; if (!st) return null; const isHelper = facePick.kind === "helper"; const inThis = new Set(isHelper ? (st.helperIds || []) : st.empIds); const inOther = new Set(isHelper ? st.empIds : (st.helperIds || [])); const q = faceQ.trim().toLowerCase(); const list = emps.filter(e => !q || (e.name + " " + (e.role || "") + " " + (e.dept || "")).toLowerCase().includes(q)); const tone = isHelper ? "#7c3aed" : "var(--accent)"; const toggle = (id) => { if (inOther.has(id)) return; if (inThis.has(id)) (isHelper ? removeHelperFromStep : removeEmpFromStep)(facePick.i, id); else (isHelper ? addHelperToStep : addEmpToStep)(facePick.i, id); }; return (

{ if (e.target === e.currentTarget) setFacePick(null); }} style={{position: "fixed", inset: 0, zIndex: 420, background: "rgba(12,10,9,0.62)", backdropFilter: "blur(2px)", display: "flex", alignItems: "center", justifyContent: "center", padding: 18}}>

{facePick.i + 1} {isHelper ? "🤝 เลือกผู้ช่วย" : "👷 เลือกพนักงานที่ทำงาน"} · ลำดับที่ {facePick.i + 1}

setFaceQ(e.target.value)} autoFocus/>

{list.map(e => { const sel = inThis.has(e.id); const busy = inOther.has(e.id); return ( ); })} {list.length === 0 &&

ไม่พบพนักงานที่ค้นหา

}

เลือกแล้ว {inThis.size} คน · กดรูปเพื่อเลือก/เอาออก

setFacePick(null)}>เสร็จ

); })()} ); } // ---------- Job summary (ใบสรุปงาน: ค่าแรง + ค่าวัสดุ) ---------- function printJobSummaryDoc(project) { const D = window.SSSData; const C = D.Company; const preparer = (window.Session && window.Session.get && window.Session.get() && window.Session.get().name) || (C.currentUser && C.currentUser.name) || ""; const accent = "#0f766e"; const fmt = (n) => Math.round(n).toLocaleString(); // ===== ต้นทุนจริงทั้งหมด — มาจากค่าใช้จ่ายที่ผูกกับงานนี้จริงเท่านั้น (ไม่มีสูตรสมมติ) ===== const isMatCat = (c) => /วัสดุ|วัตถุดิบ/.test(c || ""); const extraExpenses = pxGet(project.code).expenses || []; const linkedExtra = pxGet(project.code).linkedExpenses || []; const linkedExp = (D.Expenses || []).filter(e => (project.expenseLinks || []).includes(e.no) || linkedExtra.includes(e.no)); const rows = [ ...extraExpenses.map(e => ({ cat: e.category || "อื่น ๆ", detail: e.vendor || "—", note: (e.sku ? `${e.used != null ? e.used : e.qty} ${e.unit || ""}`.trim() : ""), amount: +e.amount || 0 })), ...linkedExp.map(e => ({ cat: e.category || "อื่น ๆ", detail: `${e.vendor || "—"} (${e.no})`, note: "", amount: +e.amount || 0 })) ]; const matRows = rows.filter(r => isMatCat(r.cat)); const laborRows = rows.filter(r => !isMatCat(r.cat)); const matSum = matRows.reduce((s, r) => s + r.amount, 0); const laborSum = laborRows.reduce((s, r) => s + r.amount, 0); const totalCost = matSum + laborSum; const profit = project.budget - totalCost; const margin = project.budget > 0 ? ((profit / project.budget) * 100).toFixed(1) : "0.0"; const emptyRow = '— ยังไม่มีรายการที่ผูกกับงานนี้ —'; const esc = (s) => String(s == null ? "" : s).replace(/ ${pxDocHeader(C, "ใบสรุปงาน", "JOB SUMMARY · สรุปค่าแรงและค่าวัสดุ", accent)}

โปรเจกต์

${project.name}

${project.code} · ${project.customer}

ระยะเวลา

${pxThaiDate(project.start)} → ${pxThaiDate(project.end)}

หัวหน้างาน ${project.lead}

สถานะ · ความคืบหน้า

${project.status} · ${project.progress}%

จัดทำเมื่อ ${pxToday()}

1. ค่าแรง / บริการภายนอก

${laborRows.length ? laborRows.map(r => ``).join("") : emptyRow}

หมวด	รายละเอียด	จำนวนเงิน (บาท)
${esc(r.cat)}	${esc(r.detail)}	${fmt(r.amount)}
รวมค่าแรง / บริการภายนอก		${fmt(laborSum)}

2. ค่าวัสดุ

${matRows.length ? matRows.map(r => ``).join("") : emptyRow}

หมวด	รายละเอียด	จำนวนเงิน (บาท)
${esc(r.cat)}	${esc(r.detail)}${r.note ? ` · ${esc(r.note)}` : ""}	${fmt(r.amount)}
รวมค่าวัสดุ		${fmt(matSum)}

3. สรุปต้นทุนและกำไร

รวมค่าแรง / บริการภายนอก	${fmt(laborSum)}
รวมค่าวัสดุ	${fmt(matSum)}
ต้นทุนรวมทั้งหมด	${fmt(totalCost)}
มูลค่างาน (Revenue)	${fmt(project.budget)}
กำไรขั้นต้น (Margin ${margin}%)	฿${fmt(profit)}

ผู้จัดทำ

${preparer ? "( " + preparer + " ) · " : ""}${pxToday()}

ผู้อนุมัติ

( ............................ ) · ............................

${C.name}${project.code} · ใบสรุปงาน · ออกโดยระบบ SSS

`; pxPrint(`ใบสรุปงาน — ${project.code}`, html); window.logActivity && window.logActivity("ออกใบสรุปงาน", `${project.code} — ${project.name}`, "create"); } // ---------- Create / Edit project ---------- function pxNextJobCode() { const D = window.SSSData; const nums = [...pxUserLoad(), ...(D.Projects || [])] .map(p => (String(p.code).match(/JOB-2569-(\d+)/) || [])[1]) .filter(Boolean).map(Number); const n = (nums.length ? Math.max(...nums) : 0) + 1; return "JOB-2569-" + String(n).padStart(3, "0"); } function ProjectFormModal({ project, onClose, onSaved }) { const D = window.SSSData; const { Btn, Drawer } = window.UI; const isEdit = !!project; const emps = (D.Employees || []).filter(e => /ผลิต|ออกแบบ/.test(e.dept || "") || true); const [f, setF] = useStatePX(() => isEdit ? { ...project } : { code: pxNextJobCode(), name: "", customer: "", budget: 0, actual: 0, progress: 0, status: "ร่าง", lead: emps[0]?.name || "", start: pxTodayISO(), end: pxTodayISO() }); const upd = (k, v) => setF(p => ({ ...p, [k]: v })); const save = (thenWorkOrder) => { if (!f.name.trim()) { window.toast && window.toast("กรุณาใส่ชื่อโปรเจกต์"); return; } if (!f.customer.trim()) { window.toast && window.toast("กรุณาใส่ชื่อลูกค้า"); return; } const due = pxThaiDate(f.end); const record = { ...f, name: f.name.trim(), customer: f.customer.trim(), budget: +f.budget || 0, due }; if (isEdit) { const users = pxUserLoad(); if (users.some(u => u.code === record.code)) { pxUserSave(users.map(u => u.code === record.code ? { ...u, ...record } : u)); } else { pxSet(record.code, { fields: { name: record.name, customer: record.customer, budget: record.budget, lead: record.lead, start: record.start, end: record.end, due } }); } window.toast && window.toast("บันทึกการแก้ไขโปรเจกต์แล้ว"); } else { record.updates = [{ date: pxTodayISO(), who: (window.Session && window.Session.get() && window.Session.get().name) || (window.SSSData.Company.currentUser && window.SSSData.Company.currentUser.name) || "", text: "สร้างโปรเจกต์", type: "milestone" }]; record.expenseLinks = []; pxUserSave([record, ...pxUserLoad()]); window.logActivity && window.logActivity("สร้างโปรเจกต์", `${record.code} — ${record.name}`, "create"); window.toast && window.toast(`สร้างโปรเจกต์ ${record.code} แล้ว`); } onSaved && onSaved(record, thenWorkOrder); onClose(); }; return ( ยกเลิก {!isEdit && save(true)}>บันทึก + ออกใบสั่งงาน} save(false)}>{isEdit ? "บันทึกการแก้ไข" : "บันทึกโปรเจกต์"} }>

รหัสโปรเจกต์

หัวหน้างาน

ชื่อโปรเจกต์ * upd("name", e.target.value)} placeholder="เช่น ราวบันไดสแตนเลส โครงการ...">

ลูกค้า * upd("customer", e.target.value)} placeholder="ชื่อบริษัทลูกค้า">

มูลค่างาน / งบประมาณ (บาท) upd("budget", +e.target.value)}>

สถานะเริ่มต้น

วันที่เริ่ม upd("start", e.target.value)}>

กำหนดส่ง upd("end", e.target.value)}>

{!isEdit && (

หลังบันทึก สามารถ ออกใบสั่งงาน เพื่อกำหนดผู้รับผิดชอบ รายละเอียดงาน และกำหนดส่งได้ทันที

)}

); } // ---------- Add expense (หลายรายการ + แหล่ง: คลัง / รอซื้อ / กรอกเอง) ---------- function ProjectExpenseModal({ project, onClose, onSaved }) { const { Btn, fmt0, ProductAutocomplete } = window.UI; const D = window.SSSData; const PR = window.PurchaseRequests; const [category, setCategory] = useStatePX("ค่าวัสดุ/วัตถุดิบ"); const [vendor, setVendor] = useStatePX(""); const [showPRAdd, setShowPRAdd] = useStatePX(false); const pendingPRs = PR ? PR.pending(project.code) : []; const blankLine = () => ({ source: "stock", name: "", sku: "", unit: "ชิ้น", cost: 0, qty: 1, amount: "", prId: "" }); const [lines, setLines] = useStatePX(() => [blankLine()]); const updLine = (i, patch) => setLines(ls => ls.map((l, j) => j === i ? { ...l, ...patch } : l)); const removeLine = (i) => setLines(ls => ls.length > 1 ? ls.filter((_, j) => j !== i) : ls); const lineAmount = (l) => (l.amount !== "" && l.amount != null) ? (+l.amount || 0) : Math.round((l.cost || 0) * (Number(l.qty) || 0)); const total = lines.reduce((s, l) => s + lineAmount(l), 0); const pickStock = (i, p) => updLine(i, { name: p.name, sku: p.sku, unit: p.unit || "หน่วย", cost: p.cost != null ? p.cost : (p.price || 0), amount: "" }); const pickPR = (i, prId) => { const r = pendingPRs.find(x => x.id === prId); if (!r) { updLine(i, { prId: "", name: "" }); return; } updLine(i, { prId, name: r.name, unit: r.unit || "ชิ้น", qty: r.qty || 1, amount: r.est || "", cost: 0, vendor: r.vendor }); }; const setSource = (i, source) => updLine(i, { source, name: "", sku: "", prId: "", amount: "", qty: 1, cost: 0 }); const save = () => { const valid = lines.filter(l => (l.name || "").trim() && lineAmount(l) > 0); if (!valid.length) { window.toast && window.toast("กรอกอย่างน้อย 1 รายการ พร้อมจำนวนเงิน"); return; } const amount = valid.reduce((s, l) => s + lineAmount(l), 0); const expId = "PE-" + Date.now(); const exp = { id: expId, date: pxToday(), category, vendor: vendor.trim() || (valid.length > 1 ? `${valid.length} รายการ` : valid[0].name.trim()), amount, status: "บันทึกแล้ว", by: window.actorName ? window.actorName() : "", lines: valid.map(l => ({ source: l.source, name: l.name.trim(), sku: l.sku || "", unit: l.unit, qty: Number(l.qty) || 0, amount: lineAmount(l), prId: l.prId || "" })) }; const list = [...(pxGet(project.code).expenses || []), exp]; pxSet(project.code, { expenses: list }); // คลัง: ตัดสต็อก + ลงการเคลื่อนไหว const now = new Date().toLocaleString("th-TH", { day: "2-digit", month: "2-digit", year: "2-digit", hour: "2-digit", minute: "2-digit" }); let stockTouched = false; valid.forEach(l => { if (l.source === "stock" && l.sku && (Number(l.qty) || 0) > 0) { const prod = (D.Products || []).find(p => p.sku === l.sku); if (prod) { prod.stock = Math.max(0, Math.round(((Number(prod.stock) || 0) - (Number(l.qty) || 0)) * 100) / 100); D.InventoryMoves = D.InventoryMoves || []; D.InventoryMoves.unshift({ date: now, type: "เบิกใช้งาน", sku: l.sku, name: l.name, qty: -(Number(l.qty) || 0), ref: project.code, by: exp.by }); stockTouched = true; } } }); if (stockTouched) { window.dispatchEvent(new Event("sss-products-changed")); window.dispatchEvent(new Event("sss-stock-changed")); } // รอซื้อ: ทำเครื่องหมายซื้อแล้ว + ผูกกับค่าใช้จ่ายนี้ const prIds = valid.filter(l => l.source === "request" && l.prId).map(l => l.prId); if (prIds.length && PR) PR.markBought(prIds, expId); window.toast && window.toast(`เพิ่มค่าใช้จ่าย ฿${amount.toLocaleString()} (${valid.length} รายการ) แล้ว`); onSaved && onSaved(list); onClose(); }; const srcBtn = (i, v, label) => ( ); return ( <>

เพิ่มค่าใช้จ่าย · {project.code}

หมวด

ผู้ขาย / ซื้อจาก setVendor(e.target.value)} placeholder="เช่น ร้านวัสดุสามพราน"/>

รายการ ({lines.length}) — ออกใบค่าใช้จ่ายใบเดียวได้หลายรายการ

{lines.map((l, i) => (

{srcBtn(i, "stock", "ดึงจากคลัง")} {srcBtn(i, "request", "จากรอซื้อ")} {srcBtn(i, "manual", "กรอกเอง")}

{l.source === "stock" && ( updLine(i, { name: v, sku: "" })} onPick={p => pickStock(i, p)}/> )} {l.source === "request" && (

{pendingPRs.length === 0 ?

ยังไม่มีรายการรอซื้อของโปรเจกต์นี้

: }

)} {l.source === "manual" && ( updLine(i, { name: e.target.value })} placeholder="รายละเอียดค่าใช้จ่าย"/> )}

จำนวน updLine(i, { qty: e.target.value, amount: l.source === "stock" ? "" : l.amount })}/>

หน่วย updLine(i, { unit: e.target.value })}/>

จำนวนเงิน (บาท) updLine(i, { amount: e.target.value })}/>

{l.source === "stock" && l.sku &&

ทุน ฿{fmt0(l.cost)}/{l.unit} · บันทึกแล้วจะตัดสต็อก {l.qty} {l.unit}

}

))}

setLines(ls => [...ls, blankLine()])}>เพิ่มรายการ

รวมทั้งสิ้น ฿{fmt0(total)}

ยกเลิก บันทึกใบค่าใช้จ่าย

{showPRAdd && window.PREditModal && ( setShowPRAdd(false)} onSave={(rec) => { window.PurchaseRequests.add({ ...rec, projectCode: project.code, projectName: project.name }); window.toast && window.toast(`เพิ่ม “${rec.name}” เข้ารายการรอซื้อแล้ว`); }}/> )} ); } window.ProjX = { pxGet, pxSet, upLoad: pxUserLoad, upSave: pxUserSave, pxThaiDate, pxToday, pxTodayISO, printWorkOrderDoc, printJobSummaryDoc }; window.WorkOrderModal = WorkOrderModal; window.ProjectFormModal = ProjectFormModal; window.ProjectExpenseModal = ProjectExpenseModal;

${title}