Prompt Library ครูนุ่มเดฟเทค

ทำหน้าที่เป็น Full Stack Web Developer และผู้เชี่ยวชาญด้าน Google Apps Script โปรดสร้าง "ระบบบริหารจัดการครุภัณฑ์ (Equipment Management System)" โดยใช้ Google Sheets เป็นฐานข้อมูล

ข้อกำหนดของระบบ:
1. เทคโนโลยีที่ใช้:
- Frontend: HTML, CSS, JavaScript (เขียนรวมในไฟล์เดียว) โดยใช้ Bootstrap 5 (CDN) และ Bootstrap Icons
- Backend: Google Apps Script (Code.gs)
- QR Code: ใช้ไลบรารี qrcodejs (CDN)

2. โครงสร้างไฟล์ที่ต้องการ:
- ไฟล์ 1: `index.html` (สำหรับ Frontend ทั้งหมด)
- ไฟล์ 2: `Code.gs` (สำหรับ Google Apps Script)

3. ฟีเจอร์ของแอปพลิเคชัน (Frontend - Single Page Application):
ออกแบบให้มี Navbar ด้านบน และมี 3 เมนูหลักที่สามารถสลับหน้าจอ (ซ่อน/แสดง) ได้ด้วย JavaScript:

3.1) หน้า "เพิ่มครุภัณฑ์":
- มีฟอร์มรับข้อมูล: รหัสครุภัณฑ์, ชื่อรายการ, หมวดหมู่ (Dropdown), วันที่รับเข้า, สถานที่ตั้ง, ผู้รับผิดชอบ และ สถานะ (ใช้งานปกติ, ส่งซ่อม, ชำรุด)
- เมื่อกด "บันทึก" ให้แสดง Loading Overlay
- ส่งข้อมูลไปที่ Backend ด้วยคำสั่ง `google.script.run`
- เมื่อบันทึกสำเร็จ ให้ซ่อนฟอร์ม แล้วแสดงหน้าต่าง "ผลลัพธ์" ที่มี QR Code (สร้างจาก URL ปัจจุบันต่อท้ายด้วย ?view=รหัสครุภัณฑ์) พร้อมปุ่มสำหรับ "พิมพ์ QR Code" (Print) และปุ่ม "เพิ่มรายการใหม่"

3.2) หน้า "รายการครุภัณฑ์":
- แสดงตารางข้อมูลครุภัณฑ์ทั้งหมด โดยดึงข้อมูลจาก Backend ด้วย `google.script.run`
- คอลัมน์สถานะ ให้ใช้ Badge สีของ Bootstrap (เช่น สีเขียว=ใช้งานปกติ, สีเหลือง=ส่งซ่อม, สีแดง=ชำรุด)
- ในคอลัมน์สุดท้ายของตาราง ให้มีปุ่มไอคอน QR Code เพื่อกดดูและพิมพ์ QR Code ของครุภัณฑ์ชิ้นนั้นๆ ได้แบบย้อนหลัง

3.3) หน้า "สแกน QR":
- ออกแบบ UI ให้ดูเหมือนพื้นที่สำหรับเปิดกล้อง (มีไอคอนกล้องตรงกลาง)
- ทำปุ่ม "จำลองการสแกน" โดยใช้ JavaScript `prompt()` เพื่อรับค่ารหัสครุภัณฑ์จำลอง และแสดง `alert()` แจ้งเตือน

4. ฟีเจอร์ของ Backend (Code.gs):
- มีฟังก์ชัน `doGet(e)` สำหรับ render หน้าเว็บ (ตั้งค่า SandboxMode.IFRAME)
- มีฟังก์ชัน `addEquipmentData(data)` สำหรับบันทึกข้อมูลลง Google Sheet ที่ชื่อแท็บว่า "Data" (ต่อท้ายด้วยคอลัมน์ Timestamp)
- มีฟังก์ชัน `getEquipmentData()` สำหรับอ่านข้อมูลทั้งหมดจาก Sheet ส่งกลับไปให้ Frontend

5. การออกแบบ (UI/UX):
- เน้นความสวยงาม ทันสมัย สะอาดตา (Clean Design) ขอบมน (border-radius) และมีการใช้ Box-shadow เล็กน้อย
- รองรับการใช้งานบนมือถือ (Responsive)
- มีระบบ Loading (Spinner) ตรงกลางจอระหว่างที่มีการติดต่อกับ Google Apps Script เพื่อป้องกันผู้ใช้กดปุ่มซ้ำ
- จัดการ Error Handling ให้ครบถ้วน (เช่น try-catch ตอน parse JSON กลับมาจาก Apps Script)

ขอโค้ดที่สมบูรณ์ นำไปวางใน Google Apps Script แล้วใช้งานได้ทันที พร้อมอธิบายวิธีการติดตั้ง (Setup) ทีละขั้นตอนเป็นภาษาไทย

ทำหน้าที่เป็นผู้เชี่ยวชาญด้าน Google Apps Script และ Web Development

ช่วยเขียนโค้ดสร้าง Web App "ระบบประเมินความพึงพอใจและดาวน์โหลดเกียรติบัตร" โดยใช้ Google Apps Script (ไฟล์ Code.gs) และ HTML/JS (ไฟล์ index.html) โดยมี Requirement ดังนี้:

1. ส่วน Frontend (index.html)

ใช้ Framework Bootstrap 5 ในการจัด Layout ให้ Responsive รองรับทั้งมือถือและคอมพิวเตอร์

ใช้ฟอนต์ภาษาไทย "Sarabun" โทนสีเว็บไซต์เป็นสีฟ้า-ขาว เรียบง่าย สบายตา

มีฟอร์มให้กรอกข้อมูลดังนี้:

ชื่อ-นามสกุล (สำหรับพิมพ์ลงเกียรติบัตร) *บังคับกรอก

แบบประเมิน 5 ข้อ เป็น Radio Button 1-5 (1=น้อยที่สุด, 5=มากที่สุด) ได้แก่:

ความสะดวกในการใช้งานเว็บไซต์

ความรวดเร็วในการโหลดหน้าเว็บ

ความเหมาะสมของการจัดวางข้อมูล

ความสวยงามและความน่าสนใจของเว็บไซต์

ความพึงพอใจโดยรวม

ข้อเสนอแนะเพิ่มเติม (Textarea)

การส่งข้อมูล: ให้ดึงคะแนนจากข้อ 5 เป็นคะแนนหลัก (Rating) ส่วนคะแนนข้อ 1-4 ให้นำไปต่อท้ายข้อความในช่องข้อเสนอแนะ (Comment) เพื่อส่งไปเก็บใน Database รวดเดียว

มีปุ่ม "ส่งแบบประเมิน"

เมื่อกดส่ง ต้องมีการซ่อนฟอร์มและแสดงหน้าจอ Loading (กำลังประมวลผล)

เมื่อประมวลผลสำเร็จ ให้เปลี่ยนหน้าจอเป็น Success พร้อมแสดงปุ่ม "ดาวน์โหลดเกียรติบัตร (PDF)" และปุ่ม "ทำรายการใหม่"

2. ส่วน Backend (Code.gs)

ฟังก์ชัน doGet() สำหรับเรียกหน้า index.html

ฟังก์ชันรับข้อมูลจากฟอร์ม นำไปบันทึกลง Google Sheets (ประกอบด้วย Timestamp, ชื่อ, คะแนนรวม, ความคิดเห็น)

ฟังก์ชันสร้างเกียรติบัตร:

ดึงไฟล์ Google Slides ที่เป็น Template (ใช้ ID)

สร้างไฟล์สำเนา (Copy)

ค้นหาคำว่า {{name}} ใน Slide และแทนที่ด้วยชื่อผู้ใช้งานที่กรอกมา

แปลงไฟล์ Slide เป็น PDF

ลบไฟล์ Slide สำเนาทิ้งเพื่อไม่ให้รก Drive

แปลงไฟล์ PDF เป็น Base64 String เพื่อส่งกลับไปให้หน้า Frontend สร้างปุ่มดาวน์โหลด

ขอโค้ดที่สมบูรณ์ สะอาด จัดระเบียบอย่างดี และมีคอมเมนต์อธิบายการทำงานที่สำคัญ รวมถึงขั้นตอนสั้นๆ ในการเตรียม Sheet, Slide และวิธีการ Deploy ด้วย

บทบาท (Role): คุณคือผู้เชี่ยวชาญด้าน Full Stack Web Development และ Google Apps Script

คำสั่ง (Task):
โปรดเขียนโค้ดสร้าง "ระบบจัดคิวอัตโนมัติ (Queue Management System)" โดยใช้ Google Apps Script ทำหน้าที่เป็น Backend API และใช้ Google Sheets เป็นฐานข้อมูล (Database) ส่วน Frontend ให้เป็น Web App แบบ Single Page Application (SPA) ที่รวมทุกหน้าจอไว้ในไฟล์ HTML เดียว

รายละเอียดความต้องการ (Requirements):

โครงสร้างฐานข้อมูล (Google Sheets):

บันทึกข้อมูลรายวันลงใน Sheet ชื่อ "Data"

คอลัมน์ประกอบด้วย: วันที่, เวลาที่กดรับคิว, หมายเลขคิว, สถานะ (Waiting / Called), เวลาที่เรียกคิว

หมายเลขคิวต้องรันใหม่ทุกวัน โดยเริ่มจาก A001, A002, A003 ไปเรื่อยๆ ตรวจสอบจากวันที่ปัจจุบัน

Backend (Google Apps Script - Code.gs):

doGet() สำหรับเรนเดอร์หน้า HTML Web App

ฟังก์ชันสร้างคิวใหม่ (Generate Queue) และบันทึกลง Sheet

ฟังก์ชันเรียกคิวถัดไป (Call Next Queue) โดยหาคิวที่สถานะเป็น "Waiting" ที่เก่าที่สุด (FIFO) แล้วเปลี่ยนสถานะเป็น "Called"

ฟังก์ชันดึงข้อมูลสำหรับจอแสดงผล (Get Display Data) ส่งคืนข้อมูล: คิวที่กำลังเรียกปัจจุบัน, จำนวนคิวที่รอทั้งหมด, และรายการหมายเลขคิวที่กำลังรอ (จำกัด 5 คิวถัดไป)

Frontend (UI/UX - Index.html):

ใช้ Tailwind CSS ผ่าน CDN สำหรับการออกแบบ UI ให้ดูทันสมัยและสะอาดตา

ใช้ฟอนต์ภาษาไทย (เช่น Kanit)

สร้าง Navigation Bar ด้านบนสำหรับสลับหน้าจอ (ซ่อน/แสดง div) แบ่งเป็น 3 โหมด:

3.1 โหมดจุดรับคิว (Kiosk - สำหรับลูกค้า):

มีปุ่มขนาดใหญ่ "รับคิว"

เมื่อกดแล้ว ให้แสดงหมายเลขคิวที่ได้ตัวใหญ่ๆ บนหน้าจอเป็นเวลา 5 วินาที แล้วซ่อนไป

3.2 โหมดจุดเรียกคิว (Staff - สำหรับพนักงาน):

แสดงหมายเลขคิวที่เรียกล่าสุด

มีปุ่ม "เรียกคิวถัดไป" เมื่อกดแล้วให้ไปดึงคิวที่รออยู่มาแสดง ถ้าไม่มีให้แจ้งเตือนว่า "ไม่มีคิวรอ"

3.3 โหมดจอแสดงผล (Display - สำหรับทีวีส่วนกลาง):

แบ่งหน้าจอเป็น 2 ฝั่ง (ซ้าย: คิวปัจจุบันตัวใหญ่มาก / ขวา: รายการคิวรอ 5 คิวและจำนวนคิวรอทั้งหมด)

มีระบบ Auto-refresh ดึงข้อมูลทุกๆ 3 วินาที

ระบบเสียง (Text-to-Speech): เมื่อมีคิวใหม่ถูกเรียก ให้เบราว์เซอร์อ่านออกเสียงภาษาไทย เช่น "ขอเชิญหมายเลขคิว [A 0 0 1] ที่ช่องบริการค่ะ"

มีตัวหนังสือกระพริบเมื่อเรียกคิวใหม่

ข้อบังคับ: ต้องมีหน้าต่าง Overlay ปุ่ม "เริ่มจอแสดงผล" ให้กดก่อน 1 ครั้ง เพื่อปลดล็อคข้อจำกัด Autoplay ของเบราว์เซอร์ในการเล่นเสียง

เงื่อนไขเพิ่มเติม (Constraints):

โค้ดฝั่ง Frontend ต้องอยู่ในไฟล์ Index.html เพียงไฟล์เดียว (รวม CSS และ JS ไว้ในนั้น)

โค้ดฝั่ง Backend ต้องอยู่ในไฟล์ Code.gs

โค้ดต้องพร้อมนำไป Deploy ใช้งานได้ทันที มีการจัดการ Error พื้นฐาน และมีคอมเมนต์อธิบายโค้ดภาษาไทยที่ชัดเจน

"ทำหน้าที่เป็น Full-stack Developer ที่เชี่ยวชาญด้าน Google Apps Script, HTML, JavaScript และ Tailwind CSS

กรุณาเขียนโค้ดสำหรับสร้าง 'ระบบขอแลกเวรออนไลน์' (Web App) โดยทำงานร่วมกับ Google Sheets โดยมีรายละเอียดและข้อกำหนดดังนี้:

1. ส่วนหน้าบ้าน (Frontend - index.html):

สร้างหน้าฟอร์มที่สวยงาม ดูสะอาดตา และรองรับมือถือ (Responsive) โดยใช้ Tailwind CSS

มีช่องรับข้อมูลดังนี้:

ชื่อ-นามสกุลผู้ขอ (Text)

เวรเดิม: แยกเป็น 2 ช่องคือ ช่องเลือกวันที่ (Date picker) และช่องเลือกกะ (Dropdown: เช้า, บ่าย, ดึก)

เวรใหม่: แยกเป็น 2 ช่องคือ ช่องเลือกวันที่ (Date picker) และช่องเลือกกะ (Dropdown: เช้า, บ่าย, ดึก)

เหตุผลการขอแลก (Textarea)

อีเมลของหัวหน้า/ผู้อนุมัติ (Email)

มีระบบป้องกันการกดปุ่ม Submit ซ้ำ โดยเปลี่ยนข้อความปุ่มเป็น 'กำลังส่งข้อมูล...' และทำปุ่มจางลงขณะรอการประมวลผล

มีการแปลงรูปแบบวันที่ (Date format) จาก YYYY-MM-DD เป็น DD/MM/YYYY ก่อนส่งข้อมูลไปหลังบ้าน

2. ส่วนหลังบ้าน (Backend - Code.gs):

รับข้อมูลจากหน้าเว็บและบันทึกลง Google Sheet ชื่อแผ่นงาน 'Data'

โครงสร้างคอลัมน์ใน Sheet มี 9 คอลัมน์: Timestamp, ชื่อ-สกุล, วันที่เวรเดิม, กะเวรเดิม, วันที่เวรใหม่, กะเวรใหม่, เหตุผล, อีเมลผู้อนุมัติ, สถานะ (เริ่มต้นให้บันทึกเป็น 'รออนุมัติ')

หลังจากบันทึกข้อมูลเสร็จ ให้ดึงหมายเลขแถว (Row ID) และส่งอีเมลแจ้งเตือนอัตโนมัติไปยังอีเมลของหัวหน้าที่กรอกไว้

3. ส่วนระบบอนุมัติผ่านอีเมล (Email Approval):

ในเนื้อหาอีเมล (HTML Body) ให้สรุปข้อมูลการขอแลกเวรทั้งหมดให้อ่านง่าย

สร้างปุ่ม (หรือลิงก์ที่มีสไตล์คล้ายปุ่ม) 2 ปุ่มคือ '✅ อนุมัติ' และ '❌ ไม่อนุมัติ'

เมื่อหัวหน้าคลิกปุ่มใดปุ่มหนึ่ง ระบบจะเรียกฟังก์ชัน doGet(e) พร้อมพารามิเตอร์ action และ row

ตรวจสอบสถานะปัจจุบันใน Sheet ก่อน หากไม่ใช่ 'รออนุมัติ' ให้แสดงหน้าเว็บแจ้งเตือนว่าทำรายการไปแล้ว เพื่อป้องกันการกดซ้ำ

หากยังไม่ทำรายการ ให้อัปเดตสถานะใน Sheet เป็น 'อนุมัติแล้ว' หรือ 'ไม่อนุมัติ' ตามที่กด และแสดงหน้าเว็บยืนยันผลการดำเนินการ

กรุณาแยกไฟล์เป็น Code.gs และ index.html พร้อมอธิบายขั้นตอนการติดตั้งและการเตรียม Google Sheet ให้ครบถ้วน"

"ช่วยสร้างระบบบันทึกข้อมูล Home Health Care (การเยี่ยมบ้าน) โดยแบ่งเป็น 2 ส่วน คือ Frontend (HTML/JS) และ Backend (Google Apps Script) ให้หน่อยครับ

ความต้องการระบบ:

Frontend (index.html):

เป็นหน้าเว็บแอปพลิเคชันแบบหน้าเดียว (Single Page Application)

ออกแบบ UI ให้ดูทันสมัย สะอาดตา ใช้งานง่ายบนมือถือ (Responsive) โดยใช้ Tailwind CSS

ใช้ SweetAlert2 สำหรับแสดงกล่องข้อความแจ้งเตือน (Success, Error, Warning)

ฟอนต์ภาษาไทย ขอให้ใช้ฟอนต์ Prompt จาก Google Fonts

มีฟอร์มสำหรับกรอกข้อมูลดังนี้:

วันที่เยี่ยม (Type: date, ค่าเริ่มต้นคือวันปัจจุบัน)

HN / เลขบัตรประชาชน (Text)

ชื่อ-สกุล ผู้ป่วย (Text)

สัญญาณชีพ (Vital Signs) แบ่งเป็น: ความดันโลหิต (Text), ชีพจร (Number), อุณหภูมิ (Number แบบทศนิยม 1 ตำแหน่ง)

อาการ / การประเมิน (Textarea)

การพยาบาล / คำแนะนำ (Textarea)

ชื่อผู้เยี่ยม / ผู้บันทึก (Text)

มีปุ่ม "บันทึกข้อมูล" พร้อมแสดง Loading Spinner และเปลี่ยนข้อความเป็น 'กำลังส่งข้อมูลไป Google Sheet...' ขณะกำลังส่งข้อมูล

การทำงานเมื่อกดบันทึก (Hybrid System):

ส่งข้อมูล (POST) ไปยัง Google Apps Script (Web App URL) แบบอัตโนมัติ (ให้ใส่ตัวแปร const SCRIPT_URL = 'ใส่_URL_WEB_APP_ของคุณที่นี่'; เผื่อไว้ให้ผู้ใช้ใส่ URL เองภายหลัง)

นำข้อมูลไปบันทึกไว้ใน Local Storage ของเบราว์เซอร์ด้วย เพื่อใช้แสดงผล

หากยังไม่ได้ใส่ SCRIPT_URL ให้แสดงแจ้งเตือนว่ายังไม่ได้เชื่อมต่อ แต่ยังคงบันทึกลง Local Storage ตามปกติ

ส่วนแสดงผล (ตาราง):

ด้านล่างฟอร์ม ให้มีตารางแสดงประวัติการเยี่ยมบ้านที่ดึงข้อมูลมาจาก Local Storage เรียงจากล่าสุดขึ้นก่อน

มีปุ่ม "ลบ" ข้อมูลรายบรรทัด (มีแจ้งเตือนยืนยัน และลบเฉพาะใน Local Storage)

มีปุ่ม "ล้างหน้าจอ" (ล้างข้อมูลทั้งหมดใน Local Storage)

มีปุ่ม "ส่งออกไฟล์ CSV สำรอง" เพื่อดาวน์โหลดข้อมูลใน Local Storage เป็นไฟล์ .csv (รองรับภาษาไทย)

Backend (Code.gs สำหรับ Google Apps Script):

สร้างฟังก์ชัน doPost(e) สำหรับรับข้อมูล JSON จากหน้า HTML

นำข้อมูลที่ได้รับ ไปเขียนต่อท้ายแถวใหม่ (appendRow) ใน Google Sheet ที่ผูกกับสคริปต์

โครงสร้างคอลัมน์ใน Sheet: Timestamp, วันที่เยี่ยม, HN/CID, ชื่อ-สกุล, ความดัน, ชีพจร, อุณหภูมิ, อาการ/ประเมิน, การพยาบาล/คำแนะนำ, ผู้เยี่ยม

เขียนโค้ดให้ครอบคลุมการจัดการ Error (try...catch) และ Return กลับเป็น JSON

รบกวนเขียนโค้ดแยกเป็น 2 ไฟล์ให้ชัดเจน และใส่คอมเมนต์อธิบายการทำงานที่สำคัญๆ เป็นภาษาไทยให้ด้วย"

จงทำหน้าที่เป็น Full Stack Developer ที่เชี่ยวชาญด้าน Google Apps Script และ Web Application สร้าง "ระบบเบิกวัสดุสำนักงานออนไลน์" โดยใช้ Google Sheets เป็นฐานข้อมูล และใช้ HTML/JS/CSS สำหรับหน้า Frontend โดยมีสถาปัตยกรรมและข้อกำหนดดังต่อไปนี้:

1. โครงสร้างฐานข้อมูล (Google Sheets):
- Sheet 1 ชื่อ "Requests" มีคอลัมน์: ID, Timestamp, ชื่อ-สกุล, แผนก, รายการ, จำนวน, สถานะ, ผู้อนุมัติ
- Sheet 2 ชื่อ "Settings" มีคอลัมน์: รายการวัสดุทั้งหมด (เพื่อให้ Admin เพิ่ม/ลดรายการได้)

2. โครงสร้าง Backend (Code.gs):
- ฟังก์ชัน doGet(e) ที่รองรับ Routing: ถ้า URL มีพารามิเตอร์ ?page=admin ให้เปิดไฟล์ admin.html ถ้าไม่มีให้เปิดไฟล์ index.html
- ฟังก์ชันดึงข้อมูลรายการวัสดุจาก Sheet "Settings" เพื่อนำไปแสดงใน Dropdown
- ฟังก์ชันบันทึกข้อมูลการเบิก โดยสร้าง ID อัตโนมัติ (เช่น REQ-12345), บันทึกเวลาปัจจุบัน และตั้งสถานะเริ่มต้นเป็น "รออนุมัติ"
- ฟังก์ชันสำหรับ Admin: ดึงรายการที่ "รออนุมัติ" มาแสดง, อัปเดตสถานะ (อนุมัติ/ไม่อนุมัติ) พร้อมบันทึกชื่อผู้อนุมัติ, และฟังก์ชันเพิ่มรายการวัสดุใหม่ลง Sheet "Settings"

3. โครงสร้าง Frontend (User - index.html):
- สร้างฟอร์มให้พนักงานกรอก: ชื่อ-สกุล, แผนก (Dropdown), รายการวัสดุ (Dropdown ที่ดึงจาก Backend ทันทีที่โหลดหน้าเว็บ), จำนวน
- ใช้ CSS ตกแต่งให้สวยงาม ดูสะอาดตา และใช้ฟอนต์ 'Sarabun' จาก Google Fonts
- เมื่อกดส่งข้อมูล ให้ปุ่ม Disable เพื่อป้องกันการกดซ้ำ
- ใช้ SweetAlert2 (CDN) ในการแสดง Loading Alert ขณะบันทึก และแสดง Success/Error Alert เมื่อบันทึกเสร็จ

4. โครงสร้าง Frontend (Admin - admin.html):
- สร้างตารางแสดงรายการคำขอที่ "รออนุมัติ" เท่านั้น (ดึงข้อมูลตอนโหลดหน้าเว็บ)
- ในแต่ละแถวของตาราง ให้มีปุ่ม "อนุมัติ" (สีเขียว) และ "ปฏิเสธ" (สีแดง)
- เมื่อกดปุ่มจัดการ ให้มี Popup ของ SweetAlert2 ขึ้นมายืนยันก่อน เมื่อทำงานเสร็จให้โหลดตารางใหม่โดยอัตโนมัติ
- มีส่วนสำหรับพิมพ์ชื่อวัสดุใหม่และกดปุ่ม "เพิ่มรายการ" เพื่อส่งไปบันทึกที่ Backend ได้ด้วย
- ตกแต่งให้สวยงาม ดูเป็นแผงควบคุม (Dashboard) และใช้ฟอนต์ 'Sarabun' แบบเดียวกับหน้า User

กรุณาเขียนโค้ดแยกเป็น 3 ไฟล์คือ Code.gs, index.html และ admin.html ให้ครบถ้วนพร้อมใช้งานได้ทันที และอธิบายขั้นตอนการตั้งค่า Google Sheets และการ Deploy แบบสั้นๆ เข้าใจง่าย

คุณคือผู้เชี่ยวชาญด้าน Google Apps Script และ Web Development หน้าที่ของคุณคือสร้าง "ระบบติดตามรถเก็บขยะแบบ Real-time" โดยใช้ Google Apps Script เป็น Backend และ Google Sheets เป็น Database

ระบบนี้ต้องรวมอยู่ในหน้าจอเดียว (Single Page Application) โดยแบ่งการทำงานเป็น 2 โหมดหลัก:

โหมดคนขับรถ: สำหรับส่งพิกัด GPS

โหมดผู้ติดตาม (ประชาชน): สำหรับดูแผนที่

ความต้องการของระบบ (Requirements):

ฝั่ง Backend (code.gs):

มีฟังก์ชัน doGet สำหรับแสดงผลหน้า Web App (index.html)

มีฟังก์ชัน setupSheet เพื่อสร้างหัวตารางใน Google Sheets (วันเวลา, รหัสรถ, ละติจูด, ลองจิจูด)

มีฟังก์ชัน saveLocation รับค่าพิกัดจากคนขับ โดยต้องรองรับ "รถหลายคัน" ระบบต้องค้นหาว่ารถคันนั้นอยู่บรรทัดไหนใน Sheet ถ้ามีให้อัปเดตทับบรรทัดเดิม ถ้าไม่มีให้เพิ่มบรรทัดใหม่

มีฟังก์ชัน getAllLocations สำหรับดึงพิกัดล่าสุดของรถ "ทุกคัน" ใน Sheet เพื่อส่งกลับไปให้หน้าเว็บ

ฝั่ง Frontend (index.html):

ดีไซน์: ใช้ Tailwind CSS ในการออกแบบให้ดูทันสมัย สะอาดตา และรองรับการแสดงผลบนมือถือ (Responsive) แบบ 100%

UI หลัก: มีปุ่มหรือ Tab สลับโหมดการทำงานระหว่าง "ดูตำแหน่งรถ" และ "โหมดคนขับ"

โหมดคนขับ:

มี Dropdown ให้เลือกรหัสรถ (เช่น รถคันที่ 1, รถคันที่ 2, ...)

มีปุ่ม "เริ่มส่งตำแหน่ง" และ "หยุดส่งตำแหน่ง"

เมื่อกดเริ่ม ให้ดึงข้อมูลพิกัด GPS ผ่าน navigator.geolocation.watchPosition และล็อก Dropdown เลือกรถ

แสดงสถานะการส่งข้อมูลให้คนขับเห็น (เช่น กำลังส่ง..., สำเร็จ, เกิดข้อผิดพลาด)

โหมดผู้ติดตาม:

แสดงแผนที่โดยใช้ Leaflet.js (แผนที่ OpenStreetMap ฟรี)

ดึงข้อมูลจาก Backend ทุกๆ 10 วินาที เพื่อมาแสดงหมุด (Marker) ของรถทุกคันบนแผนที่

หมุดของรถต้องเป็นไอคอนรูปการขนส่ง (เช่น รูปบรรทุก)

เมื่อคลิกที่หมุดรถ ต้องแสดง Popup บอกรหัสรถและเวลาที่อัปเดตล่าสุด

สำคัญ: ในการโหลดครั้งแรก ให้แผนที่ซูมและปรับหน้าจอให้เห็นหมุดรถครบทุกคันโดยอัตโนมัติ (fitBounds)

เงื่อนไขเพิ่มเติม:

เขียนโค้ด HTML, CSS (Tailwind), และ JS ทั้งหมดให้อยู่ในไฟล์ index.html ไฟล์เดียว

โค้ด Apps Script ทั้งหมดให้อยู่ในไฟล์ code.gs

ใส่คอมเมนต์อธิบายการทำงานในโค้ดให้ชัดเจน

บทบาท (Role):
ทำหน้าที่เป็น Full-stack Developer ที่เชี่ยวชาญด้าน Google Apps Script (GAS), HTML, JavaScript และ Tailwind CSS

เป้าหมาย (Objective):
เขียนโค้ดสำหรับ "ระบบลางานออนไลน์ (Leave Management System)" โดยใช้ Google Apps Script เป็น Backend และ Google Sheets เป็น Database

ข้อกำหนดทางเทคนิค (Technical Requirements):

เขียนโค้ดแบ่งเป็น 2 ไฟล์ ได้แก่ Code.gs (Backend) และ index.html (Frontend) ซึ่งทั้ง 2 ไฟล์นี้จะอยู่ในโปรเจกต์ Google Apps Script เดียวกัน

ให้เชื่อมต่อ Frontend และ Backend ผ่านคำสั่ง google.script.run เพื่อให้ไม่ต้องคัดลอก Web App URL มาใส่ในไฟล์ HTML (ดึงหน้าเว็บผ่าน HtmlService)

ออกแบบ UI ด้วย Tailwind CSS ให้ดูทันสมัย สะอาดตา และรองรับการใช้งานบนมือถือ (Responsive)

ใช้ฟอนต์ Prompt จาก Google Fonts

แบ่งหน้าจอออกเป็น 2 แท็บ (Tabs) สามารถคลิกสลับไปมาได้โดยไม่ต้องโหลดหน้าเว็บใหม่ ได้แก่ แท็บ "ส่งใบลา" และ แท็บ "สรุปรายเดือน"

รายละเอียดฟังก์ชันใน แท็บที่ 1: ส่งใบลา (Form)

มีฟอร์มรับข้อมูล: ชื่อ-นามสกุล (Text), แผนก (Dropdown: HR, IT, Marketing, Accounting), ประเภทการลา (Dropdown: ลาป่วย, ลากิจ, ลาพักร้อน), วันที่เริ่มลา (Date), วันที่สิ้นสุด (Date), เหตุผล (Textarea)

ตรวจสอบความถูกต้อง (Validation): วันสิ้นสุดการลาต้องไม่น้อยกว่าวันเริ่มต้น

เมื่อกดส่งข้อมูล ให้ปุ่มขึ้นสถานะ Loading และส่งข้อมูลไปบันทึกลง Google Sheets

ใน Google Sheets ให้บันทึก Timestamp (เวลาที่กดส่ง) และกำหนด Status เริ่มต้นเป็น "รออนุมัติ" ในคอลัมน์สุดท้าย

หากบันทึกสำเร็จ ให้แสดงข้อความแจ้งเตือนสีเขียว และเคลียร์ข้อมูลในฟอร์ม

รายละเอียดฟังก์ชันใน แท็บที่ 2: สรุปรายเดือน (Summary)

มีฟอร์มค้นหา: ชื่อ-นามสกุล (Text), และเดือนที่ต้องการดูสรุป (Input type="month")

เมื่อกดค้นหา ให้ไปดึงข้อมูลจาก Google Sheets

กรองข้อมูลโดย: ชื่อต้องตรงกัน, อยู่ในเดือนที่ระบุ (ดูจากวันที่เริ่มลา), และสถานะต้องไม่เป็น "ไม่อนุมัติ" หรือ "ปฏิเสธ"

คำนวณจำนวนวันลา (วันสิ้นสุด - วันเริ่มต้น + 1)

สรุปยอดรวมจำนวนวันลาแยกตามประเภท (ลาป่วย, ลากิจ, ลาพักร้อน) และแสดงผลเป็นตัวเลขแบบการ์ดสวยงามบนหน้าเว็บ

การจัดการ Database (Google Sheets):

ให้เขียนฟังก์ชันตรวจสอบว่ามี Sheet ชื่อ "LeaveRequests" หรือไม่ ถ้ายังไม่มีให้สร้างขึ้นมาใหม่พร้อมเขียน Header ในแถวแรกให้อัตโนมัติ

สวมบทบาทเป็น: ผู้เชี่ยวชาญด้าน Web Development และ Google Apps Script

งานของคุณคือ: สร้างระบบติดตามงบประมาณคงเหลือ (Budget Tracker) แบบ Real-time ในรูปแบบ Web Application ที่ใช้ Google Sheets เป็นฐานข้อมูล

เทคโนโลยีที่ใช้:
- Frontend: HTML, CSS, JavaScript
- Framework/Libraries: Bootstrap 5 (สำหรับ Layout และ Responsive), FontAwesome (สำหรับไอคอน), SweetAlert2 (สำหรับการแจ้งเตือน UI), Google Fonts (ฟอนต์ Sarabun)
- Backend: Google Apps Script (Code.gs)
- Database: Google Sheets

ข้อกำหนดด้านการออกแบบ (Design & UI):
1. ใช้โทนสีฟ้าเป็นหลัก (Primary Blue, Light Blue, Dark Blue) ดูสะอาดตาและทันสมัย
2. กำหนด Font-family ของทั้งหน้าเว็บเป็น "Sarabun"
3. ออกแบบให้รองรับการแสดงผลทุกหน้าจอ (Responsive) ใช้งานบนมือถือได้สะดวก
4. มี Loading Spinner แสดงระหว่างรอข้อมูล

ฟีเจอร์และการทำงานหลัก:
1. ส่วน Dashboard (แสดงสถิติ):
- มีการ์ด 3 ใบ แสดง: รายรับทั้งหมด, รายจ่ายทั้งหมด, และ งบประมาณคงเหลือ
- ตัวเลขมีการใส่คอมม่าและทศนิยม 2 ตำแหน่ง
2. ส่วนฟอร์มบันทึกข้อมูล (Form):
- มี Dropdown เลือกประเภท: "รายรับ" หรือ "รายจ่าย"
- มี Text input สำหรับกรอก "รายละเอียด"
- มี Number input สำหรับกรอก "จำนวนเงิน"
- เมื่อกดปุ่ม "บันทึก" ปุ่มจะต้องถูก Disable เพื่อป้องกันการกดซ้ำ และแสดงสถานะกำลังโหลด
3. ส่วนตารางประวัติ (History Table):
- แสดงประวัติการทำรายการล่าสุด (ดึงมา 50 รายการ)
- คอลัมน์ประกอบด้วย: วันที่เวลา, ประเภท (ใส่ Badge สีเขียว/แดง), รายละเอียด, และจำนวนเงิน (สีเขียวสำหรับรายรับ, สีแดงสำหรับรายจ่าย)
- หากไม่มีข้อมูลให้แสดงหน้า Empty State ว่า "ยังไม่มีข้อมูลรายการ"

ระบบหลังบ้าน (Apps Script & การโต้ตอบ):
1. การทำงานต้องเป็นแบบ SPA (Single Page Application) หน้าเว็บต้องไม่โหลดใหม่ (No refresh) เมื่อทำการบันทึกข้อมูล
2. ใช้ google.script.run ในการสื่อสารระหว่าง Frontend และ Backend
3. เมื่อบันทึกข้อมูลสำเร็จ ให้แสดงแจ้งเตือน (Popup) ด้วย SweetAlert2 ว่าบันทึกสำเร็จ พร้อมล้างค่าในฟอร์ม และอัปเดตข้อมูล Dashboard กับ Table ทันที
4. หากเกิด Error ให้แสดงแจ้งเตือนด้วย SweetAlert2
5. ฟังก์ชัน Backend ต้องรองรับการดึงข้อมูลเพื่อสรุปยอด และการเพิ่มแถวข้อมูลใหม่ลงใน Google Sheets

สิ่งที่ต้องส่งมอบ:
1. ไฟล์ Code.gs (สำหรับฝั่ง Backend)
2. ไฟล์ index.html (สำหรับฝั่ง Frontend)
3. คู่มือการติดตั้งและ Deploy บน Google Sheets แบบเป็นขั้นตอน (Markdown)