2way-meeting-backoffice — Repository Map

บทนี้เป็นแผนที่ไฟล์ของ 2way-meeting-backoffice (branch: prod, 521 tracked files, ~368 ไฟล์ .ts/.tsx/.js ใต้ src/)

ชื่อ package: reportmonitor@5.0.0 (package.json:2-3)

แผนที่โฟลเดอร์ระดับ repo

2way-meeting-backoffice/                 (branch: prod)
├── package.json                         # name=reportmonitor, scripts port 8002
├── next.config.js                       # basePath /2way-backoffice, env map, Sentry wrap COMMENT OUT
├── next-i18next.config.js               # locales th/en, defaultLocale th
├── sentry.client.config.js              # Sentry.init browser + hardcoded DSN fallback
├── sentry.server.config.js              # Sentry.init server + hardcoded DSN fallback
├── Dockerfile                           # node:18 multi-stage → next start :8002
├── docker-compose.yml
├── bitbucket-pipelines.yml              # yarn build → GCP docker → terraform
├── .env / .env.example / .env.production / .env.uat
├── jest.config.js / jest.setup.ts
├── __test__/                            # enzyme + jest (React 17 era)
├── public/
│   ├── css/, sass/, fonts/, images/
│   ├── locales/{th,en,de}/
│   └── mockDatas/
│       ├── navbar2WayBackoffice.json    # menu แอดมินหลัก
│       └── navbar2WayBackofficeNonEmp.json
└── src/
    ├── pages/                           # Next.js Pages Router (~50 page files)
    ├── features/
    │   ├── 2way/                        # LIFF employee features
    │   ├── BackOffice/                  # Admin features
    │   └── Satisfaction/                # Chat-center satisfaction report UI
    ├── services/                        # axios wrappers → 2way-api (+ incidents)
    ├── utils/                           # auth, fetchAPI*, chatCenterApi
    ├── HOC/                             # withAuth*, withAuthVerify, withAuthSuperAdmin
    ├── layouts/                         # Layout3 (active), Layout2Way*, styled
    ├── components/                      # navbar, sideMenu, form, table, ...
    ├── hooks/                           # useChatCenter*
    ├── stores/atoms/                    # loginTypeAtom, tokenAtom (Recoil)
    ├── context/                         # StoreProvider
    ├── types/
    └── styles/

Scripts และ build artifacts

Script	พฤติกรรม	อ้างอิง
`yarn` / `yarn install`	ติดตั้ง deps (Docker ใช้ `--frozen-lockfile`)	`Dockerfile:7`, `Readme.md`
`yarn dev`	`ENV_STAGE=development next dev -p 8002`	`package.json:7`
`yarn build`	`next build` → ผลิตโฟลเดอร์ `.next/` (ไม่ commit)	`package.json:8`, `Dockerfile:19`
`yarn start`	`next start -p 8002`	`package.json:9`
`yarn out` / `yarn export`	`next build && next export` → static `out/`	`package.json:9,14`
`yarn test`	jest + enzyme watch	`package.json:13`
`yarn lint`	`next lint` — CI มี step แต่ build ignore ESLint errors	`package.json:12`, `next.config.js:25-28`

Build artifact ที่สำคัญ:

.next/ — output ของ next build; Docker runner copy เข้า image (Dockerfile:31)
out/ — ถ้าใช้ next export (script มี แต่ pipeline หลักใช้ yarn build + next start ไม่ใช่ static host)
Docker image ฝัง .env.production เข้า image โดยตรง (Dockerfile:27) — ค่า hostname ปลายทางอยู่ใน image

สิ่งที่ Next ปิดระหว่าง build (อันตรายต่อคุณภาพ):

eslint: { ignoreDuringBuilds: true },
typescript: { ignoreBuildErrors: true },

(next.config.js:25-36)

Pages Router — แผนที่ route ทั้งหมด

basePath = /2way-backoffice ดังนั้น path ด้านล่างคือ path ของ Next pages; URL จริง = /2way-backoffice + path

Layout convention

แต่ละ page ตั้ง Component.layout เป็น string:

layout	ความหมาย	ผลใน `Layout3`	Auth guard
`L2`	Backoffice แอดมิน	แสดง `Navbar` + `SideMenu` (`layouts/Layout3.tsx:13-16`)	`withAuthVerify` ตรวจ token เมื่อ `layout == "L2"` (`HOC/withAuthVerify.tsx:11,58-60`)
`L1`	LIFF content / Feedback public	ไม่มี navbar/sidemenu	ไม่ verify
`L3`	Login / entry / loading	ไม่มี navbar/sidemenu	ไม่ verify

A) Auth / entry (layout L3)

Page file	Route (หลัง basePath)	Feature	layout
`src/pages/index.tsx`	`/`	`features/BackOffice/Login`	L3 (`index.tsx:11`)
`src/pages/2wayfrontend/index.tsx`	`/2wayfrontend`	Login (ซ้ำ entry)	L3
`src/pages/2wayfrontend/Forgot/index.tsx`	`/2wayfrontend/Forgot`	Forgot password OTP flow	L3
`src/pages/2wayfrontend/bypassLogin/[token].tsx`	`/2wayfrontend/bypassLogin/{token}`	SSO/bypass จาก VTRC backoffice	L3 (`:101`)

B) Backoffice แอดมิน (layout L2)

Page file	Route	Feature module
`.../2waybackoffice/Backoffice/index.tsx`	`/2wayfrontend/2waybackoffice/Backoffice`	landing แอดมิน
`.../ChatCenter/index.tsx`	`.../ChatCenter`	`features/BackOffice/ChatCenter`
`.../ChatCenter/admin.tsx`	`.../ChatCenter/admin`	`ChatCenter/admin` — ทีมแอดมิน (teamAdmin)
`.../Announce/Dashboard/index.tsx`	`.../Announce/Dashboard`	Announce list
`.../Announce/Create/index.tsx`	`.../Announce/Create`	สร้างประกาศ
`.../Announce/Edit/[id].tsx`	`.../Announce/Edit/{id}`	แก้ไข
`.../Announce/View/[id].tsx`	`.../Announce/View/{id}`	ดู
`.../Survey/Dashboard\|Create\|Edit\|View`	`.../Survey/...`	Survey CRUD + approve/reject
`.../Question/Dashboard\|Create\|Edit`	`.../Question/...`	FAQ CRUD → `2way-vtrc-api`
`.../Feedback/Dashboard\|Edit/[id]`	`.../Feedback/...`	Complaints workflow (layout L2)
`.../Feedback/[uuid].tsx`	`.../Feedback/{uuid}`	layout L1 — หน้า public/share
`.../Satisfaction/index.tsx`	`.../Satisfaction`	`features/Satisfaction` report

Navbar mock ที่ SideMenu อ่าน (public/mockDatas/navbar2WayBackoffice.json:1-34):

Chat Center
จัดการแบบสำรวจ          → Survey/Dashboard
จัดการแบบสำรวจความพึงพอใจ → Satisfaction
จัดการข้อเสนอแนะ/คำแนะนำ → Feedback/Dashboard
จัดการประกาศที่ต้องรับทราบ → Announce/Dashboard

หมายเหตุ: หน้า Question/* มีอยู่และทำงาน แต่ ไม่อยู่ใน navbar JSON ชุดหลัก — เข้าได้ด้วย URL โดยตรงหรือลิงก์ภายใน

C) LINE LIFF — Red Cross OA (`/line/...`, layout L1 / L3)

Page	Route	Feature
`pages/line/index.tsx`	`/line`	loading shell (L3)
`line/Announce/List\|ListNew\|ListKnow\|Detail/[id]`	`/line/Announce/...`	ประกาศ
`line/Survey/index.tsx`	`/line/Survey`	แบบสำรวจ
`line/Complaint/{index,List,Detail/[id]}`	`/line/Complaint/...`	ร้องเรียน
`line/Incident/{index,List,Detail/[id]}`	`/line/Incident/...`	แจ้งปัญหาการใช้งาน
`line/Problem/{index,List,Detail/[id]}`	`/line/Problem/...`	FAQ / ถามตอบ
`line/Register/index.tsx`	`/line/Register`	ลงทะเบียน LINE user
`line/Satisfaction/{index,Form,Step/[step]}`	`/line/Satisfaction/...`	แบบประเมินความพึงพอใจ (ฝั่งพนักงาน)

D) LINE LIFF — CU OA (`/line-cu/...`)

Page	Route	Feature
`pages/line-cu/index.tsx`	`/line-cu`	loading shell (L3)
`line-cu/Register/index.tsx`	`/line-cu/Register`	`features/2way/RegisterCu`

LIFF ID แยก RC / CU และแยก prod / non-prod ใน _app.tsx:70-87

Feature module breakdown

`features/2way/` — พนักงาน (LIFF)

Folder	หน้าที่	Backend หลัก
`Announce/{List,ListNew,ListKnow,Detail}`	อ่าน/รับทราบประกาศ	`appConnectChatAPI` `/getProfile` + 2way-api announces (บางจุด)
`Survey`	ทำแบบสำรวจ	`getProfile` + surveys API
`Complaint/{List,Detail}`	ยื่น/ติดตามเรื่องร้องเรียน	`getProfile` + complaints
`Incident/{List,Detail}`	แจ้งปัญหาการใช้งาน	`getProfile` + `appConnectIncidentAPI`
`Problem/{List,Detail}`	FAQ / ส่งคำถาม	`/getListFAQs`, `/createQuestion`, `/sendMessageLineFAQsStepYes`
`Register`	ลงทะเบียน RC	`/verifyUserLine`, `/verifyOTPUserLine`, `/createUserLine`
`RegisterCu`	ลงทะเบียน CU	path เดียวกันต่อท้าย `/cu`

`features/BackOffice/` — แอดมิน

Folder	หน้าที่	Backend หลัก
`Login`, `Forgot`	login / ลืมรหัสผ่าน	`2way-api` `/api/v1/auth*`
`Announce/{Dashboard,Create,Edit,View}`	CRUD ประกาศ + `contentAssigns` (ผู้รับ)	`services/announces.tsx` → `2way-api`
`Survey/{Dashboard,Create,Edit,View}`	CRUD + `adminApprove` / `adminReject`	`services/surveys.tsx`
`Question/{Dashboard,Create,Edit}`	FAQ admin	`appConnectChatAPI` `/getListFAQs`, `/addNewFAQs`, `/updateFAQs`
`Feedback/{Dashboard,Edit}`	complaint workflow (assign / secretary / superAdmin)	`api/v1/complaints/*` inline ใน Form
`ChatCenter`	realtime chat UI + notes + appointment	`chat-center-api` + websocket
`ChatCenter/admin`	จัดการทีมแอดมิน (teamAdmin) + tags + members	`teamAdmin/*`, `tags/list`
`ChatCenter2`	สำเนา/ทดลอง (มีใน tree — ไม่ใช่ route หลัก)	—

`features/Satisfaction/`

หน้า report คะแนนความพึงพอใจของ Chat Center — เรียก getSatisfactionSurvey / postSatisfactionSurveyGenSurvey จาก utils/chatCenterApi.tsx (features/Satisfaction/index.tsx:13-15,58)

Layouts และ shell UI

_app.tsx
  └── appWithTranslation(withAuthVerify(MyApp))     (_app.tsx:152)
        └── RecoilRoot → StoreProvider → ThemeProvider
              └── Layout3(level=Component.layout)   (_app.tsx:137-139)
                    ├── Navbar     (ถ้า L2)
                    ├── SideMenu   (ถ้า L2)
                    └── children (page)

ไฟล์ layout อื่นที่มีอยู่แต่ไม่ใช่ shell หลักของ _app:

layouts/Layout2Way.tsx, Layout2WayBackoffice.tsx — legacy / feature-specific
layouts/styled.tsx, type.tsx

Utils / services / HOC — ชั้นเรียก API

ไฟล์	บทบาท
`utils/auth.tsx`	`setToken` / `getToken` / `setProfile` / `getProfile` / `getUserInfo` / `clearAllStorage` — เก็บใน `localStorage`
`utils/fetchApiWithAxios.tsx`	`fetchAPI` → `${appConnectAPI}/{url}` + Bearer; `fetchRedCrossAPI` → `${appConnectRedCross}/{url}`
`utils/fetchApiWithAxiosCustom.tsx`	`fetchAPICustom` — caller ส่ง absolute URL เอง
`utils/fetchApiWithAxiosByFixed.tsx`	variant เพิ่มเติม
`utils/chatCenterApi.tsx`	typed wrappers สำหรับ chat-center (teamAdmin, rooms, tags, satisfaction, noti)
`services/announces.tsx`	announces CRUD → 2way-api
`services/surveys.tsx`	surveys CRUD + approve/reject
`services/employee.tsx`	org/divi/dept/position/group/admin dropdowns
`services/chat-center.tsx`	`getChatDetail` (hardcoded roomEmpCode)
`services/line/incidents.tsx`	incident-management-api
`services/feedback.tsx`	ไฟล์ว่าง — Feedback เรียก `fetchAPI` inline ใน component
`HOC/withAuthVerify.tsx`	active ใน `_app` — guard L2
`HOC/withAuth.tsx`	มีอยู่แต่ comment ออก จาก `_app` (`_app.tsx:148`)
`HOC/withAuthSuperAdmin.tsx`	เช็คแค่มี `accessToken` — ชื่อหลอก (ไม่มีเช็ค level)
`HOC/withAuth copy*.tsx`	backup — ตามกฎ workspace อย่าลบโดยไม่ตรวจ

Env mapping (`next.config.js`)

next.config.js:49-74 inject ค่าเข้า process.env ของ client:

Client key	Source env
`appConnectAPI`	`APP_CONNECT_API`
`appConnectChatCenterAPI`	`APP_CONNECT_API_CHAT`
`appConnectIncidentAPI`	`APP_CONNECT_API_INCIDENT`
`appConnectChatAPI`	`APP_CONNECT_API_BASIC`
`appConnectRedCross`	`APP_PATH`
`appConnectWebSocket`	`APP_WEBSOCKET`
`chatCenterPath`	hardcode `"chat-center-api/api/v1"` (`next.config.js:73`)
`assetPrefix`	hardcode `"/2way-backoffice"`
`customKey` / `apiKey`	hardcode `"my-value"` (placeholder)

ค่า DB/SMTP ใน env (APP_CONNECT_DB_*, APP_CONNECT_SMTP_*) ถูก map ด้วย แต่ frontend นี้ ไม่มี DB driver — ค่าเหล่าน่าจะเป็น remnant จาก scaffold reportmonitor

Docker และ CI

Dockerfile (3 stages)

deps — node:18, yarn install --frozen-lockfile (Dockerfile:2-7)
builder — NODE_ENV=production, yarn build (:13-19)
runner — copy .env.production, next.config.js, public, .next, node_modules; EXPOSE 8002; CMD next start (:22-37)

bitbucket-pipelines.yml

image: node:18 (bitbucket-pipelines.yml:6)
steps: build-test (yarn + yarn build), linting, build-docker-image (push GCP registry พร้อม tag commit short), terraform apply
branches ที่เห็นในไฟล์: cicd (+ อ่านต่อท้ายไฟล์สำหรับ prod / อื่น ๆ)

Test surface

__test__/ ครอบคลุม component ย่อย (InputText, buttons, Layout) ด้วย enzyme — ไม่พบ integration test ที่ยิง backend จริงหรือ e2e ของ ChatCenter/LIFF ใน tree ที่ตรวจ

สรุปตำแหน่งที่ต้องอ่านก่อนแก้โค้ด

next.config.js — basePath + env map + build ignore flags
src/pages/_app.tsx — LIFF init + layout shell + HOC ห่อแอป
src/HOC/withAuthVerify.tsx — guard จริงของ L2
src/utils/auth.tsx + fetchApiWithAxios.tsx + chatCenterApi.tsx — token และ API
src/features/BackOffice/ChatCenter/ — พื้นที่ใหญ่สุดและซับซ้อนสุดของ repo
public/mockDatas/navbar2WayBackoffice.json — เมนูที่ผู้ใช้เห็น

2way-meeting-backoffice — Repository Map ​

แผนที่โฟลเดอร์ระดับ repo ​

Scripts และ build artifacts ​

Pages Router — แผนที่ route ทั้งหมด ​

Layout convention ​

A) Auth / entry (layout L3) ​

B) Backoffice แอดมิน (layout L2) ​

C) LINE LIFF — Red Cross OA (/line/..., layout L1 / L3) ​

D) LINE LIFF — CU OA (/line-cu/...) ​

Feature module breakdown ​

features/2way/ — พนักงาน (LIFF) ​

features/BackOffice/ — แอดมิน ​

features/Satisfaction/ ​

Layouts และ shell UI ​

Utils / services / HOC — ชั้นเรียก API ​

Env mapping (next.config.js) ​

Docker และ CI ​

Dockerfile (3 stages) ​

bitbucket-pipelines.yml ​

Test surface ​

สรุปตำแหน่งที่ต้องอ่านก่อนแก้โค้ด ​