# เริ่มต้นใช้งาน (Technician App)

> **ฟีเจอร์นี้ทำอะไร** — เข้าสู่ระบบแอปมือถือสำหรับช่างของ Infrabrik FSM ด้วยการยืนยันตัวตนแบบ OTP, เรียนรู้การนำทางในหน้าจอหลัก และทำความเข้าใจบทบาท (Role) ที่คุณได้รับ
>
> **ใครใช้งาน** — ช่างทุกคน, หัวหน้าทีม (Team Lead)
>
> **เข้าถึงได้ที่ไหน** — เปิดแอป Infrabrik Technician App บนอุปกรณ์มือถือของคุณ
>
> **ข้อกำหนดที่เกี่ยวข้อง** — FR-006 (User Authentication), FR-007 (User Profile Management)
>
> **โมดูลในโค้ดเบส** — `auth`, `login`, `verify-code`, `profile`

---

## ก่อนเริ่มใช้งาน

- [ ] ติดตั้งแอป Infrabrik Technician App บนอุปกรณ์มือถือของคุณแล้ว (iOS หรือ Android)
- [ ] ผู้ดูแลระบบลงทะเบียนเบอร์โทรศัพท์มือถือไทยของคุณในระบบแล้ว
- [ ] คุณมี **รหัสองค์กร (Organization Code)** (ผู้ดูแลระบบขององค์กรเป็นผู้แจ้ง)
- [ ] โทรศัพท์ของคุณรับข้อความ SMS ได้
- [ ] คุณมีการเชื่อมต่ออินเทอร์เน็ตที่เสถียร (Wi-Fi หรือเน็ตมือถือ)

---

## สถานการณ์: เข้าสู่ระบบ Technician App

### สิ่งที่คุณต้องการทำ

เข้าสู่ระบบแอปด้วยรหัสองค์กร เบอร์โทรศัพท์ไทย และรหัสผ่านแบบใช้ครั้งเดียว (OTP) ที่ส่งมาทาง SMS

### ขั้นตอน

1. เปิดแอป **Infrabrik Technician App** บนอุปกรณ์มือถือของคุณ

   <!-- 📸 NEED SCREENSHOT: ไอคอนแอปบนหน้าจอหลัก และหน้าจอ splash/กำลังโหลด -->

   ![หน้าจอเปิดแอป](images/00-app-launch.png)

2. ที่หน้าจอเข้าสู่ระบบ กรอก **รหัสองค์กร (Organization Code)** ในช่องแรก

   | ช่อง | คำอธิบาย | ตัวอย่าง |
   |------|----------|----------|
   | รหัสองค์กร (Organization Code) | รหัสเฉพาะที่ Infrabrik กำหนดให้องค์กรของคุณ | `ACME01` |

   <!-- 📸 NEED SCREENSHOT: หน้าจอเข้าสู่ระบบพร้อมไฮไลต์ช่องรหัสองค์กร -->

   ![หน้าจอเข้าสู่ระบบ - รหัสองค์กร](images/00-login-org-code.png)

3. กรอก **เบอร์โทรศัพท์ไทย** ของคุณในช่องเบอร์โทรศัพท์

   | ช่อง | คำอธิบาย | เงื่อนไข |
   |------|----------|----------|
   | เบอร์โทรศัพท์ | เบอร์มือถือไทยโดยไม่ต้องใส่รหัสประเทศ | 9-10 หลัก เป็นตัวเลขเท่านั้น |

   > **หมายเหตุ:** กรอกเบอร์โดยไม่ต้องใส่รหัส `+66` นำหน้า เช่น หากเบอร์ของคุณคือ `+66 81-234-5678` ให้กรอก `0812345678`

4. แตะปุ่ม **ส่ง OTP (Send OTP)**

   ระบบจะส่งรหัส OTP จำนวน 6 หลักไปยังเบอร์โทรศัพท์ของคุณผ่าน Twilio SMS

   <!-- 📸 NEED SCREENSHOT: หน้าจอกรอก OTP แสดงช่องกรอก 6 หลักและตัวนับเวลาถอยหลัง -->

   ![หน้าจอกรอก OTP](images/00-otp-entry.png)

5. ตรวจกล่องข้อความ SMS เพื่อหารหัส OTP แล้วกรอก **รหัส 6 หลัก** ในหน้าจอยืนยัน

   | ช่อง | คำอธิบาย | เงื่อนไข |
   |------|----------|----------|
   | รหัส OTP | รหัสตัวเลข 6 หลักที่ได้รับทาง SMS | ใช้ได้ภายใน **60 วินาที** นับจากเวลาที่ส่ง |

   > **เคล็ดลับ:** รหัส OTP จะถูกกรอกอัตโนมัติหากอุปกรณ์ของคุณรองรับการอ่าน SMS อัตโนมัติ หากไม่รองรับ ให้พิมพ์รหัส 6 หลักด้วยตนเอง

   > **สำหรับการทดสอบเท่านั้น:** ในสภาพแวดล้อม test/staging สามารถใช้รหัส OTP สำรอง `111111` กับเบอร์โทรศัพท์ที่ลงทะเบียนไว้ทุกเบอร์ได้ ห้ามใช้รหัสนี้ใน production

6. แตะ **ยืนยัน (Verify)** เพื่อเข้าสู่ระบบให้สมบูรณ์

   ระบบจะตรวจสอบรหัส OTP และออกโทเค็นยืนยันตัวตนให้:

   | โทเค็น | หน้าที่ | อายุ |
   |--------|---------|------|
   | Access Token (JWT) | ยืนยันตัวตนสำหรับคำขอ API | 10 วัน |
   | Refresh Token | ต่ออายุ Access Token ให้อัตโนมัติ | 3 วัน |

### ผลลัพธ์ที่จะเกิดขึ้น

ระบบพาคุณไปที่หน้าจอ **Dashboard** เซสชันของคุณจะคงอยู่แม้ปิดและเปิดแอปใหม่ — คุณไม่ต้องเข้าสู่ระบบใหม่จนกว่าโทเค็นจะหมดอายุ

> **คำเตือน:** หากไม่กรอก OTP ภายใน 60 วินาที รหัสจะหมดอายุ คุณต้องแตะ **ส่ง OTP อีกครั้ง (Resend OTP)** แล้วรอรับรหัสใหม่ โดยมีระยะเวลารอ **60 วินาที** ระหว่างการขอส่งใหม่แต่ละครั้ง

---

## สถานการณ์: นำทางในแอป

### สิ่งที่คุณต้องการทำ

ทำความเข้าใจแท็บนำทางหลักและเนื้อหาของแต่ละส่วนในแอป

### ขั้นตอน

1. หลังเข้าสู่ระบบ ให้สังเกต **แถบนำทางด้านล่าง (bottom navigation bar)** แอปมีแท็บหลัก 5 แท็บ

   <!-- 📸 NEED SCREENSHOT: แถบนำทางด้านล่างแสดงครบทั้ง 5 แท็บ พร้อมป้ายชื่อและไอคอน -->

   ![แถบนำทางด้านล่าง](images/00-bottom-nav.png)

2. ทำความรู้จักแต่ละแท็บ:

   | แท็บ | ไอคอน | ใช้ทำอะไร | สิ่งที่คุณเห็น |
   |------|-------|-----------|----------------|
   | **Dashboard** | Home | ศูนย์กลางการทำงานของคุณ | จำนวนงานแยกตามสถานะ งานที่กำลังจะถึง สรุปอะไหล่ |
   | **Jobs** | Work order | ใบสั่งงานที่ได้รับมอบหมายทั้งหมด | รายการงานที่ค้นหาและกรองได้พร้อมป้ายสถานะ |
   | **Spare Parts** | Box/Package | คลังอะไหล่และการขอเบิก | อะไหล่ที่ได้รับมอบหมายให้คุณ สถานะการขอเบิก การติดตามการคืน |
   | **Notifications** | Bell (พร้อมป้ายแจ้งจำนวนที่ยังไม่อ่าน) | การแจ้งเตือนและอัปเดต | งานที่ได้รับมอบหมายใหม่ การเปลี่ยนสถานะ ข้อความจากผู้ดูแลระบบ |
   | **Profile** | Person | บัญชีและการตั้งค่าของคุณ | ชื่อ บทบาท เบอร์โทรศัพท์ ข้อมูลองค์กร และการออกจากระบบ |

3. แตะแต่ละแท็บเพื่อสำรวจหน้าจอหลักของแท็บนั้น

   > **เคล็ดลับ:** ไอคอนกระดิ่งของแท็บ **Notifications** จะแสดง **ป้ายจำนวนที่ยังไม่อ่าน** (วงกลมสีแดงพร้อมตัวเลข) เมื่อคุณมีการแจ้งเตือนที่ยังไม่อ่าน แตะเพื่อดูและล้างการแจ้งเตือน

   <!-- 📸 NEED SCREENSHOT: แท็บ Notifications แสดงป้ายจำนวนที่ยังไม่อ่านบนไอคอนกระดิ่ง -->

   ![ป้ายแจ้งเตือน](images/00-notification-badge.png)

### ผลลัพธ์ที่จะเกิดขึ้น

คุณสามารถสลับไปมาระหว่างแท็บได้ตลอดเวลา แอปจะจดจำตำแหน่งการเลื่อนหน้าจอและตัวกรองภายในแต่ละแท็บตลอดเซสชันปัจจุบัน

---

## สถานการณ์: ทำความเข้าใจบทบาทของคุณ

### สิ่งที่คุณต้องการทำ

ทราบความแตกต่างระหว่างบทบาทช่าง (Technician) และหัวหน้าทีม (Team Lead) และสิ่งที่แต่ละบทบาทเข้าถึงได้

### ขั้นตอน

1. ไปที่แท็บ **Profile** เพื่อดูบทบาทที่คุณได้รับ

   <!-- 📸 NEED SCREENSHOT: หน้าจอ Profile แสดงป้ายบทบาท (Technician หรือ Team Lead) -->

   ![หน้าจอ Profile พร้อมบทบาท](images/00-profile-role.png)

2. ทบทวนสิทธิ์ของบทบาทคุณ:

   | สิ่งที่ทำได้ | Technician | Team Lead |
   |-------------|:----------:|:---------:|
   | ดูงานที่ได้รับมอบหมายของตนเอง | ได้ | ได้ |
   | อัปเดตสถานะงาน | ได้ | ได้ |
   | ดูคลังอะไหล่ของตนเอง | ได้ | ได้ |
   | กรอกใบตรวจเช็ก (check sheet) | ได้ | ได้ |
   | ดูงานของสมาชิกในทีม | ไม่ได้ | ได้ |
   | กรอง Dashboard ตามสมาชิกในทีม | ไม่ได้ | ได้ |
   | ดูข้อมูลทีมและภาระงาน | ไม่ได้ | ได้ |

3. หากคุณเป็น **Team Lead** คุณจะเห็นองค์ประกอบ UI เพิ่มเติม:

   - **ดรอปดาวน์เลือกสมาชิกในทีม** บนหน้า Dashboard เพื่อกรองตามช่างแต่ละคน
   - ส่วน **Team** ในหน้า Profile แสดงรายชื่อสมาชิกในทีมของคุณ

   <!-- 📸 NEED SCREENSHOT: หน้า Dashboard ของ Team Lead แสดงดรอปดาวน์กรองสมาชิกในทีม -->

   ![ตัวกรองของหัวหน้าทีม](images/00-team-lead-filter.png)

### ผลลัพธ์ที่จะเกิดขึ้น

บทบาทของคุณกำหนดข้อมูลที่คุณเห็นในทุกส่วนของแอป หากบทบาทดูไม่ถูกต้อง ให้ติดต่อผู้ดูแลระบบเพื่อแก้ไขใน Admin Portal

> **หมายเหตุ:** การเปลี่ยนบทบาทโดยผู้ดูแลระบบจะมีผลในครั้งถัดไปที่คุณเปิดแอปหรือดึงหน้าจอเพื่อรีเฟรช (pull-to-refresh)

---

## สถานการณ์: จัดการเซสชันหมดอายุ

### สิ่งที่คุณต้องการทำ

เข้าใจสิ่งที่เกิดขึ้นเมื่อเซสชันการเข้าสู่ระบบหมดอายุ และวิธีเข้าสู่ระบบใหม่

### ขั้นตอน

1. เซสชันของคุณ **คงอยู่แม้ปิดและเปิดแอปใหม่** คุณไม่ต้องเข้าสู่ระบบทุกครั้งที่เปิดแอป

2. หาก Access Token หมดอายุ (หลังไม่ใช้งานนาน 10 วัน) หรือไม่สามารถต่ออายุได้ แอปจะพาคุณกลับไปที่ **หน้าจอเข้าสู่ระบบ** โดยอัตโนมัติ

   <!-- 📸 NEED SCREENSHOT: การพากลับหน้าเข้าสู่ระบบเมื่อเซสชันหมดอายุ พร้อมข้อความแจ้งเซสชันหมดอายุ -->

   ![เซสชันหมดอายุ](images/00-session-expired.png)

3. ทำตามขั้นตอนเข้าสู่ระบบเดิม: กรอก **รหัสองค์กร**, **เบอร์โทรศัพท์** และยืนยันด้วย **OTP**

4. หากต้องการขอส่ง OTP ใหม่ แตะ **ส่ง OTP อีกครั้ง (Resend OTP)** แล้วรอรับรหัสใหม่

   | การกระทำ | ระยะเวลารอ |
   |----------|------------|
   | ส่ง OTP อีกครั้ง | รอ 60 วินาทีระหว่างการขอแต่ละครั้ง |
   | อายุของ OTP | 60 วินาทีนับจากเวลาที่ส่ง |

### ผลลัพธ์ที่จะเกิดขึ้น

หลังยืนยันตัวตนสำเร็จ คุณจะกลับมาที่ Dashboard งานที่ทำค้างไว้และยังไม่บันทึก (เช่น ใบตรวจเช็กที่กรอกไม่เสร็จ) อาจต้องกรอกใหม่

> **คำเตือน:** หากเซสชันหมดอายุระหว่างที่คุณกำลังอัปเดตสถานะงาน การอัปเดตสถานะนั้นจะไม่ถูกบันทึก ให้เปลี่ยนสถานะให้เสร็จโดยเร็วเพื่อป้องกันข้อมูลสูญหาย

---

## เมื่อเกิดปัญหา

| สิ่งที่คุณเห็น | ทำอย่างไร |
|---------------|-----------|
| ไม่ได้รับ OTP หลังแตะ "ส่ง OTP" | 1. ตรวจสอบรูปแบบเบอร์โทรศัพท์ให้ถูกต้อง (9-10 หลัก ไม่ใส่รหัสประเทศ) 2. ตรวจกล่องข้อความ SMS และข้อความสแปม/ถูกกรอง 3. รอครบ 60 วินาที แล้วแตะ **ส่ง OTP อีกครั้ง** 4. ตรวจสอบว่าโทรศัพท์มีสัญญาณมือถือสำหรับรับ SMS |
| error "ไม่พบรหัสองค์กร" | ตรวจสอบรหัสองค์กรกับผู้ดูแลระบบอีกครั้ง รหัสเป็นแบบ case-sensitive (ตัวพิมพ์เล็ก/ใหญ่มีผล) ตรวจให้แน่ใจว่าไม่มีเว้นวรรคเกิน |
| เซสชันหมดอายุโดยไม่คาดคิด | โทเค็นของคุณหมดอายุ เข้าสู่ระบบใหม่ด้วยขั้นตอน OTP ตามปกติ ซึ่งเป็นเรื่องปกติหลังไม่ใช้งานนาน |
| แอปแสดงหน้าจอว่างหลังเข้าสู่ระบบ | 1. ปิดแอปแบบบังคับแล้วเปิดใหม่ 2. ตรวจการเชื่อมต่ออินเทอร์เน็ต 3. หากยังเป็นอยู่ ออกจากระบบที่ Profile แล้วเข้าสู่ระบบใหม่ 4. ล้าง cache ของแอปในการตั้งค่าอุปกรณ์เป็นทางเลือกสุดท้าย |
| error "ขอ OTP บ่อยเกินไป" | คุณขอส่ง OTP เกินขีดจำกัด รออย่างน้อย 60 วินาทีก่อนขอรหัสใหม่ |
| เบอร์โทรศัพท์ถูกปฏิเสธ | ตรวจสอบว่าคุณกรอกเบอร์มือถือไทยที่ถูกต้อง (9-10 หลัก) นำขีดกลาง เว้นวรรค หรือรหัสประเทศออก |

---

## อ้างอิงด่วน (Quick Reference)

| ต้องการ... | ไปที่ | คลิก |
|------------|-------|------|
| เข้าสู่ระบบแอป | หน้าจอเปิดแอป | กรอกรหัสองค์กร + เบอร์โทรศัพท์ + OTP |
| ดูสรุปงานของฉัน | แท็บ Dashboard | (โหลดอัตโนมัติ) |
| ดูงานที่ได้รับมอบหมาย | แท็บ Jobs | (โหลดอัตโนมัติ) |
| ตรวจสอบอะไหล่ | แท็บ Spare Parts | (โหลดอัตโนมัติ) |
| อ่านการแจ้งเตือน | แท็บ Notifications (ไอคอนกระดิ่ง) | แตะการแจ้งเตือนเพื่อดูรายละเอียด |
| ดูโปรไฟล์และบทบาทของฉัน | แท็บ Profile | (โหลดอัตโนมัติ) |
| ออกจากระบบ | แท็บ Profile | ปุ่ม **ออกจากระบบ (Logout)** |
| ส่ง OTP อีกครั้ง | หน้าจอกรอก OTP | **ส่ง OTP อีกครั้ง (Resend OTP)** (หลังรอ 60 วินาที) |

---

## ภาพหน้าจอที่ต้องเพิ่ม

| # | สิ่งที่ต้องถ่าย | เส้นทางหน้า |
|---|----------------|-------------|
| 1 | ไอคอนแอปบนหน้าจอหลัก และหน้าจอ splash/กำลังโหลด | หน้าจอหลักของอุปกรณ์ / หน้าจอเปิดแอป |
| 2 | หน้าจอเข้าสู่ระบบพร้อมไฮไลต์ช่องรหัสองค์กร | `/login` |
| 3 | หน้าจอกรอก OTP แสดงช่องกรอก 6 หลักและตัวนับเวลาถอยหลัง | `/verify-code` |
| 4 | แถบนำทางด้านล่างแสดงครบทั้ง 5 แท็บ | หน้าจอใดก็ได้ (แถบนำทางด้านล่าง) |
| 5 | แท็บ Notifications พร้อมป้ายจำนวนที่ยังไม่อ่านบนไอคอนกระดิ่ง | `/notifications` |
| 6 | หน้าจอ Profile แสดงป้ายบทบาท (Technician หรือ Team Lead) | `/profile` |
| 7 | หน้า Dashboard ของ Team Lead พร้อมดรอปดาวน์กรองสมาชิกในทีม | `/dashboard` (มุมมอง Team Lead) |
| 8 | การพากลับหน้าเข้าสู่ระบบเมื่อเซสชันหมดอายุ | `/login` (หลังโทเค็นหมดอายุ) |