/* ========================================================================== * ADMIN NEXT — page-staffkpi.jsx * KPI พนักงานจาก admin_activity_logs (กิจกรรมที่ระบบบันทึกจริง) * ========================================================================== */ const STAFF_KPI_RANGES = [["today","วันนี้"],["yesterday","เมื่อวาน"],["7d","7 วัน"],["month","เดือนนี้"],["custom","กำหนดเอง"]]; const staffKpiDate = (offset=0) => new Intl.DateTimeFormat("en-CA",{timeZone:"Asia/Bangkok"}).format(new Date(Date.now()-offset*86400000)); const staffKpiFmt = (n) => Number(n||0).toLocaleString("th-TH"); const staffKpiDuration = (minutes) => { const value=Math.max(0,Math.round(Number(minutes||0))); const h=Math.floor(value/60),m=value%60; return h?`${h} ชม. ${m} นาที`:`${m} นาที`; }; const staffKpiWhen = (v) => { if(!v) return "ไม่มีข้อมูล"; try { return new Intl.DateTimeFormat("th-TH",{timeZone:"Asia/Bangkok",day:"2-digit",month:"short",year:"2-digit",hour:"2-digit",minute:"2-digit"}).format(new Date(v)); } catch { return "—"; } }; function StaffKpiPage({ toast }) { const [range,setRange]=useState("7d"); const [custom,setCustom]=useState({from:staffKpiDate(6),to:staffKpiDate(0)}); const [from,setFrom]=useState(staffKpiDate(6)); const [to,setTo]=useState(staffKpiDate(0)); const [tab,setTab]=useState("overview"); const [q,setQ]=useState(""); const [roleFilter,setRoleFilter]=useState("all"); const [data,setData]=useState(null); const [sessionData,setSessionData]=useState(null); const [sessionErr,setSessionErr]=useState(null); const [loading,setLoading]=useState(true); const [err,setErr]=useState(null); const [selected,setSelected]=useState(null); const resolveDates=useCallback(()=>{ const today=staffKpiDate(0); if(range==="today")return {from:today,to:today}; if(range==="yesterday"){const y=staffKpiDate(1);return {from:y,to:y};} if(range==="month")return {from:today.slice(0,8)+"01",to:today}; if(range==="custom")return {from:custom.from||today,to:custom.to||today}; return {from:staffKpiDate(6),to:today}; },[range,custom]); const load=useCallback(async()=>{ setLoading(true);setErr(null);setSessionErr(null);setSessionData(null); try{ const dates=resolveDates(); const params=new URLSearchParams({from:dates.from,to:dates.to}); const result=await api("/staff-kpi?"+params.toString()); setData(result||null);setFrom(dates.from);setTo(dates.to);setSelected(null); try{ const sessionResult=await api("/staff-kpi-sessions?"+params.toString()); setSessionData(sessionResult||null); }catch(sessionError){ setSessionData(null); setSessionErr(sessionError.message||"โหลดเวลาเซสชันไม่สำเร็จ"); } }catch(e){ if(e.status===401||e.status===403)window.__nxAuthFail?.(); setErr(e.status===403?"บัญชีนี้ไม่มีสิทธิ์ดู KPI พนักงาน":(e.message||"โหลด KPI ไม่สำเร็จ")); }finally{setLoading(false);} },[resolveDates]); useEffect(()=>{load();},[load]); const rows=data?.rows||[]; const hours=data?.hourly||[]; const rawSummary=data?.summary||{}; const sessionRowsById={}; (sessionData?.rows||[]).forEach(r=>{sessionRowsById[String(r.id)]=r;}); const sessionRoleRows=(sessionData?.rows||[]).filter(r=>roleFilter==="all"||r.role===roleFilter); const sessionSum=(key)=>sessionRoleRows.reduce((total,row)=>total+Number(row[key]||0),0); const filteredSessionCount=sessionSum("sessions_count"); const sessionSummary={ sessions_total:filteredSessionCount, active_sessions:sessionSum("active_sessions"), total_minutes:sessionSum("total_minutes"), average_session_minutes:filteredSessionCount?Math.round(sessionSum("total_minutes")/filteredSessionCount):0, staff_with_sessions:sessionRoleRows.filter(r=>Number(r.sessions_count||0)>0).length, }; const roleRows=rows.filter(r=>roleFilter==="all"||r.role===roleFilter); const activeRows=roleRows.filter(r=>Number(r.actions_total||0)>0); const filtered=roleRows.filter(r=>{ const term=q.trim().toLowerCase(); return !term||String(r.username||"").toLowerCase().includes(term)||String(r.full_name||"").toLowerCase().includes(term)||String(r.role||"").toLowerCase().includes(term); }); const maxActions=Math.max(1,...roleRows.map(r=>Number(r.actions_total||0))); const roleSum=(key)=>roleRows.reduce((total,row)=>total+Number(row[key]||0),0); const summary=roleFilter==="all"?rawSummary:{staff_total:roleRows.length,active_staff:activeRows.length,total_actions:roleSum("actions_total"),member_actions:roleSum("member_actions"),deposit_actions:roleSum("deposit_actions"),withdrawal_actions:roleSum("withdrawal_actions"),credit_actions:roleSum("credit_actions"),withdrawal_managed:roleSum("withdrawal_managed"),finance_actions:roleSum("deposit_actions")+roleSum("withdrawal_actions")+roleSum("credit_actions"),settings_actions:roleSum("settings_actions")}; const activeCount=Number(summary.active_staff||0); const totalActions=Number(summary.total_actions||0); const average=activeCount?totalActions/activeCount:0; const activeRate=Number(summary.staff_total||0)?Math.round(activeCount/Number(summary.staff_total)*1000)/10:0; const hourlyMap={}; hours.forEach(h=>{hourlyMap[String(h.staff_id)+":"+Number(h.hour)]=Number(h.count||0);}); const H=({children,extra=""})=>{children}; const chooseRange=(key)=>{ setRange(key); if(key==="today"){setCustom({from:staffKpiDate(0),to:staffKpiDate(0)});} if(key==="yesterday"){setCustom({from:staffKpiDate(1),to:staffKpiDate(1)});} if(key==="7d"){setCustom({from:staffKpiDate(6),to:staffKpiDate(0)});} if(key==="month"){const today=staffKpiDate(0);setCustom({from:today.slice(0,8)+"01",to:today});} }; const exportCsv=()=>{ const exportRows=[["อันดับ","ชื่อพนักงาน","ยูสเซอร์","บทบาท","กิจกรรมทั้งหมด","สมาชิก","ฝาก","ถอน","คืน/เติม/ตัดเครดิต","ถอนที่จัดการ","ตั้งค่า/ระบบ","กิจกรรมล่าสุด","Login ล่าสุด","Logout ล่าสุด","เวลาเซสชันรวม (นาที)","จำนวนเซสชัน"]]; filtered.forEach((r,i)=>{const session=sessionRowsById[String(r.id)]||{};exportRows.push([i+1,r.full_name||r.username,r.username,r.role,Number(r.actions_total||0),Number(r.member_actions||0),Number(r.deposit_actions||0),Number(r.withdrawal_actions||0),Number(r.credit_actions||0),Number(r.withdrawal_managed||0),Number(r.settings_actions||0),staffKpiWhen(r.last_activity),staffKpiWhen(session.last_login),staffKpiWhen(session.last_logout),Number(session.total_minutes||0),Number(session.sessions_count||0)]);}); csvDownload("staff-kpi-"+from+"-"+to+".csv",exportRows); toast("ส่งออก KPI "+filtered.length+" รายการแล้ว"); }; const tablePanel = (

ผลงานรายพนักงาน

นับจาก Activity Log ที่ระบบบันทึกจริง · {staffKpiFmt(filtered.length)} จาก {staffKpiFmt(roleRows.length)} คน

ไม่รวม sync อัตโนมัติ
{loading?Array.from({length:6}).map((_,i)=>) :filtered.map((r)=>{const originalIndex=roleRows.findIndex(x=>x.id===r.id);const session=sessionRowsById[String(r.id)]||{};const ratio=Math.round(Number(r.actions_total||0)/maxActions*100);return setSelected(r.id)} className={"cursor-pointer border-b border-line-soft last:border-0 transition-colors hover:bg-sunken "+(selected===r.id?"bg-accent-soft":"")}> })} {!loading&&!filtered.length&&}
# พนักงาน บทบาท / สถานะ Login ล่าสุด Logout ล่าสุด เวลาเซสชันรวม Action รวม สมาชิก ฝาก ถอน เครดิต ถอนที่จัดการ ตั้งค่า / ระบบ กิจกรรมล่าสุด เทียบกับคนที่สูงสุด
{originalIndex+1}
{r.full_name||r.username}
@{r.username}
{r.role==="staff"?"พนักงาน":"แอดมิน"}
{r.status==="active"?"ใช้งาน":(r.status||"ไม่ทราบ")}
 {session.last_login?staffKpiWhen(session.last_login):"—"} {session.last_logout?staffKpiWhen(session.last_logout):(Number(session.active_sessions||0)>0?"ยังเปิดอยู่":(Number(session.sessions_count||0)>0?"ไม่มี Logout":"—"))}
{Number(session.sessions_count||0)>0||Number(session.total_minutes||0)>0?staffKpiDuration(session.total_minutes):"—"}
{staffKpiFmt(session.sessions_count||0)} เซสชัน
 {staffKpiFmt(r.actions_total)}
 {staffKpiFmt(r.member_actions)} {staffKpiFmt(r.deposit_actions)} {staffKpiFmt(r.withdrawal_actions)} {staffKpiFmt(r.credit_actions)} {staffKpiFmt(r.withdrawal_managed)} {staffKpiFmt(r.settings_actions)} {staffKpiWhen(r.last_activity)}
{ratio}%
{rows.length?"ไม่พบพนักงานที่ตรงกับคำค้นหา":"ไม่มีพนักงานในช่วงที่เลือก"}
{selected&&roleRows.some(r=>r.id===selected)&&
{(()=>{const r=roleRows.find(x=>x.id===selected);return
{r.full_name||r.username}
Action {staffKpiFmt(r.actions_total)} · ฝาก {staffKpiFmt(r.deposit_actions)} · ถอน {staffKpiFmt(r.withdrawal_actions)} · เครดิต {staffKpiFmt(r.credit_actions)} · สมาชิก {staffKpiFmt(r.member_actions)}
กิจกรรมล่าสุด
{staffKpiWhen(r.last_activity)}
;})()}
}
ข้อมูลเซสชันเริ่มนับหลังติดตั้งและเข้าสู่ระบบใหม่เท่านั้น เวลาเซสชันคำนวณจาก Login และ heartbeat ทุก 60 วินาทีขณะหน้าแอดมินเปิดอยู่ หากไม่มี Logout จริงจะประเมินจาก heartbeat ล่าสุด + 2 นาที ไม่ใช่หลักฐานเวลาทำงาน
); const heatmapPanel = (

ช่วงเวลาที่มีการบันทึกกิจกรรม

จำนวน Activity Log แยกตามชั่วโมงตามเวลาไทย (UTC+7) รวมตลอดช่วงที่เลือก

น้อย{[0,1,2,3,4].map(v=>)}มาก
{Array.from({length:24},(_,i)=>)} {loading?Array.from({length:5}).map((_,i)=>) :filtered.slice(0,30).map(r=>{Array.from({length:24},(_,hour)=>{const count=hourlyMap[String(r.id)+":"+hour]||0;const opacity=count?Math.min(.88,.16+Math.log2(count+1)*.15):0;return })})} {!loading&&!filtered.length&&}
พนักงาน / ชั่วโมง{String(i).padStart(2,"0")}
{r.full_name||r.username}
@{r.username}
{count||""}
ไม่มีข้อมูลในช่วงที่เลือก
แสดงสูงสุด 30 คนแรกตามตัวกรอง ข้อมูลเป็นจำนวนเหตุการณ์ ไม่ใช่เวลาทำงานหรือสถานะออนไลน์
); const comparisonPanel = (

อันดับพนักงานตามกิจกรรม

เรียงจาก Activity Log ที่บันทึกจริง

{loading?Array.from({length:5}).map((_,i)=>
) :activeRows.slice().sort((a,b)=>Number(b.actions_total||0)-Number(a.actions_total||0)).slice(0,10).map((r,i)=>)} {!loading&&!activeRows.length&&
ไม่มีข้อมูลกิจกรรม
}

สัดส่วนประเภทกิจกรรม

จำแนกจาก path / action · หมวดอาจนับซ้อนกัน

{[ ["สมาชิก",Number(summary.member_actions||0),"#7197d6"], ["การเงิน / เครดิต",Number(summary.finance_actions||0),"#55aa88"], ["การตั้งค่า / จัดการระบบ",Number(summary.settings_actions||0),"#8c83dc"] ].map(([label,value,color])=>
{label}{staffKpiFmt(value)}
)}
ยอดรวมเป็นจำนวน log ทั้งหมด หมวดกิจกรรมอาจซ้อนทับกันและไม่ใช่คะแนนคุณภาพงาน
); const kpiColors = ["#6366F1","#0EA5E9","#10B981","#EF4444","#F59E0B","#F97316","#8B5CF6","#64748B","#14B8A6","#EC4899","#06B6D4","#D946EF","#22C55E"]; return (
{[["overview","ภาพรวม"],["staff","รายบุคคล"],["hours","กิจกรรมรายชั่วโมง"],["compare","เปรียบเทียบ"]].map(([k,label])=>)}
{STAFF_KPI_RANGES.map(([k,label])=>)}
{setCustom(c=>({...c,from:e.target.value}));setRange("custom");}} className="h-8 rounded-lg border border-line bg-surface px-2 text-[11px]"/> {setCustom(c=>({...c,to:e.target.value}));setRange("custom");}} className="h-8 rounded-lg border border-line bg-surface px-2 text-[11px]"/>
setQ(e.target.value)} placeholder="ค้นหาพนักงาน..." className="h-8 w-full rounded-lg border border-line bg-sunken pl-8 pr-2 text-xs focus:border-accent focus:outline-none"/>
ช่วงข้อมูล: {from} ถึง {to} ตัวกรองบทบาทมีผลกับการ์ด ตาราง และ Heatmap · เวลา Asia/Bangkok
{[ ["พนักงานที่ทำงาน",staffKpiFmt(summary.active_staff),"มี Activity Log อย่างน้อย 1 รายการ",I.users], ["Action ทั้งหมด",staffKpiFmt(summary.total_actions),"รายการที่ระบบบันทึกจริง",I.check], ["งานฝาก",staffKpiFmt(summary.deposit_actions),"รายการฝากที่พนักงานจัดการ",I.dep], ["งานถอน",staffKpiFmt(summary.withdrawal_actions),"รายการถอนที่พนักงานจัดการ",I.wdr], ["คืน / เติม / ตัดเครดิต",staffKpiFmt(summary.credit_actions),"การปรับเครดิตสมาชิก",I.coins], ["ถอนที่จัดการ",staffKpiFmt(summary.withdrawal_managed),"อนุมัติ / ยกเลิก / จ่ายถอน",I.check], ["สมาชิก",staffKpiFmt(summary.member_actions),"กิจกรรมเกี่ยวกับสมาชิก",I.users], ["ตั้งค่า / ระบบ",staffKpiFmt(summary.settings_actions),"กิจกรรมด้านดูแลระบบ",I.grid], ["อัตราทีมที่มีกิจกรรม",activeRate.toLocaleString("th-TH",{maximumFractionDigits:1})+"%","สัดส่วนบัญชีที่มี log",I.check], ["เฉลี่ย Action / คน",average.toLocaleString("th-TH",{maximumFractionDigits:1}),"เฉลี่ยในกลุ่มที่มีกิจกรรม",I.grid], ["จำนวนเซสชัน",sessionData?staffKpiFmt(sessionSummary.sessions_total):"—","นับ Login จริงหลังเปิดใช้ระบบ",I.check], ["เวลาเซสชันสะสม",sessionData?staffKpiDuration(sessionSummary.total_minutes):"—","เวลาประมาณจาก heartbeat / Logout",I.grid], ["กำลังใช้งาน",sessionData?staffKpiFmt(sessionSummary.active_sessions):"—","มี heartbeat ภายใน 5 นาที",I.users] ].map(([label,value,caption,icon],index)=>{const color=kpiColors[index%kpiColors.length];const gradient=`linear-gradient(135deg, ${color} 0%, ${darkenHex(color,0.24)} 100%)`;return
{label}
{loading?"—":value}
{caption}
})}
{sessionErr&&
โหลดข้อมูลเวลาเซสชันไม่ได้: {sessionErr} · ตรวจ migration และ API session tracking
} {err?
{err}
:<> {tab==="overview"&&<>{tablePanel}{heatmapPanel}} {tab==="staff"&&tablePanel} {tab==="hours"&&heatmapPanel} {tab==="compare"&&comparisonPanel} }
); }