vtrc-backoffice · ภาพรวม

vtrc-backoffice คือเว็บแอป backoffice ฝั่ง HR/Admin ของสภากาชาดไทย สร้างด้วย React 16 + AntD v4 + CRA (react-scripts) เชื่อมต่อกับ vtrc-api ผ่าน GraphQL เป็นหลัก

repo อยู่ที่ branch master (default, canonical) — จำนวนไฟล์ที่ track ใน git คือ 769 ไฟล์ (git ls-files | wc -l วัดตรง ณ commit 3f32c80) branch develop มี commit เพิ่มเติมแต่ไม่ได้ตรวจในรอบนี้ ตาม convention ของ canonical-truths ที่ระบุว่า branch master ของ repo นี้ "also has develop with more commits"

vtrc-backoffice คืออะไร

แอปนี้เป็นเครื่องมือให้ทีม HR/Admin จัดการ:

ข้อมูลบุคลากร การลา (Leave, LeaveHR) การลาศึกษาต่อ/ทุน (LeaveStudies, LeaveStudiesScholar, LeaveStudiesPayments)
สวัสดิการค่ารักษาพยาบาล (Hospital, HospitalHr, HospitalPaid, HospitalFailed, HospitalName)
ผู้แทน/กองทุน (Delegate, Fund, BookBankVTRC, BankBranches, BankExportCode)
ข้อมูลองค์กร ระเบียบ ประกาศ (Organization, Regulations, RegulationsHR, Rule, Act, Policy, News, Guideline)
จัดการผู้ใช้/สิทธิ์ (ManageUser, ManageHR, MasterApprovers, MasterData)
workforce/บุคลากร (WorkForce module — องค์กร/หน่วยงาน)

ดูรายละเอียดฟีเจอร์แต่ละกลุ่มใน 03-features-map

Stack และเวอร์ชัน

ด้าน	ค่า	หลักฐาน
React	`^16.13.1`	`vtrc-backoffice/package.json:31`
Build tool	CRA (`react-scripts` `3.4.3`) ไม่ eject	`vtrc-backoffice/package.json:40`
AntD	ระบุใน `package.json` เป็น `^4.6.6` แต่ resolve จริงใน lockfile เป็น `4.15.4`	`vtrc-backoffice/package.json:11`, `vtrc-backoffice/package-lock.json` (entry `"antd": { "version": "4.15.4" }`)
Apollo Client	v2 (`apollo-client@^2.6.3` + `react-apollo@^3.1.5`) ไม่ใช่ Apollo v3+	`vtrc-backoffice/package.json:13,32`
State management	Recoil `^0.7.5` (27 atom ไฟล์ใน `src/recoil/states/`) + local class state ผสมกัน	`vtrc-backoffice/package.json:44`
Routing	`react-router-dom` `^5.2.0`	`vtrc-backoffice/package.json:39`
Report	Stimulsoft (`stimulsoft-dashboards-js`, `stimulsoft-reports-js` `^2022.4.1`)	`vtrc-backoffice/package.json:47-48`
Date	`moment` `^2.27.0`	`vtrc-backoffice/package.json:30`
Node ใน Docker	ไม่ระบุ — `Dockerfile` ของ repo นี้ไม่ build จาก source (ดูหัวข้อ build tooling ด้านล่าง)	`vtrc-backoffice/Dockerfile:1-2`

หมายเหตุ AntD v3/v4 EOL — docs/index.md ระบุกลุ่ม Web Frontends ว่าใช้ "AntD v3/v4" โดยรวม แต่สำหรับ vtrc-backoffice ตัวที่ resolve จริงคือ v4.15.4 เท่านั้น ไม่มี AntD v3 ใน dependency tree ของ repo นี้ (v3 พบใน vtrc-web ตาม v1 archive) รายละเอียดสถานะ EOL ดู 04-scorecard

Entrypoint

src/index.js mount component App ผ่าน ApolloProvider (client จาก src/config/apollo.js) ครอบด้วย RecoilRoot:

vtrc-backoffice/src/index.js:16-28

javascript

class Root extends Component {
  render() {
    return (
      <ApolloProvider client={apolloClient} >
        <RecoilRoot>
          <App />
        </RecoilRoot>
      </ApolloProvider>
    );
  }
}

ReactDOM.render(<Root />, document.getElementById('root'))

App (src/containers/App/index.js) คือ root router — ดูรายละเอียด auth gate ใน 02-core-pipeline

หมายเหตุที่ควรรู้ทันที — App/index.js override console.log/warn/error เป็น no-op ที่ทุก mount:

vtrc-backoffice/src/containers/App/index.js:13-14

javascript

function App() {
	console.log = console.warn = console.error = () => { };

ทำให้ debug ผ่าน browser console ใน production ไม่ได้เลย (ต้องใช้ debugger statement หรือ network tab แทน) ดู OBS-BO-01 ใน 04-scorecard

Build tooling

package.json มี script มาตรฐานของ CRA: start, build, test, eject (vtrc-backoffice/package.json:52-57) — ไม่ eject ใช้ react-scripts ตรง

Dockerfile ของ repo นี้ ไม่ build จาก source:

vtrc-backoffice/Dockerfile:1-2

dockerfile

FROM nginx:1.18
RUN apt-get update && apt-get install -y nginx-extras

image เพียงติดตั้ง nginx เท่านั้น ไม่มี npm install / npm run build — สอดคล้องกับการที่ repo commit โฟลเดอร์ build/ ไว้แล้ว (~47 MB, vtrc-backoffice/build/) และ docker-compose.yml mount โฟลเดอร์นั้นตรงเข้า container:

vtrc-backoffice/docker-compose.yml:9-19

yaml

volumes:
  - ./build:/usr/share/nginx/html
  - ./meeting:/usr/share/nginx/meeting
  - ./nginx:/etc/nginx/conf.d
  - ./web-logs:/var/log/nginx
  - ./cert:/etc/sslcert
ports:
  - 80:80
  - 443:443
networks:
  - uat-vtrc-backoffice-network

สรุป pipeline การ deploy จริงคือ: dev รัน npm run build บนเครื่อง (หรือ CI ที่ไม่อยู่ใน repo นี้) → commit ผลลัพธ์ลง build/ → docker-compose up เพียง serve static ไฟล์ผ่าน nginx — ไม่มี build stage ใน Docker image เอง ดู LEG-BO-01 ใน scorecard

docker-compose.yml อ้าง external network ชื่อ uat-vtrc-backoffice-network (vtrc-backoffice/docker-compose.yml:19,22) แม้ repo นี้เป็น branch master/production ของชื่อ repo ที่ไม่มีคำว่า uat — ชื่อ network นี้อาจเป็นเพียง environment variable ที่ ops ทีมตั้งไว้เฉพาะเครื่อง ไม่ยืนยันว่าเป็นความผิดพลาด (ดู QUAL-BO-01)

การเชื่อมต่อกับ vtrc-api

vtrc-backoffice คุยกับ backend ผ่าน GraphQL เพียง endpoint เดียว (ไม่มี WorkForce Apollo client แยกเหมือน vtrc-rc-backoffice) โดยเลือก URL ตอน runtime ด้วย pattern checkLinkURL() ที่อ่านจาก window.location.href — รูปแบบเดียวกับที่ระบุไว้ใน canonical-truths สำหรับ vtrc-web/vtrc-rc-backoffice รายละเอียดเต็มดู 02-core-pipeline

นอกจากนี้มี axios client แยกสำหรับ WorkForce REST (src/config/axios-workforce.js) แต่ ไม่มีจุด import ใช้งานจริงใน src/ (ตรวจด้วย full-text search ทั่ว src/ ไม่พบ axios-workforce ถูก import) — ถือเป็นโค้ดค้าง (dead code) ที่มี bug ซ่อนอยู่ ดู CORR-BO-01 ใน scorecard

สิ่งที่บทนี้ไม่ cover

schema ฝั่ง vtrc-api — ดู Volume 3 (Legacy Core)
ความสัมพันธ์กับ vtrc-backoffice-new โดยละเอียด — ดู _partial-index-backoffices.md
vtrc-web, vtrc-rc-backoffice — จัดทำโดยทีมอื่นในรอบนี้

โครงสร้างบท

บท	ชื่อ
01	Repository map
02	API endpoint resolution + auth/login flow
03	Feature/module list
04	Scorecard + debt register

vtrc-backoffice · ภาพรวม ​

vtrc-backoffice คืออะไร ​

Stack และเวอร์ชัน ​

Entrypoint ​

Build tooling ​

การเชื่อมต่อกับ vtrc-api ​

สิ่งที่บทนี้ไม่ cover ​

โครงสร้างบท ​