/* global React, window */ // FACE/OS alternate shells: PASS (mobile employee card) + TERMINAL (kiosk). const { useState: useModeState, useEffect: useModeEffect } = React; function initialsOf(emp) { if (!emp) return '—'; const a = (emp.first_name || '').trim(); const b = (emp.last_name || '').trim(); if (a || b) return ((a[0] || '') + (b[0] || '')).toUpperCase() || a.slice(0, 2).toUpperCase(); return (emp.employee_name || emp.name || '—').slice(0, 2).toUpperCase(); } function nameOf(emp) { if (!emp) return '—'; return `${emp.first_name || ''} ${emp.last_name || ''}`.trim() || emp.employee_name || emp.name || '—'; } function fmtClock(d) { const p = (n) => String(n).padStart(2, '0'); return `${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`; } // ── แผ่นเปลี่ยนรหัสผ่านของตัวเอง (พนักงาน + admin บนมือถือ) → PUT /api/auth/password ── const PwField = ({ label, val, set, auto }) => ( ); function PasswordSheet({ onClose }) { const [cur, setCur] = useModeState(''); const [nw, setNw] = useModeState(''); const [cf, setCf] = useModeState(''); const [busy, setBusy] = useModeState(false); const [err, setErr] = useModeState(''); const submit = async (e) => { e.preventDefault(); setErr(''); if (nw.length < 6) return setErr('รหัสผ่านใหม่ต้องมีอย่างน้อย 6 ตัวอักษร'); if (nw !== cf) return setErr('รหัสผ่านใหม่ทั้งสองช่องไม่ตรงกัน'); if (nw === cur) return setErr('รหัสผ่านใหม่ต้องต่างจากรหัสเดิม'); setBusy(true); try { const r = await fetch('/api/auth/password', { method: 'PUT', credentials: 'include', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ current_password: cur, new_password: nw }) }); const d = await r.json().catch(() => ({})); if (!r.ok) throw new Error(d.error || 'เปลี่ยนรหัสผ่านไม่สำเร็จ'); window.appToast && window.appToast('เปลี่ยนรหัสผ่านแล้ว', { tone: 'success' }); onClose(); } catch (ex) { setErr(ex.message); } finally { setBusy(false); } }; return (
e.stopPropagation()} style={{ width: '100%', maxWidth: 460, background: 'var(--surface)', borderRadius: '22px 22px 0 0', padding: '14px 18px', paddingBottom: 'max(18px, env(safe-area-inset-bottom))', boxSizing: 'border-box' }}>
🔑 เปลี่ยนรหัสผ่าน
{err &&
{err}
}
); } // ── PASS ──────────────────────────────────────────────────────────────────── function ymd(d) { const p = (n) => String(n).padStart(2, '0'); return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}`; } function passStatus(s) { return ({ present: { l: 'มาทำงาน', cls: 'c-green' }, in_only: { l: 'ยังไม่ออก', cls: 'c-amber' }, late: { l: 'มาสาย', cls: 'c-coral' }, absent: { l: 'ขาดงาน', cls: 'c-gray' }, leave: { l: 'ลา', cls: 'c-blue' }, holiday: { l: 'วันหยุด', cls: 'c-gray' }, off: { l: 'วันหยุด', cls: 'c-gray' }, }[s] || { l: s || '—', cls: 'c-gray' }); } // Circular person avatar → /faces/.jpg (or explicit photo), falls back to // the round person-icon placeholder; click opens the profile modal. function PassAvatar({ id, photo, size = 40 }) { const [err, setErr] = useModeState(false); const src = err ? '/img/avatar-person.svg' : (photo || (id ? `/faces/${id}.jpg` : '/img/avatar-person.svg')); return setErr(true)} onClick={() => id && window.openProfile && window.openProfile(id)} title={id ? 'ดูโปรไฟล์' : ''} style={{ width: size, height: size, borderRadius: '50%', objectFit: 'cover', flex: 'none', cursor: id ? 'pointer' : 'default', border: '2px solid var(--surface)', boxShadow: '0 0 0 1px var(--line)' }} />; } function PassView({ clock, onLogout, desktop }) { const me = window.CURRENT_USER || {}; const emps = window.EMPLOYEES || []; const emp = emps.find((e) => String(e.id) === String(me.employee_id)) || {}; // ไม่ผูกพนักงาน = ไม่โชว์บัตรของคนอื่น const [view, setView] = useModeState('home'); // home | history | leave const [pwOpen, setPwOpen] = useModeState(false); const [att, setAtt] = useModeState([]); // this week's attendance rows const [recent, setRecent] = useModeState( (window.RECENT_SCANS || []).filter((s) => String(s.employee_id || (s.employee && s.employee.id)) === String(emp.id)).slice(0, 6) ); const now = new Date(); const monday = new Date(now); monday.setDate(now.getDate() - ((now.getDay() + 6) % 7)); const weekFrom = ymd(monday), weekTo = ymd(now), todayStr = ymd(now); const loadAtt = React.useCallback(() => { if (!emp.id) return; fetch(`/api/attendance/employee/${encodeURIComponent(emp.id)}?from=${weekFrom}&to=${weekTo}`, { credentials: 'include' }) .then((r) => (r.ok ? r.json() : null)).then((d) => { if (d) setAtt(d.rows || []); }).catch(() => {}); }, [emp.id, weekFrom, weekTo]); useModeEffect(() => { loadAtt(); }, [loadAtt]); useModeEffect(() => { if (!window.scanStream) return undefined; return window.scanStream.subscribe((scan) => { if (String(scan.employeeId) !== String(emp.id)) return; setRecent((prev) => [scan, ...prev].slice(0, 6)); loadAtt(); }); }, [emp.id, loadAtt]); const todayRow = att.find((r) => r.date === todayStr) || {}; const ci = (todayRow.first_scan || '').slice(11, 16) || '—'; const co = (todayRow.last_scan || '').slice(11, 16) || '—'; const checked = ci !== '—'; const hrs = (m) => ((m || 0) / 60).toFixed(1); const weekMin = att.reduce((a, r) => a + (r.work_min || 0), 0); const otMin = att.reduce((a, r) => a + (r.ot_min || 0), 0); const st = passStatus(todayRow.status); const Tab = ({ id, label, icon }) => ( ); const shell = { background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 26 }; return (
{/* top bar (navy) */}
{clock} {onLogout && }
{/* profile header card */}
บัตรพนักงาน / Employee {st.l}
{nameOf(emp)}
{emp.position || emp.role || me.role || '—'}
{emp.department_name || '—'} · รหัส {emp.id || '----'}
{view === 'home' && ( <> {/* today check-in */}
เข้างานวันนี้
{checked ? 'ลงเวลาแล้ว' : 'ยังไม่ลงเวลา'}
{ci}{co !== '—' && → {co}}
{todayRow.shift_name || 'ยังไม่ผูกกะ'}
{/* mini stats */}
{[['ชม.วันนี้', hrs(todayRow.work_min), 'var(--ink)'], ['ชม./สัปดาห์', hrs(weekMin), 'var(--ink)'], ['OT สัปดาห์', hrs(otMin), 'var(--coral-ink)']].map(([k, v, c]) => (
{v}
{k}
))}
{/* actions */}
{/* recent */}
สแกนล่าสุด{recent.length}
{recent.length === 0 ? (
— ยังไม่มีบันทึก —
) : recent.map((r, i) => { const out = r.type === 'out'; const tm = r.time instanceof Date ? fmtClock(r.time) : (r.time || '').slice(0, 8); return (
{out ? 'ออกงาน' : 'เข้างาน'} {r.device_name || r.device || '—'} {tm}
); })}
)} {view === 'history' && } {view === 'leave' && setView('home')}/>} {view === 'correct' && { setView('home'); loadAtt(); }}/>}
{/* bottom tab bar (white, sky active) */}
{pwOpen && setPwOpen(false)}/>}
); } // ── ปฏิทินเดือน: วันมาทำงาน / สาย / ขาด / ลา / วันหยุด + ชั่วโมงรวม ────────── function PassMonth({ emp }) { const [ym, setYm] = useModeState(() => { const d = new Date(); return { y: d.getFullYear(), m: d.getMonth() }; }); const [rows, setRows] = useModeState([]); const [leaves, setLeaves] = useModeState([]); const [loading, setLoading] = useModeState(false); const p = (n) => String(n).padStart(2, '0'); const first = `${ym.y}-${p(ym.m + 1)}-01`; const lastDay = new Date(ym.y, ym.m + 1, 0).getDate(); const last = `${ym.y}-${p(ym.m + 1)}-${p(lastDay)}`; const today = ymd(new Date()); const monthName = ['มกราคม','กุมภาพันธ์','มีนาคม','เมษายน','พฤษภาคม','มิถุนายน','กรกฎาคม','สิงหาคม','กันยายน','ตุลาคม','พฤศจิกายน','ธันวาคม'][ym.m]; useModeEffect(() => { if (!emp.id) return; setLoading(true); Promise.all([ fetch(`/api/attendance/employee/${encodeURIComponent(emp.id)}?from=${first}&to=${last}`, { credentials: 'include' }).then((r) => r.ok ? r.json() : null).catch(() => null), fetch(`/api/leaves?employee_id=${encodeURIComponent(emp.id)}&date_from=${first}&date_to=${last}`, { credentials: 'include' }).then((r) => r.ok ? r.json() : []).catch(() => []), ]).then(([a, l]) => { setRows((a && a.rows) || []); setLeaves(Array.isArray(l) ? l : []); }).finally(() => setLoading(false)); }, [emp.id, first, last]); const byDate = {}; rows.forEach((r) => { byDate[r.date] = r; }); const holidays = new Set((window.HOLIDAYS || []).map((h) => h.date)); const leaveDays = new Set(); leaves.filter((l) => l.status === 'approved').forEach((l) => { for (let d = new Date(l.start_date); ymd(d) <= l.end_date; d.setDate(d.getDate() + 1)) leaveDays.add(ymd(d)); }); // สรุปเดือน const stat = { present: 0, late: 0, absent: 0, leave: 0, min: 0 }; for (let d = 1; d <= lastDay; d++) { const ds = `${ym.y}-${p(ym.m + 1)}-${p(d)}`; if (ds > today) break; const r = byDate[ds]; if (leaveDays.has(ds)) { stat.leave++; continue; } if (!r || r.status === 'off' || r.status === 'holiday') continue; if (r.status === 'absent') { stat.absent++; continue; } if (r.first_scan) { stat.present++; if ((r.late_min || 0) > 0) stat.late++; stat.min += r.work_min || 0; } } const dayCell = (d) => { const ds = `${ym.y}-${p(ym.m + 1)}-${p(d)}`; const r = byDate[ds]; let bg = 'transparent', fg = 'var(--ink-4)', label = ''; if (leaveDays.has(ds)) { bg = 'var(--primary-soft, #E0F2FE)'; fg = 'var(--primary-ink, #0369A1)'; label = 'ลา'; } else if (holidays.has(ds) || (r && (r.status === 'off' || r.status === 'holiday'))) { fg = 'var(--ink-5)'; } else if (r && r.first_scan) { const late = (r.late_min || 0) > 0; bg = late ? 'var(--yellow-soft, #FEF3C7)' : 'var(--mint-soft, #D1FAE5)'; fg = late ? 'var(--yellow-ink, #92400E)' : 'var(--mint-ink, #065F46)'; label = (r.first_scan || '').slice(11, 16); } else if (r && r.status === 'absent') { bg = 'var(--coral-soft, #FEE2E2)'; fg = 'var(--coral-ink, #991B1B)'; label = 'ขาด'; } const isToday = ds === today; return (
{d}
{label}
); }; const firstDow = new Date(ym.y, ym.m, 1).getDay(); const cells = []; for (let i = 0; i < firstDow; i++) cells.push(
); for (let d = 1; d <= lastDay; d++) cells.push(dayCell(d)); const hrs = (m) => (m / 60).toFixed(1); return ( <>
{monthName} {ym.y + 543}
{[['มาทำงาน', stat.present, 'var(--mint-ink)'], ['สาย', stat.late, 'var(--yellow-ink)'], ['ขาด', stat.absent, 'var(--coral-ink)'], ['ลา', stat.leave, 'var(--primary-ink)']].map(([k, v, c]) => (
{v}
{k} วัน
))}
ชั่วโมงทำงานรวม {hrs(stat.min)} ชม.{loading ? ' · กำลังโหลด…' : ''}
{['อา','จ','อ','พ','พฤ','ศ','ส'].map((d) =>
{d}
)} {cells}
มา (เวลาเข้า) สาย ขาด ลา
รายวัน{rows.filter((r) => r.first_scan).length} วัน
{rows.filter((r) => r.first_scan || r.status === 'absent').length === 0 ? (
— ยังไม่มีข้อมูลเดือนนี้ —
) : rows.filter((r) => r.first_scan || r.status === 'absent').slice().reverse().map((r) => { const st = passStatus((r.late_min || 0) > 0 && r.status === 'present' ? 'late' : r.status); return (
{r.date.slice(8)}/{r.date.slice(5, 7)} {(r.first_scan || '').slice(11, 16) || '—'} → {(r.last_scan || '').slice(11, 16) || '—'} {hrs(r.work_min || 0)} ชม {st.l}{(r.late_min || 0) > 0 ? ` ${r.late_min} น.` : ''}
); })}
); } // ── แท็บ "ขอลา": ใบลาของฉัน (สถานะ) + ฟอร์มยื่นใหม่ ──────────────────────────── function PassLeaveTab({ emp, onDone }) { const [mine, setMine] = useModeState([]); const [showForm, setShowForm] = useModeState(false); const load = () => { if (!emp.id) return; fetch(`/api/leaves?employee_id=${encodeURIComponent(emp.id)}`, { credentials: 'include' }) .then((r) => r.ok ? r.json() : []).then((l) => setMine((Array.isArray(l) ? l : []).slice(0, 30))).catch(() => {}); }; useModeEffect(() => { load(); }, [emp.id]); const typeName = (code) => ((window.LEAVE_TYPES || []).find((t) => t.code === code) || {}).name || code; const stChip = (st) => st === 'approved' ? ['อนุมัติแล้ว', 'c-green'] : st === 'rejected' ? ['ไม่อนุมัติ', 'c-coral'] : ['รออนุมัติ', 'c-amber']; const days = (l) => Math.round((new Date(l.end_date) - new Date(l.start_date)) / 86400000) + 1; if (showForm) return { setShowForm(false); load(); }}/>; return ( <>
ใบลาของฉัน{mine.length}
{mine.length === 0 ?
— ยังไม่เคยยื่นใบลา —
: mine.map((l) => { const [lbl, cls] = stChip(l.status); return (
{typeName(l.leave_type)} · {days(l)} วัน {lbl}
{l.start_date}{l.end_date !== l.start_date ? ` → ${l.end_date}` : ''}{l.reason ? ` · ${l.reason}` : ''}
{l.status === 'rejected' && l.reject_reason &&
เหตุผล: {l.reject_reason}
}
); })}
); } // Working leave-request form on mobile → POST /api/leaves (+ shows balance). function PassLeave({ emp, onDone }) { const types = window.LEAVE_TYPES || []; const today = ymd(new Date()); const [type, setType] = useModeState((types[0] && types[0].code) || 'sick'); const [from, setFrom] = useModeState(today); const [to, setTo] = useModeState(today); const [reason, setReason] = useModeState(''); const [busy, setBusy] = useModeState(false); const [bal, setBal] = useModeState([]); useModeEffect(() => { if (!emp.id) return; fetch(`/api/leaves/balance?employee_id=${encodeURIComponent(emp.id)}`, { credentials: 'include' }) .then((r) => (r.ok ? r.json() : null)).then((d) => { if (d) setBal(d.balance || []); }).catch(() => {}); }, [emp.id]); const submit = async () => { if (to < from) { window.appToast && window.appToast('วันสิ้นสุดต้องไม่ก่อนวันเริ่ม', { tone: 'error' }); return; } setBusy(true); try { const r = await fetch('/api/leaves', { method: 'POST', credentials: 'include', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ employee_id: emp.id, leave_type: type, start_date: from, end_date: to, reason: reason.trim() }) }); const d = await r.json().catch(() => ({})); if (!r.ok) throw new Error(d.error || 'ส่งไม่สำเร็จ'); window.appToast && window.appToast('ยื่นใบลาแล้ว — รออนุมัติ', { tone: 'success' }); onDone(); } catch (e) { window.appToast && window.appToast(e.message, { tone: 'error' }); } finally { setBusy(false); } }; return (
ยื่นใบลา
{bal.length > 0 && (
{bal.map((b) => ( {b.name} {b.remaining != null ? `เหลือ ${b.remaining}` : `ใช้ ${b.used || 0}`} ))}
)}
{types.map((t) => ( ))}
setFrom(e.target.value)} className="gv-input"/>
setTo(e.target.value)} className="gv-input"/>