}>
setF({...f,name:e.target.value})} placeholder="สมชาย ใจดี"/>
setF({...f,dailyRate:e.target.value})}/>
setF({...f,note:e.target.value})} placeholder="เช่น สัญญาจ้าง, ประกันสังคม"/>
;
}
// ---------- Payroll Calculator Tab ----------
function PayrollCalc({ db, setDb, flash, THAI_MONTHS }){
const months = aggregateByMonth(db);
const [selKey,setSelKey] = React.useState(()=>months.length?months[months.length-1].key:'');
const staff = db.staff || [];
const { settings } = useData();
// days worked state per staff for selected month — seed from saved payroll if exists
const savedPayroll = React.useMemo(()=>
(db.payrollEvents||[]).find(p=>p.monthKey===selKey), [selKey, db.payrollEvents]);
const initDays = React.useCallback(()=>{
if(savedPayroll){
return Object.fromEntries(savedPayroll.rows.map(r=>[r.staffId, String(r.daysWorked)]));
}
return Object.fromEntries(staff.map(s=>[s.id,'26'])); // default 26 วัน
},[selKey, savedPayroll, staff]);
const [days,setDays]=React.useState(initDays);
React.useEffect(()=>{ setDays(initDays()); },[selKey]);
// HR integration
const [hrLoading,setHrLoading]=React.useState(false);
const [hrResult,setHrResult]=React.useState(null);
const hrEnabled=!!(settings.hrEnabled && settings.hrSupabaseUrl && settings.hrAnonKey);
const fetchFromHR = async () => {
if(!hrEnabled||!selKey) return;
setHrLoading(true); setHrResult(null);
try {
const [yr,mo]=selKey.split('-').map(Number);
const base=(settings.hrSupabaseUrl||'').replace(/\/+$/,'');
const res=await fetch(`${base}/rest/v1/rpc/get_payroll_month_summary`,{
method:'POST',
headers:{'Content-Type':'application/json','apikey':settings.hrAnonKey,'Authorization':`Bearer ${settings.hrAnonKey}`},
body:JSON.stringify({p_year:yr,p_month:mo}),
});
if(!res.ok){ const t=await res.text(); throw new Error(`HR ${res.status}: ${t.slice(0,120)}`); }
const hrData=await res.json();
const newDays={...days};
let matched=0; const unmatched=[];
(hrData||[]).forEach(hr=>{
const n=String(hr.emp_name||'').trim().toLowerCase();
const s=staff.find(x=>String(x.name||'').trim().toLowerCase()===n);
if(s){ newDays[s.id]=String(hr.days_worked??0); matched++; }
else unmatched.push(hr.emp_name);
});
setDays(newDays);
setHrResult({total:(hrData||[]).length,matched,unmatched});
flash(`ดึงข้อมูล HR: จับคู่ ${matched}/${(hrData||[]).length} คน`);
} catch(e){ flash('เชื่อม HR ไม่สำเร็จ: '+e.message,'err'); }
finally{ setHrLoading(false); }
};
const rows = staff.map(s=>({
...s,
daysWorked: Math.max(0, Number(days[s.id])||0),
wage: s.dailyRate * Math.max(0, Number(days[s.id])||0),
}));
const totalWage = rows.reduce((s,r)=>s+r.wage,0);
const selMonthObj = months.find(m=>m.key===selKey);
const monthLabel = selMonthObj ? `${THAI_MONTHS[selMonthObj.monthIdx]} ${parseInt(selMonthObj.year)+543}` : selKey;
const existingExpense = selKey && (db.expenseEvents||[]).find(e=>
e.category==='labor' && e.source==='payroll' && String(e.paidAt||'').startsWith(selKey));
const savePayroll = () => {
if(!totalWage) return;
const payRecord = {
id:'PAY'+Date.now().toString(36).toUpperCase(),
monthKey:selKey, createdAt:new Date().toISOString(), totalWage,
rows:rows.map(r=>({staffId:r.id,staffName:r.name,dailyRate:r.dailyRate,daysWorked:r.daysWorked,wage:r.wage})),
};
// expense entry
const expEntry = {
id:'EXP'+Date.now().toString(36)+Math.random().toString(36).slice(2,5),
category:'labor', source:'payroll', amount:totalWage,
note:`เงินเดือนพนักงาน ${monthLabel} · ${rows.filter(r=>r.daysWorked>0).length} คน`,
paidAt:selKey+'-28', createdAt:new Date().toISOString(),
};
setDb(prev=>{
const prevPayroll=(prev.payrollEvents||[]).filter(p=>p.monthKey!==selKey);
const prevExp=(prev.expenseEvents||[]).filter(e=>!(e.category==='labor'&&e.source==='payroll'&&String(e.paidAt||'').startsWith(selKey)));
return {...prev, payrollEvents:[payRecord,...prevPayroll], expenseEvents:[expEntry,...prevExp]};
});
flash(`บันทึกเงินเดือน ${fmtB(totalWage)} สำหรับ ${monthLabel} แล้ว`);
};
if(!staff.length) return (
{/* month selector + summary */}
;
}
// ---------- Payroll History Tab ----------
function PayrollHistory({ db, setDb, flash, THAI_MONTHS }){
const history = [...(db.payrollEvents||[])].sort((a,b)=>String(b.monthKey||'').localeCompare(String(a.monthKey||'')));
if(!history.length) return
;
return
{history.map(p=>{
const months = aggregateByMonth(db);
const m = months.find(mo=>mo.key===p.monthKey);
const label = m ? `${THAI_MONTHS[m.monthIdx]} ${parseInt(m.year)+543}` : p.monthKey;
return
{label}
{p.rows?.length||0} คน · {new Date(p.createdAt).toLocaleDateString('th-TH',{dateStyle:'medium'})}
{fmtB(p.totalWage,0)}
| พนักงาน |
วันทำงาน |
อัตรา/วัน |
ค่าจ้าง |
{(p.rows||[]).filter(r=>r.daysWorked>0).map((r,i)=>(
| {r.staffName} |
{r.daysWorked} |
{fmtB(r.dailyRate,0)} |
{fmtB(r.wage,0)} |
))}
;
})}
;
}
// ---------- Main Page ----------
function PayrollPage({ go }){
const { db, setDb, flash, THAI_MONTHS } = useData();
const [tab,setTab]=React.useState('calc');
const [editStaff,setEditStaff]=React.useState(null);
const [addOpen,setAddOpen]=React.useState(false);
const staff = db.staff || [];
const saveStaff = (s) => {
setDb(prev=>{
const list = prev.staff||[];
const idx = list.findIndex(x=>x.id===s.id);
return {...prev, staff: idx>=0 ? list.map(x=>x.id===s.id?s:x) : [...list,s]};
});
setEditStaff(null); setAddOpen(false);
flash('บันทึกข้อมูลพนักงานแล้ว');
};
const deleteStaff = (id) => {
if(!confirm('ลบพนักงานคนนี้?')) return;
setDb(prev=>({...prev, staff:(prev.staff||[]).filter(s=>s.id!==id)}));
flash('ลบพนักงานแล้ว');
};
return
{/* Summary KPIs */}
s.role==='บาริสต้า').length} · อื่นๆ ${staff.filter(s=>s.role!=='บาริสต้า').length}`}/>
s+x.dailyRate,0)/staff.length,0):'—'} icon="wallet" tone="var(--green)"/>
s+x.dailyRate*26,0),0)} icon="sales" tone="var(--orange)"
sub="อ้างอิง 26 วัน/คน"/>
{/* Tabs */}
{tab==='staff' && }
{/* Tab: staff list */}
{tab==='staff' && <>
{!staff.length
?
setAddOpen(true)}>เพิ่มพนักงาน}/>
:
| ชื่อ |
ตำแหน่ง |
อัตรา/วัน |
ประมาณ/เดือน |
|
{staff.map(s=>(
|
{s.name}
{s.note&&{s.note} }
|
{s.role} |
{fmtB(s.dailyRate,0)} |
{fmtB(s.dailyRate*26,0)} |
|
))}
}
}
{/* Tab: payroll calculator */}
{tab==='calc' && }
{/* Tab: history */}
{tab==='history' && }
{(addOpen || editStaff) && { setAddOpen(false); setEditStaff(null); }}/>}
;
}
Object.assign(window, { PayrollPage });