/* global React, I, UI, SSSData */ const { useState: useStateP2, useEffect: useEffectP2 } = React; // ============ Storage helpers ============ // ย่อชื่อพนักงานแบบสั้น (สอดคล้องรูปแบบ seed) function prShortName(name) { const p = String(name || "").trim().split(/\s+/); return p.length > 1 ? `${p[0]} ${p[1][0]}.` : (p[0] || "—"); } // สร้างแถวเงินเดือนตั้งต้นจากข้อมูลพนักงาน (สำหรับคนที่ยังไม่มีใน payroll) function basePayrollRow(e) { const base = e.salary || 0; const hourly = e.hourly || 0; const stdHours = base ? 0 : (hourly ? 176 : 0); const gross = base || (hourly * stdHours); const sso = e.sso ? Math.min(Math.round(gross * 0.05), 750) : 0; return { emp: e.id, name: prShortName(e.name), base, hours: stdHours, otHours: 0, gross, advance: 0, late: 0, sso, tax: 0, net: gross - sso }; } // โหลดรายการเงินเดือน + เติมพนักงานที่เพิ่มใหม่ให้มีแถวเสมอ (พนักงานใหม่เข้าระบบคำนวณเงินเดือน) function loadPayroll() { let seed; try { seed = JSON.parse(localStorage.getItem("sss-payroll") || "null"); } catch {} seed = seed || window.SSSData.PayrollRows || []; const emps = (window.SSSData.Employees || []).filter(e => e.id !== "EMP-001" && e.status !== "ลาออก"); const byId = {}; seed.forEach(r => { byId[r.emp] = r; }); return emps.map(e => byId[e.id] || basePayrollRow(e)); } function savePayroll(rows) { try { localStorage.setItem("sss-payroll", JSON.stringify(rows)); } catch {} window.SSSData.PayrollRows = rows; } function loadTimeRecords() { try { return JSON.parse(localStorage.getItem("sss-timerecords") || "null") || window.SSSData.TimeRecords; } catch { return window.SSSData.TimeRecords; } } function saveTimeRecords(rows) { try { localStorage.setItem("sss-timerecords", JSON.stringify(rows)); } catch {} window.SSSData.TimeRecords = rows; } function loadAdvances() { try { return JSON.parse(localStorage.getItem("sss-advances") || "null") || []; } catch { return []; } } function saveAdvances(list) { try { localStorage.setItem("sss-advances", JSON.stringify(list)); } catch {} } function loadPayHistory() { try { return JSON.parse(localStorage.getItem("sss-pay-history") || "null") || []; } catch { return []; } } function savePayHistory(list) { try { localStorage.setItem("sss-pay-history", JSON.stringify(list)); } catch {} } // วันที่คำนวนล่าสุด (ประทับบนเอกสารทุกฉบับ) function thaiNowStamp() { const d = new Date(); return d.toLocaleDateString("th-TH", { day: "numeric", month: "short", year: "numeric" }) + " " + d.toLocaleTimeString("th-TH", { hour: "2-digit", minute: "2-digit" }) + " น."; } function loadCalcDate() { try { return localStorage.getItem("sss-payroll-calcdate") || "21 พ.ค. 2569 09:42 น."; } catch { return "21 พ.ค. 2569 09:42 น."; } } function saveCalcDate(s) { try { localStorage.setItem("sss-payroll-calcdate", s); } catch {} } // ============ Payroll ============ function Payroll({ navigate }) { const D = window.SSSData; const { Btn, Badge, Card, PageHead, Tabs, Drawer, fmt0, fmtM, bahtText } = window.UI; const [tab, setTab] = useStateP2("calc"); const [active, setActive] = useStateP2(null); const [rows, setRows] = useStateP2(loadPayroll); const [timeRecs, setTimeRecs] = useStateP2(loadTimeRecords); const [advances, setAdvances] = useStateP2(loadAdvances); const [showTimeAdd, setShowTimeAdd] = useStateP2(false); const [showAdvAdd, setShowAdvAdd] = useStateP2(false); const [historyDetail, setHistoryDetail] = useStateP2(null); const [selectedAdv, setSelectedAdv] = useStateP2(new Set()); const [payRound, setPayRound] = useStateP2("full"); // full | first | second const [month, setMonth] = useStateP2("2026-05"); // ตัวกรองเดือน const [calcDate, setCalcDate] = useStateP2(loadCalcDate); // วันที่คำนวนล่าสุด const [payAccountId, setPayAccountId] = useStateP2("SCB"); // บัญชีที่จ่ายค่าแรง const [payHistory, setPayHistory] = useStateP2(loadPayHistory); const [slogan, setSlogan] = useStateP2(() => { try { return localStorage.getItem("sss-payslip-slogan") || "ขยัน อดทน ซื่อสัตย์ — ทีมแข็งแรง บริษัทเติบโตไปด้วยกัน 💪"; } catch { return ""; } }); useEffectP2(() => { try { localStorage.setItem("sss-payslip-slogan", slogan); } catch {} }, [slogan]); // ===== ตัวกรองเดือน ===== const TH_M_P = ["ม.ค.", "ก.พ.", "มี.ค.", "เม.ย.", "พ.ค.", "มิ.ย.", "ก.ค.", "ส.ค.", "ก.ย.", "ต.ค.", "พ.ย.", "ธ.ค."]; const monthLabelOf = (ym) => { const [y, m] = ym.split("-").map(Number); return `${TH_M_P[m - 1]} ${y + 543}`; }; const MONTH_OPTIONS = Array.from({ length: 12 }, (_, i) => `2026-${String(i + 1).padStart(2, "0")}`); const [mYear, mMon] = month.split("-").map(Number); const ML = monthLabelOf(month); const NML = monthLabelOf(mMon === 12 ? `${mYear + 1}-01` : `${mYear}-${String(mMon + 1).padStart(2, "0")}`); const lastD = new Date(mYear, mMon, 0).getDate(); const isoOfRec = (t) => t.iso || (window.DocDates ? window.DocDates.toISO(t.date) : null) || ""; const timeRecsMonth = timeRecs.filter(t => isoOfRec(t).startsWith(month)); // ===== Semi-monthly pay rounds (จ่ายวันที่ 1 และ 16) ===== const ROUND_INFO = { full: { label: "ทั้งเดือน (2 รอบ)", range: `1–${lastD} ${ML}`, pay: `จ่าย 2 รอบ · 16 ${ML} และ 1 ${NML}`, payDate: `16 ${ML} / 1 ${NML}`, workdays: 22, slipPeriod: ML }, first: { label: "งวดต้นเดือน (1–15)", range: `1–15 ${ML}`, pay: `จ่ายวันที่ 16 ${ML}`, payDate: `16 ${ML}`, workdays: 11, slipPeriod: `1–15 ${ML}` }, second: { label: `งวดท้ายเดือน (16–${lastD})`, range: `16–${lastD} ${ML}`, pay: `จ่ายวันที่ 1 ${NML}`, payDate: `1 ${NML}`, workdays: 11, slipPeriod: `16–${lastD} ${ML}` }, }; const dayOf = (d) => { const m = String(d || "").match(/(\d{1,2})/); return m ? +m[1] : 0; }; const advInRound = (a, round) => { if (round === "full") return true; const day = dayOf(a.date); return round === "first" ? day <= 15 : day >= 16; }; // Build the rows shown for the selected round. // Earnings (เงินเดือน/OT/ชั่วโมง) are split in half each round. // ประกันสังคม + ภาษีหัก ณ ที่จ่าย ถูกหักในรอบสิ้นเดือน (จ่าย 1) ตามแนวปฏิบัติทั่วไป. const roundRows = (round) => { if (round === "full") return rows; return rows.map(r => { const base = Math.round((r.base || 0) / 2); const hours = Math.round((r.hours || 0) / 2); const otHours = Math.round(((r.otHours || 0) / 2) * 10) / 10; const gross = Math.round((r.gross || 0) / 2); const late = Math.round((r.late || 0) / 2); const advance = advances .filter(a => a.empId === r.emp && a.status === "อนุมัติแล้ว" && advInRound(a, round)) .reduce((s, a) => s + a.amount, 0); const sso = round === "second" ? r.sso : 0; const tax = round === "second" ? r.tax : 0; const net = gross - advance - late - sso - tax; return { ...r, base, hours, otHours, gross, late, advance, sso, tax, net }; }); }; const viewRows = roundRows(payRound); const RI = ROUND_INFO[payRound]; // Bulk print advance withdrawal slip(s) const printAdvancesBulk = (items) => { if (!items || items.length === 0) return; const C = D.Company; const totalAmount = items.reduce((s, a) => s + a.amount, 0); const docNo = "ADV-2569-" + String(Math.floor(Math.random() * 9000) + 1000); const today = new Date().toLocaleDateString("th-TH", { day: "numeric", month: "long" }) + " 2569"; const html = `
SSS
${C.name}
${C.address}
โทร ${C.phone} · เลขผู้เสียภาษี ${C.taxId}

ใบเบิกเงินล่วงหน้า

ADVANCE WITHDRAWAL FORM
เลขที่ ${docNo}
วันที่ ${today}
จำนวนรายการ ${items.length} คน
${items.map((a, i) => ` `).join("")}
# วันที่ขอเบิก ผู้ขอเบิก เหตุผล / รายละเอียด จำนวนเงิน (บาท)
${i+1} ${a.date} ${a.emp} ${a.reason} ${a.amount.toLocaleString()}
รวมเป็นเงิน ${totalAmount.toLocaleString()}
จำนวนเงินรวมทั้งสิ้น ฿ ${totalAmount.toLocaleString()}
(${bahtText(totalAmount)})
เงื่อนไข: ยอดเบิกล่วงหน้าทั้งหมดจะถูกหักจากเงินเดือนของพนักงานในงวดที่ระบุ · พนักงานที่เบิกขอรับเงินสด/โอน หลังจากเอกสารได้รับอนุมัติเรียบร้อย
ผู้จัดทำ
วันเพ็ญ สุขใจ · ${today}
หัวหน้าฝ่าย
วันที่ ____________
ผู้อนุมัติ
ปิยะ ศรีสวัสดิ์ · ____________
${C.name} · ${C.website} ${docNo} · ออกโดยระบบ SSS
`; 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 = `
พิมพ์ใบเบิกเงินล่วงหน้า — ${items.length} รายการ · ฿${totalAmount.toLocaleString()}
${html}
`; document.body.appendChild(modal); document.body.classList.add("printing-modal"); const cleanup = () => { modal.remove(); document.body.classList.remove("printing-modal"); }; modal.addEventListener("click", e => { if (e.target === modal) cleanup(); }); document.getElementById("__print_btn").addEventListener("click", () => window.print()); document.getElementById("__print_close").addEventListener("click", cleanup); }; useEffectP2(() => savePayroll(rows), [rows]); useEffectP2(() => saveTimeRecords(timeRecs), [timeRecs]); useEffectP2(() => saveAdvances(advances), [advances]); // Generic print modal for official payroll reports (ภ.ง.ด.1 / สปส.1-10) const printReport = (kind, period) => { const C = D.Company; const per = period || "พ.ค. 2569"; const today = new Date().toLocaleDateString("th-TH", { day: "numeric", month: "long" }) + " 2569"; const accent = kind === "pnd1" ? "#1e3a5f" : "#1f5f3a"; const title = kind === "pnd1" ? "แบบ ภ.ง.ด.1" : "แบบ สปส.1-10"; const subtitle = kind === "pnd1" ? "รายการภาษีเงินได้หัก ณ ที่จ่าย ตามมาตรา 59 (เงินเดือน/ค่าจ้าง)" : "รายการแสดงการส่งเงินสมทบกองทุนประกันสังคม"; const docNo = (kind === "pnd1" ? "PND1-2569-" : "SPS-2569-") + String(Math.floor(Math.random() * 9000) + 1000); let headCols, bodyRows, totals; if (kind === "pnd1") { headCols = ["#", "ชื่อ-สกุล", "เลขประจำตัวผู้เสียภาษี", "เงินได้ (บาท)", "ภาษีหัก ณ ที่จ่าย (บาท)"]; const totIncome = rows.reduce((s, r) => s + r.gross, 0); const totTax = rows.reduce((s, r) => s + r.tax, 0); bodyRows = rows.map((r, i) => { const emp = D.Employees.find(e => e.id === r.emp); const taxId = (emp && emp.taxId) || ("3-" + (1000 + i) + "-XXXXX-XX-" + (10 + i)); return [i + 1, r.name, taxId, r.gross.toLocaleString(), r.tax > 0 ? r.tax.toLocaleString() : "0.00", i % 2]; }); totals = ["", "รวม " + rows.length + " ราย", "", totIncome.toLocaleString(), totTax.toLocaleString()]; } else { headCols = ["#", "ชื่อ-สกุล", "ค่าจ้าง (บาท)", "สมทบลูกจ้าง 5%", "สมทบนายจ้าง 5%", "รวม (บาท)"]; let tWage = 0, tEmp = 0, tEr = 0; bodyRows = rows.map((r, i) => { const wage = r.gross; const empC = r.sso; const erC = r.sso; // employer matches 5% (capped 750) tWage += wage; tEmp += empC; tEr += erC; return [i + 1, r.name, wage.toLocaleString(), empC.toLocaleString(), erC.toLocaleString(), (empC + erC).toLocaleString(), i % 2]; }); totals = ["", "รวม " + rows.length + " ราย", tWage.toLocaleString(), tEmp.toLocaleString(), tEr.toLocaleString(), (tEmp + tEr).toLocaleString()]; } const colAlign = (idx) => idx === 0 ? "center" : (idx >= (kind === "pnd1" ? 3 : 2) ? "right" : "left"); const html = `
SSS
${C.name}
${C.address}
เลขประจำตัวผู้เสียภาษี ${C.taxId}

${title}

${subtitle}
เลขที่ ${docNo}
งวด ${per}
คำนวนเมื่อ ${calcDate}
ยื่นเมื่อ ${today}
${headCols.map((h, i) => ``).join("")} ${bodyRows.map(r => ` ${r.slice(0, -1).map((c, i) => ``).join("")} `).join("")} ${totals.map((c, i) => ``).join("")}
${h}
${c}
${c}
ผู้จัดทำ
วันเพ็ญ สุขใจ · ${today}
ผู้มีอำนาจลงนาม
ปิยะ ศรีสวัสดิ์ · ____________
${C.name} · ${C.website || ""} ${docNo} · ออกโดยระบบ SSS
`; 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 = `
${title} — งวด ${per}
${html}
`; document.body.appendChild(modal); document.body.classList.add("printing-modal"); const cleanup = () => { modal.remove(); document.body.classList.remove("printing-modal"); }; modal.addEventListener("click", e => { if (e.target === modal) cleanup(); }); document.getElementById("__print_btn").addEventListener("click", () => window.print()); document.getElementById("__print_close").addEventListener("click", cleanup); window.toast && window.toast(`ออก${title} งวด ${per} แล้ว`); }; const totalGross = viewRows.reduce((s, r) => s + r.gross, 0); const totalNet = viewRows.reduce((s, r) => s + r.net, 0); const totalSSO = viewRows.reduce((s, r) => s + r.sso, 0); const totalTax = viewRows.reduce((s, r) => s + r.tax, 0); const totalAdvance = viewRows.reduce((s, r) => s + r.advance, 0); const totalLate = viewRows.reduce((s, r) => s + r.late, 0); // Recalculate all payroll rows const recalculate = async () => { const ok = await window.confirmDialog({ title: "คำนวนเงินเดือนใหม่", message: "ระบบจะดึงข้อมูลล่าสุดมาคำนวน", bullets: [ `ชั่วโมงทำงานรวม OT จากการลงเวลา (${timeRecs.length} วัน)`, "เบิกเงินล่วงหน้าที่อนุมัติแล้ว", "หักประกันสังคม 5% (สูงสุด 750 บาท)", "หัก ณ ที่จ่าย ภ.ง.ด.1" ], confirmText: "คำนวนใหม่" }); if (!ok) return; const next = rows.map(r => { const emp = D.Employees.find(e => e.id === r.emp); if (!emp) return r; // Sum hours from time records const myTime = timeRecs.filter(t => t.emp === r.emp); const hours = myTime.reduce((s, t) => s + (t.work || 0), 0); const otHours = myTime.reduce((s, t) => s + (t.ot || 0), 0); const lateMin = myTime.reduce((s, t) => s + (t.late || 0), 0); // Calculate gross let gross; if (emp.salary > 0) { gross = emp.salary + otHours * (emp.otRate || 0); } else { gross = (hours > 0 ? hours : r.hours) * (emp.hourly || 0) + otHours * (emp.otRate || 0); } // SSO 5% (cap 750) const sso = emp.sso ? Math.min(750, Math.floor(gross * 0.05)) : 0; // Late deduction = lateMin / 60 × hourly const lateAmount = lateMin > 0 ? Math.round((lateMin / 60) * (emp.hourly || (emp.salary / 22 / 8))) : r.late; // Advance from approved advances this period const advAmount = advances.filter(a => a.empId === r.emp && a.status === "อนุมัติแล้ว" && a.period === "พ.ค. 2569").reduce((s, a) => s + a.amount, 0); const tax = r.tax; const net = gross - sso - tax - advAmount - lateAmount; return { ...r, hours: hours || r.hours, otHours: otHours || r.otHours, gross, sso, advance: advAmount, late: lateAmount, net }; }); setRows(next); const stamp = thaiNowStamp(); setCalcDate(stamp); saveCalcDate(stamp); window.logActivity && window.logActivity("คำนวนเงินเดือน", `งวด ${ML} · คำนวนเมื่อ ${stamp}`, "update"); window.toast && window.toast("คำนวนเงินเดือนใหม่แล้ว · " + stamp); }; const bulkTransfer = async () => { const payAccts = (window.CompanyCashStore && window.CompanyCashStore.ACCOUNTS) || []; const acc = payAccts.find(a => a.id === payAccountId) || { name: "ธ.ไทยพาณิชย์", short: "SCB" }; const ok = await window.confirmDialog({ title: `จ่ายเงินเดือน — ${RI.label}`, message: `จ่ายรวม ฿${fmt0(totalNet)} ไปยังพนักงาน ${viewRows.length} คน
รอบ ${RI.range} · จ่ายจาก ${acc.name}`, bullets: [ `ตัดยอดเงินออกจากบัญชี ${acc.short} ในหน้าบัญชีธนาคาร`, "ดาวน์โหลดไฟล์ Bulk Transfer (.xlsx) สำหรับอัปโหลดเข้า K-Cyber Banking", "บันทึกใบสำคัญจ่าย PV-2569-XXXX อัตโนมัติ", "ส่ง pay slip ให้พนักงานทุกคนทางอีเมล", "อัปเดตสถานะรอบเป็น 'จ่ายแล้ว'" ], confirmText: "จ่ายเงินเดือน", cancelText: "ยกเลิก" }); if (!ok) return; if (window.CompanyCashStore && window.CompanyCashStore.addMovement) { window.CompanyCashStore.addMovement({ accountId: payAccountId, direction: "out", amount: totalNet, desc: `จ่ายเงินเดือน ${RI.label} — พนักงาน ${viewRows.length} คน`, ref: "PAYROLL", source: "คำนวนเงินเดือน" }); } const histEntry = { id: "PAY-" + Date.now(), month, monthLabel: ML, round: payRound, roundLabel: RI.label, payDate: RI.payDate, paidAt: thaiNowStamp(), count: viewRows.length, gross: totalGross, deduct: totalSSO + totalTax + totalAdvance + totalLate, net: totalNet, accountId: payAccountId, accountName: acc.short, }; const nextHist = [histEntry, ...payHistory]; setPayHistory(nextHist); savePayHistory(nextHist); window.logActivity && window.logActivity("จ่ายเงินเดือน", `${RI.label} ฿${fmt0(totalNet)} จาก${acc.short}`, "approve"); window.toast && window.toast(`จ่ายเงินเดือน ฿${fmt0(totalNet)} จาก${acc.name} (${RI.label}) แล้ว — ตัดยอดบัญชีให้อัตโนมัติ`); }; const exportExcel = () => { // Generate CSV const headers = ["รหัส", "ชื่อ", "เงินเดือน", "ชม.ทำงาน", "ชม. OT", "รวมรายได้", "เบิกล่วงหน้า", "มาสาย", "SSO", "หักภาษี", "สุทธิ"]; const csvRows = [headers.join(",")]; viewRows.forEach(r => { csvRows.push([r.emp, r.name, r.base, r.hours, r.otHours, r.gross, r.advance, r.late, r.sso, r.tax, r.net].join(",")); }); const blob = new Blob(["\uFEFF" + csvRows.join("\n")], { type: "text/csv;charset=utf-8" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = `payroll-${payRound}-${new Date().toISOString().slice(0,10)}.csv`; a.click(); URL.revokeObjectURL(url); window.toast && window.toast(`ส่งออก Excel (${RI.label}) แล้ว`); }; const printAllSlips = () => { if (viewRows.length === 0) return; // Render all slips into a modal const C = D.Company; const slipsHTML = viewRows.map((row, i) => { const emp = D.Employees.find(e => e.id === row.emp); return `
SSS
${C.name}
เลขผู้เสียภาษี ${C.taxId}

ใบจ่ายเงินเดือน

PAY SLIP · งวด ${RI.slipPeriod}
คำนวนเมื่อ ${calcDate} · พิมพ์เมื่อ ${thaiNowStamp()}
พนักงาน
${emp?.name}
รหัส / แผนก
${emp?.id} · ${emp?.dept}
ตำแหน่ง
${emp?.role}
วันจ่าย
${RI.payDate}
วันที่คำนวน
${calcDate}
รายได้
เงินเดือน/ค่าจ้าง${(row.base > 0 ? row.base : row.hours * (emp?.hourly || 0)).toLocaleString()}
OT (${row.otHours} ชม.)${(row.otHours * (emp?.otRate || 0)).toLocaleString()}
รวม${row.gross.toLocaleString()}
รายการหัก
SSO 5%−${row.sso.toLocaleString()}
ภ.ง.ด.1${row.tax > 0 ? '−'+row.tax.toLocaleString() : '—'}
เบิกล่วงหน้า${row.advance > 0 ? '−'+row.advance.toLocaleString() : '—'}
มาสาย${row.late > 0 ? '−'+row.late.toLocaleString() : '—'}
รวม−${(row.sso+row.tax+row.advance+row.late).toLocaleString()}
ยอดสุทธิจ่าย
฿${row.net.toLocaleString()}
`; }).join(""); 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 = `
พิมพ์ Pay Slip — ${rows.length} ใบ
${slipsHTML}
`; document.body.appendChild(modal); document.body.classList.add("printing-modal"); const cleanup = () => { modal.remove(); document.body.classList.remove("printing-modal"); }; modal.addEventListener("click", e => { if (e.target === modal) cleanup(); }); document.getElementById("__print_btn").addEventListener("click", () => window.print()); document.getElementById("__print_close").addEventListener("click", cleanup); }; const editLate = (empId, delta) => { setRows(rs => rs.map(r => r.emp === empId ? { ...r, late: Math.max(0, r.late + delta), net: r.net - delta } : r)); }; return ( <> คำนวนใหม่ จ่ายเงินเดือน }/>
📢 คำขวัญปลุกใจ (พิมพ์บนใบจ่ายเงิน) setSlogan(e.target.value)} placeholder="เช่น ขยันวันนี้ เพื่อพรุ่งนี้ที่ดีกว่า" style={{ flex: 1, height: 32, fontSize: 12.5 }}>
{tab === "calc" && (
รอบจ่าย:
{[["full", "ทั้งเดือน"], ["first", "ต้นเดือน (1–15)"], ["second", "ท้ายเดือน (16–31)"]].map(([k, lbl]) => ( ))}
ช่วง {RI.range} · วันทำงาน {RI.workdays} วัน · {RI.pay}
คำนวนล่าสุด {calcDate} ส่งออก Excel พิมพ์ Slip ทั้งหมด
{viewRows.map(r => ( setActive(r)}> ))}
รหัสชื่อ เงินเดือน ชม.ทำงาน ชม. OT รวมรายได้ เบิกล่วงหน้า มาสาย SSO หัก ณ ที่จ่าย สุทธิ
{r.emp} {r.name} {r.base > 0 ? `฿${fmt0(r.base)}` : `${D.Employees.find(e=>e.id===r.emp)?.hourly}/ชม.`} {r.hours || "—"} {r.otHours || "—"} ฿{fmt0(r.gross)} {r.advance > 0 ? `−฿${fmt0(r.advance)}` : "—"} 0 ? "var(--danger)" : "inherit"}}>{r.late > 0 ? `−฿${fmt0(r.late)}` : "—"} −฿{fmt0(r.sso)} {r.tax > 0 ? `−฿${fmt0(r.tax)}` : "—"} ฿{fmt0(r.net)} e.stopPropagation()}> setActive(r)}/>
รวมทั้งหมด ฿{fmt0(totalGross)} −฿{fmt0(totalAdvance)} −฿{fmt0(totalLate)} −฿{fmt0(totalSSO)} −฿{fmt0(totalTax)} ฿{fmt0(totalNet)}
)} {tab === "time" && ( <> {window.PayrollQRImport && } {window.PayrollTimeTab ? : } )} {tab === "late" && window.PayrollAttendanceTab && ( )} {tab === "advance" && ( {advances.filter(a => selectedAdv.has(a.empId + "_" + a.date)).length > 0 ? ( <> เลือก {selectedAdv.size} รายการ setSelectedAdv(new Set())}>ยกเลิก printAdvancesBulk(advances.filter(a => selectedAdv.has(a.empId + "_" + a.date)))}>พิมพ์รวม ({selectedAdv.size}) ) : setShowAdvAdd(true)}>บันทึกการเบิก} }>
{advances.map((a, i) => { const key = a.empId + "_" + a.date; return ( ); })}
0 && advances.every(a => selectedAdv.has(a.empId + "_" + a.date))} onChange={e => { if (e.target.checked) setSelectedAdv(new Set(advances.map(a => a.empId + "_" + a.date))); else setSelectedAdv(new Set()); }}/> วันที่พนักงานเหตุผลจำนวนสถานะหักจากงวด
e.stopPropagation()}> { const next = new Set(selectedAdv); if (next.has(key)) next.delete(key); else next.add(key); setSelectedAdv(next); }}/> {a.date} {a.emp} {a.reason} ฿{fmt0(a.amount)} {a.status === "รออนุมัติ" ? (
{ setAdvances(advances.map((x, j) => j === i ? { ...x, status: "อนุมัติแล้ว" } : x)); window.logActivity && window.logActivity("อนุมัติ", `ใบเบิก ${a.emp} ฿${fmt0(a.amount)}`, "approve"); window.toast && window.toast("อนุมัติแล้ว"); }}>อนุมัติ { setAdvances(advances.map((x, j) => j === i ? { ...x, status: "ปฏิเสธ" } : x)); window.logActivity && window.logActivity("ปฏิเสธ", `ใบเบิก ${a.emp}`, "approve"); }}>ปฏิเสธ
) : {a.status}} 		{a.period}
printAdvancesBulk([a])} title="พิมพ์ใบเบิก"/> { const ok = await window.confirmDelete(`ใบเบิก ${a.emp}`, `จำนวน ฿${fmt0(a.amount)} · เหตุผล: ${a.reason}`); if (ok) setAdvances(advances.filter((_, j) => j !== i)); }}/>
)} {tab === "history" && ( {payHistory.length === 0 ? (
📋
ยังไม่มีประวัติการจ่ายเงิน
กด "จ่ายเงินเดือน" ในแท็บคำนวนเงินเดือน เพื่อบันทึกรายการ
) : (
{payHistory.map((h) => ( setHistoryDetail({ period: `${h.roundLabel} · ${h.monthLabel}`, total: h.gross, net: h.net, deduct: h.deduct, count: h.count, payDate: h.paidAt })}> ))}
เดือนรอบวันจ่ายบัญชีจำนวนคนยอดรวมหักรวมสุทธิสถานะ
{h.monthLabel} {h.roundLabel} {h.payDate} {h.accountName} {h.count} ฿{fmt0(h.gross)} −฿{fmt0(h.deduct)} ฿{fmt0(h.net)} จ่ายแล้ว ดู
)} )} {/* Pay slip drawer */} setActive(null)} title={active ? `ใบจ่ายเงินเดือน · ${active.name}` : ""} wide footer={<> window.toast && window.toast("ส่งอีเมล pay slip ไปยังพนักงานแล้ว")}>ส่งทางอีเมล window.printDocPaperWithOptions()}>พิมพ์}> {active && } {showTimeAdd && setShowTimeAdd(false)} onSave={(t) => { setTimeRecs([t, ...timeRecs]); setShowTimeAdd(false); window.toast && window.toast("บันทึกเวลาแล้ว"); }}/>} {showAdvAdd && setShowAdvAdd(false)} onSave={(a) => { setAdvances([{ ...a, status: "รออนุมัติ", period: "พ.ค. 2569", date: "22 พ.ค. 2569" }, ...advances]); setShowAdvAdd(false); window.toast && window.toast("บันทึกใบเบิกแล้ว"); }}/>} setHistoryDetail(null)} title={historyDetail ? "งวด " + historyDetail.period : ""} footer={ setHistoryDetail(null)}>ปิด}> {historyDetail && (
วันจ่าย
{historyDetail.payDate}
จำนวนพนักงาน
{historyDetail.count} คน
ยอดรวม (Gross)
฿{fmt0(historyDetail.total)}
หักรวม
฿{fmt0(historyDetail.deduct)}
ยอดสุทธิที่จ่าย
฿{fmt0(historyDetail.net)}
{ printAllSlips(); }}>ดาวน์โหลด pay slip รวม printReport("pnd1", historyDetail.period)}>ออก ภ.ง.ด.1 printReport("sps110", historyDetail.period)}>ออก สปส.1-10
)} ); } function TimeScheduleBuilder({ timeRecs, setTimeRecs }) { const D = window.SSSData; const { Btn, Badge, Card } = window.UI; const monthsTh = ["ม.ค.","ก.พ.","มี.ค.","เม.ย.","พ.ค.","มิ.ย.","ก.ค.","ส.ค.","ก.ย.","ต.ค.","พ.ย.","ธ.ค."]; const dayNames = ["อา","จ","อ","พ","พฤ","ศ","ส"]; // Time policy defaults — persisted const loadPolicy = () => { try { return JSON.parse(localStorage.getItem("sss-time-policy") || "null") || { defaultIn: "08:30", breakStart: "12:00", breakEnd: "13:00", defaultOut: "17:30", standardHours: 8, otMultiplier: 1.5, lateGraceMin: 5, lateDeductPerMin: 5 }; } catch { return {}; } }; const [policy, setPolicy] = useStateP2(loadPolicy); const [showPolicy, setShowPolicy] = useStateP2(false); React.useEffect(() => { localStorage.setItem("sss-time-policy", JSON.stringify(policy)); }, [policy]); const [empId, setEmpId] = useStateP2(D.Employees[2]?.id || D.Employees[0]?.id || ""); const [startDate, setStartDate] = useStateP2("2026-05-01"); const [endDate, setEndDate] = useStateP2("2026-05-31"); const [schedule, setSchedule] = useStateP2([]); // กัน state ค้างจากรายชื่อพนักงานที่ถูกแก้/ลบ — ถ้า id ไม่อยู่ในลิสต์แล้ว รีเซ็ตเป็นคนแรก React.useEffect(() => { if (D.Employees.length && !D.Employees.some(e => e.id === empId)) { setEmpId(D.Employees[0].id); } }, [D.Employees.length]); const emp = D.Employees.find(e => e.id === empId); const STATUSES = [ { key: "ทำงาน", emoji: "💼" }, { key: "OT", emoji: "⏰" }, { key: "วันหยุด", emoji: "🏖️" }, { key: "ลา", emoji: "🌴" }, { key: "ขาด", emoji: "❌" }, { key: "นอกสถานที่", emoji: "🚗" } ]; const fmtThai = (iso) => { const [y, m, d] = iso.split("-").map(Number); return `${d} ${monthsTh[m-1]} ${y + 543}`; }; // Helpers const toMin = (t) => { if (!t) return 0; const [h, m] = t.split(":").map(Number); return h*60+m; }; const breakMin = () => toMin(policy.breakEnd) - toMin(policy.breakStart); // Compute work/OT/late from in-out times, applying policy const computeFromTimes = (inT, outT) => { if (!inT || !outT) return { work: 0, ot: 0, late: 0, lateDeduct: 0 }; const inM = toMin(inT), outM = toMin(outT); const stdInM = toMin(policy.defaultIn); let lateRaw = Math.max(0, inM - stdInM); // Grace period const lateMin = lateRaw > policy.lateGraceMin ? lateRaw : 0; const lateDeduct = lateMin * policy.lateDeductPerMin; const total = Math.max(0, outM - inM - breakMin()) / 60; let work = Math.min(total, policy.standardHours); let ot = Math.max(0, total - policy.standardHours); return { work: Math.round(work * 100) / 100, ot: Math.round(ot * 100) / 100, late: lateMin, lateDeduct }; }; const generateSchedule = () => { const effEmpId = D.Employees.some(e => e.id === empId) ? empId : (D.Employees[0]?.id || ""); if (!effEmpId || !startDate || !endDate) { window.toast && window.toast("กรุณาเลือกพนักงานและช่วงวันที่"); return; } if (effEmpId !== empId) setEmpId(effEmpId); const effEmp = D.Employees.find(e => e.id === effEmpId); const s = new Date(startDate); const e = new Date(endDate); if (e < s) { window.toast && window.toast("วันสิ้นสุดต้องหลังวันเริ่ม"); return; } const days = []; const cur = new Date(s); while (cur <= e) { const dow = cur.getDay(); const iso = cur.toISOString().slice(0, 10); const existing = timeRecs.find(t => t.iso === iso && t.emp === effEmpId); const isWeekend = dow === 0 || dow === 6; if (existing) { days.push(existing); } else { const calc = isWeekend ? { work: 0, ot: 0, late: 0 } : computeFromTimes(policy.defaultIn, policy.defaultOut); days.push({ iso, emp: effEmpId, name: effEmp?.name, date: fmtThai(iso), dow, status: isWeekend ? "วันหยุด" : "ทำงาน", in: isWeekend ? "" : policy.defaultIn, out: isWeekend ? "" : policy.defaultOut, break: breakMin(), work: calc.work, ot: calc.ot, late: calc.late, offsiteDays: 0, note: "" }); } cur.setDate(cur.getDate() + 1); } setSchedule(days); window.toast && window.toast(`สร้างตาราง ${days.length} วันแล้ว`); }; const updateRow = (idx, patch) => { setSchedule(s => s.map((r, i) => { if (i !== idx) return r; const next = { ...r, ...patch }; // Auto-recalc if in/out changed and status is ทำงาน or OT if ((patch.in !== undefined || patch.out !== undefined) && (next.status === "ทำงาน" || next.status === "OT")) { const calc = computeFromTimes(next.in, next.out); next.work = calc.work; next.ot = calc.ot; next.late = calc.late; if (next.ot > 0 && next.status === "ทำงาน") next.status = "OT"; } return next; })); }; const onStatusChange = (idx, status) => { const cur = schedule[idx]; const patches = { status }; if (status === "วันหยุด" || status === "ลา" || status === "ขาด") { patches.in = ""; patches.out = ""; patches.work = 0; patches.ot = 0; patches.late = 0; } else if (status === "นอกสถานที่") { patches.in = ""; patches.out = ""; patches.work = 0; patches.late = 0; patches.ot = 0; if (!cur.offsiteDays) patches.offsiteDays = 1; } else if (status === "OT") { const inT = cur.in || policy.defaultIn; const outT = cur.out || "20:00"; patches.in = inT; patches.out = outT; const c = computeFromTimes(inT, outT); patches.work = c.work; patches.ot = c.ot; patches.late = c.late; } else if (status === "ทำงาน") { const inT = cur.in || policy.defaultIn; const outT = cur.out || policy.defaultOut; patches.in = inT; patches.out = outT; const c = computeFromTimes(inT, outT); patches.work = c.work; patches.ot = c.ot; patches.late = c.late; } updateRow(idx, patches); }; const saveSchedule = () => { const merged = [...timeRecs]; schedule.forEach(s => { const idx = merged.findIndex(t => t.iso === s.iso && t.emp === s.emp); if (idx >= 0) merged[idx] = s; else merged.unshift(s); }); setTimeRecs(merged); window.toast && window.toast(`บันทึก ${schedule.length} วันของ ${emp?.name}`); }; const summary = { workDays: schedule.filter(s => s.status === "ทำงาน" || s.status === "OT").length, otHours: schedule.reduce((a, s) => a + (s.ot || 0), 0), totalWork: schedule.reduce((a, s) => a + (s.work || 0), 0), leave: schedule.filter(s => s.status === "ลา").length, absent: schedule.filter(s => s.status === "ขาด").length, holiday: schedule.filter(s => s.status === "วันหยุด").length, offsite: schedule.reduce((a, s) => a + (s.offsiteDays || 0), 0), lateMin: schedule.reduce((a, s) => a + (s.late || 0), 0) }; return ( <> setShowPolicy(true)}>ตั้งค่าเวลา & OT}>
setStartDate(e.target.value)}/>
setEndDate(e.target.value)}/>
สร้างตาราง
⚙️ นโยบาย: เข้า {policy.defaultIn} · ออก {policy.defaultOut} พัก {policy.breakStart}-{policy.breakEnd} เกิน {policy.standardHours} ชม. = OT (×{policy.otMultiplier}) สาย: อนุโลม {policy.lateGraceMin} นาที · เกิน หัก ฿{policy.lateDeductPerMin}/นาที
{schedule.length > 0 && ( <>
วันทำงาน
{summary.workDays} วัน
ชม.ทำงานรวม
{summary.totalWork.toFixed(1)} ชม.
OT รวม · เป็นเงิน
{summary.otHours.toFixed(1)} ชม. (×{policy.otMultiplier})
ลา / ขาด / หยุด
{summary.leave} / {summary.absent} / {summary.holiday}
{(summary.offsite > 0 || summary.lateMin > 0) && (
{summary.offsite > 0 && 🚗 นอกสถานที่: {summary.offsite} วัน} {summary.lateMin > 0 && ⏰ มาสายรวม: {summary.lateMin} นาที · หัก ฿{(summary.lateMin * policy.lateDeductPerMin).toLocaleString()}}
)} setSchedule([])}>ล้างตาราง บันทึกตาราง }>
{schedule.map((r, i) => { const isWeekend = r.dow === 0 || r.dow === 6; const isOffsite = r.status === "นอกสถานที่"; const noTime = r.status === "วันหยุด" || r.status === "ลา" || r.status === "ขาด" || r.status === "นอกสถานที่"; const cellStyle = { height: 32, padding: "0 8px", fontSize: 12 }; const numCellStyle = { ...cellStyle, textAlign: "right" }; return ( ); })}
วัน วันที่ สถานะ เข้างาน เลิกงาน พัก
(นาที)
 ชม. OT สาย
(นาที)
 นอกสถานที่
(วัน)
{dayNames[r.dow]} {r.date} updateRow(i, { in: e.target.value })}/> updateRow(i, { out: e.target.value })}/> updateRow(i, { break: +e.target.value })}/> updateRow(i, { work: +e.target.value })}/> 0 ? "var(--info)" : "inherit", fontWeight: r.ot > 0 ? 600 : 400}} disabled={noTime} value={r.ot} onChange={e=>updateRow(i, { ot: +e.target.value })}/> 0 ? "var(--danger)" : "inherit"}} disabled={noTime} value={r.late} onChange={e=>updateRow(i, { late: +e.target.value })}/> {isOffsite ? ( updateRow(i, { offsiteDays: +e.target.value })}/> ) :
—
}
)} {schedule.length === 0 && (
{timeRecs.slice(0, 30).map((t, i) => ( ))} {timeRecs.length === 0 && }
วันที่พนักงานสถานะเข้าออกชม.OTสาย
{t.date} {t.name} {t.status} {t.in || "—"} {t.out || "—"} {(t.work || 0).toFixed(1)} {t.ot > 0 ? t.ot.toFixed(1) : "—"} 0 ? "var(--danger)" : "inherit"}}>{t.late > 0 ? t.late : "—"} { const ok = await window.confirmDelete("ตารางเวลา " + t.date, t.name); if (!ok) return; setTimeRecs(timeRecs.filter((_, j) => j !== i)); window.logActivity && window.logActivity("ลบ", "ตารางเวลา " + t.date + " ของ " + t.name, "delete"); }}/>
ยังไม่มีตารางเวลา — สร้างตารางด้านบน
)} {showPolicy && setShowPolicy(false)}/>} ); } function PolicyModal({ policy, setPolicy, onClose }) { const { Btn } = window.UI; const [f, setF] = useStateP2(policy); const upd = (k, v) => setF(p => ({ ...p, [k]: v })); return (
e.stopPropagation()}>
⚙️ ตั้งค่าเวลาทำงาน & OT
ใช้เป็นค่า default เมื่อสร้างตารางใหม่ และคำนวน OT/มาสายอัตโนมัติ
เวลาทำงานปกติ
upd("defaultIn", e.target.value)}/>
upd("defaultOut", e.target.value)}/>
upd("breakStart", e.target.value)}/>
upd("breakEnd", e.target.value)}/>
OT (ล่วงเวลา)
upd("standardHours", +e.target.value)}/>
upd("otMultiplier", +e.target.value)}/>
💡 ทำงานเกิน {f.standardHours} ชม./วัน → ส่วนเกินคิดเป็น OT (×{f.otMultiplier})
การมาสาย
upd("lateGraceMin", +e.target.value)}/>
upd("lateDeductPerMin", +e.target.value)}/>
💡 มาสายไม่เกิน {f.lateGraceMin} นาที → ไม่หัก · เกินกว่านั้นหัก ฿{f.lateDeductPerMin}/นาที
ยกเลิก { setPolicy(f); window.toast && window.toast("บันทึกการตั้งค่าแล้ว"); onClose(); }}>บันทึก
); } function TimeAddModal({ onClose, onSave }) { const D = window.SSSData; const { Btn } = window.UI; const [f, setF] = useStateP2({ date: "22 พ.ค. 2569", emp: D.Employees[2]?.id, name: D.Employees[2]?.name, in: "08:00", out: "17:00", break: 60, work: 8, ot: 0, late: 0, status: "ปกติ" }); const setEmp = (id) => { const e = D.Employees.find(emp => emp.id === id); setF(p => ({ ...p, emp: id, name: e?.name })); }; return (
e.stopPropagation()}>
บันทึกเวลาทำงาน
setF(p=>({...p, date: e.target.value}))}/>
setF(p=>({...p, in: e.target.value}))}/>
setF(p=>({...p, out: e.target.value}))}/>
setF(p=>({...p, break: +e.target.value}))}/>
setF(p=>({...p, work: +e.target.value}))}/>
setF(p=>({...p, ot: +e.target.value}))}/>
setF(p=>({...p, late: +e.target.value, status: +e.target.value > 0 ? "สาย" : "ปกติ"}))}/>
ยกเลิก onSave(f)}>บันทึก
); } function AdvanceAddModal({ onClose, onSave }) { const D = window.SSSData; const { Btn } = window.UI; const [f, setF] = useStateP2({ empId: D.Employees[2]?.id, emp: D.Employees[2]?.name, reason: "", amount: 0 }); const setEmp = (id) => { const e = D.Employees.find(emp => emp.id === id); setF(p => ({ ...p, empId: id, emp: e?.name })); }; return (
e.stopPropagation()}>
บันทึกการเบิกเงินล่วงหน้า
setF(p=>({...p, amount: +e.target.value}))}/>