# Prompt สร้างระบบเช็คชื่อพนักงานออนไลน์ (Employee Attendance System)

สร้างเว็บแอปพลิเคชัน **"ระบบเช็คชื่อพนักงานออนไลน์"** สำหรับองค์กร/บริษัท ใช้งานผ่านโทรศัพท์มือถือและคอมพิวเตอร์ พัฒนาด้วย **Google Apps Script + Google Sheets** รองรับการเช็คชื่อรายวัน ตารางกะ อนุมัติการลา ดูสถิติการมาทำงานแบบ Real-time สร้างรายงาน PDF ได้อัตโนมัติ และแจ้งเตือนผ่าน LINE

## วัตถุประสงค์
- บันทึกการมาทำงานของพนักงานรายวัน
- จัดการตารางกะการทำงาน
- ยื่นใบลาและอนุมัติการลาออนไลน์
- ลดการใช้เอกสารกระดาษ
- ดูสถิติการมาทำงานแบบ Real-time
- สร้างรายงาน PDF สำหรับส่งผู้บริหารได้ทันที
- แจ้งเตือนสรุปการเช็คชื่อและการลาผ่าน LINE

## ระบบผู้ใช้งาน

### 1. ผู้ดูแลระบบ / ฝ่ายบุคคล (Admin / HR)
สามารถ
- จัดการข้อมูลพนักงาน (เพิ่ม/แก้ไข/ลบ)
- จัดการตารางกะ (เพิ่ม/แก้ไข/ลบ กะเช้า กะบ่าย กะดึก)
- อนุมัติ/ไม่อนุมัติ ใบลา
- ดูสถิติภาพรวมทั้งองค์กร
- ดาวน์โหลดรายงาน PDF / ส่งออก Excel
- ตั้งค่าการแจ้งเตือน LINE

### 2. หัวหน้างาน (Supervisor)
สามารถ
- เช็คชื่อพนักงานรายวัน เลือกสถานะ:
  - ○ มาทำงาน
  - ○ ขาดงาน
  - ○ ลาป่วย
  - ○ ลากิจ
  - ○ มาสาย
- กดบันทึกครั้งเดียวทั้งแผนก/กะได้
- ดูสถิติแผนก/กะของตนเอง
- สร้างรายงาน PDF รายเดือน

## หน้า Login สไตล์ Modern
- แบ่งครึ่งจอ: ฝั่งซ้ายพื้นหลังไล่เฉดสีน้ำเงิน มีชื่อระบบ สโลแกน และจุดเด่นของระบบ
- ฝั่งขวาการ์ดสีขาวมุมโค้ง: ช่องชื่อผู้ใช้ รหัสผ่าน จดจำผู้ใช้ ลืมรหัสผ่าน
- ปุ่ม "เข้าสู่ระบบ" แบบ Gradient

## หน้า Dashboard (Real-time)
- การ์ดสรุป: พนักงานทั้งหมด / มาทำงานวันนี้ / ขาดงาน / ลาป่วย / ลากิจ / มาสาย
- Donut Chart: สัดส่วนการมาทำงานวันนี้ (%)
- Line Chart: อัตราการมาทำงานย้อนหลัง 7 วัน
- ตารางสรุปตามแผนก/กะ:

| กะ | จำนวนพนักงาน | มาทำงาน |
|---|---|---|
| กะเช้า | 20 | 18 |
| กะบ่าย | 15 | 15 |
| กะดึก | 18 | 17 |

## ระบบเช็คชื่อรายวัน
- เลือกวันที่ + เลือกกะ/แผนก → แสดงรายชื่อพนักงาน
- ปุ่มสถานะ 5 แบบต่อคน: มาทำงาน / ขาดงาน / ลาป่วย / ลากิจ / มาสาย
- ปุ่ม "มาทำงานทั้งหมด" กดครั้งเดียวทั้งกะ
- บันทึกเวลาเข้างานอัตโนมัติ
- เมื่อบันทึกเสร็จ ส่งสรุปเข้า LINE อัตโนมัติ

## ตารางกะ
- กำหนดกะ: ชื่อกะ เวลาเข้า เวลาออก
- กำหนดพนักงานเข้ากะ
- คำนวณ "มาสาย" อัตโนมัติเทียบกับเวลาเข้ากะ

## ระบบลางาน + อนุมัติการลา
- พนักงาน/หัวหน้ายื่นใบลา: ประเภทลา (ลาป่วย/ลากิจ/ลาพักร้อน) วันที่เริ่ม-สิ้นสุด เหตุผล
- สถานะ: ⏳ รออนุมัติ / ✅ อนุมัติ / ❌ ไม่อนุมัติ
- Admin/HR กดอนุมัติได้จากหน้าเดียว
- แจ้งเตือนผล อนุมัติ/ไม่อนุมัติ ผ่าน LINE
- เมื่ออนุมัติแล้ว ระบบลงสถานะการลาในวันเช็คชื่อให้อัตโนมัติ

## สถิติรายบุคคล
เมื่อคลิกชื่อพนักงาน แสดง:
- จำนวนวันมาทำงาน / ขาด / ลาป่วย / ลากิจ / มาสาย
- เปอร์เซ็นต์การมาทำงาน
- ตัวอย่าง: มาทำงาน 96 วัน • ขาด 2 วัน • ลา 1 วัน • คิดเป็น 96.97%

## รายงาน PDF (สร้างอัตโนมัติ)
- **รายงานรายวัน**: วันที่ กะ รายชื่อผู้ขาด/ลา/มาสาย
- **รายงานรายเดือน**: สรุปการมาทำงานรายบุคคล กราฟสถิติ ช่องลายเซ็นหัวหน้างาน/ผู้จัดการ
- **รายงานอันดับ**: พนักงานมาทำงานดีที่สุด
- ปุ่ม: 📄 ดาวน์โหลด PDF | 📊 ส่งออก Excel | 🖨️ พิมพ์รายงาน

## แจ้งเตือนทางไลน์ (LINE Messaging API)
- สรุปการเช็คชื่อประจำวัน (มา/ขาด/ลา/สาย)
- แจ้งเตือนเมื่อมีใบลาใหม่รออนุมัติ
- แจ้งผลการอนุมัติใบลา
- ตั้งค่า Channel Access Token + Target ID ได้ในหน้า "ตั้งค่า"

## ฐานข้อมูล Google Sheets

**Sheet: Employees** — EmpID | ชื่อ-นามสกุล | ตำแหน่ง | แผนก | กะ | เบอร์โทร | สถานะ

**Sheet: Attendance** — Date | EmpID | Status | TimeIn | หมายเหตุ

**Sheet: Shifts** — ShiftID | ชื่อกะ | เวลาเข้า | เวลาออก

**Sheet: LeaveRequests** — ReqID | EmpID | ประเภทลา | วันที่เริ่ม | วันที่สิ้นสุด | เหตุผล | สถานะ | ผู้อนุมัติ | วันที่ยื่น

**Sheet: Users** — Username | Password | Role | ชื่อที่แสดง

**Sheet: Settings** — Key | Value (เก็บ LINE Token)

## เทคโนโลยี
- Google Apps Script (Web App)
- Google Sheets Database
- HTML + CSS + JavaScript (Single Page App)
- Chart.js (กราฟ)
- PDF/Excel Export ผ่าน Google Sheets Export API
- LINE Messaging API
- Responsive Design 100%

## การออกแบบ UI
- สไตล์ Modern 3D Dashboard
- สีหลัก: น้ำเงิน `#2563EB` | สีรอง: เขียว `#10B981`
- พื้นหลังขาว การ์ดมุมโค้ง เงานุ่ม (Soft Shadow)
- รองรับมือถือ แท็บเล็ต คอมพิวเตอร์
- ใช้งานง่าย ปุ่มใหญ่ กดสะดวก

**เมนู**
- 🏠 Dashboard
- ✅ เช็คชื่อ
- 👥 ข้อมูลพนักงาน
- 🕐 ตารางกะ
- 📝 อนุมัติการลา
- 📊 สถิติ
- 📄 รายงาน PDF
- ⚙️ ตั้งค่า