/* 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())}`; } // ── 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 }) { const me = window.CURRENT_USER || {}; const emps = window.EMPLOYEES || []; const emp = emps.find((e) => String(e.id) === String(me.employee_id)) || emps[0] || {}; const [view, setView] = useModeState('home'); // home | history | leave 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' && (
ประวัติลงเวลา · สัปดาห์นี้
{att.length === 0 ? (
— ยังไม่มีข้อมูล —
) : att.slice().reverse().map((r) => { const s = passStatus(r.status); return (
{r.date.slice(5)} {(r.first_scan || '').slice(11, 16) || '—'} → {(r.last_scan || '').slice(11, 16) || '—'} {hrs(r.work_min)}ชม {s.l}
); })}
)} {view === 'leave' && setView('home')}/>} {view === 'correct' && { setView('home'); loadAtt(); }}/>}
{/* bottom tab bar (white, sky active) */}
); } // 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"/>