ระบบ “เตือนล่วงหน้าด้วยสี” (Color Highlight)

ให้แถวที่มีวันต่ออายุในอีก 7 หรือ 30 วันข้างหน้า เปลี่ยนเป็นสีส้มหรือสีแดง ทันทีที่เปิดโปรแกรม

Logic: คำนวณวันที่ในช่อง date เทียบกับวันที่ปัจจุบัน (Today)

การแสดงผล:

– หากเหลือเวลา <= 7 วัน ให้แถวนั้นเป็นสีแดงเข้ม กระพริบ

– หากเหลือเวลา >= 15 วัน ให้แถวนั้นเป็นสีแดงจาง

ระบบ “Smart Highlight” โดยใช้ CSS เพื่อสร้างเอฟเฟกต์กระพริบ และใช้ JavaScript ในการคำนวณวันคงเหลือเทียบกับปัจจุบันครับ

ขั้นตอนที่ 1: เพิ่ม CSS สำหรับสีและการกระพริบ

นำโค้ดนี้ไปวางในส่วน <style> ของไฟล์คุณครับ

CSS

/* แถวที่เหลือวัน <= 7 วัน (แดงเข้ม + กระพริบ) */
.alert-urgent {
    background-color: #ffcccc !important; /* แดงจางที่พื้นหลัง */
    animation: blink-red 1.5s infinite;
}

@keyframes blink-red {
    0% { background-color: #ffcccc; }
    50% { background-color: #ff4d4d; } /* แดงเข้มขึ้นตอนกระพริบ */
    100% { background-color: #ffcccc; }
}

/* แถวที่เหลือวัน <= 15 วัน (แดงจาง) */
.alert-warning {
    background-color: #ffe6e6 !important;
}

/* ปรับให้ Input ในแถวที่เตือนดูง่ายขึ้น */
.alert-urgent input, .alert-warning input {
    background-color: rgba(255, 255, 255, 0.5) !important;
}

ขั้นตอนที่ 2: สร้างฟังก์ชันคำนวณวันและใส่สี (Logic)

สร้างฟังก์ชันใหม่นี้ไว้ในส่วน <script> เพื่อใช้ตรวจสอบวันที่ครับ

JavaScript

function applyDeadlineHighlight(tr, dateStr) {
    if (!dateStr) return;

    const today = new Date();
    today.setHours(0, 0, 0, 0); // ตั้งค่าเวลาเป็นศูนย์เพื่อเทียบแค่วันที่
    
    const targetDate = new Date(dateStr);
    targetDate.setHours(0, 0, 0, 0);

    // คำนวณส่วนต่าง (หน่วยเป็นมิลลิวินาที -> วัน)
    const diffTime = targetDate - today;
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

    // ล้าง Class เดิมออกก่อน
    tr.classList.remove('alert-urgent', 'alert-warning');

    // ตรวจสอบเงื่อนไข (เน้นเฉพาะรายการที่ยังไม่ถึงกำหนด หรือเลยกำหนดไม่เกิน 1 วัน)
    // หากต้องการให้เตือนเฉพาะรายการที่ยังไม่จ่ายเงิน สามารถเพิ่มเงื่อนไข check paid ได้
    if (diffDays >= 0 && diffDays <= 7) {
        tr.classList.add('alert-urgent');
    } else if (diffDays > 7 && diffDays <= 15) {
        tr.classList.add('alert-warning');
    }
}

ขั้นตอนที่ 3: นำไปใช้ในระบบเดิมของคุณ

เพื่อให้สีทำงานทันทีที่เปิดโปรแกรมและตอนแก้ไขวันที่ คุณต้องเรียกฟังก์ชันนี้ใน 2 จุดครับ:

จุดที่ A: ในฟังก์ชัน createTableRow หาจุดที่จัดการเรื่องสีวันที่ (ใกล้ๆ กับ applyColorToDateCell) แล้วเพิ่มบรรทัดนี้ลงไป:

JavaScript

// ใส่ไว้ในฟังก์ชัน createTableRow หลังสร้าง tr เสร็จ
applyDeadlineHighlight(tr, d.date); 

จุดที่ B: ใน Event Listener ของช่องวันที่ (Date Input) เพื่อให้เวลาเปลี่ยนวันที่ปุ๊บ สีแถวเปลี่ยนปั๊บ:

JavaScript

// ในส่วน input.addEventListener('change'...) ของช่องวันที่
input.addEventListener('change', (e) => {
    if (cell.type === 'date') {
        applyDeadlineHighlight(tr, e.target.value);
    }
    // ... โค้ดเซฟเดิมของคุณ ...
});

จุดที่ C: ในฟังก์ชัน renderDataToTable เพื่อให้ตอนรีเฟรชหรือสลับปี ระบบคำนวณสีให้ทุกแถว:

JavaScript

filteredData.forEach(d => {
    const tr = createTableRow(d, dataList.indexOf(d));
    applyDeadlineHighlight(tr, d.date); // ⭐️ เพิ่มบรรทัดนี้
    // ...
});

การทำงานของระบบนี้:

1. ถ้าเหลือ 0-7 วัน: แถวจะกลายเป็นสีแดงจางและกระพริบเป็นสีแดงเข้มสลับไปมา (สะดุดตามาก)
2. ถ้าเหลือ 8-15 วัน: แถวจะเป็นสีแดงอ่อนนิ่งๆ เพื่อให้เตรียมตัว
3. ถ้าจ่ายแล้ว (Paid): หากคุณอยากให้จ่ายแล้วเลิกเตือน ให้แก้โค้ดในข้อ 2 เพิ่มเงื่อนไข if (d.paid) return; ได้ครับ

ระบบนี้จะช่วยให้คุณเห็นทันทีว่างานไหน “ด่วนที่สุด” ทันทีที่เปิดหน้าจอขึ้นมา