8.10 · Scorecard + comparison vtrc-web

บทสุดท้ายสรุปสุขภาพของ vtrc-rc-backoffice เป็น scorecard และเปรียบเทียบกับ vtrc-web เพื่อให้เห็นจุดเหมือนและต่าง

---

Scorecard — สรุป健康ของ repo

ด้าน	คะแนน	หมายเหตุ
โครงสร้างโค้ด	6/10	module เก่า + ใหม่ ผสมกัน, มี typos, มี legacy
การ build	5/10	CRA ล้าสมัย (3.4.3), 130 MB commit, ไม่มี code splitting
การจัดการ state	7/10	Recoil ใช้ได้, class state ก็ OK
การจัดการ auth	4/10	token ใน localStorage, SSO bypass อันตราย
Security	3/10	secret รั่ว, MSSQL SA รั่ว, ไม่มี CSP
Performance	4/10	bundle ใหญ่, ไม่มี cache, N+1
Maintainability	5/10	ไฟล์ใหญ่, snapshot เยอะ, comment น้อย
Documentation	3/10	ไม่มี inline doc, README น้อย
Testing	1/10	ไม่มี test จริง
รวม	4.2/10	ต้องการ modernization เร่งด่วน

---

จุดแข็ง

1. มี state management ที่เป็นระบบ

Recoil ถูกใช้อย่างเป็นระบบใน WorkForce module — atom แยกตาม entity และหน้าที่ ทำให้ debug และ maintain ง่ายกว่าการใช้ local state ล้วน

2. Apollo Client error handling ครบ

errorLink จัดการ token refresh, session expire, token invalid — ครอบคลุมกรณีที่พบบ่อย ไม่ต้องเขียนซ้ำในทุก component

3. เมนู dynamic ลดความจำเป็นในการ deploy

เพิ่ม/ลดเมนูได้โดยไม่ต้อง deploy frontend — เหมาะกับองค์กรที่ต้องการปรับฟีเจอร์บ่อย

4. มี helpers ที่ใช้ซ้ำ

utils/ มี helper ครอบคลุม task ที่ทำบ่อย — date format, auth, storage, crypto — ลดความซ้ำซ้อน

---

จุดอ่อน

1. Security debt รุนแรง

• .env commit ลง git (MSSQL SA password รั่ว)
• REACT_APP_STIMUL_CONN_STRING ฝังใน bundle
• SSO bypass token ใน URL
• 30 ไฟล์มี dangerouslySetInnerHTML
• ไม่มี CSP

ดูรายละเอียดใน บท 7.9

2. Bundle ใหญ่และไม่มี code splitting

~11-13 MB bundle + ไม่มี React.lazy = first load ช้ามาก

3. Snapshot/legacy เยอะ

75 ไฟล์ _bk + 4 โฟลเดอร์ _bk + routes_bak.js, routes_bk-prd.js, ... = สับสนตอนแก้ไข

4. Typos ในชื่อไฟล์/โฟลเดอร์

PerfessionalLicense, TheamCss, announment, refundScholaship + CSS typos (themeplate/themplate/template) — ทำให้ grep ยากและสับสน

5. ไม่มี test

__tests__/ ว่าง + ไม่มี E2E test = ทุกการเปลี่ยนแปลงมีความเสี่ยง

6. console.* ปิดหมด

debug ใน production ไม่ได้ ต้องใช้ debugger statement

7. ไฟล์ใหญ่

• SiderLayout/index.js (1,168 บรรทัด)
• OtherWelfare/Form/index.js (2,075 บรรทัด)
• LeaveStudiesPayments/form/index.js (1,824 บรรทัด)

---

10 ปัญหาที่ควรเร่งแก้

#	ปัญหา	ความเสี่ยง	ความยาก
1	.env commit ลง git	Critical	ปานกลาง
2	MSSQL SA password รั่วใน bundle	Critical	ยาก
3	SSO bypass token ใน URL	Critical	ปานกลาง
4	dangerouslySetInnerHTML ไม่ sanitize	High	ง่าย
5	ไม่มี CSP	High	ง่าย
6	Bundle ใหญ่ + ไม่มี code splitting	High	ปานกลาง
7	130 MB build/ commit	Moderate	ปานกลาง
8	Snapshot/legacy 75 ไฟล์	Moderate	ง่าย
9	moment.js → dayjs	Moderate	ปานกลาง
10	ไม่มี test	Moderate	ยาก

---

เปรียบเทียบเต็ม — vtrc-rc-backoffice vs vtrc-web

Tech stack

ด้าน	vtrc-rc-backoffice	vtrc-web
React	16.13	16.x
Build	CRA 3.4.3 (ไม่ eject)	Webpack 4 (eject)
Node (Docker)	16	14
Apollo Client	v2 (react-apollo@3.1.5)	v2
AntD	v4.15.4	v3
MUI	v5.11 (ใช้น้อย)	ไม่มี
State	class + Recoil	class
Date	moment.js	moment.js
Charts	chart.js	chart.js
Report	Stimulsoft	ไม่มี

ขนาด

ด้าน	vtrc-rc-backoffice	vtrc-web
Page files	871	~700
Component files	104	~70
Routes	276	~150
GraphQL queries	120	~80
GraphQL mutations	94	~50
Bundle (โหลดตอนเปิด)	~11-13 MB	~12 MB
Build/ commit	130 MB	ไม่ commit

Auth + Apollo

ด้าน	vtrc-rc-backoffice	vtrc-web
Apollo Client ตัว	2 (main + WorkForce)	1
axios	13	0-1
รวม HTTP client	15	1-2
checkLinkURL origins	5+	4
apiKey pattern	UUID ตาม origin	UUID ตาม origin
errorLink refresh	มี	มี
fetchPolicy default	no-cache	no-cache
SSO bypass	มี (/pathLogin/:token/:refreshToken)	ไม่มี

State + styling

ด้าน	vtrc-rc-backoffice	vtrc-web
Recoil	ใช้ (57 atom)	ไม่ใช้
AntD override (compiled CSS)	21,189 บรรทัด	~10,000
Theme typos	มี (template/themeplate/themplate)	ไม่มี
console.* ปิด	ใช่	ใช่

Security

ด้าน	vtrc-rc-backoffice	vtrc-web
.env committed	ใช่ (มี SA password)	ไม่
dangerouslySetInnerHTML	30 ไฟล์	~15 ไฟล์
CSP	ไม่มี	ไม่มี
Stimulsoft + MSSQL string	มี	ไม่มี
ความเสี่ยงรวม	สูง	ปานกลาง

Maintainability

ด้าน	vtrc-rc-backoffice	vtrc-web
Snapshot/legacy ไฟล์	75	~20
Typos	หลายจุด	น้อย
ไฟล์ใหญ่กว่า 1,000 บรรทัด	หลายไฟล์	น้อยกว่า
Test	ไม่มี	ไม่มี

---

สรุป — ทำไมสองแอปต่างกันมาก

แม้จะเป็น frontend คู่กัน (ฝั่ง admin vs ฝั่งพนักงาน) vtrc-rc-backoffice กับ vtrc-web ต่างกันมาก เพราะ:

1. พัฒนาโดยทีมต่างกัน — สันนิษฐานว่าทีมทำแยก ไม่ได้ share pattern
2. เวลาที่เริ่มต่างกัน — backoffice ใหม่กว่า ใช้ AntD v4 + Recoil, vtrc-web เก่ากว่า ใช้ AntD v3
3. ความต้องการต่างกัน — backoffice ต้องการ dynamic menu + report (Stimulsoft), vtrc-web ต้องการความเรียบง่าย
4. ไม่ได้ modernize พร้อมกัน — vtrc-web ค้างอยู่ที่ AntD v3 ส่วน backoffice เริ่มใช้ v4 แต่ไม่สมบูรณ์

---

แนวทาง modernization ระยะยาว

ระยะสั้น (1-2 สัปดาห์)

1. Rotate secret ทั้งหมด (AES key, MSSQL password, API keys)
2. ลบ .env ออกจาก git history
3. เพิ่ม DOMPurify สำหรับ dangerouslySetInnerHTML
4. เพิ่ม CSP ใน public/index.html
5. ลบ build/ ออกจาก git

ระยะกลาง (1-2 เดือน)

6. ย้าย Stimulsoft query ไปฝั่ง backend
7. เปลี่ยน SSO bypass ให้ไม่ส่ง token ใน URL
8. เพิ่ม React.lazy สำหรับ route-level code splitting
9. แทน moment ด้วย dayjs
10. ลบ MUI v5 ออก (ถ้าไม่ใช้)

ระยะยาว (3-6 เดือน)

11. อัปเกรด CRA เป็น Vite หรือ CRA 5
12. อัปเกรด React เป็น 18 + Recoil เป็น Jotai หรือ Zustand
13. อัปเกรด Apollo เป็น v3+
14. เขียน test ขั้นต่ำ (smoke test สำหรับ route หลัก)
15. Refactor ไฟล์ใหญ่ (SiderLayout, OtherWelfare/Form) ให้เล็กลง

---

สรุป Volume 8

Volume นี้เจาะลึก vtrc-rc-backoffice ใน 10 บท:

• บท 7.1 — map ของ src/ + legacy 75 ไฟล์ + typos ที่ห้ามแก้
• บท 7.2 — CRA build + Docker + ปัญหา bundle ใหญ่
• บท 7.3 — Apollo Client 2 ตัว + 15 HTTP client + checkLinkURL
• บท 7.4 — 276 routes + dynamic menu + SSO bypass
• บท 7.5 — 120 queries + 94 mutations จัดกลุ่มตามฟีเจอร์
• บท 7.6 — class vs function + Recoil 57 atom + MUI ที่ไม่ใช้
• บท 7.7 — Login/ManageUser/LeaveStudiesPayments ตัวอย่างจริง
• บท 7.8 — state 3 ระบบ + CSS 7 ชั้น + พ.ศ.
• บท 7.9 — 3 critical + 4 high + 6 performance issues
• บท 7.10 — scorecard 4.2/10 + เปรียบเทียบ vtrc-web

Key takeaways

1. vtrc-rc-backoffice มี security debt รุนแรง — secret รั่ว, ไม่มี CSP, XSS ได้
2. Performance ควรปรับ — bundle ใหญ่, ไม่มี code splitting, 130 MB build/ commit
3. Pattern ผสม class + function + Recoil — ต้องรู้ทั้งคู่
4. Typos + legacy 75 ไฟล์ — เพิ่มความยากในการ maintain
5. ต่างจาก vtrc-web มาก — แม้เป็น frontend คู่กัน

---

ขั้นตอนถัดไป

กลับไปที่ ภาพรวม Volume 7 หรือไปยัง Volume อื่น:

• Volume 8 — vtrc-web Deep Dive
• Volume 3 — vtrc-api Deep Dive
• Volume 10 — Security