การจัดการพื้นฐานและการเข้าใช้งาน

หน้านี้สรุป flow การเข้าใช้งานจากโค้ดจริงของระบบ Admin โดยยึด route guard, auth context, และ menu config ที่ใช้งานอยู่ปัจจุบัน

จุดเริ่มต้นของระบบ

• หน้า login อยู่ที่ / และ /login
• login page ใช้ GuestGuard
• หลังเข้าสู่ระบบแล้ว route หลักจะถูกครอบด้วย AuthGuard
• หน้าแรกหลัง login คือ /home

การเข้าสู่ระบบ

1. เปิด browser แล้วเข้า URL ของระบบ Admin
2. ระบบพาเข้า route ใน LoginRoutes
3. กรอก Username และ Password
4. เมื่อ login สำเร็จ ระบบจะเก็บ session และเรียก /auth/me เพื่อดึงข้อมูลผู้ใช้ล่าสุด
5. ถ้าผ่านการตรวจสอบแล้ว ระบบจะพาเข้า MainLayout

ข้อจำกัดของประเภทบัญชี

ฝั่ง Admin มีการ block บัญชีประเภทนักขับที่ auth layer โดยตรง

• ถ้า userType เป็น COMPANY_DRIVER หรือ PARTNER_DRIVER
• ระบบจะ throw ข้อความ บัญชีนักขับไม่สามารถเข้าสู่ระบบ Admin ได้
• จึงควรใช้เฉพาะบัญชีประเภทสำนักงานหรือบทบาทที่ออกแบบมาสำหรับฝั่ง Admin เท่านั้น

การออกจากระบบ

• เมนู ออกจากระบบ อยู่ในกลุ่ม Setting
• ตัว item ถูกประกาศไว้ใน src/menu-items/settings.ts
• เมื่อออกจากระบบ ระบบจะล้าง token และ client auth state ใน JWTContext

โครงสร้างเมนูที่ผู้ใช้เห็นจริง

เมนูหลักของฝั่ง Admin ถูกประกอบจาก 4 กลุ่ม

กลุ่ม	หน้าที่
Operations	งานภาคปฏิบัติการและหน้า dashboard
Billing	ตรวจยอด ออกบิล และรายได้นักขับ
Reports	รายงานและ export
Setting	ข้อมูลหลักและตั้งค่าระบบ

หลักการแสดงเมนู

• แต่ละ menu item มี permission กำกับ
• ถ้าผู้ใช้ไม่มี permission ของเมนูนั้น เมนูจะไม่แสดงใน sidebar
• บางหน้าแสดง route ได้ แต่ซ่อน component บางส่วนผ่าน Authorize
• จึงต้องตรวจทั้ง route, menu-items, และ permission พร้อมกันเมื่ออธิบายพฤติกรรมของหน้า

เมนูสำคัญตามลำดับการใช้งานจริง

1. Dashboard
2. Customers และ Contract Management
3. Trip Record, Trip History, Standby, Refuel, Vehicle Record
4. Customer Invoice, Contract Invoice, Driver Income
5. Reports

ลำดับการอ่านคู่มือที่แนะนำ

1. อ่าน ภาพรวมระบบ เพื่อเข้าใจ shell, route, และ menu
2. อ่าน ช่องทางเข้าใช้งานระบบ เพื่อแยก UAT และ Production ให้ถูก
3. อ่าน การจัดการสัญญา ก่อนลงลึก billing
4. อ่าน สเปคการคำนวณใบวางบิล เมื่อต้องตรวจสูตร

อ้างอิงโค้ด

• atp30-tos-frontend/src/routes/LoginRoutes.tsx
• atp30-tos-frontend/src/routes/MainRoutes.tsx
• atp30-tos-frontend/src/contexts/JWTContext.tsx
• atp30-tos-frontend/src/menu-items/index.ts
• atp30-tos-frontend/src/menu-items/settings.ts
• atp30-tos-frontend/src/components/shared/Authorize.tsx