ใบวางบิลลูกค้า (Customer Invoice)

เมนูนี้ใช้สำหรับเรียกเก็บเงินจากลูกค้าตามสัญญาและรอบวางบิลที่ระบบสร้างไว้ โดยหน้า UI จะค่อย ๆ พาผู้ใช้ไล่ลงลึก 3 ระดับ

1. รายการลูกค้าหรือสัญญาที่มีใบวางบิล
2. รอบการวางบิลของสัญญานั้น
3. รายละเอียดใบวางบิลจริงตาม contract group

ภาพรวม flow ของหน้า

ระดับที่ 1: หน้ารวม Customer Invoice

หน้าแรกของเมนูนี้ยิง GET /billing-statements และรองรับ filter หลักดังนี้

• search
  • ใช้ค้นหาด้วยรหัสลูกค้า/ชื่อลูกค้า
• status
  • ทั้งหมด
  • ยังไม่วางบิล
  • วางบิลแล้ว
• page
• pageSize

จุดที่ควรรู้

• หน้าแรกยังไม่ใช่หน้ารายละเอียดบิล
• หน้านี้ทำหน้าที่เป็นจุดเริ่มต้นในการเลือกสัญญาที่ต้องการเข้าไปดู

ระดับที่ 2: หน้ารอบบิลของสัญญา

เมื่อเลือกสัญญาแล้ว ระบบจะพาไปหน้า /customer-invoice/billing/:customerId/:contractId

หน้าระดับนี้มีหน้าที่

• แสดงชื่อสัญญา
• แสดงรายการรอบวางบิลทั้งหมดของสัญญา
• ให้ผู้ใช้กรอง ปีที่วางบิล

ข้อสำคัญจากโค้ดจริง

• ตัวเลือก ปีที่วางบิล ไม่ได้ยิง backend ใหม่
• ระบบคำนวณปีจาก mainBillingStatements[0].billingStartDate และ billingEndDate
• การกรองปีจึงเป็น frontend filter บนข้อมูลที่โหลดมาแล้ว

ระดับที่ 3: หน้ารายละเอียดใบวางบิล

หน้ารายละเอียดใช้ GET /billing-statements/:id แล้วเลือก component แสดงผลตาม contract.group

กลุ่มที่ระบบรองรับในหน้า detail ตอนนี้คือ

• A1
• A2
• A3
• B1
• B2
• C
• D
• E
• F

ผลคือผู้ใช้งานอาจเห็นตารางและรายละเอียดต่างกัน แม้จะอยู่ในเมนูเดียวกัน เพราะระบบเลือก view form ตามเงื่อนไขของสัญญา

สิ่งที่ผู้ใช้ต้องกรอกก่อน Export

หน้า detail มี form ก่อน export ที่บังคับข้อมูลสำคัญดังนี้

• billingDate
• approvedBy
• approvedAt

พฤติกรรมที่ยืนยันจากโค้ด

• approvedBy โหลดเฉพาะ user ที่เป็น OFFICE
• ถ้าเอกสารถูก verify แล้ว (verifiedBy มีค่า)
  • ช่อง ผู้ตรวจสอบ จะกลายเป็นข้อความอ่านอย่างเดียว
  • ช่อง วันที่ทำรายการ จะกลายเป็นข้อความอ่านอย่างเดียว

การ Export Excel

ปุ่ม Export Excel ในหน้า detail ใช้ endpoint

• GET /billing-statements/{id}/export

โดย request จะส่งค่า

• approvedAt
• approvedById

หลัง export สำเร็จ หน้า detail จะ refetch เพื่อให้ข้อมูลที่เพิ่งถูกยืนยันแสดงกลับมาบนหน้าจอ

หน้ารายละเอียดใบวางบิล

เมื่อเปิดใบวางบิล ระบบจะแสดงข้อมูลตามกลุ่มสัญญา (Contract Group) ของลูกค้านั้น ๆ

กลุ่มสัญญา	รูปแบบการแสดงผล
A1	แสดงตามจำนวนเที่ยวและราคาต่อหน่วย (Standard)
A2	แสดงตามจำนวนเที่ยวและราคาต่อหน่วย (Standard)
A3	แสดงแยกตามประเภทรถ พร้อมระบุรอบการวิ่ง (2 เที่ยว / 3 เที่ยว / 4 เที่ยว / 1-3 ขา / 4-6 ขา)
B1	แสดงตามจำนวนเที่ยว หรือแบบเหมาจ่าย (Lump Sum) ขึ้นอยู่กับเงื่อนไขสัญญา
B2	แสดงตามจำนวนเที่ยว หรือแบบเหมาจ่าย (Lump Sum) ขึ้นอยู่กับเงื่อนไขสัญญา
C	แสดงแบบ Standard หรือ Lump Sum ขึ้นอยู่กับเงื่อนไขสัญญา

:::info สัญญาที่มีค่าน้ำมัน (Oil Rate) หากสัญญามีการกำหนดอัตราค่าน้ำมัน (Oil Rate) ระบบจะแสดงคอลัมน์ Oil Rate เพิ่มเติมในตารางโดยอัตโนมัติ :::

วิธีใช้งานที่แนะนำ

1. เข้าเมนู ใบวางบิลลูกค้า
2. ค้นหาลูกค้าหรือกรองสถานะที่ต้องการ
3. เปิดสัญญาที่ต้องการ
4. เลือก ปีที่วางบิล
5. เปิดรอบบิลที่ต้องการตรวจ
6. ตรวจรายละเอียดตาม contract group
7. เลือก ผู้ตรวจสอบ และ วันที่ทำรายการ
8. กด Export Excel

tip

ไฟล์ที่ export ออกมาจะเป็นผลรวมของข้อมูลจากสัญญา, ลูกค้า, ช่วงรอบวางบิล, และรายการคำนวณในฟอร์มตาม contract group จึงควรตรวจหน้าจอ detail ให้เรียบร้อยก่อนทุกครั้ง

อ้างอิงโค้ด

• atp30-tos-frontend/src/views/pages/customer-invoice/index.tsx
• atp30-tos-frontend/src/views/pages/customer-invoice/billingList.tsx
• atp30-tos-frontend/src/views/pages/customer-invoice/viewBillingDetail.tsx
• atp30-tos-frontend/src/views/pages/customer-invoice/viewContent/customerDetail.tsx
• atp30-tos-frontend/src/api/customer-invoices.ts