7.3.1 · Repository map

branch: UAT (56 tracked files)

---

แผนที่โฟลเดอร์

meeting-backoffice-new/                 (branch: UAT)
├── package.json                        # name meeting-backoffice, homepage /meeting-backoffice
├── package-lock.json                   # npm (ไม่มี yarn.lock)
├── Dockerfile                          # node:16.17.0-alpine, npm start
├── docker-compose.yml                  # gcr.io image + BASE_PATH + external network
├── README.md                           # CRA default Getting Started
├── build/                              # ★ CRA production build COMMITTED
│   ├── index.html
│   ├── asset-manifest.json
│   └── static/js/main.633a23c6.js      # shasum ae9f0706… — embed ใน 3 backoffice
├── public/                             # CRA public (favicon, manifest, robots)
└── src/
    ├── index.tsx                       # createRoot + BrowserRouter
    ├── App.tsx                         # Routes × 5
    ├── App.test.tsx / setupTests.ts / reportWebVitals.ts
    ├── pages/
    │   ├── index.tsx                   # list group (useEffect fetch)
    │   ├── listapprover/index.tsx
    │   ├── creategroup/index.tsx
    │   ├── editgroup/index.tsx
    │   └── createapprover/index.tsx
    ├── layouts/ Layout, Navbar, Sidebar
    ├── components/
    │   ├── listsgroup/, listapprover/
    │   ├── table/DataGrid*
    │   ├── form/, button/
    │   └── circular/                   # loading spinner (ไม่มีใน Next twin)
    ├── types/ listGroup, listApprover, ...
    └── styles/theme.tsx

ไม่มี: .env*, sentry.*, [token] route, next.config.js, public/locales/

---

Routes (App.tsx)

<Routes>
  <Route element={<Layout />}>
    <Route path="/" element={<Home />} />
    <Route path="/listapprover" element={<ListApproverPage />} />
    <Route path="/creategroup" element={<Employee />} />
    <Route path="/createapprover" element={<Approver />} />
    <Route path="/editgroup" element={<EditEmployee />} />
  </Route>
</Routes>

(src/App.tsx:17-24)

URL จริงหลัง embed = /meeting-backoffice + path ด้านบน

Sidebar

ลิงก์ใช้ process.env.PUBLIC_URL (Sidebar.tsx:54,63):

• ${PUBLIC_URL}/ — สร้างกลุ่ม (หน้า list)
• ${PUBLIC_URL}/listapprover — รายชื่อผู้อนุมัติ

เหมือน Next twin: ไม่มี เมนูตรงไป editgroup / createapprover — เข้าจากปุ่มใน list

---

ความเหมือน / ต่างกับ meeting-backoffice (Next)

เหมือน	ต่าง
ชื่อหน้า pages ครบชุดเดียวกัน	CRA vs Next
Layout/Sidebar/Navbar โครงเดียวกัน	ไม่มี [token].tsx
Endpoint /secure/* ชุดเดียวกัน	Env REACT_APP_* แทน NEXT_PUBLIC_*
Listsgroup / ListApprover	List ใช้ client fetch ไม่ใช่ SSG
	มี components/circular
	Bearer testnaja บน 2way search
	Commit build/ + embed

สรุป: เป็น port จาก Next twin เป็น CRA เพื่อ static host ใต้ legacy backoffice

---

Embedded build artifacts — หลักฐาน shasum

ตรวจเมื่อเขียนเอกสาร (sha1):

ae9f070679b81ea977bf6ea091b7b5e7da0ffd63  meeting-backoffice-new/build/static/js/main.633a23c6.js
ae9f070679b81ea977bf6ea091b7b5e7da0ffd63  vtrc-backoffice/meeting/static/js/main.633a23c6.js
ae9f070679b81ea977bf6ea091b7b5e7da0ffd63  vtrc-backoffice-new/meeting/static/js/main.633a23c6.js
ae9f070679b81ea977bf6ea091b7b5e7da0ffd63  vtrc-rc-backoffice/meeting/static/js/main.633a23c6.js

build/index.html อ้าง:

<script defer src="/meeting-backoffice/static/js/main.633a23c6.js"></script>
<base href="/meeting-backoffice/"/>

ผลต่อ workflow แก้บั๊ก

1. แก้ src/ ใน repo นี้
2. npm run build
3. copy build/ ไปทับ */meeting/ ใน backoffice ที่เกี่ยวข้อง
4. commit ทั้งสองฝั่ง (หรืออย่างน้อยฝั่งที่ deploy)

ไม่มี pipeline ใน repo นี้ที่ทำข้อ 3 ให้อัตโนมัติ (ไม่พบ bitbucket/GitHub Actions ใน tree)

---

Module breakdown — group / approver

Module	ไฟล์	บทบาท
Home list group	pages/index.tsx	fetch(REACT_APP_MEETING_API + /secure/group/listgroup) ใน useEffect
List approver	pages/listapprover/index.tsx	.../secure/approver/listApprover
Create group	pages/creategroup/index.tsx	org dropdown + 2way search + creategroup
Edit group	pages/editgroup/index.tsx	โหลด list + editgroup
Create approver	pages/createapprover/index.tsx	deleteapprover → addNewApprover
Listsgroup UI	components/listsgroup/Listsgroup.tsx	ตาราง + นำทาง create/edit
ListApprover UI	components/listapprover/ListApprover.tsx	ตาราง + นำทาง createapprover
Loading	components/circular/index.tsx	spinner ตอน fetch หน้า home

---

Docker files (มี แต่ไม่ใช่หลักฐาน embed)

Dockerfile

FROM node:16.17.0-alpine
WORKDIR /usr/src/app
COPY package.json ./
COPY . .
RUN npm install
EXPOSE 3000
CMD ["npm", "start"]

(Dockerfile:1-8) — รัน CRA dev server

docker-compose.yml

services:
  meetingbo:
    image: gcr.io/vtrc-nonprod/meeting-backoffice:latest
    environment:
      - BASE_PATH=/meeting-backoffice
    ports:
      - 3001:3000
    networks:
      - uat-vtrc-backoffice-network

(docker-compose.yml:3-16)

หมายเหตุ: CRA ไม่ได้อ่าน BASE_PATH — mount path มาจาก homepage / PUBLIC_URL ตอน build เท่านั้น env นี้จึงอาจไม่มีผลต่อ SPA ที่ build แล้ว

---

สิ่งที่ต้องรู้ก่อนเปิดไฟล์

1. แก้ UI ที่ผู้ใช้เห็นใน legacy backoffice → แก้ repo นี้ แล้ว rebuild embed
2. ถ้าต้องการ Next service แยกที่ /meetingbo → คนละ repo (meeting-backoffice)
3. ไม่มีไฟล์ .env ใน git — ค่า API ต้องมาจากเครื่อง/CI ที่ build