Skip to main content

ภาพรวมระบบ (System Overview)

หน้านี้สรุปภาพรวมฝั่ง Admin จาก route, menu, guard, permission, และ data source ที่พบในโค้ดจริงของ atp30-tos-frontend

โครงสร้างการทำงานหลัก​

Shell และ Route Layer​

Login Layer​

  • route เริ่มต้นอยู่ใน LoginRoutes
  • ใช้ GuestGuard เพื่อกันผู้ใช้ที่ login แล้วไม่ให้ย้อนกลับมาหน้า login
  • ใช้ MinimalLayout สำหรับหน้า authentication และหน้า maintenance

Application Layer​

  • route หลักของระบบอยู่ภายใต้ MainRoutes
  • MainRoutes ใช้ AuthGuard ครอบ MainLayout
  • route รายโมดูลถูกแยกเป็นไฟล์ route ตามโดเมนของงาน เช่น customer, vehicle, trip-record, invoice, report
  • route ทั้งก้อนถูกครอบด้วย ErrorBoundary ใน src/routes/index.tsx

กลุ่มเมนูหลักที่มีจริง​

เมนูฝั่ง Admin ไม่ได้ถูกประกาศรวมใน route file แต่ถูกประกอบจาก menu-items แยกตามกลุ่มงาน

กลุ่มเมนูไฟล์ configเมนูย่อยหลัก
Operationssrc/menu-items/dashboard.tsDashboard, Oil Price, Trip Record, Trip History, Refuel, Vehicle Record, Standby, Histories
Billingsrc/menu-items/billing.tsCustomer Invoice, Contract Invoice, Driver Income
Reportssrc/menu-items/reports.tsIncome Report, Trip Report, Contract Invoice Report, Y-Ratio Report
Settingsrc/menu-items/settings.tsCustomers, Vehicles, Users, System Settings, Logout

Permission ที่มีผลกับการมองเห็นเมนู​

  • เมนูแต่ละ item มี permission กำกับใน menu-items/*.ts
  • widget บางส่วนในหน้า dashboard ใช้ Authorize ซ่อน/แสดง component ตาม permission
  • card ระดับหน้าใช้ MainCard permission={...} ในบางหน้า
  • สรุปคือ route มีได้ แต่ผู้ใช้จะไม่เห็นเมนูหรือเนื้อหาบางส่วนถ้าไม่มี permission ตรงตามที่กำหนด

Route Matrix ที่ต้องเข้าใจ​

กลุ่มroute สำคัญบทบาทของหน้า
Dashboard/, /homeสรุป KPI และตัวเลขรวม
Customer/customers, /customers/add, /customers/view/:idจัดการข้อมูลลูกค้า
Contract/customers/:customerId/contracts/create, /customers/:customerId/contracts/:contractId, /customers/:customerId/contracts/:contractId/editสร้าง ดู และแก้ไขสัญญา
Vehicles/vehicles, /vehicles/add, /vehicles/edit/:id, /vehicles/view/:idจัดการรถบริการ
Users/users, /users/create, /users/edit/:id, /users/view/:idจัดการผู้ใช้งาน
Operations/oil-price, /trip-record, /trip-history, /refuel, /vehicle-record, /standby-task, /historiesปฏิบัติการและข้อมูลภาคสนาม
Setting/customers, /vehicles, /users, /areas, /contract-bus-companies, /vehicle-types, /roles, /fuel-cards, /holidaysข้อมูลหลักและค่าตั้งต้นของระบบ
Billing/customer-invoice, /contract-invoice, /driver-incomeตรวจและออกเอกสารการเงิน
Reports/income-report, /trip-report, /contract-invoice-report, /y-ratio-reportรายงานเพื่อวิเคราะห์และ export

Data Flow ที่สำคัญ​

Master Data ไปสู่ Contract​

  • ข้อมูลลูกค้า, รถ, ประเภทรถ, ผู้ใช้งาน, พื้นที่ และบริษัทรถร่วม เป็นฐานของการสร้างสัญญา
  • หน้า contract ถูกเปิดจาก route ภายใต้ customers/:customerId/...

Operations ไปสู่ Billing​

  • ข้อมูลเที่ยวรถ, งาน standby, refuel, และสมุดประจำรถ เป็นข้อมูลต้นทางที่ส่งผลต่อการคำนวณ
  • ฝั่ง UI ของ billing ใช้ข้อมูลที่ backend สรุปมาแล้ว ไม่ได้คำนวณจาก form หน้าเดียว

Billing ไปสู่ Dashboard และ Reports​

  • Dashboard ใช้ข้อมูลสรุปจาก endpoint /dashboard/
  • Reports ใช้ route แยกของตนเอง เช่น trip-report, income-report, contract-invoice-report, y-ratio-report

สิ่งที่ต้องจำจาก implementation​

  • /home กับ / ไปหน้าเดียวกันคือ HomePage
  • MainLayout คือ shell หลักของระบบหลังผ่าน authentication
  • Dashboard อยู่ภายใต้กลุ่ม Operations ใน menu config จริง
  • หน้า contract ไม่ได้อยู่ใน menu หลัก แต่ถูกเข้าถึงจาก flow ของลูกค้า
  • การมองเห็นเมนูและ widget ขึ้นอยู่กับ permission ไม่ใช่แค่มี route อย่างเดียว

อ้างอิงโค้ด​

  • atp30-tos-frontend/src/routes/index.tsx
  • atp30-tos-frontend/src/routes/LoginRoutes.tsx
  • atp30-tos-frontend/src/routes/MainRoutes.tsx
  • atp30-tos-frontend/src/routes/*.tsx
  • atp30-tos-frontend/src/menu-items/index.ts
  • atp30-tos-frontend/src/menu-items/dashboard.ts
  • atp30-tos-frontend/src/menu-items/billing.ts
  • atp30-tos-frontend/src/menu-items/reports.ts
  • atp30-tos-frontend/src/menu-items/settings.ts
  • atp30-tos-frontend/src/components/shared/Authorize.tsx