# Prompt: Personalized Learning Dashboard สำหรับบุคลากรโรงเรียน

คัดลอกเนื้อหาด้านล่างทั้งหมดไปวางในแชทเพื่อสั่งสร้างระบบ

---

## บทบาทและบริบท

คุณคือ Senior Frontend Engineer ผู้เชี่ยวชาญการสร้างเว็บแอปพลิเคชัน Production-Grade แบบไฟล์เดียว (Single-file HTML) ด้วย HTML, CSS (หรือ Tailwind ผ่าน CDN), และ JavaScript ล้วน (Vanilla JS) โดยไม่ต้องพึ่งพา Build Tools ใดๆ

ให้คุณสร้าง **"Personalized Learning Dashboard"** ซึ่งเป็นเครื่องมือสำหรับติดตามเส้นทางการพัฒนา (Learning Path) ของบุคลากรในโรงเรียนเป็นรายบุคคล

## ผู้ใช้งาน (Target Users)

- **ฝ่าย HR โรงเรียน** — ใช้บันทึกและติดตามภาพรวมการพัฒนาบุคลากรทั้งหมด
- **หัวหน้างาน/ผู้บริหารสายงาน** — ใช้ดูความก้าวหน้าของบุคลากรในทีมตนเอง เพื่อประกอบการประเมินและวางแผนพัฒนา

ผู้ใช้งานอาจไม่ถนัดเทคโนโลยี ดังนั้น UI ต้องเรียบง่าย ชัดเจน ไม่ซับซ้อน

## โครงสร้างหน้าจอและส่วนประกอบ (Screens & Components)

### 1. หน้าหลัก — Dashboard Overview
- แถบสรุปภาพรวม (Summary Cards): จำนวนบุคลากรทั้งหมด, จำนวนที่บรรลุเป้าหมายแล้ว, จำนวนที่กำลังดำเนินการ, จำนวนที่ยังไม่เริ่ม
- กราฟสรุปความก้าวหน้ารวมของทั้งโรงเรียน (เช่น Bar Chart หรือ Donut Chart แสดงสัดส่วนสถานะ)
- ตารางรายชื่อบุคลากร (Personnel List) แสดงคอลัมน์: ชื่อ-นามสกุล, แผนก/ตำแหน่ง, เป้าหมายหลัก, % ความก้าวหน้า, สถานะ (Badge สี)
- ช่องค้นหา (Search) และตัวกรอง (Filter) ตามแผนก/สถานะ
- ปุ่ม "เพิ่มบุคลากรใหม่" และปุ่ม "นำเข้าข้อมูล (Import CSV)"
- คลิกแถวในตาราง เพื่อเปิดหน้าโปรไฟล์รายบุคคล

### 2. หน้าโปรไฟล์รายบุคคล (Individual Learning Path Profile)
แสดงข้อมูลของบุคลากร 1 คน แบ่งเป็น 3 ส่วนหลัก:

**ก) เป้าหมายการเรียนรู้/สมรรถนะ (Goals & Competency)**
- รายการเป้าหมาย พร้อมคำอธิบาย, วันที่ตั้งเป้า, วันครบกำหนด
- ฟอร์มเพิ่ม/แก้ไข/ลบเป้าหมาย

**ข) กิจกรรมพัฒนา/คอร์สอบรม (Activities & Courses)**
- รายการคอร์ส/กิจกรรมที่เข้าร่วม พร้อมวันที่, สถานะ (กำลังเรียน/จบแล้ว/ยกเลิก), ชั่วโมงอบรม
- ฟอร์มเพิ่ม/แก้ไข/ลบกิจกรรม

**ค) ความก้าวหน้า (Progress Tracking)**
- แถบ Progress Bar เทียบ % ความสำเร็จต่อเป้าหมายแต่ละข้อ
- กราฟเส้น (Line Chart) หรือ Timeline แสดงพัฒนาการตามช่วงเวลา
- ปุ่มอัปเดตความก้าวหน้า (Slider หรือ Input % พร้อมบันทึกวันที่อัปเดต)

- ปุ่ม "กลับหน้าหลัก" และปุ่ม "ลบบุคลากรนี้" (พร้อม Confirm Dialog)

### 3. ฟอร์มเพิ่ม/แก้ไขข้อมูลบุคลากร
- Modal หรือหน้าแยก: ชื่อ-นามสกุล, แผนก, ตำแหน่ง, อีเมล (ไม่บังคับ), รูปโปรไฟล์ (Avatar ตัวอักษรย่อถ้าไม่มีรูป)

### 4. ระบบนำเข้าข้อมูล (Import)
- อัปโหลดไฟล์ CSV เพื่อนำเข้ารายชื่อบุคลากรและ/หรือข้อมูลเป้าหมาย/กิจกรรมแบบกลุ่ม
- แสดงตัวอย่างข้อมูลก่อนยืนยันนำเข้า (Preview Table)
- แจ้งเตือนหากไฟล์รูปแบบผิดพลาด พร้อมระบุแถวที่มีปัญหา

### 5. ระบบสลับภาษา (Language Switcher)
- ปุ่มสลับภาษาไทย/อังกฤษ มุมขวาบน แปลข้อความ UI ทั้งหมด (Label, ปุ่ม, ข้อความแจ้งเตือน)

## พฤติกรรมของระบบ (Functional Behavior)

- ข้อมูลทั้งหมดบันทึกลง **LocalStorage** ของเบราว์เซอร์ ให้ข้อมูลไม่หายเมื่อรีเฟรชหน้า
- มีปุ่ม "Export ข้อมูล" เพื่อดาวน์โหลดข้อมูลทั้งหมดเป็นไฟล์ JSON หรือ CSV สำรอง
- มีปุ่ม "นำเข้าข้อมูลสำรอง" เพื่ออัปโหลดไฟล์ JSON ที่เคย Export ไว้กลับเข้าระบบ
- การกระทำที่ทำลายข้อมูล (ลบบุคลากร, ลบเป้าหมาย) ต้องมี Confirm Dialog เสมอ
- แสดง Toast/Notification เมื่อบันทึกสำเร็จ, แก้ไขสำเร็จ, หรือเกิดข้อผิดพลาด
- ข้อมูลตัวอย่าง (Mock Data) 5-8 รายการ ต้องถูกโหลดไว้ล่วงหน้าในครั้งแรกที่เปิดใช้งาน เพื่อให้เห็นภาพระบบทันที

## การจัดการข้อผิดพลาด (Error Handling)

- ฟอร์มทุกฟอร์มต้อง Validate ข้อมูล (ห้ามเว้นว่างช่องบังคับ, ตรวจรูปแบบอีเมล, ตรวจ % ต้องอยู่ระหว่าง 0-100)
- แสดงข้อความ Error ใต้ช่องกรอกที่ผิดพลาด เป็นภาษาที่เข้าใจง่าย (ไทย/อังกฤษตามภาษาที่เลือก)
- หากนำเข้าไฟล์ CSV ผิดรูปแบบ (คอลัมน์ไม่ครบ, ไฟล์ว่าง) ต้องแจ้งเตือนชัดเจนและไม่ทำให้ระบบล่ม
- หาก LocalStorage เต็มหรือใช้งานไม่ได้ (เช่น Private Browsing) ต้องแจ้งเตือนผู้ใช้อย่างสุภาพ ไม่ทำให้แอปค้าง

## Mood & Tone / Design System

**โทนสี (อ้างอิงสไตล์ Claude: เทา-ส้มอ่อน)**
```
--color-bg:            #FAFAF8   (พื้นหลังหลัก ขาวอมครีม)
--color-surface:       #FFFFFF   (พื้นผิวการ์ด/โมดัล)
--color-surface-alt:   #F0EEE6   (พื้นผิวรอง/แถบข้าง)
--color-border:        #E5E2DA   (เส้นขอบ)
--color-text-primary:  #2D2A26   (ข้อความหลัก เทาเข้มอมน้ำตาล)
--color-text-secondary:#6B6558   (ข้อความรอง)
--color-accent:        #D97757   (ส้มอ่อน — ปุ่มหลัก, ไฮไลท์, Progress Bar)
--color-accent-hover:  #C25F3F   (ส้มเข้มขึ้นเมื่อ Hover)
--color-accent-soft:   #F5E4DA   (ส้มพาสเทล พื้นหลัง Badge/แถบเบา)
--color-success:       #6B8F71   (เขียวหม่น — บรรลุเป้าหมาย)
--color-warning:       #D9A857   (เหลืองหม่น — กำลังดำเนินการ)
--color-danger:        #C25F5F   (แดงหม่น — ยังไม่เริ่ม/ผิดพลาด)
```

**ฟอนต์**
- ภาษาไทย: `'Noto Sans Thai', sans-serif` (โหลดผ่าน Google Fonts CDN)
- ภาษาอังกฤษ: `'Inter', sans-serif`
- หัวข้อใช้น้ำหนัก 600-700, เนื้อหาปกติใช้น้ำหนัก 400-500

**สไตล์โดยรวม**
- มินิมอล สะอาดตา ใช้ White Space มาก มุมโค้งมน (border-radius 12-16px)
- เงา (Shadow) เบาๆ แบบ soft shadow ไม่ฉูดฉาด
- ปุ่มหลักพื้นสีส้ม ตัวอักษรขาว, ปุ่มรองพื้นขาวขอบเทา
- ไอคอนใช้เส้นบาง (Outline Icons) สไตล์เดียวกับ Lucide Icons
- Layout แบบ Sidebar ซ้าย (เมนู/โลโก้) + Content หลักด้านขวา บนจอใหญ่

## การรองรับอุปกรณ์ (Responsive Design)

- **จอมือถือ (< 768px):** Sidebar พับเป็นเมนู Hamburger, ตารางเปลี่ยนเป็น Card List แนวตั้งแทนตารางแนวนอน, กราฟปรับขนาดอัตโนมัติ, ปุ่มและ Touch Target มีขนาดอย่างน้อย 44x44px
- **จอ Tablet/Desktop:** แสดง Layout เต็มรูปแบบตามที่ออกแบบ ตารางแสดงครบทุกคอลัมน์
- ทดสอบให้ใช้งานได้ลื่นไหลทั้งการแตะ (Touch) และคลิกเมาส์

## ข้อกำหนดทางเทคนิค

- ไฟล์เดียว (Single HTML file) ที่รวม CSS และ JavaScript ไว้ในไฟล์เดียวกัน หรือแยกไฟล์ CSS/JS ได้หากจำเป็น แต่ต้องรันได้ทันทีโดยไม่ต้องใช้ Build Process
- ใช้ Library กราฟจาก CDN (เช่น Chart.js) ได้
- โค้ดต้องมีคอมเมนต์อธิบายส่วนสำคัญเป็นภาษาไทย
- รองรับ Browser สมัยใหม่ (Chrome, Edge, Safari, Firefox เวอร์ชันล่าสุด)

---

**สรุปคำสั่งท้าย Prompt:** กรุณาสร้างระบบ Personalized Learning Dashboard ตามสเปกทั้งหมดข้างต้น เป็น Production-Grade Web Application ที่พร้อมใช้งานจริง ครบทุกฟังก์ชัน มี Mock Data ตัวอย่างพร้อมใช้ทันที และทดสอบให้แน่ใจว่าไม่มี Error ในการทำงาน