/* global React, I, UI, SSSData */ // =============== Project extras: work orders, job summary, create/edit, expenses =============== const { useState: useStatePX } = React; // ---------- Persistence ---------- const PX_KEY = "sss-project-extras"; function pxLoad() { try { return JSON.parse(localStorage.getItem(PX_KEY) || "{}"); } catch { return {}; } } function pxSave(all) { try { localStorage.setItem(PX_KEY, JSON.stringify(all)); } catch {} } function pxGet(code) { return pxLoad()[code] || {}; } function pxSet(code, patch) { const all = pxLoad(); all[code] = { ...(all[code] || {}), ...patch }; pxSave(all); } const UP_KEY = "sss-projects-user"; function pxUserLoad() { try { return JSON.parse(localStorage.getItem(UP_KEY) || "[]"); } catch { return []; } } function pxUserSave(list) { try { localStorage.setItem(UP_KEY, JSON.stringify(list)); } catch {} } // ---------- Date helpers ---------- const PX_MONTHS = ["ม.ค.","ก.พ.","มี.ค.","เม.ย.","พ.ค.","มิ.ย.","ก.ค.","ส.ค.","ก.ย.","ต.ค.","พ.ย.","ธ.ค."]; function pxThaiDate(iso) { if (!iso) return "—"; const [y, m, d] = iso.split("-").map(Number); return `${d} ${PX_MONTHS[m - 1]} ${y + 543}`; } function pxToday() { const d = new Date(); return `${d.getDate()} ${PX_MONTHS[d.getMonth()]} ${d.getFullYear() + 543}`; } function pxTodayISO() { return new Date().toISOString().slice(0, 10); } // ---------- Shared print modal ---------- function pxPrint(barTitle, html) { document.getElementById("__print_modal")?.remove(); document.body.classList.remove("printing-modal"); const modal = document.createElement("div"); modal.id = "__print_modal"; modal.className = "print-modal"; modal.innerHTML = `
${barTitle}
${html}
`; document.body.appendChild(modal); document.body.classList.add("printing-modal"); const cleanup = () => { modal.remove(); document.body.classList.remove("printing-modal"); document.removeEventListener("keydown", onKey); }; const onKey = (e) => { if (e.key === "Escape") cleanup(); }; document.addEventListener("keydown", onKey); modal.addEventListener("click", e => { if (e.target === modal) cleanup(); }); document.getElementById("__print_btn").addEventListener("click", () => window.print()); document.getElementById("__print_close").addEventListener("click", cleanup); } function pxDocHeader(C, title, subtitle, accent) { return `
SSS
${C.name}
${C.address || ""}
เลขผู้เสียภาษี ${C.taxId}

${title}

${subtitle}
`; } // ---------- Work order ---------- function pxNextWoNo() { const all = pxLoad(); let count = 0; Object.values(all).forEach(x => { count += (x.workOrders || []).length; }); return "WO-2569-" + String(count + 1).padStart(3, "0"); } function printWorkOrderDoc(project, wo) { const D = window.SSSData; const C = D.Company; const accent = "#1d4ed8"; const prio = wo.priority || "ปกติ"; const prioColor = prio === "ด่วนมาก" ? "#b91c1c" : prio === "ด่วน" ? "#b45309" : "#15803d"; const assignees = wo.assignees && wo.assignees.length ? wo.assignees : (wo.assignee ? [wo.assignee] : ["—"]); const photos = wo.photos || []; const steps = (wo.steps && wo.steps.length) ? wo.steps : assignees.map((a, i) => ({ name: a, role: (wo.assigneeRoles && wo.assigneeRoles[i]) || "", duty: "" })); // A4 pagination: หน้า 1 = รายละเอียดงาน · หน้า 2 = ผู้รับผิดชอบ (timeline) · จากนั้นรูป 2 รูป/หน้า const photoPages = []; for (let i = 0; i < photos.length; i += 2) photoPages.push(photos.slice(i, i + 2)); const totalPages = 2 + photoPages.length; const pageFoot = (n) => `
${C.name} ${wo.no} · ออกโดยระบบ SSS หน้าที่ ${n} / ${totalPages}
`; const pageWrap = (inner, n) => `
${inner} ${pageFoot(n)}
`; // Signatures: ผู้สั่งงาน + ผู้รับงานทุกคน const sigBlocks = [ `
ผู้สั่งงาน
( ${wo.issuedBy} ) · ${wo.issueDate}
`, ...assignees.map(a => `
ผู้รับงาน
( ${a} ) · วันที่ ....................
`) ]; const sigCols = Math.min(3, sigBlocks.length); const page1 = ` ${pxDocHeader(C, "ใบสั่งงาน", "WORK ORDER", accent)}
เลขที่ ${wo.no} · ออกเมื่อ ${wo.issueDate}
ความสำคัญ: ${prio}
โปรเจกต์
${project.name}
${project.code} · ลูกค้า: ${project.customer}
ผู้รับผิดชอบ (${assignees.length} คน)
${assignees.map((a, i) => `
${i + 1}. ${a}${(wo.assigneeRoles && wo.assigneeRoles[i]) ? ` — ${wo.assigneeRoles[i]}` : ""}
`).join("")}
ผู้สั่งงาน
${wo.issuedBy}
กำหนดเวลา
เริ่ม ${pxThaiDate(wo.startDate)} → ส่งงาน ${pxThaiDate(wo.due)}
รายละเอียดของงาน
${(wo.detail || "").replace(/
👥 ผู้รับผิดชอบและลำดับการส่งต่องาน (Timeline) — ดูหน้าที่ 2 ของเอกสารนี้
${photos.length > 0 ? `
📎 รูปภาพประกอบ ${photos.length} รูป — ดูหน้าที่ 3${totalPages > 3 ? `–${totalPages}` : ""} ของเอกสารนี้
` : ""}
เงื่อนไข: ผู้รับผิดชอบต้องอัพเดทความคืบหน้าพร้อมรูปถ่ายหน้างานในระบบทุกครั้ง · แจ้งหัวหน้างานทันทีหากพบปัญหาที่กระทบกำหนดส่ง
${sigBlocks.join("")}
`; const photoPagesHTML = photoPages.map((pair, pi) => { const inner = `
SSS
ใบสั่งงาน ${wo.no} — รูปภาพประกอบ
${project.code} · ${project.name}
ออกเมื่อ ${wo.issueDate}
${pair.map((ph, j) => `
รูปที่ ${pi * 2 + j + 1}${ph.name && !/^camera/.test(ph.name) ? ` · ${ph.name}` : ""}
`).join("")}`; return pageWrap(inner, pi + 3); }).join(""); // ---------- หน้า 2: ผู้รับผิดชอบแบบ Timeline ---------- const avatarOf = (name) => { const p = window.ChatProfiles ? window.ChatProfiles.get(name) : null; const color = p ? p.color : "#57534e"; return p && p.avatar ? `` : `
${String(name || "?").slice(0, 2)}
`; }; const cb = ``; const respInner = ` ${pxDocHeader(C, "ผู้รับผิดชอบงาน", `RESPONSIBILITY TIMELINE · ${wo.no}`, accent)}
โปรเจกต์ ${project.name} (${project.code})
กำหนดส่งงาน ${pxThaiDate(wo.due)}
ทำตามลำดับ — เสร็จจากคนแรกแล้วส่งต่อให้คนถัดไป · ติ้กช่อง "ทำเสร็จแล้ว" หรือ "เกิดปัญหา" พร้อมลงชื่อทุกครั้ง
${steps.map((s, i) => `
${i + 1}
${avatarOf(s.name)}
${s.name} ${s.role || ""}
หน้าที่
${s.duty ? s.duty.replace(/
${cb} ทำเสร็จแล้ว
${cb} เกิดปัญหา
หมายเหตุ ..............................
..............................................
ลงชื่อ ................. วันที่ ....../......
${i < steps.length - 1 ? `
⬇ เสร็จแล้วส่งต่อให้ → ${steps[i + 1].name}
` : `
🏁 จบงาน — ส่งหัวหน้างานตรวจ + ออกใบประเมินงาน
`}
`).join("")}
`; const html = pageWrap(page1, 1) + pageWrap(respInner, 2) + photoPagesHTML; pxPrint(`ใบสั่งงาน ${wo.no} — ${totalPages} หน้า A4`, html); } function WorkOrderModal({ project, onClose, onSaved }) { const D = window.SSSData; const { Btn, Drawer } = window.UI; const emps = D.Employees || []; const [f, setF] = useStatePX({ no: pxNextWoNo(), detail: "", startDate: pxTodayISO(), due: project.end || pxTodayISO(), priority: "ปกติ" }); const [steps, setSteps] = useStatePX(() => emps[0] ? [{ empId: emps[0].id, duty: "" }] : []); const [photos, setPhotos] = useStatePX([]); const [showCam, setShowCam] = useStatePX(false); 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 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, 800); 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++) { const e = empOf(steps[i].empId); if (!e) { window.toast && window.toast(`กรุณาเลือกพนักงานในลำดับที่ ${i + 1}`); return; } if (!steps[i].duty.trim()) { window.toast && window.toast(`กรุณากรอกหน้าที่ของ ${e.name} (ลำดับที่ ${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 e = empOf(s.empId); return { empId: e.id, name: e.name, role: `${e.role} · ${e.dept}`, duty: s.duty.trim() }; }); const wo = { no: f.no, steps: woSteps, assigneeIds: woSteps.map(s => s.empId), assignees: woSteps.map(s => s.name), assigneeRoles: woSteps.map(s => s.role), assignee: [...new Set(woSteps.map(s => s.name))].join(", "), detail: f.detail.trim(), startDate: f.startDate, due: f.due, priority: f.priority, photos: [...photos], issuedBy: "ปิยะ ศ.", issueDate: pxToday(), status: "เปิดงาน" }; const list = [wo, ...(pxGet(project.code).workOrders || [])]; pxSet(project.code, { workOrders: list }); window.logActivity && window.logActivity("ออกใบสั่งงาน", `${wo.no} → ${wo.assignee} (${project.code})`, "create"); window.toast && window.toast(`ออกใบสั่งงาน ${wo.no} — ผู้รับผิดชอบ ${woSteps.length} ลำดับแล้ว`); onSaved && onSaved(list); onClose(); if (andPrint) setTimeout(() => printWorkOrderDoc(project, wo), 150); }; return ( ยกเลิก save(true)}>บันทึก + พิมพ์ save(false)}>บันทึกใบสั่งงาน }>
{project.name}
ลูกค้า {project.customer} · กำหนดส่งโปรเจกต์ {project.due}
{["ปกติ", "ด่วน", "ด่วนมาก"].map(p => ( ))}
{/* ผู้รับผิดชอบแบบ Timeline — เลือกพนักงาน + หน้าที่ เรียงลำดับส่งต่อ */}
{steps.map((st, i) => { const emp = empOf(st.empId); return (
{i + 1}
{window.RankAvatar && emp ? : null}
{i < steps.length - 1 && (
↓ เสร็จแล้วส่งต่อให้
)} ); })} setSteps(s => [...s, { empId: emps[0] ? emps[0].id : "", duty: "" }])}>เพิ่มผู้รับผิดชอบลำดับถัดไป
พิมพ์เป็นหน้าที่ 2 ของใบสั่งงาน — กรอบ Timeline พร้อมรูปพนักงาน ช่องติ้ก "ทำเสร็จแล้ว / เกิดปัญหา" และช่องลงชื่อ
{/* Photos */}
setShowCam(true)}>ถ่ายรูป {photos.length > 0 ? `${photos.length} รูป · พิมพ์เพิ่ม ${Math.ceil(photos.length / 2)} หน้า A4 (มีเลขหน้ากำกับ)` : "ไม่บังคับ · 2 รูปต่อ 1 หน้า A4"}
{photos.length > 0 && (
{photos.map((p, i) => (
{p.name} {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))}/> )} ); } // ---------- Job summary (ใบสรุปงาน: ค่าแรง + ค่าวัสดุ) ---------- function printJobSummaryDoc(project) { const D = window.SSSData; const C = D.Company; const accent = "#0f766e"; const fmt = (n) => Math.round(n).toLocaleString(); // Cost breakdown const labor = Math.round(project.actual * 0.40); const subcontract = Math.round(project.actual * 0.15); const materialTotal = project.actual - labor - subcontract; // Material detail: stock withdrawals for this job const moves = (D.InventoryMoves || []).filter(m => m.ref === project.code && m.qty < 0); const matRows = moves.map(m => { const prod = (D.Products || []).find(p => p.sku === m.sku); const cost = Math.abs(m.qty) * (prod?.cost || 0); return { name: m.name, qty: Math.abs(m.qty), unit: prod?.unit || "", cost }; }); const matFromStock = matRows.reduce((s, r) => s + r.cost, 0); // Linked expenses const linkedExtra = pxGet(project.code).linkedExpenses || []; const expenses = (D.Expenses || []).filter(e => (project.expenseLinks || []).includes(e.no) || linkedExtra.includes(e.no)); const extraExpenses = pxGet(project.code).expenses || []; const expTotal = expenses.reduce((s, e) => s + e.amount, 0) + extraExpenses.reduce((s, e) => s + (+e.amount || 0), 0); const matOther = Math.max(0, materialTotal - matFromStock - expTotal); const matSum = matFromStock + expTotal + matOther; const profit = project.budget - project.actual; const margin = project.budget > 0 ? ((profit / project.budget) * 100).toFixed(1) : "0.0"; const rowStyle = 'style="padding:8px 10px;border-bottom:1px solid #f1efeb;font-size:12px"'; const rowR = 'style="padding:8px 10px;border-bottom:1px solid #f1efeb;font-size:12px;text-align:right;font-variant-numeric:tabular-nums"'; const html = `
${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. ค่าแรงพนักงาน
รายการรายละเอียดจำนวนเงิน (บาท)
ค่าจ้าง / OT ทีมผลิตหัวหน้างาน ${project.lead} + ทีมผลิต (จากการลงเวลา)${fmt(labor)}
ค่าบริการภายนอก (subcontract)ชุบ/พ่นสี/ขนส่ง ภายนอก${fmt(subcontract)}
รวมค่าแรง${fmt(labor + subcontract)}
2. ค่าวัสดุ
${matRows.map(r => ``).join("")} ${expenses.map(e => ``).join("")} ${extraExpenses.map(e => ``).join("")} ${matOther > 0 ? `` : ""}
รายการรายละเอียดจำนวนเงิน (บาท)
วัตถุดิบเบิกจากสต็อก${r.name} × ${r.qty} ${r.unit}${fmt(r.cost)}
ค่าใช้จ่ายผูกโปรเจกต์${e.category} · ${e.vendor} (${e.no})${fmt(e.amount)}
ค่าใช้จ่ายเพิ่มเติม${e.category} · ${e.vendor || "—"}${fmt(+e.amount || 0)}
วัสดุสิ้นเปลือง / อื่น ๆลวดเชื่อม ใบตัด แก๊ส ฯลฯ${fmt(matOther)}
รวมค่าวัสดุ${fmt(matSum)}
3. สรุปต้นทุนและกำไร
รวมค่าแรงพนักงาน${fmt(labor + subcontract)}
รวมค่าวัสดุ${fmt(matSum)}
ต้นทุนรวมทั้งหมด${fmt(labor + subcontract + matSum)}
มูลค่างาน (Revenue)${fmt(project.budget)}
กำไรขั้นต้น (Margin ${margin}%)฿${fmt(profit)}
ผู้จัดทำ
( ดวงใจ บัญชี ) · ${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: "ปิยะ ศ.", 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 } = window.UI; const [f, setF] = useStatePX({ category: "ค่าวัสดุ/วัตถุดิบ", vendor: "", amount: "" }); const upd = (k, v) => setF(p => ({ ...p, [k]: v })); const save = () => { if (!f.amount || +f.amount <= 0) { window.toast && window.toast("กรอกจำนวนเงินให้ถูกต้อง"); return; } const exp = { date: pxToday(), category: f.category, vendor: f.vendor || "—", amount: +f.amount, status: "บันทึกแล้ว" }; const list = [...(pxGet(project.code).expenses || []), exp]; pxSet(project.code, { expenses: list }); window.toast && window.toast(`เพิ่มค่าใช้จ่าย ฿${(+f.amount).toLocaleString()} แล้ว`); onSaved && onSaved(list); onClose(); }; return ( <>
เพิ่มค่าใช้จ่าย · {project.code}
upd("vendor", e.target.value)} placeholder="เช่น ร้านวัสดุสามพราน">
upd("amount", e.target.value)} autoFocus>
ยกเลิก บันทึก
); } window.ProjX = { pxGet, pxSet, upLoad: pxUserLoad, upSave: pxUserSave, pxThaiDate, pxToday, pxTodayISO, printWorkOrderDoc, printJobSummaryDoc }; window.WorkOrderModal = WorkOrderModal; window.ProjectFormModal = ProjectFormModal; window.ProjectExpenseModal = ProjectExpenseModal;