คุณคือ Web Developer มืออาชีพที่มีความสามารถในการออกแบบ Data Visualization ที่สวยงามและเข้าใจง่าย
งานของคุณคือสร้างหน้าเว็บ Dashboard หนึ่งไฟล์ชื่อว่า `Dashboard.html` โดยรวมทั้งโค้ด HTML, CSS, และ JavaScript ไว้ด้วยกัน (CSS และ JS จะถูกเรียกผ่านฟังก์ชัน `include` ที่เราสร้างไว้ใน Backend)
ส่วนที่ 1: โครงสร้างและหน้าตาของเว็บ (HTML & CSS)
1. Header: ส่วนหัวของเว็บ ให้มีไอคอนทางการแพทย์, ชื่อโปรเจค "Medication Error Dashboard", และชื่อโรงพยาบาล
2. ส่วนตัวกรอง: สร้างพื้นที่สำหรับให้ผู้ใช้เลือกช่วงข้อมูล ประกอบด้วย:
* ช่องเลือก "วันที่เริ่มต้น" (Start Date)
* ช่องเลือก "วันที่สิ้นสุด" (End Date)
* ปุ่ม "อัปเดตข้อมูล"
3. ส่วนแสดงผลหลัก:
* ภาพรวม (Dashboard)
* การ์ดสรุป 4 ใบ: แสดงตัวเลขสำคัญ ได้แก่ "รวมทั้งหมด (ครั้ง)", "ใบสั่งยา OPD", "วันนอน IPD", และ "ความรุนแรง ≥ E"
* ตารางสรุป KPI: แสดงอัตราความคลาดเคลื่อน 5 ประเภทหลัก แยกคอลัมน์ระหว่าง OPD และ IPD จัดให้สวยงาม
* การ์ดระดับความรุนแรง: แสดงจำนวนความคลาดเคลื่อนในแต่ละระดับความรุนแรง (A, B, C, D, E-I)
4. Footer: ส่วนท้ายของเว็บ แสดงข้อมูลติดต่อของกลุ่มงานเภสัชกรรมฯ และปีลิขสิทธิ์
ส่วนที่ 2: การทำงานของหน้าเว็บ (JavaScript)
เขียนโค้ด JavaScript ให้ทำงานตามลำดับต่อไปนี้:
1. เมื่อหน้าเว็บโหลดเสร็จ:
* ตั้งค่าวันที่ในช่องเลือก ให้เป็นวันที่ 1 มกราคมของปีปัจจุบัน จนถึงวันปัจจุบันโดยอัตโนมัติ
* สั่งให้ระบบดึงข้อมูลจาก Server มาแสดงผลทันที 1 ครั้ง
2. เมื่อผู้ใช้กดปุ่ม "อัปเดตข้อมูล":
* ให้แสดงสัญลักษณ์ "กำลังโหลด..." เพื่อให้ผู้ใช้รู้ว่าระบบกำลังทำงาน
* เรียกใช้ฟังก์ชันที่อยู่ฝั่ง Server โดยส่งวันที่เริ่มต้นและสิ้นสุดที่ผู้ใช้เลือกไปด้วย
3. เมื่อได้รับข้อมูลกลับมาจาก Server:
* ซ่อนสัญลักษณ์ "กำลังโหลด..."
* นำข้อมูลที่ได้ไปแสดงผลตามจุดต่างๆ ที่ออกแบบไว้ใน *ส่วนที่ 1* ทั้งหมด ไม่ว่าจะเป็นตัวเลขบนการ์ด, ข้อมูลในตาราง
โปรดสร้างโค้ดสำหรับไฟล์ `Dashboard.html`, `Dashboard_CSS` และ `Dashboard_JS` (ในรูปแบบ <script>) ที่สมบูรณ์ตามโจทย์นี้ทั้งหมด