สวัสดี, {user.name.split(' ')[0]} 👋

ภาพรวมระบบเบิกและเคลียร์เงินทดรองจ่าย ประจำเดือนพฤษภาคม 2569

{role === 'staff' && ( )}

{/* Stats */}

{stats.map((s, i) => (

{s.label}

{s.value}{s.sub}

{s.delta &&

{s.delta}

}

))}

{/* Recent activity */}

กิจกรรมล่าสุด

{records.slice(0, 5).map(r => ( onOpen(r)}> ))}

เลขที่	เหตุผลการเบิก	ผู้ขอเบิก	ยอดเงิน	สถานะ
{r.id}	{r.purpose} ส่งเมื่อ {fmtDate(r.submittedAt)}	{r.requester.initials} {r.requester.name.split(' ')[0]}	{fmtMoney(sumItems(r.items))}	{statusBadge(r.status)}

{/* Side panel */}

{role === 'staff' && (

เคล็ดลับ

ยื่นคำขอเบิกล่วงหน้าอย่างน้อย 3 วันทำการ ก่อนวันที่ต้องการใช้เงิน

เก็บใบเสร็จต้นฉบับและสแกนแนบในใบเคลียร์ภายใน 14 วัน

เงินทดรองคงเหลือต้องส่งคืนแคชเชียร์ ภายในวันครบกำหนด

)}

สถานะคำขอประจำเดือน

); } function BreakdownChart({ records }) { const buckets = useMemo(() => { const b = { approved: 0, pending: 0, paid: 0, clearing: 0, cleared: 0, rejected: 0 }; records.forEach(r => { if (r.status.startsWith('pending')) b.pending++; else b[r.status] = (b[r.status]||0) + 1; }); return b; }, [records]); const items = [ { k: 'รออนุมัติ', v: buckets.pending, c: 'var(--warn)' }, { k: 'อนุมัติแล้ว', v: buckets.approved, c: 'var(--ok)' }, { k: 'จ่ายเงินแล้ว', v: buckets.paid, c: '#B89A52' }, { k: 'รอเคลียร์', v: buckets.clearing, c: 'var(--navy-2)' }, { k: 'เคลียร์สำเร็จ', v: buckets.cleared, c: '#7466B5' }, { k: 'ถูกปฏิเสธ', v: buckets.rejected, c: 'var(--err)' }, ]; const max = Math.max(1, ...items.map(i => i.v)); return (

{items.map(it => (

{it.k} {it.v}

))}

); } // ============== MY REQUESTS LIST ============== function RequestList({ records, user, onOpen, onNavigate, view, filter, setFilter, onAction }) { // view = 'my' | 'all' | 'approvals' | 'disburse' | 'reconcile' | 'clearing' let filtered = records; if (view === 'my') filtered = records.filter(r => r.requester.id === user.id); else if (view === 'approvals') { if (user.role === 'manager') filtered = records.filter(r => r.status === 'pending_mgr'); else if (user.role === 'director') filtered = records.filter(r => r.status === 'pending_dir'); } else if (view === 'disburse') filtered = records.filter(r => r.status === 'pending_fin' || r.status === 'approved'); else if (view === 'reconcile') filtered = records.filter(r => r.status === 'clearing'); else if (view === 'clearing') filtered = records.filter(r => (r.requester.id === user.id) && (r.status === 'paid' || r.status === 'clearing')); if (filter.status && filter.status !== 'all') filtered = filtered.filter(r => r.status === filter.status); if (filter.search) { const q = filter.search.toLowerCase(); filtered = filtered.filter(r => r.id.toLowerCase().includes(q) || r.purpose.toLowerCase().includes(q) || r.requester.name.toLowerCase().includes(q)); } const titleMap = { my: { h1: 'คำขอของฉัน', sub: 'รายการเบิกและเคลียร์เงินทดรองจ่ายของคุณ' }, all: { h1: 'รายการทั้งหมด', sub: 'ทุกคำขอเบิกและเคลียร์ในระบบ' }, approvals: { h1: 'งานรออนุมัติ', sub: `รออนุมัติโดย ${ROLE_META[user.role]?.label}` }, disburse: { h1: 'รอจ่ายเงิน', sub: 'คำขอที่ผ่านอนุมัติแล้ว รอดำเนินการจ่ายเงิน' }, reconcile: { h1: 'รอตรวจเคลียร์', sub: 'ใบเคลียร์ที่ส่งเข้ามารอตรวจสอบและปิดงวด' }, clearing: { h1: 'รอเคลียร์', sub: 'คำขอที่จ่ายเงินแล้วและรอส่งใบเคลียร์' }, }; const t = titleMap[view] || titleMap.my; const statusOptions = [ { v: 'all', l: 'ทุกสถานะ' }, { v: 'draft', l: 'ฉบับร่าง' }, { v: 'pending_mgr', l: 'รออนุมัติฝ่าย' }, { v: 'pending_dir', l: 'รออนุมัติ ผอ.' }, { v: 'pending_fin', l: 'รอการเงิน' }, { v: 'paid', l: 'จ่ายแล้ว' }, { v: 'clearing', l: 'รอเคลียร์' }, { v: 'cleared', l: 'เคลียร์สำเร็จ' }, { v: 'rejected', l: 'ถูกปฏิเสธ' }, ]; // tabs for approvals return (

{t.h1}

{t.sub}

{view === 'my' && ( )}

{/* Filters */}

พบ {filtered.length} รายการ

{/* Approval queue uses card layout, others use table */} {view === 'approvals' && user.role !== 'finance' ? (

{filtered.length === 0 ? (

) : filtered.map(r => ( ))}

) : (

{filtered.length === 0 ? ( ) : filtered.map(r => ( onOpen(r)}> ))}

เลขที่	เหตุผลการเบิก	ผู้ขอเบิก/ฝ่าย	วันที่	ยอดเงิน	สถานะ	กำหนดคืน

{r.id}	{r.purpose} {r.items.length} รายการ	{r.requester.initials} {r.requester.name} {DEPARTMENTS.find(d=>d.code===r.dept)?.name}	{fmtDate(r.submittedAt)} ใช้ {fmtDate(r.startDate)}	{fmtMoney(sumItems(r.items))}	{statusBadge(r.status)}

)}

); } function DueBadge({ dueDate, status }) { if (['cleared', 'rejected'].includes(status)) { return {fmtDate(dueDate)}; } const days = Math.ceil((new Date(dueDate) - new Date()) / (1000*60*60*24)); if (days < 0) return เกินกำหนด {Math.abs(days)} วัน; if (days <= 3) return อีก {days} วัน; return {fmtDate(dueDate)}; } function ApprovalCard({ record, user, onOpen, onAction }) { return (

onOpen(record)}>

{record.id} {statusBadge(record.status)}

{record.purpose}

{record.requester.initials}

{record.requester.name} · {DEPARTMENTS.find(d=>d.code===record.dept)?.name} ใช้ {fmtDate(record.startDate)} {record.items.length} รายการ

ยอดที่ขอเบิก ฿{fmtMoney(sumItems(record.items))}

e.stopPropagation()}>

); } Object.assign(window, { Dashboard, RequestList, ApprovalCard, DueBadge, BreakdownChart });