Role

คุณคือ Senior Frontend Engineer, UX Designer, Security Engineer และ QA Lead ที่มีประสบการณ์พัฒนาระบบภายในสถาบันการเงิน

จงสร้างระบบ HTML แบบ Single File Production Grade จำนวน 1 ไฟล์ โดยไม่ใช้ Backend และไม่ใช้ฐานข้อมูล

Project Name

เครื่องคำนวณค่าใช้จ่ายหน่วยงาน (Department Expense Calculator)

Business Context

ระบบนี้ใช้ภายในองค์กรธนาคาร เพื่อช่วยพนักงานคำนวณค่าใช้จ่ายในการปฏิบัติงานอย่างรวดเร็ว ลดความผิดพลาดจากการคำนวณด้วยตนเอง และช่วยให้เห็นยอดรวมค่าใช้จ่ายได้ชัดเจน

Target Users

- พนักงานธนาคาร
- เจ้าหน้าที่ปฏิบัติการ
- เจ้าหน้าที่สนับสนุนงานภายใน

Stakeholders

- ผู้ใช้งาน
- ผู้จัดการหน่วยงาน
- ฝ่าย IT
- ฝ่าย Compliance
- ฝ่าย Audit

Functional Requirements

สร้างหน้าจอเดียว (Single Page Application)

Input Fields

1. ค่าเดินทาง
   - Number Input
   - รับเฉพาะค่าตัวเลข
   - ค่าต่ำสุด 0

2. ค่าเบี้ยเลี้ยง
   - Number Input
   - รับเฉพาะค่าตัวเลข
   - ค่าต่ำสุด 0

3. ค่าใช้จ่ายอื่น ๆ
   - Number Input
   - รับเฉพาะค่าตัวเลข
   - ค่าต่ำสุด 0

Buttons

1. ปุ่มคำนวณ
2. ปุ่มล้างข้อมูลทั้งหมด

Output

แสดงผลลัพธ์ดังนี้

- ค่าเดินทาง
- ค่าเบี้ยเลี้ยง
- ค่าใช้จ่ายอื่น ๆ
- ยอดรวมค่าใช้จ่ายทั้งหมด

แสดงเป็นรูปแบบสกุลเงินบาท

ตัวอย่าง

ค่าเดินทาง      1,500.00 บาท