Skip to content

vtrc-mobile — Features map

บทนี้จัด 120+ scene ของ vtrc-mobile (branch: master) เป็น cluster ตาม domain พร้อม scene key, container, GraphQL/REST หลัก และ notification deep-link

จุดประสงค์: หาไฟล์เจอเร็วเมื่อต้องแก้ฟีเจอร์ — ไม่ใช่ business-rule deep dive (กฎธุรกิจละเอียดอยู่ใน Volume 1 ตาม convention ของคู่มือ)

หลักฐานโครง scene รวม: vtrc-mobile/App.js:228-1062


แผนที่ cluster แบบย่อ

Auth / Onboarding ── Login, Verify, SSO, Captcha, Biometric
Main shell ────────── MainMenu, AllListMenu, Timeline, Time
News / Noti ───────── News*, Notification*
Org / Docs ────────── OrgInfo, Principle*, QualityDocument, Orientation
Contact ───────────── Contact*, ContactHR*
Leave ─────────────── Leave*, StudyLeave*, ManualLeave, Approve*
Welfare medical ───── Merdical* / Medical*, witchdraw menu
Welfare other ─────── ChildTuition, Delegate, Disaster, Tuition, Benefit*
Payslip / Fund / Tax ─ PaySlip*, Provident*, TaxReduction*
Meeting ───────────── meeting-management/* → MEETING_API (UAT)
PMS ───────────────── ManualPMS, Evaluators, Evaluation*, ViewPDF*
Recruitment ───────── Recruitment*, ApplyWork, WorkWithUs (REST)
Course / Conicle ──── GuestCourse*, CourseConicle, Conicle WebView
Profile / Setting ─── Profile, PersonalInfo, Setting, UpdateVersion

A. Auth / onboarding / SSO

Containers และ scene

Scene keyContainerบทบาท
initInit.jsinitial scene หลัง boot
introIntro.jsonboarding slides (firsttime)
decideenterDecideEnter.jsเลือกล็อกอิน / สมัคร
loginLogin.jsฟอร์ม login (อาจ redirect ไป CheckLogin)
checkloginCheckLogin.jslogin + captcha + biometric entry
verifyVerify.jsmulti-step verify ตาม FlowVerify
fillprofileFillProfile.jsกรอกโปรไฟล์หลัง verify
forgotForgot.jsลืมรหัสผ่าน
empregistrationEmpRegistration.jsสมัครพนักงาน
termTerm.jsข้อกำหนด
changepasswordChangePassword.jsเปลี่ยนรหัส
verifysso / otpsso / changepasswordsso / settingsecuressoSSO containersflow SSO ภายนอก

หลักฐาน: App.js:229-261, 379-398, 949-967

Data layer

ชนิดไฟล์
Thunkssrc/features/authSlice.jscheckLogin, login, logout, verify, setupPassword, changePassword, refreshToken, generateCaptcha, createAuthSession, authenBiometric, …
GQL querysrc/gql/query/auth.jsVERIFY_USER_QUERY, REFRESH_TOKEN, GENERATE_CAPTCHA, DOMAIN_LISTS, STATUS_AUTH_SESSION, …
GQL mutationsrc/gql/mutation/auth.jsLOGIN_MUTATION, LOGIN_BYPASS_MUTATION, LOGOUT_MUTATION, …
csId cryptosrc/utils/login.jsmakeCsID
SSO RESTsrc/actions/ssoSlice.js${HOST}/SSOService/*
Constantssrc/constants/FlowVerify.js, Authen.js

พฤติกรรมที่ควรรู้

  • organization hardcode UUID 3F3BF3AD-B4C9-4D44-A56F-AB55C4E4FB01-00 ใน CheckLogin.js:63 และ authSlice.js:145
  • หลัง login สำเร็จถ้า fetchProfile.isTrial → ไป courseconicle แทน mainmenu (authSlice.js:412-416)
  • Captcha: error codes จาก fetch.js บังคับ Actions.checklogin + setDisplayCaptcha(true)

รายละเอียด pipeline เต็ม: 02-core-pipeline


B. Main shell / timeline / time attendance

Scene keyContainerData
mainmenuMainMenu.jshub หลัง login; อ่าน AsyncStorage showPopUp / tutorial (MainMenu.js:282-297)
alllistmenuAllListMenu.jsเมนูรวม
timelineTimeline.jsไทม์ไลน์กิจกรรม
timeTime.jsเวลาเข้างาน — TIME_ATTENDANCE_BY_DATE_QUERY (gql/query/time.js:3) ผ่าน features/timeSlice.js

MainMenu เป็นจุดที่ notification deep-link จำนวนมากเด้งกลับเมื่อ session เพี้ยน (fetch.js TOKEN_INVALID → Actions.mainmenu)


C. News / notifications

Scenes

Scene keyContainer
news / newslist / newslistguest / newsearchNews.js, NewsList.js, NewsListGuest.js, NewsSearch.js
notification / notificationlist / notificationgroupNotification.js, NotificationList.js, NotificationGroup.js
settingnotificationSettingNotification.js
subscribeSubscribe.js

Data

  • Query: gql/query/news.js, gql/query/notification.js
  • Mutation: CREATE_POST_READ_MUTATION, CREATE_USER_READ_NOTIFICATION_MUTATION, …
  • Slice: features/newsSlice.js, features/notificationSlice.js
  • Constants: constants/News.js, constants/Notification.js
Payload fieldการนำทาง
data.newsActions.news({postId}) หรือ newslist / guest ตามสถานะ login (NotificationEvent.js:82-92)
data.notificationnotificationlist หรือ notification ตาม context (:99-119)
(ว่างบางเคส)notificationgroup (:147)

ไฟล์: src/components/shared/NotificationEvent.js:44-265


D. Organization info / principles / quality documents

Scene keyContainerหมายเหตุ
orginfo / orginfolistOrgInfo.js, OrgInfoList.jsเกี่ยวกับองค์กร — gql/query/about.js
principlelist / principlesub / principle / principlesearch / principledocumentqualityPrinciple*.jsระเบียบ/เอกสาร
qualitydocument / listdocuments / searchresultQualityDocument.js, ListDocuments.js, SearchResult.jsKCMH / Chula docs ใน gql/query/document.js
orientationOrientation.jsorientation content

Slice: documentSlice.js, aboutusSlice.js

Query ชุดใหญ่ใน document.js (311 บรรทัด): FETCH_LIST_DOCUMENT_*, FETCH_LIST_KCMH_*, FETCH_LIST_DOCUMENTS_CHULA_QUERY, dropdown master data


E. Contact directory

Scene keyContainer
contactContact.js
contacthr / contacthrdetailContactHR.js, ContactHRDetail.js
contactorgContactOrg.js

Data: gql/query/contactus.js + features/contactusSlice.js + constants/Contactus.js

Queries: FETCH_LIST_CONTACTUS_QUERY, FETCH_LIST_CONTACTUS_CATEGORY_QUERY, FETCH_LIST_REF_ORG_BELONGS


F. Leave (การลา)

Leave ถูกเก็บ state ใน features/withdrawSlice.js และ operations ส่วนใหญ่อยู่ใน gql/query/withdraw.js / mutation/withdraw.js — ชื่อ slice ไม่สื่อว่าเป็น leave (QUAL-MOBILE-05)

พนักงาน

Scene keyContainer
leaveLeave.js
leavedetailLeaveDetail.js (ใช้ HOST จาก HostApi สำหรับบาง URL)
listallleaveListAllLeave.jsScene ประกาศซ้ำสองครั้ง ใน App.js:609-615
manualleaveManualLeave.js
reportleaveReportLeave.js
studyleave / studyleavedetail / liststudyleaveStudy leave containers

ผู้อนุมัติ / ยกเลิก

Scene keyContainer
leavelistapprove / leaveapproveLeaveListApprove.js, LeaveApprove.js
leaveapprovebynotificationLeaveApproveByNotification.js
leavecanclelistapprove / leavecancledocapprovetypo Cancle ในชื่อไฟล์และ scene

GQL ตัวอย่าง (withdraw.js)

  • FETCH_LEAVE_TYPE_QUERY, FETCH_LEAVE_DOCUMENT_LIST_QUERY, FETCH_LEAVE_DOCUMENT_DETAIL_QUERY
  • FETCH_LIST_LEAVE_DOCUMENT_APPROVER_QUERY, FETCH_LEAVE_DOCUMENT_HISTORY_QUERY
  • FETCH_LIST_STUDY_LEAVE_QUERY, FETCH_LIST_STUDY_LEAVE_DEATIL_QUERY (typo DEATIL)
  • Mutations: CREATE_LEAVE_DOCUMENT_MUTATION, UPDATE_LEAVE_DOCUMENT_MUTATION, approve/cancel-as-flow ชุดใหญ่
Payloadพฤติกรรมหลักฐาน
LEAVE_DETAILโหลด detail/history แล้วไปหน้า leave ที่เกี่ยวข้องNotificationEvent.js:186-211
LEAVE_APPROVEโหลดเอกสารสำหรับอนุมัติ:215-230
LEAVE_CANCEL_APPROVE + WD_LEAVE_IDflow ยกเลิก:234-245

G. Welfare — medical expenses (เบิกค่ารักษา)

Typo Merdical / scene witchdraw ฝังทั่วไฟล์ — parallel กับ debt ใน vtrc-web (QUAL-MOBILE-01)

Scenes

Scene keyContainer
witchdrawWithdraw.js — เมนูตั้งต้น
withdrawlistmenuWithdrawListMenu.js
medicalexpensesMerdicalExpenses.js
checkstatusmerdicalCheckStatusMerdical.js
listallmerdicalexpensesListAllMerdicalExpenses.js
merdicalexpenseslistapprove / merdicalexpensesapproveapprove list/detail
medicalexpensesviewMedicalExpensesView.js (สะกด Medical ถูกต้องในชื่อไฟล์นี้)
reportmerdicalexpensesReportMerdicalExpenses.js
newslistwithdrawNewsListWithdraw.js

Data

  • Queries ใน gql/query/withdraw.js: FETCH_LIST_WD_HOSPITAL_*, FETCH_APPROVER_MERDICAL_QUERY, hospital/sickness dropdowns, PDF report URL
  • Mutations: CREATE_WD_HOSPITAL_MUTATION, UPDATE_WD_HOSPITAL_MUTATION, destroy slip/document
  • Upload multipart: actions/withdrawSlice.jsPOST ${HOSTGRAHQL}/graphql
  • Components ใต้ src/components/witchdraw/
PayloadScene
MEDICAL_DETAILlistallmerdicalexpenses (NotificationEvent.js:150-158)
MEDICAL_APPROVINGmerdicalexpenseslistapprove (:171-173)

H. Welfare — other benefits

Scene keyContainerหมายเหตุ
childtuition / listchildtuition / statuschildtuitionChild tuition containersqueries FETCH_LIST_CHILD_TUITION_* ใน withdraw.js
delegete / listdelegeteDelegate.js, ListDelegate.jsscene key typo delegete; ประกาศ delegete ซ้ำใน App.js:664-670
disasterDisaster.jsสวัสดิการภัยพิบัติ
tuitionreimbursementTuitionReimbursement.js
otherwelfareOtherWelfare.jshub สวัสดิการอื่น
listbenefitforstaff / listbenefitforapproverBenefit list containers
listpersonaldevelopmentListPersonalDevelopment.jscomponents ใน personal-development/

Delegate mutations: CREATE_DELEGATE_APPROVER_MUTATION, REVOKE_DELEGATE_APPROVER_MUTATION (gql/mutation/withdraw.js:126-135)


I. Payslip / provident fund / tax

Payslip

Scene keyContainerData
payslip / payslippreviewPaySlip.js, PaySlipPreview.jsgql/query/slip.js + features/slipSlice.js

Queries: FETCH_SLIP_QUERY, FETCH_URL_SLIP_QUERY, salary cert ชุด (FETCH_SALARY_CERT, FETCH_URL_SALARY_CERT_*, dropdown types)

slip ไม่ถูก persist (store.js:64 blacklist) — ข้อมูลเงินเดือนไม่ค้างใน keychain ข้าม session

Actions helper: src/actions/slipSlice.js (ไม่ใช่ createSlice)

Provident fund

Scene keyContainer
providentfund / providentfundlistmenuProvidentFund.js, ProvidentFundListMenu.js
percentprovidentfund / editpercentprovidentfundเปอร์เซ็นต์สะสม
receiverprovidentfundผู้รับผลประโยชน์ (HOST ใน container)
newslistprovidentfundข่าวกองทุน

User queries: FetchEmployeeProvidentFund, FETCH_ALL_PROVIDENT_FUND_DETAIL, FETCH_CONFIG_CHANGE_PROVPERCENTAGE, fund benefit person mutations ใน gql/mutation/user.js

Constants: constants/ProvidentFund.js

Tax reduction

Scene keyContainer
taxview / taxedit / taxguideTaxReductionView.js, TaxReductionEdit.js, TaxReductionGuide.js

Data: tax draft queries/mutations ใน gql/query/user.js + mutation/user.js (CREATE_TAX_DRAFT, UPDATE_TAX_DRAFT, GUIDE_LINE_TAX, …) และ components tax/ / tax-reduction/


J. Meeting management

Backend คนละตัวจาก GraphQL หลัก — REST ผ่าน meetingAPI baseURL ${Config.MEETING_API}/secure (utils/axios.js:4-5)

Host จริงบน master: https://uat-vtrcapi.redcross.or.th/meeting (config/index.js:12) — CORR-MOBILE-01

Scene ↔ container

Scene keyContainer
meetingmanagementMeetingManagement.js
mycalendarMyCalendar.js
meetingdetailMeetingDetail.js
meetinginvitelist / meetingorganizer / meetingpendinginvite / organizer / pending
precreatemeeting / createmeeting / createmeetingdocumentสร้างประชุม + เอกสาร
inviteinternal / inviteexternalเชิญภายใน/ภายนอก
approverlist / approverconfirmผู้อนุมัติ
approvallist / approvaldetailรายการอนุมัติ
attendees / attendeeslistผู้เข้าร่วม
approvalrequestlist / approvalrequestdetailคำขออนุมัติ
(+ DelegateNote.js ในโฟลเดอร์)บันทึกมอบหมาย

Block ใน App.js: 730-838

Service API surface (ตัวอย่าง)

จาก src/services/meetingService.js:

ฟังก์ชันEndpoint ภายใต้ /secure หรือ absolute
getListMeetingInMonthPOST /listMeetinginMonth
getMeetingdetailPOST /meetingdetail
addNewMeetingPOST /meeting/addNewMeeting
updateMeetingPOST /updateMeeting
redirectByPassGET ${Config.MEETING_API}/redirectbypass (นอก /secure)
file URLs${Config.MEETING_API}/file/{name}

UserID() อ่าน user.employeeProfile.empCode จาก redux (meetingService.js:7-12)

Components คู่: src/components/meeting-management/


K. PMS (Performance Management)

Scene keyContainerหมายเหตุ
manualpmsManualPMS.jsใช้ HOST จาก HostApi
listevaluators / menuevaluatorsListEvaluators.js, MenuEvaluator.js
checkdatapersonalCheckDataPersonal.js
evaluationresult / listevaluationresultผลประเมิน
viewpdfevaluationViewPDFEvaluation.jsเปิด PDF

Master query: FETCH_MASTER_CONFIG_TYPE_PMS ใน gql/query/withdraw.js:1215 (อยู่ไฟล์ withdraw ทั้งที่เกี่ยวกับ PMS)

App.js block: 973-1009


L. Recruitment (สมัครงานภายใน)

ไม่ใช้ GraphQL หลัก — REST ไป HOSTRECRUITMENT + header/key จาก PrivateKey.js

Scenes

Scene keyContainer
recruitmentlistmenuRecruitmentListMenu.js
recruitmentannounce / formannounceประกาศ
recruitmentsearchresult / recruitmentdetailค้นหา / รายละเอียด
applyworkApplyWork.js
recruitmenthistoryRecruitmentHistory.js
workwithusWorkWithUs.js (มี deep-link จาก noti :136)

REST map (actions/recruitment.js)

ฟังก์ชันโดยประมาณPath ใต้ HOSTRECRUITMENT
default data/jobList/get_default_data
by org unit/jobList/get_by_org_unit_id?…
job detail/jobList/get_job_detail_by_id/{id}
visit/jobRequest/update_visit
profile dropdown/create/update/appProfile/*
candidate create/list/cancel/export PDF/candidate/*

หลักฐาน: src/actions/recruitment.js:7-273

RECRUITMENT_KEY ใน src/constants/PrivateKey.js:1

userSlice ยังมี HOSTRECRUITMENT สำหรับ get_by_id_card / get_by_email (features/userSlice.js:1859-1878)

Upload form components ใช้ PATH_RECRUITMENT / PATH_WORKFORCE จาก HostApi

Deep-link: Actions.workwithus() เมื่อ payload ตรงเงื่อนไข (NotificationEvent.js:136)


M. Course / Conicle LMS

Scene keyContainerหมายเหตุ
guestcourselist / guestcourse / guestcourseidguest course (ยังไม่ login ก็เข้าได้บางส่วน)
courseconicleCourseConicle.jshub หลัง trial login
conicleConicle.jsWebView + download ผ่าน hostUrl.HOST
contentconicle / checkinconicle / notificationconiclecontent / check-in / noti

Data

  • gql/query/course.js — list/by id + FETCH_URL_CONICLE_* + FETCH_CONTENT_CONICLE
  • CHECKIN_CONICLE_MUTATION
  • features/courseSlice.js, utils/course.js, constants/Course.js / Conicle.js

Conicle + hostUrl drift

Conicle.js:21 import { HOST, UAT_HOST } from "../utils/hostUrl" แล้วสร้าง URL:

${HOST}/graphql/conicle/getFileFromUrl?session_id=…&url=…

หลักฐาน: src/containers/Conicle.js:82-161

นี่คือ consumer เดียว ของ hostUrl.js — สลับ env ที่ config/index.js / HostApi.js โดยไม่แตะ hostUrl.js จะทำให้ Conicle file proxy ชี้คนละ environment ได้

Deep-link course: guestcourselist / guestcourseid (NotificationEvent.js:253-255)


N. Profile / account / setting / update

Scene keyContainerหมายเหตุ
profile / personalinfo / employeepersonalinfoโปรไฟล์พนักงานFETCH_PROFILE_QUERY, FETCH_EMPLOYEE_PROFILE_QUERY
editaddress / editphone / accountแก้ที่อยู่/โทรศัพท์/บัญชีmutations CREATE_ADDRESS, UPDATE_PHONE, …
settingSetting.jsเปิด/ปิด biometric + notification toggle
updateVersion / scanupdateบังคับอัปเดต / สแกนFETCH_CHECK_UPDATE_VERSION

Profile fan-out หลัง login ดู queryProfileData ใน 02-core-pipeline

Consent: features/consentSlice.js + FETCH_CHECK_CONSENT_QUERY / CREATE_CONSENT_MUTATION — ใช้ใน flow สมัคร/เข้าใช้ (ตรวจจาก import ใน containers ที่เกี่ยวข้อง)

Career list: careerSlice + FETCH_LIST_CAREER_QUERY — มี query แม้ UI cluster อาจเล็ก


จาก src/components/shared/NotificationEvent.js:

Key ใน payloadปลายทางหลัก
newsnews / newslist / newslistguest
notificationnotification / notificationlist / notificationgroup
(profile-related)personalinfo
setting notisettingnotification
work with usworkwithus
conicle notinotificationconicle
MEDICAL_DETAILlistallmerdicalexpenses
MEDICAL_APPROVINGmerdicalexpenseslistapprove
LEAVE_DETAILleave detail + history fetch
LEAVE_APPROVEleave approve flow
LEAVE_CANCEL_APPROVE (+ WD_LEAVE_ID)cancel approve flow
courseguestcourseid / guestcourselist

Handler ถูก init จาก index.js:12-18 ก่อน register App — cold notification กดได้แม้ UI ยังไม่พร้อมเต็มที่


P. สิ่งที่ไม่พบใน vtrc-mobile (ยืนยันเชิงลบ)

หัวข้อสถานะ
UI สลับ organization / multi-tenant pickerไม่พบ — มีแค่ UUID คงที่
Runtime env switch แบบ checkLinkURLไม่พบ
GraphQL subscription / websocketไม่พบใน gql/
Meeting host แบบ prod ใน Configไม่พบ — มีแต่ UAT string
Automated E2E / detoxไม่พบ — มีแค่ Jest template

Q. ตารางเชื่อม cluster → ชั้นโค้ด

Clustercontainers/features/ หรือ actions/gql หรือ REST
AuthLogin, CheckLogin, Verify, …authSlicegql/**/auth.js
SSOVerifySSO, OTPSSO, …actions/ssoSliceREST HOST/SSOService
Leave / Medical / Delegate / StudyLeave*, Merdical*, Delegate*withdrawSlice + actions/withdrawSlicegql/**/withdraw.js + HostApi upload
Slip / Tax / FundPaySlip*, Tax*, Provident*slipSlice, userSliceslip.js, user.js
Meetingmeeting-management/*— (service layer)Config.MEETING_API REST
RecruitmentRecruitment*, ApplyWorkactions/recruitmentHOSTRECRUITMENT
CourseConicle*, GuestCourse*courseSlicecourse.js + hostUrl
News/NotiNews*, Notification*news/notification slicesnews/notification gql
Org/DocsPrinciple*, OrgInfo*document/aboutusdocument/about gql
PMSManualPMS, Evaluation*(ผสม withdraw/user)FETCH_MASTER_CONFIG_TYPE_PMS ฯลฯ
ProfileProfile, Setting, …userSlice, authSliceuser/auth gql

R. Full scene-key inventory (จาก App.js)

รายการด้านล่างดึงจาก Scene key="…" ใน vtrc-mobile/App.js บน branch master — ใช้เทียบเมื่อ refactor navigation

init, intro, decideenter, login, verify, fillprofile, forgot,
mainmenu, profile, newslist, news, notificationlist, notification,
time, payslip, principlelist, principlesub, principle, orginfo,
contact, personalinfo, workwithus, newslistguest, payslippreview,
orginfolist, contacthr, contacthrdetail, settingnotification,
changepassword, checklogin, term, orientation, empregistration,
notificationgroup, subscribe, guestcourselist, guestcourse,
guestcourseid, account, contactorg, taxview, taxedit, taxguide,
courseconicle, conicle, principledocumentquality, searchresult,
qualitydocument, listdocuments, updateVersion, scanupdate,
principlesearch, editaddress, newsearch, checkinconicle,
contentconicle, editphone, notificationconicle, setting,
witchdraw, withdrawlistmenu, listallmerdicalexpenses,
checkstatusmerdical, medicalexpenses, merdicalexpenseslistapprove,
merdicalexpensesapprove, medicalexpensesview,
listallleave (×2), leavedetail, leave, leavelistapprove, leaveapprove,
timeline, childtuition, listchildtuition, listdelegete,
delegete (×2), reportmerdicalexpenses, statuschildtuition,
providentfund, percentprovidentfund, receiverprovidentfund,
providentfundlistmenu, editpercentprovidentfund,
newslistprovidentfund, newslistwithdraw,
meetingmanagement, mycalendar, meetingdetail, meetinginvitelist,
meetingorganizer, precreatemeeting, createmeeting, inviteinternal,
inviteexternal, approverlist, approverconfirm, approvallist,
approvaldetail, attendees, attendeeslist, approvalrequestlist,
approvalrequestdetail, meetingpending, createmeetingdocument,
leaveapprovebynotification, liststudyleave, manualleave, reportleave,
studyleave, studyleavedetail, leavecanclelistapprove,
leavecancledocapprove, listpersonaldevelopment,
listbenefitforstaff, listbenefitforapprover, alllistmenu,
disaster, tuitionreimbursement, otherwelfare, employeepersonalinfo,
verifysso, otpsso, changepasswordsso, settingsecuresso,
listevaluators, menuevaluators, checkdatapersonal,
evaluationresult, listevaluationresult, viewpdfevaluation, manualpms,
recruitmentlistmenu, recruitmentannounce, recruitmentsearchresult,
recruitmentdetail, applywork, formannounce, recruitmenthistory

(×2) = ประกาศซ้ำใน Router — ดู CORR-MOBILE-03


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

ไป 04 · Scorecard + debt IDs