# Screen List สำหรับผู้ดูแลระบบ (Admin)

เอกสารนี้รวบรวมรายการหน้าจอทั้งหมดสำหรับผู้ดูแลระบบ (Admin) ในระบบ E-Learning

---

## 📋 สารบัญ

1. [ระบบยืนยันตัวตน (Authentication)](#1-ระบบยืนยันตัวตน-authentication)
2. [Dashboard ผู้ดูแลระบบ](#2-dashboard-ผู้ดูแลระบบ)
3. [ระบบจัดการโปรไฟล์](#3-ระบบจัดการโปรไฟล์)
4. [ระบบจัดการผู้ใช้งาน](#4-ระบบจัดการผู้ใช้งาน)
5. [ระบบรายงานและสถิติภาพรวม](#5-ระบบรายงานและสถิติภาพรวม)
6. [ระบบตั้งค่าระบบ](#6-ระบบตั้งค่าระบบ)

---

## 1. ระบบยืนยันตัวตน (Authentication)

### 1.1 หน้าเข้าสู่ระบบ (Login Page)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | AUTH-001 |
| **Screen Name** | Login |
| **URL** | `/login` |
| **วัตถุประสงค์** | หน้าสำหรับผู้ดูแลระบบเข้าสู่ระบบด้วยอีเมลและรหัสผ่าน |

**องค์ประกอบหน้าจอ:**
- ช่องกรอกอีเมล
- ช่องกรอกรหัสผ่าน
- ปุ่ม "เข้าสู่ระบบ"
- Checkbox "จดจำการเข้าสู่ระบบ"
- ลิงก์ "ลืมรหัสผ่าน?"

**ฟังก์ชันการทำงาน:**
- ตรวจสอบข้อมูลอีเมลและรหัสผ่าน
- ตรวจสอบว่าผู้ใช้มีสิทธิ์ Admin
- แสดงข้อความ error หากข้อมูลไม่ถูกต้อง
- Redirect ไปยัง Admin Dashboard หลังเข้าสู่ระบบสำเร็จ

---

### 1.2 หน้าลืมรหัสผ่าน (Forgot Password)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | AUTH-002 |
| **Screen Name** | Forgot Password |
| **URL** | `/forgot-password` |
| **วัตถุประสงค์** | หน้าสำหรับขอรีเซ็ตรหัสผ่านผ่านอีเมล |

**องค์ประกอบหน้าจอ:**
- ช่องกรอกอีเมล
- ปุ่ม "ส่งลิงก์รีเซ็ตรหัสผ่าน"
- ลิงก์ "กลับไปหน้าเข้าสู่ระบบ"

**ฟังก์ชันการทำงาน:**
- ส่งอีเมลพร้อมลิงก์สำหรับรีเซ็ตรหัสผ่าน
- แสดงข้อความยืนยันการส่งอีเมลสำเร็จ

---

### 1.3 หน้ารีเซ็ตรหัสผ่าน (Reset Password)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | AUTH-003 |
| **Screen Name** | Reset Password |
| **URL** | `/reset-password/:token` |
| **วัตถุประสงค์** | หน้าสำหรับตั้งรหัสผ่านใหม่ |

**องค์ประกอบหน้าจอ:**
- ช่องกรอกรหัสผ่านใหม่
- ช่องยืนยันรหัสผ่านใหม่
- ตัวบอกความแข็งแรงของรหัสผ่าน
- ปุ่ม "บันทึกรหัสผ่านใหม่"

**ฟังก์ชันการทำงาน:**
- ตรวจสอบความถูกต้องของ Token
- บันทึกรหัสผ่านใหม่
- Redirect ไปหน้า Login

---

## 2. Dashboard ผู้ดูแลระบบ

### 2.1 หน้า Dashboard หลัก (Admin Dashboard)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | DASH-001 |
| **Screen Name** | Admin Dashboard |
| **URL** | `/admin/dashboard` |
| **วัตถุประสงค์** | หน้าแรกหลังเข้าสู่ระบบ แสดงภาพรวมสถิติระบบทั้งหมด |

**องค์ประกอบหน้าจอ:**
- **การ์ดสรุปข้อมูล (Summary Cards)**
  - จำนวนผู้ใช้งานทั้งหมด
  - จำนวนผู้ใช้งานใหม่ (วัน/สัปดาห์/เดือน)
  - จำนวนหลักสูตรทั้งหมด
  - จำนวนหลักสูตรที่เผยแพร่
  - จำนวนผู้เรียนที่ Active
  - อัตราการจบหลักสูตร
- **กราฟและแผนภูมิ**
  - กราฟผู้ใช้ใหม่รายวัน/สัปดาห์/เดือน
  - กราฟการลงทะเบียนหลักสูตร
  - กราฟอัตราการจบหลักสูตร
  - Pie Chart สัดส่วนผู้ใช้ตามบทบาท
- **ตารางข้อมูลล่าสุด**
  - ผู้ใช้ที่ลงทะเบียนล่าสุด
  - หลักสูตรที่สร้างล่าสุด
  - กิจกรรมล่าสุดในระบบ
- **เมนูทางลัด (Quick Actions)**
  - เพิ่มผู้ใช้ใหม่
  - ดูรายงาน
  - ตั้งค่าระบบ

**ฟังก์ชันการทำงาน:**
- ดึงข้อมูลสถิติแบบ Real-time
- เลือกช่วงเวลาในการแสดงกราฟ
- Export ข้อมูลสถิติ

---

## 3. ระบบจัดการโปรไฟล์

### 3.1 หน้าดูโปรไฟล์ (View Profile)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | PROF-001 |
| **Screen Name** | View Profile |
| **URL** | `/admin/profile` |
| **วัตถุประสงค์** | หน้าแสดงข้อมูลโปรไฟล์ของ Admin |

**องค์ประกอบหน้าจอ:**
- รูปโปรไฟล์
- ชื่อ-นามสกุล
- อีเมล
- เบอร์โทรศัพท์
- บทบาท
- วันที่สร้างบัญชี
- ปุ่ม "แก้ไขโปรไฟล์"

---

### 3.2 หน้าแก้ไขโปรไฟล์ (Edit Profile)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | PROF-002 |
| **Screen Name** | Edit Profile |
| **URL** | `/admin/profile/edit` |
| **วัตถุประสงค์** | หน้าสำหรับแก้ไขข้อมูลส่วนตัว |

**องค์ประกอบหน้าจอ:**
- อัปโหลดรูปโปรไฟล์
- ช่องกรอกชื่อ-นามสกุล
- ช่องกรอกเบอร์โทรศัพท์
- ปุ่ม "บันทึก"
- ปุ่ม "ยกเลิก"

**ฟังก์ชันการทำงาน:**
- Validate ข้อมูล
- อัปโหลดรูปภาพ
- บันทึกข้อมูลโปรไฟล์

---

### 3.3 หน้าเปลี่ยนรหัสผ่าน (Change Password)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | PROF-003 |
| **Screen Name** | Change Password |
| **URL** | `/admin/profile/change-password` |
| **วัตถุประสงค์** | หน้าสำหรับเปลี่ยนรหัสผ่าน |

**องค์ประกอบหน้าจอ:**
- ช่องกรอกรหัสผ่านปัจจุบัน
- ช่องกรอกรหัสผ่านใหม่
- ช่องยืนยันรหัสผ่านใหม่
- ตัวบอกความแข็งแรงของรหัสผ่าน
- ปุ่ม "เปลี่ยนรหัสผ่าน"

**ฟังก์ชันการทำงาน:**
- ตรวจสอบรหัสผ่านปัจจุบัน
- Validate รหัสผ่านใหม่
- บันทึกรหัสผ่านใหม่

---

## 4. ระบบจัดการผู้ใช้งาน

### 4.1 หน้ารายการผู้ใช้งาน (User List)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | USR-001 |
| **Screen Name** | User List |
| **URL** | `/admin/users` |
| **วัตถุประสงค์** | หน้าแสดงรายการผู้ใช้งานทั้งหมดในระบบ |

**องค์ประกอบหน้าจอ:**
- ช่องค้นหา (ค้นหาจากชื่อ, อีเมล, username)
- ตัวกรอง (Filter)
  - บทบาท (Admin/Instructor/Student)
  - สถานะ (Active/Inactive/Suspended)
  - วันที่ลงทะเบียน
- ปุ่ม "เพิ่มผู้ใช้ใหม่"
- ปุ่ม "ส่งออกข้อมูล" (Export)
- ตารางรายการผู้ใช้
  - รูปโปรไฟล์
  - ชื่อ-นามสกุล
  - อีเมล
  - บทบาท (Badge)
  - สถานะ
  - วันที่ลงทะเบียน
  - เข้าสู่ระบบล่าสุด
  - Actions (ดู, แก้ไข, ระงับ, ลบ)
- Pagination
- เลือกหลายรายการ (Bulk Actions)

**ฟังก์ชันการทำงาน:**
- ค้นหาผู้ใช้
- กรองตามเงื่อนไข
- เรียงลำดับ
- ระงับ/เปิดใช้งานผู้ใช้
- ลบผู้ใช้ (พร้อม Confirmation Dialog)
- Bulk Delete / Bulk Status Change

---

### 4.2 หน้าเพิ่มผู้ใช้ใหม่ (Create User)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | USR-002 |
| **Screen Name** | Create User |
| **URL** | `/admin/users/create` |
| **วัตถุประสงค์** | หน้าสำหรับเพิ่มผู้ใช้ใหม่เข้าระบบ |

**องค์ประกอบหน้าจอ:**
- อัปโหลดรูปโปรไฟล์
- ช่องกรอกชื่อ
- ช่องกรอกนามสกุล
- ช่องกรอกอีเมล
- ช่องกรอก Username
- ช่องกรอกรหัสผ่าน
- ช่องยืนยันรหัสผ่าน
- ตัวบอกความแข็งแรงของรหัสผ่าน
- ช่องกรอกเบอร์โทรศัพท์
- Dropdown เลือกบทบาท
- Toggle สถานะ (Active/Inactive)
- Checkbox ส่งอีเมลแจ้งผู้ใช้
- ปุ่ม "สร้างผู้ใช้"
- ปุ่ม "ยกเลิก"

**ฟังก์ชันการทำงาน:**
- Validate ข้อมูลทั้งหมด
- ตรวจสอบอีเมล/Username ซ้ำ
- สร้างบัญชีผู้ใช้
- ส่งอีเมลแจ้งเตือน (ถ้าเลือก)

---

### 4.3 หน้าดูรายละเอียดผู้ใช้ (User Detail)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | USR-003 |
| **Screen Name** | User Detail |
| **URL** | `/admin/users/:id` |
| **วัตถุประสงค์** | หน้าแสดงรายละเอียดผู้ใช้และประวัติกิจกรรม |

**องค์ประกอบหน้าจอ:**
- **ส่วนข้อมูลผู้ใช้**
  - รูปโปรไฟล์
  - ชื่อ-นามสกุล
  - อีเมล
  - Username
  - เบอร์โทรศัพท์
  - บทบาท
  - สถานะ
  - วันที่ลงทะเบียน
  - เข้าสู่ระบบล่าสุด
- **Tabs**
  - **Tab กิจกรรม** - ประวัติการใช้งานระบบ
  - **Tab หลักสูตร** - หลักสูตรที่ลงทะเบียน (สำหรับ Student)
  - **Tab หลักสูตรที่สอน** - หลักสูตรที่สร้าง (สำหรับ Instructor)
  - **Tab Log การเข้าสู่ระบบ** - ประวัติการ Login
- ปุ่ม "แก้ไข"
- ปุ่ม "ระงับ/เปิดใช้งาน"
- ปุ่ม "รีเซ็ตรหัสผ่าน"
- ปุ่ม "ลบ"

**ฟังก์ชันการทำงาน:**
- ดูประวัติกิจกรรม
- ส่งอีเมลรีเซ็ตรหัสผ่าน
- เปลี่ยนสถานะผู้ใช้

---

### 4.4 หน้าแก้ไขผู้ใช้ (Edit User)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | USR-004 |
| **Screen Name** | Edit User |
| **URL** | `/admin/users/:id/edit` |
| **วัตถุประสงค์** | หน้าสำหรับแก้ไขข้อมูลผู้ใช้ |

**องค์ประกอบหน้าจอ:**
- (เหมือนหน้าเพิ่มผู้ใช้ใหม่ แต่แสดงข้อมูลเดิม)
- ช่องรหัสผ่านเป็น Optional (กรอกเมื่อต้องการเปลี่ยน)
- ปุ่ม "บันทึก"
- ปุ่ม "ยกเลิก"

---



## 5. ระบบรายงานและสถิติภาพรวม

### 5.1 หน้ารายงานผู้ใช้งาน (User Report)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | RPT-001 |
| **Screen Name** | User Report |
| **URL** | `/admin/reports/users` |
| **วัตถุประสงค์** | หน้าแสดงรายงานเกี่ยวกับผู้ใช้งานในระบบ |

**องค์ประกอบหน้าจอ:**
- ตัวเลือกช่วงเวลา (Date Range Picker)
- **สถิติภาพรวม**
  - จำนวนผู้ใช้ทั้งหมด
  - จำนวนผู้ใช้ใหม่
  - จำนวนผู้ใช้ที่ Active
  - จำนวนผู้ใช้ที่ถูกระงับ
- **กราฟ**
  - กราฟผู้ใช้ใหม่รายวัน/สัปดาห์/เดือน
  - กราฟสัดส่วนผู้ใช้ตามบทบาท
  - กราฟการเข้าสู่ระบบรายวัน
- **ตารางข้อมูล**
  - รายชื่อผู้ใช้ใหม่
  - ผู้ใช้ที่ Active มากที่สุด
- ปุ่ม "ส่งออก Excel"
- ปุ่ม "ส่งออก PDF"

---

### 5.2 หน้ารายงานหลักสูตร (Course Report)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | RPT-002 |
| **Screen Name** | Course Report |
| **URL** | `/admin/reports/courses` |
| **วัตถุประสงค์** | หน้าแสดงรายงานเกี่ยวกับหลักสูตรในระบบ |

**องค์ประกอบหน้าจอ:**
- ตัวเลือกช่วงเวลา (Date Range Picker)
- **สถิติภาพรวม**
  - จำนวนหลักสูตรทั้งหมด
  - หลักสูตรที่เผยแพร่
  - หลักสูตรฉบับร่าง
  - อัตราการลงทะเบียนเฉลี่ย
- **กราฟ**
  - กราฟหลักสูตรใหม่รายเดือน
  - กราฟการลงทะเบียนต่อหลักสูตร
  - กราฟอัตราการจบหลักสูตร
  - กราฟหลักสูตรยอดนิยม (Top 10)
- **ตารางข้อมูล**
  - หลักสูตรยอดนิยม
  - หลักสูตรที่สร้างล่าสุด
- ปุ่ม "ส่งออก Excel"
- ปุ่ม "ส่งออก PDF"

---

### 5.3 หน้ารายงานการเรียน (Learning Report)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | RPT-003 |
| **Screen Name** | Learning Report |
| **URL** | `/admin/reports/learning` |
| **วัตถุประสงค์** | หน้าแสดงรายงานสถิติการเรียนรู้ในระบบ |

**องค์ประกอบหน้าจอ:**
- ตัวเลือกช่วงเวลา (Date Range Picker)
- Dropdown เลือกหลักสูตร (หรือทั้งหมด)
- **สถิติภาพรวม**
  - จำนวนการลงทะเบียนทั้งหมด
  - อัตราการจบหลักสูตรเฉลี่ย
  - เวลาเรียนเฉลี่ย
  - คะแนนแบบทดสอบเฉลี่ย
- **กราฟ**
  - กราฟความคืบหน้าการเรียน
  - กราฟเวลาเรียนรายวัน
  - กราฟอัตราการผ่านแบบทดสอบ
- **ตารางข้อมูล**
  - ผู้เรียนที่มีความคืบหน้ามากที่สุด
  - ผู้เรียนที่ใช้เวลามากที่สุด
- ปุ่ม "ส่งออก Excel"
- ปุ่ม "ส่งออก PDF"

---

### 5.4 หน้ารายงานการใช้งานระบบ (System Usage Report)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | RPT-004 |
| **Screen Name** | System Usage Report |
| **URL** | `/admin/reports/system` |
| **วัตถุประสงค์** | หน้าแสดงรายงานการใช้งานระบบโดยรวม |

**องค์ประกอบหน้าจอ:**
- ตัวเลือกช่วงเวลา (Date Range Picker)
- **สถิติภาพรวม**
  - จำนวนการเข้าชมต่อวัน
  - จำนวน Session เฉลี่ย
  - ระยะเวลาการใช้งานเฉลี่ย
  - พื้นที่จัดเก็บที่ใช้
- **กราฟ**
  - กราฟการเข้าใช้งานรายชั่วโมง
  - กราฟการเข้าใช้งานรายวัน
  - กราฟปริมาณ Storage ที่ใช้
- **ข้อมูลเซิร์ฟเวอร์**
  - สถานะระบบ
  - เวอร์ชันระบบ
  - Uptime
- ปุ่ม "ส่งออก"

---

## 6. ระบบตั้งค่าระบบ

### 6.1 หน้าตั้งค่าทั่วไป (General Settings)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | SET-001 |
| **Screen Name** | General Settings |
| **URL** | `/admin/settings/general` |
| **วัตถุประสงค์** | หน้าสำหรับตั้งค่าทั่วไปของระบบ |

**องค์ประกอบหน้าจอ:**
- **ข้อมูลระบบ**
  - ชื่อระบบ
  - โลโก้ระบบ
  - คำอธิบายระบบ
  - อีเมลติดต่อ
- **การตั้งค่าหน้าเว็บ**
  - ภาษาเริ่มต้น
  - Timezone
  - รูปแบบวันที่
- **การตั้งค่าการลงทะเบียน**
  - อนุญาตการสมัครสมาชิก (เปิด/ปิด)
  - ต้องยืนยันอีเมล
  - บทบาทเริ่มต้นสำหรับสมาชิกใหม่
- ปุ่ม "บันทึก"

---



### 6.2 หน้าตั้งค่าการจัดเก็บไฟล์ (Storage Settings)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | SET-002 |
| **Screen Name** | Storage Settings |
| **URL** | `/admin/settings/storage` |
| **วัตถุประสงค์** | หน้าสำหรับตั้งค่าการจัดเก็บไฟล์ |

**องค์ประกอบหน้าจอ:**
- **ประเภทการจัดเก็บ**
  - Local Storage
  - Cloud Storage (S3, MinIO)
- **การตั้งค่า Cloud (ถ้าเลือก)**
  - Endpoint
  - Access Key
  - Secret Key
  - Bucket Name
  - Region
- **ข้อจำกัด**
  - ขนาดไฟล์สูงสุดที่อนุญาต
  - ประเภทไฟล์ที่อนุญาต
  - พื้นที่จัดเก็บสูงสุดต่อผู้ใช้
- **สถานะปัจจุบัน**
  - พื้นที่ใช้งาน / พื้นที่ทั้งหมด
  - จำนวนไฟล์ทั้งหมด
- ปุ่ม "ทดสอบการเชื่อมต่อ"
- ปุ่ม "บันทึก"

---



### 6.3 หน้า Audit Log (ประวัติการใช้งาน)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | SET-003 |
| **Screen Name** | Audit Log |
| **URL** | `/admin/settings/audit-log` |
| **วัตถุประสงค์** | หน้าแสดงประวัติการกระทำสำคัญในระบบ |

**องค์ประกอบหน้าจอ:**
- ตัวกรอง
  - ช่วงเวลา
  - ผู้กระทำ
  - ประเภทกิจกรรม
- ตารางประวัติ
  - วันที่-เวลา
  - ผู้กระทำ
  - กิจกรรม
  - รายละเอียด
  - IP Address
- Pagination
- ปุ่ม "ส่งออก"

**ฟังก์ชันการทำงาน:**
- ค้นหาและกรองประวัติ
- ส่งออกเป็น Excel/CSV

---

## 📊 สรุปจำนวนหน้าจอ

| หมวดหมู่ | จำนวนหน้าจอ |
|----------|-------------|
| ระบบยืนยันตัวตน | 3 |
| Dashboard | 1 |
| ระบบจัดการโปรไฟล์ | 3 |
| ระบบจัดการผู้ใช้งาน | 4 |
| ระบบรายงานและสถิติ | 4 |
| ระบบตั้งค่าระบบ | 3 |
| **รวมทั้งหมด** | **18** |

---

## 📝 หมายเหตุ

1. **Screen ID** ใช้รูปแบบ `[หมวด]-[ลำดับ]` เพื่อง่ายต่อการอ้างอิง
2. หน้าจอสำหรับ Admin เน้นการจัดการระบบภาพรวม ไม่รวมฟังก์ชันการสอนหรือเรียน
3. บางฟังก์ชันอาจปรับลดหรือเพิ่มเติมได้ตามความต้องการของโปรเจกต์
4. URL ที่ระบุเป็นตัวอย่างโครงสร้าง สามารถปรับเปลี่ยนได้ตามความเหมาะสม
5. Admin สามารถเข้าถึงข้อมูลทุกหลักสูตรและผู้ใช้ได้ แต่ไม่สามารถแก้ไขเนื้อหาการสอนโดยตรง