new-vtrc-mobile — Six Screens

บทนี้ (branch: master) ลงรายละเอียดหน้าจอที่มีใน repo — 6 ไฟล์ screen; 5 เข้า navigator, 1 ถูกตัดออก

---

ตารางหน้าจอ

#	Screen	Path	In navigator?	Citation
1	Login	src/screens/Login/LoginScreen.tsx	ใช่ — AuthNavigator	AuthNavigator.tsx:13
2	Home	src/screens/Home/HomeScreen.tsx	ใช่ — HomeNavigator → tab	BottomTabNavigator.tsx:19
3	Menu	src/screens/Menu/MenuScreen.tsx	ใช่ — MenuNavigator	BottomTabNavigator.tsx:20
4	Setting	src/screens/Setting/SettingScreen.tsx	ใช่ — SettingNavigator	BottomTabNavigator.tsx:21
5	CheckEmpCode	src/screens/CheckEmpCode/CheckEmpCode.tsx	ไม่ — comment	AuthNavigator.tsx:5,12
6	(Login subcomponents)	Login/components/*	ผ่าน Login	StipulationModal, ReportModal, Logo, ContactUs, AlertModal

หมายเหตุ: "6 screens" ในภาพรวมนับ CheckEmpCode เป็นหน้าที่มีโค้ดแม้ยังไม่ mount — หน้า runtime ที่ผู้ใช้ถึงได้จริงหลัง build ปัจจุบันคือ Login + 3 tabs = 4 routes

---

1. LoginScreen

หน้าที่ซับซ้อนที่สุดใน repo

ส่วน	รายละเอียด	Citation
Form	react-hook-form + yup resolver	LoginScreen.tsx + package.json:33,56
Captcha	เรียก generateCaptcha จาก authService	ผ่าน service
SSO	ssoCheckEmpLogin ก่อน login เต็ม	authService.ts:57-96
Encrypt	password → encryptToBase64	EncryptCrypto.ts
Modals	Stipulation / Report / Alert / ContactUs	screens/Login/components/
Success	dispatch(setLoginData) → isLoggedIn=true → RootNavigator สลับแท็บ	authSlice.ts:28-35

Language สลับผ่าน i18n (locales/th.json, en.json)

---

2. HomeScreen

ส่วน	สถานะ
Layout	Home/components/Layout.tsx, SwipperBanner.tsx
News API	newsService.fetchNews มีใน service แต่ Home ยังไม่ผูก state เต็ม (มี console.log pattern ตามที่ระบุใน 01-map)
Tab	ภายใต้ HomeNavigator

ยังไม่ใช่ home แบบ vtrc-mobile ที่มีเมนูสวัสดิการเต็มชุด

---

3. MenuScreen

ส่วน	สถานะ
ไฟล์	MenuScreen.tsx + styles.ts
บทบาท	placeholder / scaffold ของเมนูรวม
Tab	MenuNavigator

ยังไม่มี deep link ไปโดเมน leave/hospital ตาม legacy mobile

---

4. SettingScreen

ส่วน	สถานะ
ไฟล์	SettingScreen.tsx + styles.ts
บทบาท	settings scaffold (ภาษา / เกี่ยวกับแอป ฯลฯ ตามที่ implement ในไฟล์)
Tab	SettingNavigator

---

5. CheckEmpCode (orphan)

มี CheckEmpCode.tsx + styles แต่:

// import CheckEmpCodeScreen from '@/screens/CheckEmpCode/CheckEmpCode';
{/* <Stack.Screen name="CheckEmpCode" ... /> */}

(AuthNavigator.tsx:5,12)

เป็นซาก pattern login 2 ขั้น (กรอก empCode ก่อน) ที่ถูกปิด — QUAL-NEW-05

---

Navigation tree

RootNavigator
├── AuthStack (เมื่อ !isLoggedIn)
│   └── Login
│   └── (CheckEmpCode — dead)
└── AppStack (เมื่อ isLoggedIn)
    └── BottomTabNavigator + MyTabBar
        ├── HomeNavigator → HomeScreen
        ├── MenuNavigator → MenuScreen
        └── SettingNavigator → SettingScreen

MyTabBar เป็น custom tab bar (navigation/MyTabbar.tsx) — options icon แบบ Ionicons ใน BottomTabNavigator ถูก comment ทิ้ง (BottomTabNavigator.tsx:22-43)

---

Shared UI kit (ยังไม่นับเป็น "screen")

ใช้ซ้ำข้ามหน้า:

Group	Components
form	FormInput, FormCheckbox, FormRadio, FormDropdown, FormDateTimePicker
button	SubmitButton, OutlineButton
modal	CenterModal, BottomSheetModal, ConfirmAlert, AppLoading
layout	AppLayout, LinearGradientLayout, Spacer

มี unit tests ใน __tests__/components/ สำหรับหลายตัว — จุดแข็งเทียบ vtrc-mobile

---

TypeScript boundary

• ทั้ง src/ เป็น .ts / .tsx
• tsconfig.json + path alias @/
• Zod schemas ใน services/schema.ts validate response ก่อนเข้า redux
• ไม่พบไฟล์ .js ใน src/ (ยกเว้น entry index.js ที่ root ของ RN project)

---

Six-screen checklist (wired vs stub)

#	Screen	Wired in navigator?	Business logic depth
1	Login	ใช่	สูง — captcha, SSO, csID, login, modals
2	Home	ใช่	ต่ำ — fetch news ยังไม่แสดงครบ
3	Menu	ใช่	ว่าง
4	Setting	ใช่	logout เท่านั้น
5	CheckEmpCode	ไม่ (comment)	stub
6	(ไฟล์ที่ 6 นับรวม CheckEmpCode + Login subcomponents นับเป็นส่วนของ Login)	—	Login มี components ย่อยหลายไฟล์

สรุป parity: ไม่เทียบเท่า vtrc-mobile — เป็น architecture shell ที่ auth ทำงานจริงกับ UAT backend