บันทึกวัสดุอุปกรณ์กีฬา (save sports equipment material)

ระบบเว็บแอปพลิเคชัน (Web App) แบบ Single Page Application (SPA) ที่สร้างขึ้นบนแพลตฟอร์ม Google Apps Script ทั้งหมด โดยมีจุดประสงค์เพื่อติดตามและบริหารจัดการวัสดุอุปกรณ์กีฬาอย่างมีประสิทธิภาพ

1. 🧬 สถาปัตยกรรมและเทคโนโลยี (Technology Stack)
Backend: Google Apps Script (Code.gs)

Database: Google Sheets

Frontend: HTML, CSS, JavaScript (jQuery)

UI Framework: AdminLTE 3 (สำหรับแดชบอร์ด) และ Bootstrap 5 (สำหรับองค์ประกอบหลัก)

Libraries: SweetAlert2 (การแจ้งเตือน), Chart.js (กราฟ)

2. 👤 บทบาทผู้ใช้งาน (User Roles)
ระบบแบ่งผู้ใช้งานเป็น 2 ระดับ:

Admin (ผู้ดูแลระบบ):

เข้าถึงได้ทุกเมนู

สามารถ เพิ่ม/ลบ/แก้ไข ข้อมูลได้ทุกส่วน (อุปกรณ์, ผู้ใช้, หมวดหมู่)

User (ผู้ใช้งานทั่วไป):

เข้าถึงได้เฉพาะแดชบอร์ดและหน้าจัดการอุปกรณ์

ไม่สามารถเข้าถึงเมนู "จัดการผู้ใช้งาน" และ "จัดการหมวดหมู่" ได้

3. 🌟 คุณสมบัติหลัก (Core Features)
3.1 ส่วนหน้าบ้าน (Homepage)
ดีไซน์ "Full Option": หน้าตาสวยงาม ทันสมัย ใช้โทนสี Gradient (น้ำเงิน-เขียว)

Carousel Slide: สไลด์ภาพ 4 ภาพ แสดงตัวอย่าง UI ของระบบ (แดชบอร์ด, กราฟ, ตาราง)

หลักการและวัตถุประสงค์: การ์ดแสดงข้อมูล 6 รายการ (เช่น Google Sheets, Apps Script, Responsive, การจัดการสิทธิ์ ฯลฯ)

สถิติผู้เข้าชม: ระบบนับสถิติที่บันทึกลง Google Sheet และแสดงผลเป็น 3 ส่วน: วันนี้, สัปดาห์นี้, และ เดือนนี้

3.2 ระบบยืนยันตัวตน (Authentication)
Login/Logout: หน้าลงชื่อเข้าใช้ที่สอดคล้องกับหน้าหลัก

Session Management: ใช้ sessionStorage เพื่อจดจำการล็อกอิน ผู้ใช้จะไม่หลุดเมื่อรีเฟรชหน้า

SPA Navigation: การสลับหน้า (Login, Homepage, Dashboard) เกิดขึ้นโดยไม่ต้องโหลดหน้าใหม่ (ป้องกันหน้าขาว)

3.3 ระบบแดชบอร์ด (Dashboard)
ภาพรวม (Info Boxes): แสดงข้อมูลสรุป 4 ส่วน (อุปกรณ์ทั้งหมด, รายการชำรุด, ความสมบูรณ์ (%), จำนวนหมวดหมู่)

Progress Bar: แสดงเปอร์เซ็นต์ความสมบูรณ์ของอุปกรณ์

กราฟ 3 รูปแบบ (Charts):

กราฟเส้น: แสดงสถิติการเพิ่มอุปกรณ์ 5 วันย้อนหลัง

กราฟแท่ง: สรุปจำนวนอุปกรณ์ตามสถานะ (ใช้งานได้ดี, ชำรุด ฯลฯ)

กราฟวงกลม: สรุปสัดส่วนอุปกรณ์ตามหมวดหมู่

เมนูตามสิทธิ์: เมนู "จัดการผู้ใช้งาน" และ "จัดการหมวดหมู่" จะแสดงเฉพาะเมื่อล็อกอินเป็น Admin

3.4 การจัดการข้อมูล (CRUD Operations)
ระบบจัดการข้อมูลทั้งหมด 3 ส่วนหลัก โดยใช้ Modal ในการ เพิ่ม/แก้ไข ข้อมูล:

1. จัดการอุปกรณ์ (Equipment):

แสดงผลในรูปแบบตาราง (Table)

ตัวกรอง (Filters): กรองข้อมูลตามหมวดหมู่, สถานะ และค้นหาด้วยชื่อ

CRUD ผ่าน Modal

ปุ่มจัดการ (แก้ไข/ลบ) ดีไซน์แบบวงกลม "Full Option"

2. จัดการผู้ใช้งาน (Users) - (Admin):

CRUD ผ่าน Modal

การแก้ไขที่แม่นยำ: ใช้วิธีดึงข้อมูลด้วย ID (เรียก getUserById) เพื่อให้แน่ใจว่าข้อมูลใน Modal สดใหม่เสมอ

ความปลอดภัย: ป้องกันการลบบัญชี Admin หลัก

3. จัดการหมวดหมู่ (Categories) - (Admin):

CRUD ผ่าน Modal

การอัปเดตต่อเนื่อง (Cascading Update): หาก "แก้ไข" ชื่อหมวดหมู่ ระบบจะค้นหาและอัปเดตชื่อในชีต Equipment ทั้งหมดที่ใช้ชื่อเก่า

การป้องกันการลบ (Deletion Protection): ระบบจะตรวจสอบชีต Equipment ก่อน หากมีอุปกรณ์ใดใช้หมวดหมู่นี้อยู่ จะ "ไม่อนุญาต" ให้ลบ