Volume 8 · vtrc-rc-backoffice Deep Dive
เล่มนี้เจาะลึก vtrc-rc-backoffice/ — frontend ฝั่ง HR/Admin เป็น React 16 + CRA + Apollo Client v2 + AntD v4 + MUI v5 + Recoil
เป้าหมายคือให้อ่านจบแล้วเข้าใจโครงสร้าง รู้จุดที่ต้องระวัง และสามารถแก้ไขหรือเพิ่มฟีเจอร์ได้โดยไม่ทำลาย pattern ที่มีอยู่
vtrc-rc-backoffice คืออะไร
vtrc-rc-backoffice คือเว็บแอปที่ฝ่าย HR/Admin สภากาชาดใช้งานจริง — จัดการข้อมูลพนักงาน อนุมัติใบลา อนุมัติค่ารักษาพยาบาล บริหารกองทุนสงเคราะห์ บริหารการสรรหาและ PMS จัดการผู้ใช้และสิทธิ์ และอื่น ๆ
ตัวแอปรันที่ https://vtrcbackoffice.redcross.or.th/ (production) และ https://uat-vtrcbackoffice.redcross.or.th/ (UAT) — โดยทั้งคู่ใช้ bundle ตัวเดียวกันที่เลือก GraphQL endpoint ตอน runtime ตาม origin ที่เปิด
คู่สมรสของ vtrc-rc-backoffice คือ vtrc-web (ฝั่งพนักงาน) ซึ่งอยู่ใน Volume 7 — ทั้งสองแอปใช้ Apollo v2 เหมือนกัน แต่ต่างกันที่เวอร์ชัน AntD (v3 vs v4), ระบบ build (Webpack eject vs CRA), และ state management (none vs Recoil)
สไตล์โค้ด — 4 ข้อที่ต้องจำ
- pattern ผสม class + function component — module เก่า (Leave, Hospital, ManageUser) ใช้ class component +
React.createRef+<Form ref={formRef}>module ใหม่ (WorkForce, PMS, Recruitment) ใช้ function component +Form.useForm+ Recoil fetchPolicy: 'no-cache'เป็น default เหมือน vtrc-web — cache ของ Apollo แทบไม่ถูกใช้- เมนู dynamic — ดึงจาก
fetchgroupmenu+fetchsidemenu(REST) ไม่ใช่ static array ในroutes.js - มี HTTP client 17 ตัว (15 axios + 2 apollo) แยกตาม microservice — ระวังเลือกผิดตัว
ตัวเลขที่ควรจำ
| ตัวเลข | ค่า | ที่มา |
|---|---|---|
| Page files | 871 ไฟล์ | src/pages/ |
| Component files | 104 ไฟล์ | src/components/ |
| Recoil atom files | 57 ไฟล์ | src/recoil/states/ |
| Util files | 33 ไฟล์ | src/utils/ |
| GraphQL queries | 120 ตัว | src/graphql/queries.js (4,108 บรรทัด) |
| GraphQL mutations | 94 ตัว | src/graphql/mutations.js (2,208 บรรทัด) |
| Routes | 276 paths | src/config/routes.js (2,550 บรรทัด) |
| SiderLayout (shell) | 1,168 บรรทัด | src/components/SiderLayout/index.js |
| AntD override (compiled CSS) | 21,189 บรรทัด | src/config/custom-antd.css |
| Legacy/backup files | 75 ไฟล์ + 4 โฟลเดอร์ _bk | ทั่วระบบ |
| HTTP clients | 17 ตัว (15 axios + 2 apollo) | src/config/axios-*.js + apollo*.js |
| React | 16.13 | package.json |
| Apollo Client | v2 (react-apollo@3.1.5) | package.json |
| AntD | v4.15.4 | package.json |
| MUI | v5.11 (แทบไม่ได้ใช้) | package.json |
| Recoil | 0.7.5 | package.json |
| React Router | v5 | package.json |
| CRA | 3.4.3 (ไม่ eject) | package.json |
| Node (ใน Docker) | 16 | Dockerfile:1 |
| Bundle ที่ commit | ~130 MB | build/ |
สิ่งที่ Volume นี้ไม่ cover
- รายละเอียด GraphQL schema ฝั่ง vtrc-api — cover ใน Volume 3 บท 3.2
- HRMI MSSQL schema — cover ใน Volume 9
- business rule ของแต่ละฟีเจอร์ — cover ใน Volume 1
- vtrc-web — Volume 7 แยกต่างหาก
โครงสร้างบท
| บท | ชื่อ | คำถามที่ตอบ |
|---|---|---|
| 7.1 | Repository map + legacy/backup files | โฟลเดอร์ไหนทำอะไร ไฟล์ไหนห้ามแตะ |
| 7.2 | Bootstrap + CRA build | แอปเริ่มที่ไหน สร้าง bundle อย่างไร |
| 7.3 | Apollo Client + checkLinkURL | ส่ง request อย่างไร เลือก endpoint อย่างไร |
| 7.4 | Routing + auth gate + dynamic menu | route ทำงานอย่างไร เมนูมาจากไหน |
| 7.5 | GraphQL queries + mutations catalog | มี query/mutation อะไรบ้าง จัดกลุ่มอย่างไร |
| 7.6 | Component + Recoil + MUI architecture | component แบ่งอย่างไร state อยู่ที่ไหน |
| 7.7 | Page deep dive — Login, ManageUser, LeaveStudiesPayments | หน้าจริงทำงานอย่างไร 3 ตัวอย่าง |
| 7.8 | State, styling, locale (พ.ศ.) | state อยู่ที่ไหน CSS กี่ระบบ จัดการพ.ศ. อย่างไร |
| 7.9 | Security + performance | จุดเสี่ยงด้านความปลอดภัย ทำไม bundle ใหญ่ |
| 7.10 | Scorecard + comparison vtrc-web | สรุปสุขภาพ repo + เปรียบเทียบกับ vtrc-web |
วิธีอ่านเล่มนี้
ถ้ามีเวลาน้อย — อ่าน 7.1 (map) + 7.4 (routing + dynamic menu) + 7.10 (scorecard + comparison) ก็พอเข้าใจภาพรวม
ถ้าจะแก้ฟีเจอร์ — อ่าน 7.5 (catalog) ก่อนหา query ที่เกี่ยวข้อง แล้วดู 7.7 (deep dive) เป็นตัวอย่าง
ถ้าจะทำ security review — อ่าน 7.9 ก่อน จากนั้น cross-check กับ Volume 10
ขอแนะนำให้เปิดไฟล์จริงใน repo ควบคู่กับการอ่าน — คู่มือนี้เป็นแผนที่ ไม่ใช่ตัวแทนของโค้ด