diff --git a/docs/screen_list/screen_list_Admin.md b/docs/screen_list/screen_list_Admin.md new file mode 100644 index 00000000..21d40b29 --- /dev/null +++ b/docs/screen_list/screen_list_Admin.md @@ -0,0 +1,711 @@ +# Screen List สำหรับผู้ดูแลระบบ (Admin) + +เอกสารนี้รวบรวมรายการหน้าจอทั้งหมดสำหรับผู้ดูแลระบบ (Admin) ในระบบ E-Learning + +--- + +## 📋 สารบัญ + +1. [ระบบยืนยันตัวตน (Authentication)](#1-ระบบยืนยันตัวตน-authentication) +2. [Dashboard ผู้ดูแลระบบ](#2-dashboard-ผู้ดูแลระบบ) +3. [ระบบจัดการโปรไฟล์](#3-ระบบจัดการโปรไฟล์) +4. [ระบบจัดการผู้ใช้งาน](#4-ระบบจัดการผู้ใช้งาน) +5. [ระบบจัดการบทบาทและสิทธิ์](#5-ระบบจัดการบทบาทและสิทธิ์) +6. [ระบบรายงานและสถิติภาพรวม](#6-ระบบรายงานและสถิติภาพรวม) +7. [ระบบตั้งค่าระบบ](#7-ระบบตั้งค่าระบบ) + +--- + +## 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) + - วันที่ลงทะเบียน +- ปุ่ม "เพิ่มผู้ใช้ใหม่" +- ปุ่ม "นำเข้าผู้ใช้" (Import) +- ปุ่ม "ส่งออกข้อมูล" (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 (กรอกเมื่อต้องการเปลี่ยน) +- ปุ่ม "บันทึก" +- ปุ่ม "ยกเลิก" + +--- + +### 4.5 หน้านำเข้าผู้ใช้ (Import Users) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | USR-005 | +| **Screen Name** | Import Users | +| **URL** | `/admin/users/import` | +| **วัตถุประสงค์** | หน้าสำหรับนำเข้าผู้ใช้จำนวนมากจากไฟล์ | + +**องค์ประกอบหน้าจอ:** +- ลิงก์ดาวน์โหลด Template (Excel/CSV) +- พื้นที่อัปโหลดไฟล์ +- ตัวอย่างข้อมูลที่จะนำเข้า (Preview) +- รายการ Error/Warning (ถ้ามี) +- Dropdown เลือกบทบาทเริ่มต้น +- Toggle ส่งอีเมลแจ้งผู้ใช้ทุกคน +- ปุ่ม "นำเข้า" +- ปุ่ม "ยกเลิก" + +**ฟังก์ชันการทำงาน:** +- รองรับไฟล์ Excel, CSV +- Validate ข้อมูลก่อนนำเข้า +- แสดง Error รายบรรทัด +- นำเข้าแบบ Batch + +--- + +## 5. ระบบจัดการบทบาทและสิทธิ์ + +### 5.1 หน้ารายการบทบาท (Role List) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | ROLE-001 | +| **Screen Name** | Role List | +| **URL** | `/admin/roles` | +| **วัตถุประสงค์** | หน้าแสดงรายการบทบาททั้งหมดในระบบ | + +**องค์ประกอบหน้าจอ:** +- ปุ่ม "เพิ่มบทบาทใหม่" +- ตารางรายการบทบาท + - ชื่อบทบาท + - คำอธิบาย + - จำนวนผู้ใช้ + - สถานะ (Active/Inactive) + - Actions (ดู, แก้ไข, ลบ) +- สถานะบทบาทพื้นฐาน (Admin, Instructor, Student) - ไม่สามารถลบได้ + +**ฟังก์ชันการทำงาน:** +- CRUD บทบาท (ยกเว้นบทบาทพื้นฐาน) +- ดูสิทธิ์ของแต่ละบทบาท + +--- + +### 5.2 หน้าสร้าง/แก้ไขบทบาท (Role Editor) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | ROLE-002 | +| **Screen Name** | Role Editor | +| **URL** | `/admin/roles/create` หรือ `/admin/roles/:id/edit` | +| **วัตถุประสงค์** | หน้าสำหรับสร้างหรือแก้ไขบทบาท | + +**องค์ประกอบหน้าจอ:** +- ช่องกรอกชื่อบทบาท +- ช่องกรอกคำอธิบาย +- รายการสิทธิ์ (Permissions) แบ่งตามหมวดหมู่ + - **หมวดผู้ใช้งาน** + - ดูรายการผู้ใช้ + - สร้างผู้ใช้ + - แก้ไขผู้ใช้ + - ลบผู้ใช้ + - ระงับผู้ใช้ + - **หมวดหลักสูตร** + - ดูหลักสูตร + - สร้างหลักสูตร + - แก้ไขหลักสูตร + - ลบหลักสูตร + - เผยแพร่หลักสูตร + - **หมวดบทเรียน** + - ดูบทเรียน + - สร้างบทเรียน + - แก้ไขบทเรียน + - ลบบทเรียน + - **หมวดแบบทดสอบ** + - ดูแบบทดสอบ + - สร้างแบบทดสอบ + - แก้ไขแบบทดสอบ + - ลบแบบทดสอบ + - ดูผลการทดสอบ + - **หมวดรายงาน** + - ดูรายงาน + - ส่งออกรายงาน + - **หมวดระบบ** + - เข้าถึง Dashboard + - ตั้งค่าระบบ +- ปุ่ม "เลือกทั้งหมด" / "ยกเลิกทั้งหมด" ในแต่ละหมวด +- ปุ่ม "บันทึก" +- ปุ่ม "ยกเลิก" + +**ฟังก์ชันการทำงาน:** +- กำหนดสิทธิ์เป็นรายตัว +- บันทึกบทบาท + +--- + +### 5.3 หน้าดูรายละเอียดบทบาท (Role Detail) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | ROLE-003 | +| **Screen Name** | Role Detail | +| **URL** | `/admin/roles/:id` | +| **วัตถุประสงค์** | หน้าแสดงรายละเอียดบทบาทและรายการผู้ใช้ในบทบาท | + +**องค์ประกอบหน้าจอ:** +- ข้อมูลบทบาท + - ชื่อบทบาท + - คำอธิบาย + - วันที่สร้าง +- รายการสิทธิ์ที่มี (Read-only) +- ตารางผู้ใช้ในบทบาทนี้ + - ชื่อผู้ใช้ + - อีเมล + - สถานะ +- ปุ่ม "แก้ไข" +- ปุ่ม "ลบ" (ถ้าไม่ใช่บทบาทพื้นฐาน) + +--- + +## 6. ระบบรายงานและสถิติภาพรวม + +### 6.1 หน้ารายงานผู้ใช้งาน (User Report) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | RPT-001 | +| **Screen Name** | User Report | +| **URL** | `/admin/reports/users` | +| **วัตถุประสงค์** | หน้าแสดงรายงานเกี่ยวกับผู้ใช้งานในระบบ | + +**องค์ประกอบหน้าจอ:** +- ตัวเลือกช่วงเวลา (Date Range Picker) +- **สถิติภาพรวม** + - จำนวนผู้ใช้ทั้งหมด + - จำนวนผู้ใช้ใหม่ + - จำนวนผู้ใช้ที่ Active + - จำนวนผู้ใช้ที่ถูกระงับ +- **กราฟ** + - กราฟผู้ใช้ใหม่รายวัน/สัปดาห์/เดือน + - กราฟสัดส่วนผู้ใช้ตามบทบาท + - กราฟการเข้าสู่ระบบรายวัน +- **ตารางข้อมูล** + - รายชื่อผู้ใช้ใหม่ + - ผู้ใช้ที่ Active มากที่สุด +- ปุ่ม "ส่งออก Excel" +- ปุ่ม "ส่งออก PDF" + +--- + +### 6.2 หน้ารายงานหลักสูตร (Course Report) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | RPT-002 | +| **Screen Name** | Course Report | +| **URL** | `/admin/reports/courses` | +| **วัตถุประสงค์** | หน้าแสดงรายงานเกี่ยวกับหลักสูตรในระบบ | + +**องค์ประกอบหน้าจอ:** +- ตัวเลือกช่วงเวลา (Date Range Picker) +- **สถิติภาพรวม** + - จำนวนหลักสูตรทั้งหมด + - หลักสูตรที่เผยแพร่ + - หลักสูตรฉบับร่าง + - อัตราการลงทะเบียนเฉลี่ย +- **กราฟ** + - กราฟหลักสูตรใหม่รายเดือน + - กราฟการลงทะเบียนต่อหลักสูตร + - กราฟอัตราการจบหลักสูตร + - กราฟหลักสูตรยอดนิยม (Top 10) +- **ตารางข้อมูล** + - หลักสูตรยอดนิยม + - หลักสูตรที่สร้างล่าสุด +- ปุ่ม "ส่งออก Excel" +- ปุ่ม "ส่งออก PDF" + +--- + +### 6.3 หน้ารายงานการเรียน (Learning Report) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | RPT-003 | +| **Screen Name** | Learning Report | +| **URL** | `/admin/reports/learning` | +| **วัตถุประสงค์** | หน้าแสดงรายงานสถิติการเรียนรู้ในระบบ | + +**องค์ประกอบหน้าจอ:** +- ตัวเลือกช่วงเวลา (Date Range Picker) +- Dropdown เลือกหลักสูตร (หรือทั้งหมด) +- **สถิติภาพรวม** + - จำนวนการลงทะเบียนทั้งหมด + - อัตราการจบหลักสูตรเฉลี่ย + - เวลาเรียนเฉลี่ย + - คะแนนแบบทดสอบเฉลี่ย +- **กราฟ** + - กราฟความคืบหน้าการเรียน + - กราฟเวลาเรียนรายวัน + - กราฟอัตราการผ่านแบบทดสอบ +- **ตารางข้อมูล** + - ผู้เรียนที่มีความคืบหน้ามากที่สุด + - ผู้เรียนที่ใช้เวลามากที่สุด +- ปุ่ม "ส่งออก Excel" +- ปุ่ม "ส่งออก PDF" + +--- + +### 6.4 หน้ารายงานการใช้งานระบบ (System Usage Report) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | RPT-004 | +| **Screen Name** | System Usage Report | +| **URL** | `/admin/reports/system` | +| **วัตถุประสงค์** | หน้าแสดงรายงานการใช้งานระบบโดยรวม | + +**องค์ประกอบหน้าจอ:** +- ตัวเลือกช่วงเวลา (Date Range Picker) +- **สถิติภาพรวม** + - จำนวนการเข้าชมต่อวัน + - จำนวน Session เฉลี่ย + - ระยะเวลาการใช้งานเฉลี่ย + - พื้นที่จัดเก็บที่ใช้ +- **กราฟ** + - กราฟการเข้าใช้งานรายชั่วโมง + - กราฟการเข้าใช้งานรายวัน + - กราฟปริมาณ Storage ที่ใช้ +- **ข้อมูลเซิร์ฟเวอร์** + - สถานะระบบ + - เวอร์ชันระบบ + - Uptime +- ปุ่ม "ส่งออก" + +--- + +## 7. ระบบตั้งค่าระบบ + +### 7.1 หน้าตั้งค่าทั่วไป (General Settings) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | SET-001 | +| **Screen Name** | General Settings | +| **URL** | `/admin/settings/general` | +| **วัตถุประสงค์** | หน้าสำหรับตั้งค่าทั่วไปของระบบ | + +**องค์ประกอบหน้าจอ:** +- **ข้อมูลระบบ** + - ชื่อระบบ + - โลโก้ระบบ + - คำอธิบายระบบ + - อีเมลติดต่อ +- **การตั้งค่าหน้าเว็บ** + - ภาษาเริ่มต้น + - Timezone + - รูปแบบวันที่ +- **การตั้งค่าการลงทะเบียน** + - อนุญาตการสมัครสมาชิก (เปิด/ปิด) + - ต้องยืนยันอีเมล + - บทบาทเริ่มต้นสำหรับสมาชิกใหม่ +- ปุ่ม "บันทึก" + +--- + +### 7.2 หน้าตั้งค่าอีเมล (Email Settings) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | SET-002 | +| **Screen Name** | Email Settings | +| **URL** | `/admin/settings/email` | +| **วัตถุประสงค์** | หน้าสำหรับตั้งค่าการส่งอีเมลของระบบ | + +**องค์ประกอบหน้าจอ:** +- **การตั้งค่า SMTP** + - SMTP Host + - SMTP Port + - SMTP Username + - SMTP Password + - การเข้ารหัส (TLS/SSL) +- **การตั้งค่าผู้ส่ง** + - ชื่อผู้ส่ง + - อีเมลผู้ส่ง +- ปุ่ม "ทดสอบส่งอีเมล" +- ปุ่ม "บันทึก" + +**ฟังก์ชันการทำงาน:** +- ทดสอบการเชื่อมต่อ SMTP +- ส่งอีเมลทดสอบ + +--- + +### 7.3 หน้าตั้งค่าการจัดเก็บไฟล์ (Storage Settings) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | SET-003 | +| **Screen Name** | Storage Settings | +| **URL** | `/admin/settings/storage` | +| **วัตถุประสงค์** | หน้าสำหรับตั้งค่าการจัดเก็บไฟล์ | + +**องค์ประกอบหน้าจอ:** +- **ประเภทการจัดเก็บ** + - Local Storage + - Cloud Storage (S3, MinIO) +- **การตั้งค่า Cloud (ถ้าเลือก)** + - Endpoint + - Access Key + - Secret Key + - Bucket Name + - Region +- **ข้อจำกัด** + - ขนาดไฟล์สูงสุดที่อนุญาต + - ประเภทไฟล์ที่อนุญาต + - พื้นที่จัดเก็บสูงสุดต่อผู้ใช้ +- **สถานะปัจจุบัน** + - พื้นที่ใช้งาน / พื้นที่ทั้งหมด + - จำนวนไฟล์ทั้งหมด +- ปุ่ม "ทดสอบการเชื่อมต่อ" +- ปุ่ม "บันทึก" + +--- + +### 7.4 หน้าตั้งค่าความปลอดภัย (Security Settings) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | SET-004 | +| **Screen Name** | Security Settings | +| **URL** | `/admin/settings/security` | +| **วัตถุประสงค์** | หน้าสำหรับตั้งค่าความปลอดภัยของระบบ | + +**องค์ประกอบหน้าจอ:** +- **นโยบายรหัสผ่าน** + - ความยาวขั้นต่ำ + - ต้องมีตัวพิมพ์ใหญ่ + - ต้องมีตัวเลข + - ต้องมีอักขระพิเศษ + - ระยะเวลาหมดอายุรหัสผ่าน +- **การเข้าสู่ระบบ** + - จำนวนครั้งที่ผิดพลาดสูงสุด + - ระยะเวลาล็อค + - บังคับ 2FA สำหรับ Admin +- **Session** + - ระยะเวลา Session + - อนุญาต Login หลายอุปกรณ์ +- ปุ่ม "บันทึก" + +--- + +### 7.5 หน้า Audit Log (ประวัติการใช้งาน) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | SET-005 | +| **Screen Name** | Audit Log | +| **URL** | `/admin/settings/audit-log` | +| **วัตถุประสงค์** | หน้าแสดงประวัติการกระทำสำคัญในระบบ | + +**องค์ประกอบหน้าจอ:** +- ตัวกรอง + - ช่วงเวลา + - ผู้กระทำ + - ประเภทกิจกรรม +- ตารางประวัติ + - วันที่-เวลา + - ผู้กระทำ + - กิจกรรม + - รายละเอียด + - IP Address +- Pagination +- ปุ่ม "ส่งออก" + +**ฟังก์ชันการทำงาน:** +- ค้นหาและกรองประวัติ +- ส่งออกเป็น Excel/CSV + +--- + +## 📊 สรุปจำนวนหน้าจอ + +| หมวดหมู่ | จำนวนหน้าจอ | +|----------|-------------| +| ระบบยืนยันตัวตน | 3 | +| Dashboard | 1 | +| ระบบจัดการโปรไฟล์ | 3 | +| ระบบจัดการผู้ใช้งาน | 5 | +| ระบบจัดการบทบาทและสิทธิ์ | 3 | +| ระบบรายงานและสถิติ | 4 | +| ระบบตั้งค่าระบบ | 5 | +| **รวมทั้งหมด** | **24** | + +--- + +## 📝 หมายเหตุ + +1. **Screen ID** ใช้รูปแบบ `[หมวด]-[ลำดับ]` เพื่อง่ายต่อการอ้างอิง +2. หน้าจอสำหรับ Admin เน้นการจัดการระบบภาพรวม ไม่รวมฟังก์ชันการสอนหรือเรียน +3. บางฟังก์ชันอาจปรับลดหรือเพิ่มเติมได้ตามความต้องการของโปรเจกต์ +4. URL ที่ระบุเป็นตัวอย่างโครงสร้าง สามารถปรับเปลี่ยนได้ตามความเหมาะสม +5. Admin สามารถเข้าถึงข้อมูลทุกหลักสูตรและผู้ใช้ได้ แต่ไม่สามารถแก้ไขเนื้อหาการสอนโดยตรง diff --git a/docs/screen_list/screen_list_Instructor.md b/docs/screen_list/screen_list_Instructor.md new file mode 100644 index 00000000..c4944620 --- /dev/null +++ b/docs/screen_list/screen_list_Instructor.md @@ -0,0 +1,734 @@ +# Screen List สำหรับผู้สอน (Instructor) + +เอกสารนี้รวบรวมรายการหน้าจอทั้งหมดสำหรับผู้สอน (Instructor) ในระบบ E-Learning + +--- + +## 📋 สารบัญ + +1. [ระบบยืนยันตัวตน (Authentication)](#1-ระบบยืนยันตัวตน-authentication) +2. [Dashboard ผู้สอน](#2-dashboard-ผู้สอน) +3. [ระบบจัดการโปรไฟล์](#3-ระบบจัดการโปรไฟล์) +4. [ระบบจัดการหลักสูตร](#4-ระบบจัดการหลักสูตร) +5. [ระบบจัดการบทเรียน](#5-ระบบจัดการบทเรียน) +6. [ระบบจัดการเนื้อหา](#6-ระบบจัดการเนื้อหา) +7. [ระบบจัดการแบบทดสอบ](#7-ระบบจัดการแบบทดสอบ) +8. [ระบบรายงานและสถิติ](#8-ระบบรายงานและสถิติ) +9. [ระบบประกาศ](#9-ระบบประกาศ) + +--- + +## 1. ระบบยืนยันตัวตน (Authentication) + +### 1.1 หน้าเข้าสู่ระบบ (Login Page) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | AUTH-001 | +| **Screen Name** | Login | +| **URL** | `/login` | +| **วัตถุประสงค์** | หน้าสำหรับผู้สอนเข้าสู่ระบบด้วยอีเมลและรหัสผ่าน | + +**องค์ประกอบหน้าจอ:** +- ช่องกรอกอีเมล +- ช่องกรอกรหัสผ่าน +- ปุ่ม "เข้าสู่ระบบ" +- Checkbox "จดจำการเข้าสู่ระบบ" +- ลิงก์ "ลืมรหัสผ่าน?" +- ลิงก์ "สมัครสมาชิก" + +**ฟังก์ชันการทำงาน:** +- ตรวจสอบข้อมูลอีเมลและรหัสผ่าน +- แสดงข้อความ error หากข้อมูลไม่ถูกต้อง +- Redirect ไปยัง 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 หลัก (Instructor Dashboard) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | DASH-001 | +| **Screen Name** | Instructor Dashboard | +| **URL** | `/instructor/dashboard` | +| **วัตถุประสงค์** | หน้าแรกหลังเข้าสู่ระบบ แสดงภาพรวมข้อมูลผู้สอน | + +**องค์ประกอบหน้าจอ:** +- การ์ดสรุปข้อมูล (Summary Cards) + - จำนวนหลักสูตรทั้งหมด + - จำนวนผู้เรียนทั้งหมด + - จำนวนแบบทดสอบ + - อัตราความสำเร็จของผู้เรียน +- กราฟแสดงสถิติผู้เรียนในช่วงเวลา +- รายการหลักสูตรล่าสุด +- รายการกิจกรรมล่าสุด +- รายการประกาศล่าสุด +- เมนูทางลัด (Quick Actions) + - สร้างหลักสูตรใหม่ + - สร้างแบบทดสอบใหม่ + - ดูรายงาน + +**ฟังก์ชันการทำงาน:** +- ดึงข้อมูลสถิติของผู้สอน +- แสดงกราฟแบบ Real-time +- คลิกเพื่อเข้าสู่หน้าต่างๆ ได้ + +--- + +## 3. ระบบจัดการโปรไฟล์ + +### 3.1 หน้าดูโปรไฟล์ (View Profile) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | PROF-001 | +| **Screen Name** | View Profile | +| **URL** | `/instructor/profile` | +| **วัตถุประสงค์** | หน้าแสดงข้อมูลโปรไฟล์ผู้สอน | + +**องค์ประกอบหน้าจอ:** +- รูปโปรไฟล์ +- ชื่อ-นามสกุล +- อีเมล +- เบอร์โทรศัพท์ +- ตำแหน่ง/ความเชี่ยวชาญ +- ประวัติย่อ +- ปุ่ม "แก้ไขโปรไฟล์" + +--- + +### 3.2 หน้าแก้ไขโปรไฟล์ (Edit Profile) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | PROF-002 | +| **Screen Name** | Edit Profile | +| **URL** | `/instructor/profile/edit` | +| **วัตถุประสงค์** | หน้าสำหรับแก้ไขข้อมูลส่วนตัว | + +**องค์ประกอบหน้าจอ:** +- อัปโหลดรูปโปรไฟล์ +- ช่องกรอกชื่อ-นามสกุล +- ช่องกรอกเบอร์โทรศัพท์ +- ช่องกรอกตำแหน่ง/ความเชี่ยวชาญ +- ช่องกรอกประวัติย่อ (Rich Text Editor) +- ปุ่ม "บันทึก" +- ปุ่ม "ยกเลิก" + +**ฟังก์ชันการทำงาน:** +- Validate ข้อมูล +- อัปโหลดรูปภาพ +- บันทึกข้อมูลโปรไฟล์ + +--- + +### 3.3 หน้าเปลี่ยนรหัสผ่าน (Change Password) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | PROF-003 | +| **Screen Name** | Change Password | +| **URL** | `/instructor/profile/change-password` | +| **วัตถุประสงค์** | หน้าสำหรับเปลี่ยนรหัสผ่าน | + +**องค์ประกอบหน้าจอ:** +- ช่องกรอกรหัสผ่านปัจจุบัน +- ช่องกรอกรหัสผ่านใหม่ +- ช่องยืนยันรหัสผ่านใหม่ +- ตัวบอกความแข็งแรงของรหัสผ่าน +- ปุ่ม "เปลี่ยนรหัสผ่าน" + +**ฟังก์ชันการทำงาน:** +- ตรวจสอบรหัสผ่านปัจจุบัน +- Validate รหัสผ่านใหม่ +- บันทึกรหัสผ่านใหม่ + +--- + +## 4. ระบบจัดการหลักสูตร + +### 4.1 หน้ารายการหลักสูตร (Course List) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | CRS-001 | +| **Screen Name** | Course List | +| **URL** | `/instructor/courses` | +| **วัตถุประสงค์** | หน้าแสดงรายการหลักสูตรทั้งหมดของผู้สอน | + +**องค์ประกอบหน้าจอ:** +- ช่องค้นหาหลักสูตร +- ตัวกรอง (Filter) + - สถานะหลักสูตร (เผยแพร่/ซ่อน/ฉบับร่าง) + - หมวดหมู่ +- ปุ่ม "สร้างหลักสูตรใหม่" +- ตารางรายการหลักสูตร + - รูปปก + - ชื่อหลักสูตร + - หมวดหมู่ + - จำนวนผู้เรียน + - สถานะ + - วันที่สร้าง + - Actions (ดู, แก้ไข, ลบ) +- Pagination + +**ฟังก์ชันการทำงาน:** +- ค้นหาหลักสูตร +- กรองตามเงื่อนไข +- เรียงลำดับ +- ลบหลักสูตร (พร้อม Confirmation Dialog) + +--- + +### 4.2 หน้าสร้างหลักสูตร (Create Course) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | CRS-002 | +| **Screen Name** | Create Course | +| **URL** | `/instructor/courses/create` | +| **วัตถุประสงค์** | หน้าสำหรับสร้างหลักสูตรใหม่ | + +**องค์ประกอบหน้าจอ:** +- Stepper/Tabs แสดงขั้นตอน +- **ขั้นตอนที่ 1: ข้อมูลพื้นฐาน** + - ช่องกรอกชื่อหลักสูตร + - ช่องกรอกคำอธิบายสั้น + - Rich Text Editor สำหรับคำอธิบายเต็ม + - อัปโหลดรูปปกหลักสูตร + - Dropdown เลือกหมวดหมู่ + - ช่องกรอก Tags +- **ขั้นตอนที่ 2: การตั้งค่า** + - วันที่เริ่มต้น-สิ้นสุด + - สถานะหลักสูตร (ฉบับร่าง/เผยแพร่) + - การตั้งค่าการเข้าถึง (สาธารณะ/จำกัด) +- ปุ่ม "บันทึกเป็นฉบับร่าง" +- ปุ่ม "เผยแพร่" +- ปุ่ม "ยกเลิก" + +**ฟังก์ชันการทำงาน:** +- Validate ข้อมูล +- อัปโหลดรูปปก +- บันทึกหลักสูตร +- Auto-save ฉบับร่าง + +--- + +### 4.3 หน้าแก้ไขหลักสูตร (Edit Course) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | CRS-003 | +| **Screen Name** | Edit Course | +| **URL** | `/instructor/courses/:id/edit` | +| **วัตถุประสงค์** | หน้าสำหรับแก้ไขข้อมูลหลักสูตร | + +**องค์ประกอบหน้าจอ:** +- (เหมือนหน้าสร้างหลักสูตร แต่แสดงข้อมูลเดิม) +- ปุ่ม "บันทึก" +- ปุ่ม "ยกเลิก" + +--- + +### 4.4 หน้าดูรายละเอียดหลักสูตร (Course Detail) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | CRS-004 | +| **Screen Name** | Course Detail | +| **URL** | `/instructor/courses/:id` | +| **วัตถุประสงค์** | หน้าแสดงรายละเอียดหลักสูตรและโครงสร้างบทเรียน | + +**องค์ประกอบหน้าจอ:** +- Header ข้อมูลหลักสูตร + - รูปปก + - ชื่อหลักสูตร + - หมวดหมู่ + - สถานะ + - จำนวนผู้เรียน + - ปุ่ม "แก้ไข" +- Tabs + - **Tab โครงสร้างบทเรียน** - แสดง Chapters และ Lessons + - **Tab ผู้เรียน** - รายการผู้เรียนในหลักสูตร + - **Tab สถิติ** - กราฟและข้อมูลสถิติ + - **Tab ประกาศ** - รายการประกาศในหลักสูตร +- ปุ่ม "เพิ่ม Chapter" + +--- + +## 5. ระบบจัดการบทเรียน + +### 5.1 หน้าจัดการโครงสร้างบทเรียน (Manage Course Structure) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | LES-001 | +| **Screen Name** | Manage Course Structure | +| **URL** | `/instructor/courses/:id/structure` | +| **วัตถุประสงค์** | หน้าสำหรับจัดโครงสร้าง Chapters และ Lessons | + +**องค์ประกอบหน้าจอ:** +- รายการ Chapter (Drag & Drop เพื่อจัดเรียง) + - ชื่อ Chapter + - จำนวน Lessons + - ปุ่ม เพิ่ม/แก้ไข/ลบ +- รายการ Lesson ในแต่ละ Chapter (Drag & Drop) + - ชื่อ Lesson + - ประเภทเนื้อหา (วิดีโอ/PDF/ข้อความ/แบบทดสอบ) + - สถานะ + - ระยะเวลา + - ปุ่ม เพิ่ม/แก้ไข/ลบ +- ปุ่ม "เพิ่ม Chapter" +- ปุ่ม "บันทึกลำดับ" + +**ฟังก์ชันการทำงาน:** +- Drag & Drop เพื่อจัดเรียงลำดับ +- CRUD Chapter/Lesson +- กำหนดเงื่อนไขการเข้าถึง + +--- + +### 5.2 Modal เพิ่ม/แก้ไข Chapter +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | LES-002 | +| **Screen Name** | Chapter Modal | +| **URL** | Modal (ไม่มี URL) | +| **วัตถุประสงค์** | Modal สำหรับเพิ่มหรือแก้ไข Chapter | + +**องค์ประกอบหน้าจอ:** +- ช่องกรอกชื่อ Chapter +- ช่องกรอกคำอธิบาย +- ปุ่ม "บันทึก" +- ปุ่ม "ยกเลิก" + +--- + +### 5.3 หน้าสร้าง/แก้ไข Lesson (Lesson Editor) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | LES-003 | +| **Screen Name** | Lesson Editor | +| **URL** | `/instructor/courses/:courseId/lessons/:lessonId/edit` | +| **วัตถุประสงค์** | หน้าสำหรับสร้างหรือแก้ไข Lesson | + +**องค์ประกอบหน้าจอ:** +- ช่องกรอกชื่อ Lesson +- ช่องกรอกคำอธิบาย +- Dropdown เลือกประเภทเนื้อหา +- ส่วนเพิ่มเนื้อหา (ตามประเภท) +- การตั้งค่า Lesson + - ระยะเวลาโดยประมาณ + - เงื่อนไขการเข้าถึง (ต้องเรียน Lesson ก่อนหน้า) + - เป็น Preview ได้หรือไม่ +- ปุ่ม "บันทึก" +- ปุ่ม "ยกเลิก" + +--- + +## 6. ระบบจัดการเนื้อหา + +### 6.1 หน้าอัปโหลดวิดีโอ (Video Upload) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | CNT-001 | +| **Screen Name** | Video Upload | +| **URL** | ส่วนหนึ่งของ Lesson Editor | +| **วัตถุประสงค์** | ส่วนสำหรับอัปโหลดและจัดการวิดีโอ | + +**องค์ประกอบหน้าจอ:** +- พื้นที่ Drag & Drop อัปโหลดไฟล์ +- แถบแสดงความคืบหน้าการอัปโหลด +- Preview วิดีโอ +- ข้อมูลวิดีโอ (ขนาดไฟล์, ระยะเวลา) +- ปุ่ม "เปลี่ยนวิดีโอ" +- ปุ่ม "ลบวิดีโอ" + +**ฟังก์ชันการทำงาน:** +- รองรับไฟล์ MP4 +- แสดง Progress Upload +- Validate ขนาดไฟล์ + +--- + +### 6.2 หน้าอัปโหลดเอกสาร PDF (PDF Upload) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | CNT-002 | +| **Screen Name** | PDF Upload | +| **URL** | ส่วนหนึ่งของ Lesson Editor | +| **วัตถุประสงค์** | ส่วนสำหรับอัปโหลดเอกสาร PDF | + +**องค์ประกอบหน้าจอ:** +- พื้นที่ Drag & Drop อัปโหลดไฟล์ +- แถบแสดงความคืบหน้าการอัปโหลด +- Preview PDF (embedded viewer) +- ข้อมูลไฟล์ (ขนาดไฟล์, จำนวนหน้า) +- ปุ่ม "เปลี่ยนไฟล์" +- ปุ่ม "ลบไฟล์" + +--- + +### 6.3 หน้าแก้ไขเนื้อหาข้อความ (Rich Text Editor) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | CNT-003 | +| **Screen Name** | Rich Text Content | +| **URL** | ส่วนหนึ่งของ Lesson Editor | +| **วัตถุประสงค์** | ส่วนสำหรับเพิ่มเนื้อหาข้อความ | + +**องค์ประกอบหน้าจอ:** +- Rich Text Editor พร้อมเครื่องมือ + - จัดรูปแบบตัวอักษร (Bold, Italic, Underline) + - หัวข้อ (Heading) + - รายการ (Bullet, Numbered) + - แทรกรูปภาพ + - แทรกลิงก์ + - แทรกตาราง + - แทรกโค้ด + +--- + +### 6.4 หน้าจัดการไฟล์ประกอบ (Attachments) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | CNT-004 | +| **Screen Name** | Attachments Manager | +| **URL** | ส่วนหนึ่งของ Lesson Editor | +| **วัตถุประสงค์** | ส่วนสำหรับแนบไฟล์ประกอบการเรียน | + +**องค์ประกอบหน้าจอ:** +- รายการไฟล์ที่แนบ + - ชื่อไฟล์ + - ขนาดไฟล์ + - ประเภทไฟล์ + - ปุ่มลบ +- พื้นที่ Drag & Drop อัปโหลดไฟล์ใหม่ +- ปุ่ม "เพิ่มไฟล์" + +--- + +## 7. ระบบจัดการแบบทดสอบ + +### 7.1 หน้ารายการแบบทดสอบ (Quiz List) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | QZ-001 | +| **Screen Name** | Quiz List | +| **URL** | `/instructor/courses/:id/quizzes` | +| **วัตถุประสงค์** | หน้าแสดงรายการแบบทดสอบทั้งหมดในหลักสูตร | + +**องค์ประกอบหน้าจอ:** +- ช่องค้นหา +- ตารางรายการแบบทดสอบ + - ชื่อแบบทดสอบ + - จำนวนคำถาม + - เวลาในการทำ + - คะแนนเต็ม + - เกณฑ์ผ่าน + - สถานะ + - Actions (ดู, แก้ไข, ลบ, ดูผลสอบ) +- ปุ่ม "สร้างแบบทดสอบใหม่" + +--- + +### 7.2 หน้าสร้างแบบทดสอบ (Create Quiz) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | QZ-002 | +| **Screen Name** | Create Quiz | +| **URL** | `/instructor/courses/:id/quizzes/create` | +| **วัตถุประสงค์** | หน้าสำหรับสร้างแบบทดสอบใหม่ | + +**องค์ประกอบหน้าจอ:** +- **ส่วนข้อมูลพื้นฐาน** + - ช่องกรอกชื่อแบบทดสอบ + - ช่องกรอกคำอธิบาย + - เลือก Lesson ที่จะแนบ +- **ส่วนการตั้งค่า** + - เวลาในการทำ (นาที) + - จำนวนครั้งที่ทำได้ + - คะแนนเต็ม + - เกณฑ์ผ่าน (%) + - แสดงคำตอบหลังทำเสร็จ + - สลับลำดับคำถาม +- **ส่วนคำถาม** + - รายการคำถาม (Drag & Drop) + - ปุ่ม "เพิ่มคำถาม" +- ปุ่ม "บันทึก" +- ปุ่ม "ยกเลิก" + +--- + +### 7.3 Modal เพิ่ม/แก้ไขคำถาม (Question Modal) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | QZ-003 | +| **Screen Name** | Question Modal | +| **URL** | Modal (ไม่มี URL) | +| **วัตถุประสงค์** | Modal สำหรับเพิ่มหรือแก้ไขคำถาม | + +**องค์ประกอบหน้าจอ:** +- Dropdown เลือกประเภทคำถาม (ปรนัย/ถูก-ผิด) +- ช่องกรอกคำถาม (รองรับ Rich Text) +- อัปโหลดรูปภาพประกอบ (ถ้ามี) +- **สำหรับคำถามปรนัย:** + - รายการตัวเลือก + - Radio เลือกคำตอบที่ถูกต้อง + - ปุ่มเพิ่ม/ลบตัวเลือก +- **สำหรับคำถามถูก-ผิด:** + - Radio เลือก ถูก/ผิด +- ช่องกรอกคะแนน +- ช่องกรอกคำอธิบายเฉลย +- ปุ่ม "บันทึก" +- ปุ่ม "ยกเลิก" + +--- + +### 7.4 หน้าแก้ไขแบบทดสอบ (Edit Quiz) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | QZ-004 | +| **Screen Name** | Edit Quiz | +| **URL** | `/instructor/courses/:courseId/quizzes/:quizId/edit` | +| **วัตถุประสงค์** | หน้าสำหรับแก้ไขแบบทดสอบ | + +**องค์ประกอบหน้าจอ:** +- (เหมือนหน้าสร้างแบบทดสอบ แต่แสดงข้อมูลเดิม) + +--- + +### 7.5 หน้าดูผลการทดสอบ (Quiz Results) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | QZ-005 | +| **Screen Name** | Quiz Results | +| **URL** | `/instructor/courses/:courseId/quizzes/:quizId/results` | +| **วัตถุประสงค์** | หน้าแสดงผลการทดสอบของผู้เรียนทั้งหมด | + +**องค์ประกอบหน้าจอ:** +- สถิติภาพรวม + - จำนวนผู้ทำทั้งหมด + - คะแนนเฉลี่ย + - อัตราผ่าน + - คะแนนสูงสุด/ต่ำสุด +- กราฟกระจายคะแนน +- ตารางผลการทดสอบรายบุคคล + - ชื่อผู้เรียน + - คะแนน + - สถานะ (ผ่าน/ไม่ผ่าน) + - เวลาที่ใช้ + - จำนวนครั้งที่ทำ + - วันที่ทำ + - ปุ่ม "ดูรายละเอียด" +- ปุ่ม "ส่งออก Excel" + +--- + +### 7.6 หน้าดูคำตอบรายบุคคล (Individual Result) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | QZ-006 | +| **Screen Name** | Individual Quiz Result | +| **URL** | `/instructor/quizzes/:quizId/results/:userId` | +| **วัตถุประสงค์** | หน้าแสดงคำตอบของผู้เรียนแต่ละคน | + +**องค์ประกอบหน้าจอ:** +- ข้อมูลผู้เรียน +- สรุปผลการทดสอบ +- รายการคำถามพร้อมคำตอบ + - คำถาม + - คำตอบที่เลือก + - คำตอบที่ถูกต้อง + - คะแนนที่ได้ + - สถานะ (ถูก/ผิด) + +--- + +## 8. ระบบรายงานและสถิติ + +### 8.1 หน้ารายงานผู้เรียนในหลักสูตร (Course Learner Report) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | RPT-001 | +| **Screen Name** | Course Learner Report | +| **URL** | `/instructor/courses/:id/reports/learners` | +| **วัตถุประสงค์** | หน้าแสดงรายงานผู้เรียนในหลักสูตร | + +**องค์ประกอบหน้าจอ:** +- สรุปภาพรวม + - จำนวนผู้เรียนทั้งหมด + - จำนวนผู้จบหลักสูตร + - อัตราความสำเร็จ + - เวลาเรียนเฉลี่ย +- กราฟความคืบหน้า +- ตารางผู้เรียน + - ชื่อผู้เรียน + - อีเมล + - วันที่ลงทะเบียน + - ความคืบหน้า (%) + - Lesson ปัจจุบัน + - คะแนนแบบทดสอบรวม + - สถานะ (กำลังเรียน/จบแล้ว) + - ปุ่ม "ดูรายละเอียด" +- ตัวกรอง + - สถานะ + - ช่วงวันที่ลงทะเบียน +- ปุ่ม "ส่งออก Excel" +- ปุ่ม "ส่งออก PDF" + +--- + +### 8.2 หน้ารายงานความคืบหน้ารายบุคคล (Individual Progress Report) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | RPT-002 | +| **Screen Name** | Individual Progress Report | +| **URL** | `/instructor/courses/:courseId/reports/learners/:userId` | +| **วัตถุประสงค์** | หน้าแสดงความคืบหน้าการเรียนของผู้เรียนแต่ละคน | + +**องค์ประกอบหน้าจอ:** +- ข้อมูลผู้เรียน + - รูปโปรไฟล์ + - ชื่อ-นามสกุล + - อีเมล + - วันที่ลงทะเบียน +- สรุปความคืบหน้า + - เปอร์เซ็นต์ความสำเร็จ + - เวลาเรียนรวม + - คะแนนรวม +- รายละเอียดการเรียนตาม Chapter/Lesson + - สถานะแต่ละ Lesson (ยังไม่เริ่ม/กำลังเรียน/เสร็จสิ้น) + - คะแนนแบบทดสอบ + - เวลาที่ใช้ +- ปุ่ม "ดาวน์โหลดรายงาน" + +--- + +### 8.3 หน้ารายงานคะแนนแบบทดสอบ (Quiz Score Report) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | RPT-003 | +| **Screen Name** | Quiz Score Report | +| **URL** | `/instructor/courses/:id/reports/quiz-scores` | +| **วัตถุประสงค์** | หน้าแสดงรายงานคะแนนแบบทดสอบ | + +**องค์ประกอบหน้าจอ:** +- Dropdown เลือกแบบทดสอบ +- สถิติภาพรวม +- กราฟเปรียบเทียบ +- ตารางคะแนน +- ปุ่ม "ส่งออก" + +--- + +## 9. ระบบประกาศ + +### 9.1 หน้ารายการประกาศ (Announcement List) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | ANN-001 | +| **Screen Name** | Announcement List | +| **URL** | `/instructor/courses/:id/announcements` | +| **วัตถุประสงค์** | หน้าแสดงรายการประกาศในหลักสูตร | + +**องค์ประกอบหน้าจอ:** +- ปุ่ม "สร้างประกาศใหม่" +- รายการประกาศ + - หัวข้อ + - เนื้อหาย่อ + - วันที่โพสต์ + - สถานะ (เผยแพร่/ซ่อน) + - ปุ่ม แก้ไข/ลบ +- Pagination + +--- + +### 9.2 หน้าสร้างประกาศ (Create Announcement) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | ANN-002 | +| **Screen Name** | Create Announcement | +| **URL** | `/instructor/courses/:id/announcements/create` | +| **วัตถุประสงค์** | หน้าสำหรับสร้างประกาศใหม่ | + +**องค์ประกอบหน้าจอ:** +- ช่องกรอกหัวข้อ +- Rich Text Editor สำหรับเนื้อหา +- อัปโหลดไฟล์แนบ +- สถานะ (เผยแพร่ทันที/ตั้งเวลา/ซ่อน) +- ตั้งเวลาเผยแพร่ (ถ้าเลือกตั้งเวลา) +- ปุ่ม "โพสต์" +- ปุ่ม "บันทึกเป็นฉบับร่าง" +- ปุ่ม "ยกเลิก" + +--- + +### 9.3 หน้าแก้ไขประกาศ (Edit Announcement) +| รายละเอียด | คำอธิบาย | +|------------|----------| +| **Screen ID** | ANN-003 | +| **Screen Name** | Edit Announcement | +| **URL** | `/instructor/courses/:id/announcements/:announcementId/edit` | +| **วัตถุประสงค์** | หน้าสำหรับแก้ไขประกาศ | + +**องค์ประกอบหน้าจอ:** +- (เหมือนหน้าสร้างประกาศ แต่แสดงข้อมูลเดิม) + +--- + +## 📊 สรุปจำนวนหน้าจอ + +| หมวดหมู่ | จำนวนหน้าจอ | +|----------|-------------| +| ระบบยืนยันตัวตน | 3 | +| Dashboard | 1 | +| ระบบจัดการโปรไฟล์ | 3 | +| ระบบจัดการหลักสูตร | 4 | +| ระบบจัดการบทเรียน | 3 | +| ระบบจัดการเนื้อหา | 4 | +| ระบบจัดการแบบทดสอบ | 6 | +| ระบบรายงานและสถิติ | 3 | +| ระบบประกาศ | 3 | +| **รวมทั้งหมด** | **30** | + +--- + +## 📝 หมายเหตุ + +1. **Screen ID** ใช้รูปแบบ `[หมวด]-[ลำดับ]` เพื่อง่ายต่อการอ้างอิง +2. หน้าจอบางส่วนเป็น Modal หรือ Component ย่อยที่ไม่มี URL แยกต่างหาก +3. URL ที่ระบุเป็นตัวอย่างโครงสร้าง สามารถปรับเปลี่ยนได้ตามความเหมาะสม +4. เอกสารนี้ครอบคลุมหน้าจอหลักสำหรับผู้สอน ไม่รวมหน้าจอของ Admin และ Student diff --git a/docs/screen list_user.md b/docs/screen_list/screen_list_user.md similarity index 100% rename from docs/screen list_user.md rename to docs/screen_list/screen_list_user.md