/* global React, I, UI, SSSData */ // =============== ลงเวลา QR · QR Time Clock =============== // พนักงาน login แล้วลงเวลาได้เฉพาะของตัวเอง · QR เปลี่ยนทุกวัน · เข้างาน-พักเที่ยง-เลิกพัก-ออกงาน // ขอลา (เช้า/บ่าย/ทั้งวัน) + แจ้งเข้าสาย (ก่อน 08:00 เท่านั้น) · ไม่ลงเวลา = ขาดงาน // เชื่อมกับคำนวนเงินเดือนแบบรายวัน (เลือกช่วงวันที่แล้วดึงข้อมูล) const { useState: useStateQC, useEffect: useEffectQC, useRef: useRefQC } = React; const QC_TOKEN_KEY = "sss-qr-token"; const QC_CLOCK_KEY = "sss-time-clock"; const QC_RULES_KEY = "sss-work-rules"; const QC_REQ_KEY = "sss-time-requests"; const QC_MONTHS = ["ม.ค.", "ก.พ.", "มี.ค.", "เม.ย.", "พ.ค.", "มิ.ย.", "ก.ค.", "ส.ค.", "ก.ย.", "ต.ค.", "พ.ย.", "ธ.ค."]; const QC_WORK_START = "08:00"; function qcTodayISO() {return new Date().toISOString().slice(0, 10);} function qcThaiOfISO(iso) {const [y, m, d] = String(iso).split("-").map(Number);return `${d} ${QC_MONTHS[m - 1]} ${y + 543}`;} function qcTodayTh() {return qcThaiOfISO(qcTodayISO());} function qcTimeNow() {const d = new Date();return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;} function qcToMin(t) {if (!t) return 0;const [h, m] = String(t).split(":").map(Number);return h * 60 + m;} function qcTokenLoad() { const d = window.SSSData; if (d && d.QRToken && d.QRToken.date) return d.QRToken; try {return JSON.parse(localStorage.getItem(QC_TOKEN_KEY) || "null");} catch {return null;} } function qcTokenSave(t) { const d = window.SSSData; if (d) { if (!d.QRToken) d.QRToken = {}; Object.assign(d.QRToken, t); } try {localStorage.setItem(QC_TOKEN_KEY, JSON.stringify(t));} catch {} window.dispatchEvent(new Event("sss-qr-updated")); } function qcClockLoad() { const d = window.SSSData; if (d && Array.isArray(d.QRClockRecords)) return d.QRClockRecords; try {return JSON.parse(localStorage.getItem(QC_CLOCK_KEY) || "[]");} catch {return [];} } function qcClockSave(list) { const d = window.SSSData; if (d) { d.QRClockRecords = list; } try {localStorage.setItem(QC_CLOCK_KEY, JSON.stringify(list));} catch {} window.dispatchEvent(new Event("sss-clock-saved")); } function qcReqLoad() { const d = window.SSSData; if (d && Array.isArray(d.TimeRequests)) return d.TimeRequests; try {return JSON.parse(localStorage.getItem(QC_REQ_KEY) || "[]");} catch {return [];} } function qcReqSave(list) { const d = window.SSSData; if (d) { d.TimeRequests = list; } try {localStorage.setItem(QC_REQ_KEY, JSON.stringify(list));} catch {} window.dispatchEvent(new Event("sss-req-saved")); } const QC_DEFAULT_RULES = `1. เวลาทำงาน 08:00–17:00 น. · พักกลางวัน 12:00–13:00 น. 2. สแกน QR ลงเวลา 4 ครั้ง: เข้างาน → พักเที่ยง → เลิกพัก → ออกงาน 3. เข้างานหลัง 08:00 ถือว่ามาสาย หักตามนาที — แจ้งขอเข้าสายได้ก่อน 08:00 เท่านั้น 4. ขอลาผ่านปุ่ม "ขอลา" (ลาเช้า/ลาบ่าย/ทั้งวัน) — ขอลาวันนี้ทำได้ก่อน 08:00 เท่านั้น เลยเวลานี้เลือกได้ตั้งแต่วันถัดไป · รอหัวหน้าอนุมัติ 5. ไม่ลงเวลาและไม่มีใบลา = ขาดงาน มีผลต่อเงินเดือนและ KPI`; function qcRulesLoad() {try {return localStorage.getItem(QC_RULES_KEY) || QC_DEFAULT_RULES;} catch {return QC_DEFAULT_RULES;}} const QC_CLOCK_TYPES = ["เข้างาน", "พักเที่ยง", "เลิกพัก", "ออกงาน"]; const QC_TYPE_EMOJI = { "เข้างาน": "🌅", "พักเที่ยง": "🍚", "เลิกพัก": "💪", "ออกงาน": "🌇" }; // สร้างรูป QR เป็น dataURL (qrcode-generator) function qcQRDataUrl(text, cell) { try { if (!window.qrcode) return null; const q = window.qrcode(0, "M"); q.addData(text); q.make(); return q.createDataURL(cell || 8, 4); } catch (e) {return null;} } // ---------- พิมพ์ QR ประจำวัน ---------- function qcPrintQR(token, dataUrl) { document.getElementById("__print_modal")?.remove(); document.body.classList.remove("printing-modal"); const C = window.SSSData.Company; const modal = document.createElement("div"); modal.id = "__print_modal"; modal.className = "print-modal"; modal.innerHTML = `
QR ลงเวลาประจำวัน · ${qcTodayTh()}
${C.name}
สแกนลงเวลา เข้า–ออกงาน
ประจำวันที่ ${qcTodayTh()} · QR ใช้ได้เฉพาะวันนี้เท่านั้น
${dataUrl ? `` : `
${token.token}
`}
เข้าระบบ SSS บนมือถือ → เมนู ลงเวลา QR → เลือก เข้างาน/พักเที่ยง/เลิกพัก/ออกงาน → กด เปิดกล้องสแกน เล็งที่ QR นี้
${token.token}
สร้างโดย ${token.createdBy} · ${token.createdAt} น.
`; 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); } // ---------- กล้องสแกน QR (jsQR) ---------- function QRScanModal({ onClose, onResult, demoToken }) { const { Btn } = window.UI; const videoRef = useRefQC(null); const canvasRef = useRefQC(null); const [err, setErr] = useStateQC(null); useEffectQC(() => { let stream = null,raf = 0,stopped = false; const tick = () => { if (stopped) return; const v = videoRef.current; if (v && v.readyState === 4 && window.jsQR && canvasRef.current) { const c = canvasRef.current; c.width = v.videoWidth;c.height = v.videoHeight; const ctx = c.getContext("2d", { willReadFrequently: true }); ctx.drawImage(v, 0, 0); try { const d = ctx.getImageData(0, 0, c.width, c.height); const code = window.jsQR(d.data, c.width, c.height); if (code && code.data) {stopped = true;onResult(code.data);return;} } catch (e) {} } raf = requestAnimationFrame(tick); }; if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }). then((s) => { if (stopped) {s.getTracks().forEach((t) => t.stop());return;} stream = s; if (videoRef.current) {videoRef.current.srcObject = s;videoRef.current.play();} tick(); }). catch(() => setErr("เปิดกล้องไม่ได้ (ไม่ได้อนุญาต/ไม่มีกล้อง) — ใช้ปุ่มจำลองการสแกนด้านล่างได้")); } else { setErr("เบราว์เซอร์นี้ไม่รองรับกล้อง — ใช้ปุ่มจำลองการสแกนด้านล่าง"); } return () => {stopped = true;cancelAnimationFrame(raf);stream && stream.getTracks().forEach((t) => t.stop());}; }, []); return (
e.stopPropagation()}>
สแกน QR ลงเวลา
{err &&
{err}
}
เล็งกล้องไปที่ QR ประจำวัน
onResult(demoToken || "DEMO")}>จำลองการสแกนสำเร็จ (เดโม่)
); } // ---------- เปิดให้หน้าเงินเดือนดึงข้อมูลลงเวลารายวันมาใช้ ---------- window.QRTimeData = { dayRecord(empId, iso) { const clocks = qcClockLoad(), reqs = qcReqLoad(); const st = qcDayStatus(empId, iso, clocks, reqs); if (st.inT) { let work, ot = 0; if (st.outT) { const tot = Math.max(0, (qcToMin(st.outT) - qcToMin(st.inT) - 60)) / 60; work = Math.round(Math.min(8, tot) * 100) / 100; ot = Math.max(0, Math.round((tot - 8) * 10) / 10); } else work = 8; return { found: true, in: st.inT, out: st.outT || "", work, ot, late: st.lateMin, status: ot > 0 ? "OT" : "ทำงาน" }; } if (st.leave) return { found: true, in: "", out: "", work: 0, ot: 0, late: 0, status: st.leave.period === "ลาเช้า" ? "ลาเช้า" : st.leave.period === "ลาบ่าย" ? "ลาบ่าย" : "ลา" }; return { found: false }; } }; // ---------- คำนวณสถานะรายวันของพนักงานหนึ่งคน ---------- function qcDayStatus(empId, iso, clocks, reqs) { const my = clocks.filter((c) => c.date === iso && c.empId === empId); const t = (type) => {const r = my.filter((c) => c.type === type).sort((a, b) => a.time < b.time ? -1 : 1);return r.length ? type === "ออกงาน" ? r[r.length - 1].time : r[0].time : "";}; const inT = t("เข้างาน"),brT = t("พักเที่ยง"),rbT = t("เลิกพัก"),outT = t("ออกงาน"); const leave = reqs.find((r) => r.type === "ขอลา" && r.empId === empId && r.date === iso && r.status === "อนุมัติแล้ว"); const lateOk = reqs.some((r) => r.type === "แจ้งเข้าสาย" && r.empId === empId && r.date === iso && r.status !== "ปฏิเสธ"); let status, tone; let lateMin = 0; if (inT) { lateMin = Math.max(0, qcToMin(inT) - qcToMin(QC_WORK_START)); if (lateOk) lateMin = 0; status = lateMin > 0 ? `สาย ${lateMin} นาที` : lateOk && qcToMin(inT) > qcToMin(QC_WORK_START) ? "ปกติ (แจ้งสายล่วงหน้า)" : "ปกติ"; tone = lateMin > 0 ? "warning" : "success"; } else if (leave) { status = `ลา (${leave.period})`;tone = "info"; } else { status = "ขาดงาน";tone = "danger"; } return { inT, brT, rbT, outT, status, tone, lateMin, leave, lateOk }; } // =============== หน้า ลงเวลา QR =============== // ---------- เบิกระหว่างงวด (รอบวันพุธ/เสาร์): คำนวณค่าแรงจันทร์→วันนี้ เบิกได้≤ 80% ปัดลงเป็นหลักสิบ ---------- const QC_ADV_DAY = { 3: "พุธ", 6: "เสาร์" }; function qcShortName(name) {const p = String(name || "").trim().split(/\s+/);return p.length > 1 ? `${p[0]} ${p[1][0]}.` : p[0] || "—";} function qcWeekWage(empObj) { const clocks = qcClockLoad();const reqs = qcReqLoad(); const hourly = empObj.hourly || (empObj.salary ? Math.round(empObj.salary / 22 / 8) : 0); const d = new Date();const day = d.getDay();const diff = day === 0 ? -6 : 1 - day; const mon = new Date(d);mon.setDate(d.getDate() + diff);mon.setHours(0, 0, 0, 0); let hours = 0;const days = []; const cur = new Date(mon); while (cur <= d) { const iso = cur.toISOString().slice(0, 10); const st = qcDayStatus(empObj.id, iso, clocks, reqs); if (st.inT) { let w = st.outT ? Math.max(0, qcToMin(st.outT) - qcToMin(st.inT) - 60) / 60 : 8; w = Math.round(Math.min(8, w) * 100) / 100; hours += w;days.push({ iso, date: qcThaiOfISO(iso), in: st.inT, out: st.outT || "—", hours: w, pay: Math.round(w * hourly) }); } cur.setDate(cur.getDate() + 1); } const wage = Math.round(hours * hourly); const maxAdv = Math.floor(wage * 0.8 / 10) * 10; // 80% ปัดลงเป็นหลักสิบ return { hourly, hours, days, wage, maxAdv }; } // ---------- แปลงวันที่ไทย "13 มิ.ย. 2569" → ISO ---------- function qcParseThaiDate(s) { const m = String(s || "").trim().match(/^(\d{1,2})\s+(\S+)\s+(\d{4})$/); if (!m) return null; const monIdx = QC_MONTHS.indexOf(m[2]); if (monIdx < 0) return null; return `${(+m[3]) - 543}-${String(monIdx + 1).padStart(2, "0")}-${String(+m[1]).padStart(2, "0")}`; } // ---------- ประเภทการจ่าย: เงินเดือน (monthly) vs รายชั่วโมง (hourly) ---------- function qcPayType(emp) { if (emp && (emp.payType === "monthly" || emp.payType === "hourly")) return emp.payType; return emp && emp.salary > 0 && !emp.hourly ? "monthly" : "hourly"; } // ยอดเบิกของพนักงานในเดือนปัจจุบัน (ใช้กับพนักงานเงินเดือน — ลิมิต = เงินเดือน) function qcMonthAdvance(empId, advances) { const cm = new Date().toISOString().slice(0, 7); const period = `${QC_MONTHS[new Date().getMonth()]} ${new Date().getFullYear() + 543}`; return (advances || []).filter(a => a.empId === empId).reduce((s, a) => { const iso = qcParseThaiDate(a.date); const inMonth = iso ? iso.slice(0, 7) === cm : a.period === period; return inMonth ? s + (+a.amount || 0) : s; }, 0); } // ---------- บัญชีค่าแรง+เบิกรายสัปดาห์ของพนักงานคนหนึ่ง (จันทร์→เสาร์) ---------- const QC_WEEK_DOW = ["จ.", "อ.", "พ.", "พฤ.", "ศ.", "ส."]; function qcWeekLedger(empObj, clocks, reqs, advances) { const hourly = empObj.hourly || (empObj.salary ? Math.round(empObj.salary / 22 / 8) : 0); const monthly = qcPayType(empObj) === "monthly"; const d = new Date(); const day = d.getDay(); const diff = day === 0 ? -6 : 1 - day; const mon = new Date(d); mon.setDate(d.getDate() + diff); mon.setHours(0, 0, 0, 0); const todayISO = new Date().toISOString().slice(0, 10); const days = []; let accrued = 0; for (let i = 0; i < 6; i++) { const c = new Date(mon); c.setDate(mon.getDate() + i); const iso = c.toISOString().slice(0, 10); const st = qcDayStatus(empObj.id, iso, clocks, reqs); let pay = 0, worked = false, hours = 0; if (st.inT) { worked = true; let w = st.outT ? Math.max(0, qcToMin(st.outT) - qcToMin(st.inT) - 60) / 60 : 8; w = Math.round(Math.min(8, w) * 100) / 100; hours = w; pay = Math.round(w * hourly); accrued += pay; } days.push({ iso, dow: QC_WEEK_DOW[i], worked, hours, pay, leave: !!st.leave, advDay: (i === 2 || i === 5), future: iso > todayISO }); } // พนักงานเงินเดือน: เบิกได้ถึงยอดเงินเดือน (หักยอดที่เบิกไปแล้วในเดือนนี้) ไม่ติดลิมิตรายวัน/80% if (monthly) { const salary = empObj.salary || 0; const advTaken = qcMonthAdvance(empObj.id, advances); const remaining = Math.max(0, salary - advTaken); return { hourly, days, accrued: salary, advTaken, maxAdv: salary, remaining, monISO: days[0].iso, satISO: days[5].iso, monthly: true, salary }; } const advTaken = (advances || []).filter(a => a.empId === empObj.id).reduce((s, a) => { const iso = qcParseThaiDate(a.date); return (iso && iso >= days[0].iso && iso <= days[5].iso) ? s + (+a.amount || 0) : s; }, 0); const maxAdv = Math.floor(accrued * 0.8 / 10) * 10; const remaining = Math.max(0, maxAdv - advTaken); return { hourly, days, accrued, advTaken, maxAdv, remaining, monISO: days[0].iso, satISO: days[5].iso, monthly: false }; } // ---------- Modal ขอเบิกเงินระหว่างงวด ---------- function QCAdvanceModal({ me, dowName, onClose, onDone }) { const { Btn, fmt0 } = window.UI; const monthly = qcPayType(me) === "monthly"; const advances = (() => { try { return JSON.parse(localStorage.getItem("sss-advances") || "[]") || []; } catch { return []; } })(); const wInfo = qcWeekWage(me); const monthAdv = qcMonthAdvance(me.id, advances); const salary = me.salary || 0; // พนักงานเงินเดือน: ลิมิต = เงินเดือน − ที่เบิกไปแล้วในเดือนนี้ · รายชั่วโมง: 80% ของค่าแรงสัปดาห์ const info = monthly ? { ...wInfo, monthly: true, salary, monthAdv, maxAdv: Math.max(0, salary - monthAdv) } : { ...wInfo, monthly: false }; const [amount, setAmount] = useStateQC(info.maxAdv); const submit = () => { const amt = Math.floor((+amount || 0) / 10) * 10; if (amt <= 0) {window.toast && window.toast("กรอกจำนวนเงินที่ต้องการเบิก");return;} if (amt > info.maxAdv) {window.toast && window.toast(monthly ? `เบิกได้ไม่เกิน ฿${fmt0(info.maxAdv)} (เงินเดือนคงเหลือ)` : `เบิกได้ไม่เกิน ฿${fmt0(info.maxAdv)} (80% ของค่าแรง)`);return;} let list = [];try {list = JSON.parse(localStorage.getItem("sss-advances") || "[]") || [];} catch {} const d = new Date();const period = `${QC_MONTHS[d.getMonth()]} ${d.getFullYear() + 543}`; const reason = monthly ? `เบิกเงินเดือนล่วงหน้า (${period})` : `เบิกระหว่างงวด (รอบวัน${dowName}) · ค่าแรง ${info.hours} ชม.`; list.unshift({ date: qcTodayTh(), emp: qcShortName(me.name), empId: me.id, reason, amount: amt, status: "อนุมัติแล้ว", period }); try {localStorage.setItem("sss-advances", JSON.stringify(list));} catch {} window.logActivity && window.logActivity("เบิกเงินระหว่างงวด", `${me.name} ฿${fmt0(amt)}`, "time"); window.toast && window.toast(`บันทึกเบิกเงิน ฿${fmt0(amt)} — ส่วนที่เหลือจะถูกนำไปหักตอนคิดเงินเดือน`); onDone && onDone();onClose(); }; return ( <>
💸 {monthly ? "ขอเบิกเงินเดือนล่วงหน้า" : `ขอเบิกเงินระหว่างงวด · รอบวัน${dowName}`}
{me.name} · {monthly ? "พนักงานเงินเดือน" : `ค่าแรง ฿${fmt0(info.hourly)}/ชม.`}
{monthly ?
เงินเดือน฿{fmt0(info.salary)}
เบิกไปแล้วในเดือนนี้฿{fmt0(info.monthAdv)}
เบิกได้อีก (ไม่เกินเงินเดือน)฿{fmt0(info.maxAdv)}
: <> {info.days.length === 0 ?
สัปดาห์นี้ยังไม่มีข้อมูลลงเวลาจากการสแกน — เบิกได้เมื่อมีการลงเวลาจริง
: {info.days.map((d) => )}
วันเข้า-ออกชม.ค่าแรง
{d.date}{d.in}–{d.out}{d.hours}฿{fmt0(d.pay)}
}
ค่าแรงรวม ({info.hours} ชม.)฿{fmt0(info.wage)}
เบิกได้ไม่เกิน 80% (ปัดลงหลักสิบ)฿{fmt0(info.maxAdv)}
}
setAmount(e.target.value)} style={{ fontSize: 16, fontWeight: 600 }}>
{monthly ? "ยอดที่เบิกจะถูกหักออกจากเงินเดือนที่จ่ายในรอบนี้" : `ส่วนที่ไม่ได้เบิก (฿${fmt0(info.wage - Math.floor((+amount || 0) / 10) * 10)}) จะถูกนำไปคิดรวมในเงินเดือน`}
ยกเลิก ขอเบิกเงิน
); } function QRClockPage({ navigate }) { const D = window.SSSData; const { Btn, Badge, Card, PageHead, Tabs, Stat } = window.UI; const sess = window.Session ? window.Session.get() : null; const me = window.Session ? window.Session.employee() : null; const isAdmin = sess ? sess.isAdmin : true; // สิทธิ์รายหน้าย่อย: สรุปรายวัน (ทุกคน) · สร้าง QR + กฎ + อนุมัติลา const canRecords = window.Perms ? window.Perms.canSee("qr-records") : true; const canAdmin = window.Perms ? window.Perms.canSee("qr-admin") : true; const [tabRaw, setTab] = useStateQC("scan"); const tabAllowed = (k) => k === "scan" || k === "req" || k === "records" && canRecords || k === "admin" && canAdmin; const tab = tabAllowed(tabRaw) ? tabRaw : "scan"; const [token, setToken] = useStateQC(qcTokenLoad); const [records, setRecords] = useStateQC(qcClockLoad); const [reqs, setReqs] = useStateQC(qcReqLoad); const [rules, setRules] = useStateQC(qcRulesLoad); const [clockType, setClockType] = useStateQC("เข้างาน"); const [scanning, setScanning] = useStateQC(false); const [result, setResult] = useStateQC(null); const [reqModal, setReqModal] = useStateQC(null); // "leave" | "late" const [advModal, setAdvModal] = useStateQC(false); const [editEmp, setEditEmp] = useStateQC(null); // { emp, st } — แก้เวลาแมนนวล const dowName = QC_ADV_DAY[new Date().getDay()]; useEffectQC(() => { const refresh = () => { setRecords([...qcClockLoad()]); setReqs([...qcReqLoad()]); }; window.addEventListener('sss-db-loaded', refresh); window.addEventListener('sss-qrclock-polled', refresh); window.addEventListener('sss-timereq-polled', refresh); return () => { window.removeEventListener('sss-db-loaded', refresh); window.removeEventListener('sss-qrclock-polled', refresh); window.removeEventListener('sss-timereq-polled', refresh); }; }, []); const todayToken = token && token.date === qcTodayISO() ? token : null; const qrUrl = todayToken ? qcQRDataUrl(todayToken.token, 8) : null; const emps = (D.Employees || []).filter((e) => e.id !== "EMP-001"); const todayISO = qcTodayISO(); const beforeWork = qcTimeNow() < QC_WORK_START; const myToday = me ? qcDayStatus(me.id, todayISO, records, reqs) : null; const todaySummary = emps.map((e) => ({ emp: e, st: qcDayStatus(e.id, todayISO, records, reqs) })); const advancesAll = (() => { try { return JSON.parse(localStorage.getItem("sss-advances") || "[]") || []; } catch { return []; } })(); const weekLedger = emps.map((e) => ({ emp: e, lg: qcWeekLedger(e, records, reqs, advancesAll) })); const weekRangeLabel = weekLedger.length ? `${qcThaiOfISO(weekLedger[0].lg.monISO)} – ${qcThaiOfISO(weekLedger[0].lg.satISO)}` : ""; const cameCount = todaySummary.filter((x) => x.st.inT).length; const absentCount = todaySummary.filter((x) => x.st.status === "ขาดงาน").length; const pendingReqs = reqs.filter((r) => r.status === "รออนุมัติ"); const saveReqs = (list) => {setReqs(list);qcReqSave(list);}; const commitRecords = (list) => {setRecords(list);qcClockSave(list);}; // ── แก้ไขเวลาแมนนวล (ผู้มีสิทธิ์) — แทนที่ปั๊มของ emp+วันนี้ด้วยค่าใหม่ ── const saveManualTimes = (emp, times) => { const others = records.filter((c) => !(c.empId === emp.id && c.date === todayISO)); const mine = []; QC_CLOCK_TYPES.forEach((type) => { const v = String(times[type] || "").trim(); if (/^\d{1,2}:\d{2}$/.test(v)) { mine.push({ id: "MC-" + emp.id + "-" + type + "-" + Date.now() + "-" + Math.random().toString(36).slice(2, 5), empId: emp.id, name: emp.name, role: emp.role, date: todayISO, type, time: v.length === 4 ? "0" + v : v, manual: true, by: sess ? sess.name : "Admin", at: qcTodayTh() + " " + qcTimeNow() }); } }); commitRecords([...others, ...mine]); window.logActivity && window.logActivity("แก้ไขเวลาแมนนวล", emp.name + " · " + qcTodayTh(), "users"); window.toast && window.toast("บันทึกเวลาของ " + emp.name + " แล้ว"); setEditEmp(null); }; // ── สร้าง QR ── const createToken = async () => { if (todayToken) { const ok = await window.confirmDialog({ title: "สร้าง QR ใหม่แทนของเดิม", message: `วันนี้มี QR อยู่แล้ว (สร้างเมื่อ ${todayToken.createdAt} น.) — สร้างใหม่จะทำให้ QR เดิมใช้ไม่ได้ทันที`, confirmText: "สร้าง QR ใหม่" }); if (!ok) return; } const t = { date: todayISO, token: `SSS|CLOCK|${todayISO}|${Math.random().toString(36).slice(2, 8).toUpperCase()}`, createdBy: sess ? sess.name : "Admin", createdAt: qcTimeNow() }; qcTokenSave(t);setToken(t); window.logActivity && window.logActivity("สร้าง QR ลงเวลา", `ประจำวันที่ ${qcTodayTh()}`, "create"); window.toast && window.toast(`สร้าง QR ลงเวลาประจำวันที่ ${qcTodayTh()} แล้ว — ใช้ได้ถึงเที่ยงคืนวันนี้`); }; // ── สแกน ── const handleScan = (text) => { setScanning(false); if (!me) {setResult({ ok: false, msg: "บัญชีของคุณยังไม่ผูกกับพนักงาน — ให้ Admin ผูกที่หน้า ผู้ใช้และสิทธิ์" });return;} if (text !== "DEMO") { const parts = String(text).split("|"); if (parts.length !== 4 || parts[0] !== "SSS" || parts[1] !== "CLOCK" || parts[2] !== todayISO) { setResult({ ok: false, msg: "QR ไม่ถูกต้องหรือหมดอายุแล้ว — สแกน QR ที่ Admin สร้างสำหรับวันที่ " + qcTodayTh() + " เท่านั้น" }); return; } } const dup = records.find((r) => r.date === todayISO && r.empId === me.id && r.type === clockType); if (dup) {setResult({ ok: false, msg: `วันนี้คุณลงเวลา "${clockType}" ไปแล้วเมื่อ ${dup.time} น.` });return;} const time = qcTimeNow(); const lateOk = reqs.some((r) => r.type === "แจ้งเข้าสาย" && r.empId === me.id && r.date === todayISO && r.status !== "ปฏิเสธ"); const late = clockType === "เข้างาน" && time > QC_WORK_START && !lateOk; const rec = { date: todayISO, dateTh: qcTodayTh(), time, empId: me.id, name: me.name, role: me.role, type: clockType, late, lateOk, method: "QR มือถือ" }; commitRecords([rec, ...records]); window.logActivity && window.logActivity("ลงเวลา QR", `${me.name} ${clockType} ${time}${late ? " (สาย)" : ""}`, "time"); setResult({ ok: true, rec }); // ขั้นถัดไปอัตโนมัติ const nextIdx = QC_CLOCK_TYPES.indexOf(clockType) + 1; if (nextIdx < QC_CLOCK_TYPES.length) setClockType(QC_CLOCK_TYPES[nextIdx]); }; // ── ส่งคำขอ ลา / เข้าสาย ── const submitReq = (req) => { // ขอลาวันนี้ทำได้ก่อน 08:00 เท่านั้น (เหมือนการขอเข้าสาย) — เลยเวลาแล้วต้องเลือกวันถัดไป if (req.type === "ขอลา" && req.date === todayISO && !beforeWork) { window.toast && window.toast(`เลย ${QC_WORK_START} แล้ว — ขอลาวันนี้ไม่ได้ ให้เลือกตั้งแต่วันพรุ่งนี้`); return; } const r = { id: "RQ-" + Date.now(), empId: me.id, name: me.name, role: me.role, status: "รออนุมัติ", createdAt: `${qcTodayTh()} ${qcTimeNow()}`, ...req }; saveReqs([r, ...reqs]); window.logActivity && window.logActivity(req.type, `${me.name} · ${req.type === "ขอลา" ? req.period : "ถึง " + req.expected} · ${qcThaiOfISO(req.date)}`, "time"); window.toast && window.toast(`ส่งคำขอ${req.type === "ขอลา" ? "ลา" : "เข้างานสาย"}แล้ว — รอหัวหน้าอนุมัติ`); setReqModal(null); }; const decideReq = (id, status) => { saveReqs(reqs.map((r) => r.id === id ? { ...r, status, decidedBy: sess ? sess.name : "Admin" } : r)); window.toast && window.toast(`${status}คำขอแล้ว`); }; return ( <> navigate("payroll")}>ไปหน้าคำนวนเงินเดือน : null} /> {canRecords &&
} r.empId === me.id).length : 0 }, ...(canRecords ? [{ key: "records", label: "สรุปรายวัน", count: pendingReqs.length || undefined }] : []), ...(canAdmin ? [{ key: "admin", label: "QR + กฎบริษัท (ผู้มีสิทธิ์)" }] : [])] } active={tab} onChange={(k) => {setTab(k);setResult(null);}} /> {/* ════ ลงเวลาของฉัน ════ */} {tab === "scan" &&
{!me ?
บัญชี {sess ? sess.username : "—"} ยังไม่ผูกกับพนักงาน จึงลงเวลาไม่ได้
ให้ Admin ผูกที่หน้า navigate("users")}>ผู้ใช้และสิทธิ์
: !result ?
{window.RankAvatar ? : null}
{me.name}
{me.role} · {me.dept}
{qcTimeNow()}
{qcTodayTh()}
{/* สถานะ 4 ช่องของวันนี้ */}
{QC_CLOCK_TYPES.map((t) => { const v = { "เข้างาน": myToday.inT, "พักเที่ยง": myToday.brT, "เลิกพัก": myToday.rbT, "ออกงาน": myToday.outT }[t]; return (
{QC_TYPE_EMOJI[t]}
{t}
{v || "—"}
); })}
{/* เลือกประเภท + สแกน */}
{QC_CLOCK_TYPES.map((t) => )}
{/* ปุ่มขอลา / แจ้งสาย */}
{/* ปุ่มขอเบิกเงินระหว่างงวด — เฉพาะวันพุธ/เสาร์ */} {dowName && } {/* กฎการทำงานบริษัท */}
📋 กฎการทำงานของบริษัท
{rules}
: result.ok ?
✓
{QC_TYPE_EMOJI[result.rec.type]} ลงเวลา{result.rec.type}สำเร็จ
{result.rec.time} น.
{result.rec.late ? มาสาย — เข้าหลัง {QC_WORK_START} : result.rec.lateOk && result.rec.type === "เข้างาน" ? แจ้งสายล่วงหน้าแล้ว — ไม่นับสาย : บันทึกแล้ว}
{result.rec.dateTh} · ส่งเข้าระบบเงินเดือน/KPI รายวันแล้ว
setResult(null)}>เสร็จสิ้น
:
✕
สแกนไม่สำเร็จ
{result.msg}
setResult(null)}>กลับ {setResult(null);setScanning(true);}}>สแกนใหม่
}
} {/* ════ ขอลา / แจ้งเข้าสาย ════ */} {tab === "req" &&
{me &&
setReqModal("leave")}>🌴 ขอลา (เช้า/บ่าย/ทั้งวัน) beforeWork ? setReqModal("late") : window.toast && window.toast("เลย 08:00 แล้ว — แจ้งขอเข้าสายไม่ได้")}> ⏰ ขอเข้าสาย{beforeWork ? " (วันนี้)" : " — ปิดหลัง 08:00"}
} {(me ? reqs.filter((r) => r.empId === me.id) : []).length === 0 ?
ยังไม่มีคำขอ
: {reqs.filter((r) => r.empId === me.id).map((r) => )}
ประเภทวันที่รายละเอียดเหตุผลสถานะ
{r.type} {qcThaiOfISO(r.date)} {r.type === "ขอลา" ? r.period : `คาดว่าถึง ${r.expected} น.`} {r.reason} {r.status}
}
} {/* ════ สรุปรายวัน ════ */} {tab === "records" && canRecords &&
{ if (window.SSSSync) { await window.SSSSync.load(); setRecords([...qcClockLoad()]); setReqs([...qcReqLoad()]); window.toast && window.toast('โหลดข้อมูลลงเวลาจาก Supabase แล้ว · ' + records.length + ' → ' + qcClockLoad().length + ' รายการ'); } }}>ซิงค์ข้อมูล} flush>
{canAdmin && } {todaySummary.map(({ emp, st }) => {canAdmin && } )}
พนักงานเข้างานพักเที่ยงเลิกพักออกงานสถานะแก้ไข
{window.RankAvatar ? : null}
{emp.name}
{emp.role}
 {st.inT || "—"} {st.brT || "—"} {st.rbT || "—"} {st.outT || "—"} {st.status}
{QC_WEEK_DOW.map((d, i) => )} {weekLedger.map(({ emp, lg }) => ( {lg.days.map((dy, i) => ( ))} ))}
พนักงาน{d}{(i === 2 || i === 5) ? " 💸" : ""}ค่าแรงสะสม เบิกแล้ว เบิกได้อีก
{window.RankAvatar ? : null}
{emp.name}
฿{window.UI.fmt0(lg.hourly)}/ชม.
 {dy.worked ? ฿{window.UI.fmt0(dy.pay)} : dy.leave ? ลา : {dy.future ? "·" : "—"}} ฿{window.UI.fmt0(lg.accrued)} 0 ? "var(--c-amber, #b45309)" : "var(--ink-3)" }}>{lg.advTaken > 0 ? `฿${window.UI.fmt0(lg.advTaken)}` : "—"} 0 ? "var(--success)" : "var(--ink-3)" }}>฿{window.UI.fmt0(lg.remaining)}
ค่าแรงต่อวัน = ชั่วโมงทำงานจริง (สูงสุด 8 ชม./วัน) × ค่าแรงต่อชั่วโมง · เบิกได้อีก = 80% ของค่าแรงสะสม − ยอดที่เบิกไปแล้วในสัปดาห์ · ช่อง "ลา" = อนุมัติลา · "—" = ไม่มาทำงาน
{reqs.length === 0 ?
ยังไม่มีคำขอ
: {canAdmin && } {reqs.map((r) => {canAdmin && } )}
พนักงานประเภทวันที่รายละเอียดเหตุผลสถานะ
{r.name} {r.type} {qcThaiOfISO(r.date)} {r.type === "ขอลา" ? r.period : `คาดว่าถึง ${r.expected} น.`} {r.reason} {r.status} {r.status === "รออนุมัติ" &&
decideReq(r.id, "อนุมัติแล้ว")}>อนุมัติ decideReq(r.id, "ปฏิเสธ")}>ปฏิเสธ
}
}
} {/* ════ Admin: QR + กฎบริษัท ════ */} {tab === "admin" && canAdmin &&
{!todayToken ?
ยังไม่มี QR ของวันนี้
สร้าง QR ของวันนี้ {token && token.date !== todayISO &&
QR ล่าสุดเป็นของวันก่อน — หมดอายุแล้ว
}
:
{qrUrl ? QR ลงเวลาประจำวัน :
{todayToken.token}
}
{todayToken.token}
สร้างโดย {todayToken.createdBy} · {todayToken.createdAt} น.
qcPrintQR(todayToken, qcQRDataUrl(todayToken.token, 16))}>พิมพ์ติดหน้างาน สร้างใหม่ (ยกเลิกอันเดิม)
} { try {localStorage.setItem(QC_RULES_KEY, rules);} catch {} window.logActivity && window.logActivity("แก้ไขกฎการทำงาน", `โดย ${sess ? sess.name : "Admin"}`, "update"); window.toast && window.toast("บันทึกกฎการทำงานแล้ว — แสดงให้พนักงานทุกคนทันที"); }}>บันทึกกฎ}>
ผู้แก้ไข: {sess ? sess.name : "Admin"} · กฎจะแสดงในกรอบบนหน้า "ลงเวลา (ของฉัน)" ของพนักงานทุกคน รวมถึงบนมือถือ
} {/* ── Modal ขอลา ── */} {reqModal === "leave" && me && {const d = new Date();d.setDate(d.getDate() + 1);return d.toISOString().slice(0, 10);})()} onClose={() => setReqModal(null)} onSubmit={(f) => submitReq({ type: "ขอลา", date: f.date, period: f.period, reason: f.reason })} fields={{ date: true, period: true, reason: "เหตุผลการลา เช่น ลากิจไปติดต่อราชการ / ลาป่วย" }} /> } {/* ── Modal ขอเข้าสาย ── */} {reqModal === "late" && me && setReqModal(null)} onSubmit={(f) => submitReq({ type: "แจ้งเข้าสาย", date: todayISO, expected: f.expected, reason: f.reason })} fields={{ expected: true, reason: "เหตุผล เช่น รถเสีย / พาลูกไปหาหมอ" }} /> } {scanning && setScanning(false)} onResult={handleScan} demoToken={todayToken ? todayToken.token : null} />} {advModal && me && setAdvModal(false)} onDone={() => {}} />} {editEmp && canAdmin && setEditEmp(null)} onSave={saveManualTimes} />} ); } // ---------- Modal แก้ไขเวลาแมนนวล (ผู้มีสิทธิ์) ---------- function QCEditTimeModal({ emp, st, onClose, onSave }) { const { Btn } = window.UI; const [t, setT] = useStateQC({ "เข้างาน": st.inT || "", "พักเที่ยง": st.brT || "", "เลิกพัก": st.rbT || "", "ออกงาน": st.outT || "" }); const set = (k, v) => setT((p) => ({ ...p, [k]: v })); return ( <>
แก้ไขเวลา — {emp.name}
{qcTodayTh()} · เว้นว่าง = ลบเวลานั้น · สถานะ/สาย จะคำนวณใหม่อัตโนมัติ
{QC_CLOCK_TYPES.map((type) =>
set(type, e.target.value)} style={{ height: 38, flex: 1 }} /> {t[type] && }
)}
ยกเลิก onSave(emp, t)}>บันทึก
); } // ---------- Modal คำขอ (ลา / เข้าสาย) ---------- function QCRequestModal({ title, note, fields, onClose, onSubmit, defaultDate, minDate }) { const { Btn } = window.UI; const tomorrow = (() => {const d = new Date();d.setDate(d.getDate() + 1);return d.toISOString().slice(0, 10);})(); const [f, setF] = useStateQC({ date: defaultDate || tomorrow, period: "ลาทั้งวัน", expected: "09:00", reason: "" }); const upd = (k, v) => setF((p) => ({ ...p, [k]: v })); const submit = () => { if (!f.reason.trim()) {window.toast && window.toast("กรุณากรอกเหตุผล");return;} onSubmit({ ...f, reason: f.reason.trim() }); }; return ( <>
{title}
{note &&
{note}
}
{fields.date &&
upd("date", e.target.value)} style={{ height: 38 }}>
} {fields.period &&
{["ลาเช้า", "ลาบ่าย", "ลาทั้งวัน"].map((p) => )}
} {fields.expected &&
upd("expected", e.target.value)} style={{ height: 38 }}>
}
ยกเลิก ส่งคำขอ
); } // =============== ดึงข้อมูลลงเวลา QR เข้าเงินเดือน (เลือกช่วงวัน) =============== function PayrollQRImport({ timeRecs, setTimeRecs, month, setMonth }) { const D = window.SSSData; const { Btn, Card } = window.UI; const ym = month || (() => {const d = new Date();return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;})(); const lastDayOf = (m) => {const [y, mo] = m.split("-").map(Number);return new Date(y, mo, 0).getDate();}; const [from, setFrom] = useStateQC(ym + "-01"); const [to, setTo] = useStateQC(ym + "-" + String(lastDayOf(ym)).padStart(2, "0")); const [last, setLast] = useStateQC(null); useEffectQC(() => {setFrom(ym + "-01");setTo(ym + "-" + String(lastDayOf(ym)).padStart(2, "0"));}, [ym]); const pull = () => { if (!from || !to || to < from) {window.toast && window.toast("เลือกช่วงวันที่ให้ถูกต้อง");return;} const clocks = qcClockLoad(); const reqs = qcReqLoad(); const emps = (D.Employees || []).filter((e) => e.id !== "EMP-001"); const out = []; let came = 0,absent = 0,leave = 0,lateCnt = 0; const cur = new Date(from + "T12:00:00"); const end = new Date(to + "T12:00:00"); while (cur <= end) { const iso = cur.toISOString().slice(0, 10); const dow = cur.getDay(); emps.forEach((e) => { const st = qcDayStatus(e.id, iso, clocks, reqs); // วันอาทิตย์ = วันหยุด (ข้ามถ้าไม่มีการลงเวลา) if (dow === 0 && !st.inT) return; let work = 0,ot = 0,status; if (st.inT) { if (st.outT) { const tot = Math.max(0, qcToMin(st.outT) - qcToMin(st.inT) - 60) / 60; work = Math.round(Math.min(8, tot) * 100) / 100; ot = Math.max(0, Math.round((tot - 8) * 10) / 10); } else work = 8; status = ot > 0 ? "OT" : "ทำงาน"; came++;if (st.lateMin > 0) lateCnt++; } else if (st.leave) { status = st.leave.period === "ลาเช้า" ? "ลาเช้า" : st.leave.period === "ลาบ่าย" ? "ลาบ่าย" : "ลา";leave++; } else { status = "ขาด";absent++; } out.push({ iso, emp: e.id, name: e.name, date: qcThaiOfISO(iso), in: st.inT, out: st.outT, break: st.inT ? 60 : 0, work, ot, late: st.lateMin, excuseLate: false, status, source: "QR" }); }); cur.setDate(cur.getDate() + 1); } setTimeRecs((prev) => { const keep = prev.filter((t) => !out.some((o) => (t.iso || "") === o.iso && t.emp === o.emp)); return [...out, ...keep]; }); setLast({ from, to, total: out.length, came, absent, leave, lateCnt }); if (setMonth && from.slice(0, 7)) setMonth(from.slice(0, 7)); window.logActivity && window.logActivity("ดึงข้อมูลลงเวลา QR", `${qcThaiOfISO(from)} → ${qcThaiOfISO(to)} · ${out.length} รายการ`, "update"); window.toast && window.toast(out.length ? `ดึงข้อมูลลงเวลา ${out.length} รายการ — มา ${came} · ลา ${leave} · ขาด ${absent} · สาย ${lateCnt} · แสดงในรายการด้านล่างแล้ว` : "ช่วงวันที่เลือกยังไม่มีพนักงานสแกน QR — ให้พนักงานสแกนที่หน้า ลงเวลา QR ก่อน"); window.toast && window.toast(`ดึงข้อมูลลงเวลา ${out.length} รายการแล้ว — มา ${came} · ลา ${leave} · ขาด ${absent} · สาย ${lateCnt} — กด "คำนวนใหม่" เพื่อคิดเงินเดือน`); }; return (
ดึงข้อมูลจากลงเวลา QR (รายวัน)
จาก setFrom(e.target.value)} style={{ height: 32, width: 145 }}> ถึง setTo(e.target.value)} style={{ height: 32, width: 145 }}>
ดึงข้อมูลการลงเวลา {last ? <>ดึงล่าสุด {qcThaiOfISO(last.from)} → {qcThaiOfISO(last.to)} · {last.total} รายการ (มา {last.came} · ลา {last.leave} · ขาด {last.absent} · สาย {last.lateCnt}) : "ไม่ลงเวลาและไม่มีใบลา = ขาดงาน · ลาที่อนุมัติแล้วนับเป็น \"ลา\" · แจ้งสายล่วงหน้าไม่หักสาย"}
); } window.PayrollQRImport = PayrollQRImport; window.QRClock = QRClockPage;